When Smart Objects were first added to Photoshop, they seemed like an amazingly new feature. However, as many web designers already knew, Smart Objects had been part of GoLive's bundle of tricks for quite some time. While Photoshop is limited to just two types of Smart Objects, one from Illustrator and the other from Photoshop, GoLive offers several different types of Smart Objects. Working with GoLive Smart ObjectsThere are two steps to creating a Smart Object in GoLive: creating the container and then adding the content. To create the Smart Object container, you choose one of four Smart sets in the Objects toolbox:
You drag the Smart Object from the toolbox onto the page. A file icon within the object indicates the type of Smart Object (see Figures 9-7 and 9-8). Figure 9-7. Choose the Smart set from the GoLive Tools palette to create Smart Objects.
Figure 9-8. The four types of GoLive Smart Objects.
Adding Content to Smart ObjectsOnce you have the empty GoLive Smart Object container on the page, you can then choose the source image such as a Photoshop or Illustrator file and create the actual graphic that will be inserted in the web page. In the Smart Image Inspector, click the Source button. This opens the dialog box where you can navigate and choose the source file for the Smart Object container. By choosing a source file, you direct GoLive to point to a specific file to use as the source of the image in the web layout. As every good web designer knows, however, there are no native Photoshop or Illustrator files in web pages. So the source file that you have chosen must be converted into a proper web graphic format such as a GIF or JPEG. GoLive has you covered: After you choose the source file for the Smart Object container, the Save For Web Powered By ImageReady dialog box appears. The Save For Web dialog box lets you choose the format and optimization settings for the file (see Figure 9-9). You can choose GIF, JPEG, PNG 8, PNG 24, or WBMP as the file format. Figure 9-9. Use the Save For Web Powered By ImageReady dialog box to create a web graphic from a GoLive Smart Object.Tip: Quickly Create a Smart Object You can also create a Smart Object by dragging a Smart Object-compatible file into GoLive's Layout Editor. Saving the optimized file creates the actual file that is added to the web layout. The Save For Web dialog box also lets you change the image dimensions, lower the number of colors, or add compression to decrease the file size. Clicking Save inserts the web graphic into the GoLive layout. However, just because you have created the web graphic doesn't mean you should discard the original source file. Unlike Photoshop's Smart Objects, which embed the original image within the Photoshop document, GoLive's Smart Objects keep a link between the original source file and the optimized web graphic. Changing the original source file automatically reoptimizes and updates the optimized web graphic. Tip: Break the Link to the Source File If you no longer want the web graphic to be governed by the original source file, delete the reference to the source file in the Inspector palette. Then the web graphic no longer will be updated automatically. Using Photoshop Variables in GoLive GraphicsHave you ever gotten a junk mail letter that has your name printed at strategic points inside the text? Something like: "Dear Mr. or Mrs. S. COHEN, This is an exclusive offer, just for the S. COHEN family." Your name is contained inside a variable field, and as each new letter is printed, new names are inserted into the variable field. Photoshop has three types of variables you can apply to graphics. Text variables allow replacing the text on a type layer. Visibility variables allow showing or hiding a layer. Replacement variables allow replacing the image in one layer with the image from another file. When you place a Photoshop file into a GoLive Smart Object, GoLive lets you use the text and visibility variables in the web graphic. Click the Variables button in the Smart Image Inspector palette to open the Variable Settings dialog box. Select the variable and adjust it as necessary. For text variables, you can enter a new text string. For visibility variables, you can set the layer to visible or invisible (see Figure 9-10). Figure 9-10. Create two different graphics of a placed Photoshop file by changing text and layer visibility in the GoLive Variable Settings dialog box.Sadly, although Illustrator has a Variables palette, those variables do not work in GoLive CS2. They worked in the previous version of GoLive, but that feature was changed in GoLive CS2. You can change the information in the variables at any time in GoLive. Each time you make a change, GoLive goes back to the original Photoshop file and recreates the web graphic at the settings chosen in the Save For Web dialog box. Text and visibility variables are very useful for creating web ad banners and other graphics that have a similar design but different variable information. You need to create only one original graphic and then make as many variations as needed. |