Adobe GoLive 6.0- P9 pps

243 ADOBE GOLIVE 6.0 Classroom in a Book For information on placing images that are already in a Web-safe format, see “Adding an image using the Point and Shoot button” on page 112. Using Smart Photoshop objects In this first section of the lesson, you’ll place two Smart Photoshop objects, resize one of them, and edit the color table in the other to achieve a special effect—all without leaving GoLive. Photoshop files can be in any of several supported formats: PSD, BMP, PICT (Mac OS only), PCX, Pixar, Amiga IFF, TIFF, and TARGA. Placing a Smart Photoshop object The first step involves placing a Smart Photoshop object on the page. The graphic is a Photoshop file that has been sliced in ImageReady. 1 Start GoLive. 2 Open the farm.site file in Lessons/Lesson06/06Start/farm folder/. Adding images to a Web page using Smart Objects Smart Objects offer a more efficient and powerful way to add images to Web pages than the traditional work- flow of simply adding a Web-safe image. When you add Photoshop (PSD, BMP, PICT for Mac OS only, PCX, Pixar, Amiga IFF, TIFF, and TARGA), Illustrator (including AI and SVG), or LiveMotion (LIV), PDF or EPS source files to your layout, GoLive automatically places a Smart Object placeholder in the Layout Editor and prompts you to optimize the image in a Web-safe format. GoLive then creates a copy of the source file in a Web-safe format and maintains a link to the source file. The Web-formatted copy is referred to as the target file. The target file (not the source file) is eventually uploaded to the Web server since it is the actual referenced Web asset. When the target file is generated, the source file remains unaltered and the optimization settings are saved in the target file. Because of this feature, you have the ability to generate multiple copies or variations of the source file throughout your Web site. Generated target files can be optimized as bitmap (for Photoshop, Illustrator, EPS, or PDF), SVG (for Illustrator) or SWF (for Illustrator or LiveMotion). If you decide later that you don’t want the Smart Object functionality for an image, GoLive can convert a Smart Object to a regular object. The Convert to Regular Image/Plug-in/Table command breaks the live con- nection between the target and source files. It also removes all GoLive specific HTML code from the object and removes the settings data from the target file. –From the Adobe GoLive 6.0 User Guide. LESSON 6 244 Using Smart Objects 3 Right-click (Windows) or Control-click (Mac OS) in the site window, and choose New > New Folder from the context menu. Name the folder images. You’ll be placing all your images here to keep the site window better organized. When working with images and media files, be sure to have all files in your site window, including your source files. You can store source files in the folder named “SmartObjects” that is in the Site Data folder by default. Just drag source files into the SmartObjects folder in the Extras tab of the site window. This makes managing image files much easier and prevents broken links (images and media not appearing on your Web page). If you don’t see the files in your site window after adding them to a folder (such as the folder named “images”), click the Refresh View button in the toolbar. For more information on managing your image files and folders, see Lesson 14, “Managing Web Sites.” Choosing New > New Folder from context menu 4 Double-click the start.html file in the site window to open the page. Notice that the page consists of a seven-cell table with three images already in the bottom three cells. 5 Choose Window > Objects to open the Objects palette, or click the Objects tab if the palette is collapsed. 6 Click the Smart button ( ) at the top of the Objects palette. 245 ADOBE GOLIVE 6.0 Classroom in a Book 7 From the Smart set of the Objects palette, drag a Smart Photoshop object to the top left cell of the table. Dragging Smart Photoshop object icon to table cell 8 Choose Window > Inspector to open the Inspector, or click the Inspector tab if the palette is collapsed. 9 In the Basic tab of the Smart Photoshop Image Inspector, for Source, click the Browse button ( ) and locate cow.psd in Lessons/Lesson06/06Start/farm folder/farm/startfiles/. Click Open. LESSON 6 246 Using Smart Objects The image opens in the Save for Web dialog box. This image has been sliced in ImageReady (there are four slices: the cow itself, and three sky slices to the left, right, and below the cow). The GoLive Save for Web feature takes care of image optimization, creating a Web-formatted copy that may even include HTML as in the case of a sliced PSD or SVG file. This Web-formatted copy, called a target file, is what appears on your live Web page. 10 In the Save for Web dialog box, click the Optimized tab. 11 Select the Slice Select tool ( ), and click the cow slice in the optimized image. 12 Select JPEG High from the Settings pop-up menu. Unnamed is the default value. 13 Click one of the three slices containing the sky, and shift-click the other two sky slices to add them to the selection. They are located on the left, the right, and just below the cow slice. 14 Select GIF 32 No Dither from the Settings pop-up menu. 15 Click Save. You are prompted to select a location for the cow.data folder that will be created automat- ically to store all the slices in a Web-safe format. 16 In the Specify Target File dialog box (Windows) or Save dialog box (Mac OS), open the images folder you created, and click Save. 247 ADOBE GOLIVE 6.0 Classroom in a Book GoLive converts the sliced Photoshop image into several Web-safe images, adding the appropriate extension to each image. In this example, there will be at least three GIF images and one JPEG image. All remain linked to the original Photoshop file. Note that when you import sliced images as you did here, you can set different conversion settings for each slice. 17 Select the image you just added to the page, and in the Alt Text box of the User Slice Inspector, enter Cow image. 18 Choose File > Save As, and save the start.html document as working.html in Lessons/Lesson06/06Start/farm folder/farm/. Resizing a Smart Photoshop object Now you’ll need to resize the image that you just placed. Resizing GIF or JPEG images themselves often provides less than satisfactory results. Smart Objects technology lets you return to the source image (in this case, a sliced Photoshop file), and create new, resized Web-safe images from the original file. The new file uses the settings that you already applied in the Save for Web dialog box when you first placed the Smart Photoshop object. The original Photoshop file remains unchanged. Note: Since SWF and SVG formats are vector-based and scalable, their Smart Objects— Smart LiveMotion or Smart Illustrator—are not reoptimized when they are resized. LESSON 6 248 Using Smart Objects 1 With the image selected, Shift-drag the bottom right handle until the cow image is approximately the same width as the milk wagon image in the cell below. To select the entire sliced image and not just a slice, move the pointer over the top right corner. When the cursor changes to this ( ), click to select the entire sliced image. If you click when the cursor looks like this ( ), you will select a slice rather than an entire image, and the Settings button will be disabled. If you resize a Smart Object image and wish to return it to its original size, click the Set to Original Size button ( ) in the Inspector. 2 Choose File > Save to save the document as working.html in Lessons/Lesson06/06Start/farm folder/farm/. You can also resize an image by going back to the Save for Web dialog box. We want the cow image to have exactly the same width as the wagon image in the cell below it. 3 Select the wagon image and note its width in the Image Inspector. (The width was 204 pixels in our document.) 4 Select the entire cow image (not just a slice), and click Settings in the Smart Photoshop Table Inspector. Selecting the cow image Clicking Settings 249 ADOBE GOLIVE 6.0 Classroom in a Book 5 In the Optimized panel of the Save for Web dialog box, click the Image Size tab. Make sure the Constrain Proportions option is checked, and enter 204 as the width. Note the image size (our image was 204 by 309 pixels). You’ll need these dimensions later when you resize the image that you’ll place in the top right cell. Click Apply. 6 Click Save in the Save for Web dialog box. Note: You can return to the Save for Web dialog box at any time and experiment with different settings. Editing a Smart Photoshop object Next you’ll add another Smart Photoshop object to the page, and edit the image’s color table to achieve a special effect—again, without ever leaving GoLive. 1 From the Smart set of the Objects palette, drag a Smart Photoshop object icon to the top right cell of the table. 2 In the Basic tab of the Smart Photoshop Image Inspector, for Source, click the Browse button ( ), and locate wheat.psd in Lessons/Lesson06/06Start/farm folder/farm/ startfiles/. Click Open. This time you’ll create a customized set of values in the Optimized panel of the Save for Web dialog box. 3 In the Optimized panel of the Save for Web dialog box, select GIF and No Dither from the two pop-up menus in the Settings section. 4 Change the value of Colors to 20. (The Settings pop-up menu is set to Unnamed because this is not a predefined optimization setting.) LESSON 6 250 Using Smart Objects 5 In the Color Table tab, double-click the darkest brown color. Double-clicking the darkest brown color 6 In the Color dialog box (Windows) or Color Picker (Mac OS), choose a color, and click OK. (We used red.) All of the areas of the image with the dark brown color are changed to the new color. Notice that the color table reminds you of the color change that you have made. Replacing colors using this technique is an easy way to achieve some eye-catching special effects. Color Picker dialog box (Mac OS) Color dialog box (Windows) 7 Click Save in the Save for Web dialog box. 8 In the Specify Target File dialog box (Windows) or the Save dialog box (Mac OS), select the images folder you created, and click Save to save the converted image (wheat.gif) in your images folder. Now you’ll make the wheat image the same size as the cow image (our cow image was 204 by 309 pixels). 251 ADOBE GOLIVE 6.0 Classroom in a Book 9 Select the wheat.gif Smart Photoshop object in the top right cell of your Web page. 10 In the Basic tab of the Smart Photoshop Image Inspector, enter the Height and Width dimensions that you noted for the cow image earlier. Press Enter or Return. The cow and wheat images should be the same size now. 11 In the Alt Text box, enter Wheat image. 12 Choose File > Save to save your work. Creating multiple versions of an image using variables Variables provide an important feature for building a Web site in GoLive. Variables let you create different versions from one Smart Object image by controlling variables established in LiveMotion, Illustrator, or Pho- toshop. You can specify all the settings within GoLive; you don’t have to open the source application to define the variables. For example, you might have an image with text containing the price of an item. If you want to quickly modify the price, there’s no need to create separate image files. It’s easy just to modify the text vari- able in the image. Depending on whether the image file is an Illustrator, LiveMotion, or Photoshop file, you can set variables that affect such elements as the text content, image visibility, or object color, style, and tex- ture. LESSON 6 252 Using Smart Objects GoLive uses the Smart Objects feature when working with variables. When you add a Smart Object to the page, GoLive detects whether the file has variables. If variables are present, GoLive opens the Variable Settings dialog box. The Variable Settings dialog box offers different settings depending on the type of Smart Object being added to the page (LiveMotion, Illustrator, or Photoshop). When you have set the variables, click OK. GoLive either uses Save for Web (for Illustrator or Photoshop files) or launches LiveMotion to generate the target file with the modified vari- able settings. As with all Smart Objects, only the target file is affected by the modified settings; the source file remains unal- tered. The power of variables is that you can create more than one target file, each with different images and text created by assigning different variable settings. And since you’re working with Smart Objects, if you update or modify the source file, all versions on pages open in a Layout Editor are automatically updated. Creating different versions of an image using variables A. Source file with variables B. User sets the variables and a target file is generated C. Different versions of an image can be created, each with different variable settings For information about assigning variables in a file, consult the Adobe LiveMotion 2.0 and Adobe Illustrator 10 User Guides. For information about adding a text layer in Photoshop, see the Adobe Photoshop 6.0 User Guide. Note: GoLive will only recognize variables in an Illustrator file that has been saved in SVG format. –From the Adobe GoLive 6.0 User Guide. C B A 15 30 2030 [...]... prompts leads you the rest of the way 3 Nothing! The great thing about Smart Objects is that your source files remain unchanged GoLive recreates only the Web-safe versions that appear on your Web page, leaving the source files untouched ADOBE GOLIVE 6.0 259 Classroom in a Book 4 The GoLive Save for Web dialog box appears whenever you place a Smart Photoshop object It appears for Smart Illustrator objects,... when you open the html page in the Layout Editor Note: You must have LiveMotion installed on your hard disk to complete this section of the lesson ADOBE GOLIVE 6.0 255 Classroom in a Book Configuring LiveMotion Prior to using Smart LiveMotion objects in GoLive, you must make the following export settings in LiveMotion itself 1 Start LiveMotion, if it is not already running 2 Choose Window > Export (You... Return to GoLive When you do, GoLive automatically updates the Smart Illustrator object on your page to reflect the changes you just made to the source file in Illustrator Using Smart LiveMotion objects You can add LiveMotion files to your Web pages in the SWF format This lets you add lively animated images to your site that remain linked to LiveMotion native source files Any changes you make in GoLive or... opening the bugbody Web site and creating a new HTML page containing a frame set 1 Start Adobe GoLive By default, an introductory screen appears prompting you to create a new page, create a new site, or open an existing file Note: You can set preferences for the introductory screen to not appear when you start GoLive If the introductory screen doesn’t appear, choose File > Open and go to step 3 2 Click... expand General preferences icon in the left pane, select User Interface, and make sure the Launch Other Applications to Edit Media Files option displayed in the right pane is enabled 7 Go back to GoLive When you do, GoLive automatically updates the Smart LiveMotion object on your page to reflect the changes that you just made to the source file in LiveMotion Note: Since Smart LiveMotion objects are always... file Anytime a layered Photoshop file is placed as a Smart Photoshop Image, GoLive automatically treats the topmost text layer as a variable You’ll see how easy it is to edit the variable from the Variable Settings dialog box You don’t even need to open Photoshop For information about adding a text layer in Photoshop, see the Adobe Photoshop 6.0 User Guide 1 Select the image in the bottom right of the... about adding a text layer in Photoshop, see the Adobe Photoshop 6.0 User Guide 1 Select the image in the bottom right of the Web page—the image of sky with the text that begins, “Join us in July ” ADOBE GOLIVE 6.0 257 Classroom in a Book 2 In the Smart Photoshop Image Inspector, make sure that the source file is join.psd, and click the Variables button 3 In the Variable Settings dialog box, click the... dairy barns, and orchards that encircle the Inn.” Note: If you select the Use option for a text variable and don't enter any text, the original text is deleted GoLive treats the empty text box as the new value of the text variable 4 Click OK GoLive automatically updates the text on your Web page 5 Choose File > Save to save your document, and then close the file 258 LESSON 6 Using Smart Objects Review... How do you open the source file for a Smart Object within GoLive? Review answers 1 An image placed on a Web page with the Image icon has to be in a Web-safe format such as GIF, JPEG, or PNG An image placed as a Smart Object can be in a variety of nonWeb-safe bitmapped and vector-based formats created by Photoshop, Illustrator, and LiveMotion GoLive converts the image to a Web-safe format and retains... a live link to the underlying source file If you change the source file in its native application, your Web page will be updated automatically the next time you open the page in GoLive If you resize the image on the Web page, GoLive goes back to the source file and creates new Web-safe images for optimal appearance of the resized files without changing the source image 2 To place a Smart Object of any . an Illustrator file that has been saved in SVG format. –From the Adobe GoLive 6. 0 User Guide. C B A 15 30 2030 253 ADOBE GOLIVE 6. 0 Classroom in a Book Using Smart Illustrator objects You can. format. 16 In the Specify Target File dialog box (Windows) or Save dialog box (Mac OS), open the images folder you created, and click Save. 247 ADOBE GOLIVE 6. 0 Classroom in a Book GoLive converts. file, consult the Adobe LiveMotion 2.0 and Adobe Illustrator 10 User Guides. For information about adding a text layer in Photoshop, see the Adobe Photoshop 6. 0 User Guide. Note: GoLive will only