ptg 470 Chapter 19 If you want to include text within a slice for use on the Web, you can enter plain or formatted text with standard HTML tags directly on a slice with the type No Image. The text doesn't show up in Photoshop; you need to use a web browser to see it. Don't enter too much text as it might affect the exported layout. You can add text using the Slice Select tool on the toolbox, or in the Save For Web & Devices dialog box. If you want to create a hyperlink out of a slice for use on the Web, you can add an URL to a slice with the type Image. Adding HTML Text or an URL Link to a Slice Add HTML Text to a Slice Open a document with the slice. Open the Slice dialog box to add text using one of the following: ◆ Toolbox. Select the Slice Select tool on the toolbox, and then double-click the slice to which you want to add text. ◆ Save For Web & Devices dialog box. Click the File menu, click Save For Web & Devices, and then double-click the slice to which you want to add text. Click the Slice Type list arrow, and then click No Image. Enter the text you want. Click Background Color or the Slice Background Type list arrow, and then select a color: None, Matte, White, Black, or Other. ◆ Eyedropper. Only in the Save For Web & Devices dialog box. For Save For Web & Devices, select the Text is HTML check box to include HTML formatted tags. For Save For Web & Devices, select the horizontal and vertical cell alignment options you want. ◆ To line up t ex t in c el ls in t he same row, set a common baseline for all cells in the row. Click OK. 8 7 6 5 4 3 2 1 1 2 3 4 8 5 Double-click the slice to open the Slice dialog box. From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 471 Add an URL Link to a Slice Open a document. Select the Slice Select tool on the toolbox. Double-click the slice to which you want to add an URL link. Click the Slice Type list arrow, and then click Image. Enter an URL address or select a previously created one from the list. Be sure to use the complete URL address, such as http://www.perspection.com . If you want to enter a target frame: ◆ _blank. Displays the linked file in a new window. ◆ _self. Displays the linked file in the same frame as the original file. ◆ _parent. Displays the linked file in its own original parent frameset. ◆ _top. Replaces the entire browser window with the linked file, removing all current frames. Click OK. 7 6 5 4 3 2 1 4 5 7 6 Selecting a Slice Content Type The slice type determines how the slice appears in a web browser after you save it for the Web from Photoshop. There are two content types: Image and No Image. Image contains image data, while No Image creates empty table cells where you can put text or a solid color. To change the slice content type, double-click the slice with the Slice Select tool, click the Type list arrow, and then select the type you want. For Your Information From the Library of Wow! eBook ptg 472 Chapter 19 When you work with images in Photoshop, you can define variables to drive the graphics in your web document. Data-driven graphics make it possible to create multiple versions of an image quickly and precisely. For example, you need to produce several web banners using the same template. Instead of creating each banner, one at a time, you can use data-driven graphics to generate web banners using variables and data sets. Any image can be converted into a template for data-driven graphics by defining variables for layers in the image. A data set is a collection of variables and associated data. You can switch between data sets to upload different data into your template. When you com- bine a Defined layer with a data set, you can use the information to swap images based on input variables. Defining and Editing Web Data Variables Define a Data-Driven Graphic Open a document. Select the layer in which you want to define variables. Click the Image menu, point to Variables, and then click Define. Select from the available options: ◆ Visibility. Select to show or hide the content of the layer. ◆ Pixel Replacement. Select to replace the pixels in the layer with pixels from another image file. ◆ Text Replacement. Select to replace a string of text in a type layer (available when a text layer is selected). ◆ Name. Enter names for the variables. Variable names must begin with a letter, underscore, or colon. To define variab le s fo r an additional layer, choose a layer from the Layer list arrow. Prepare a .txt document from your word editing program with names of your variables and a list of the variable text and names/locations of variable images. Click OK. 7 6 5 4 3 2 1 1 7 2 4 5 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 473 Create a Data Set Open a document. Select the layer in which you want to define variables (fruitpicture, in this example). Click the Image menu, point to Variables, and then click Data Sets. Click Import to choose the .txt file you just made or choose a predefined data set from the list arrow. Select a variable from the available listed objects. Edit the following variable data (each available when selected as the definition for the file): ◆ Visibility. Select Visible or Invisible to show or hide the layer's content. ◆ Value. Click Select File, and then select a replacement image file or choose Do Not Replace if you do not want the original pixels replaced. ◆ Text Replacement. Enter a text string in the Value box. Repeat Steps 5 and 6 for each variable in the template. Image visibility, the text in a type layer, or exchanging one image for another, can now be controlled through changing variables. Click OK. Click the Image menu, point to Apply Data Set, and you will be provided with a dialog box from which you can choose the data you want to replace the existing data. 9 8 7 6 5 4 3 2 1 5 8 2 6 4 9 From the Library of Wow! eBook ptg 474 Chapter 19 Photoshop lets you export a document with animation as a QuickTime movie or an image sequence. The video formats include: 3G, FLC (also known as FLI), iPod (on the 320 x 240 screen), QuickTime movie, AVI (for Windows), DV Stream, Image Sequence, or MPEG-4 (Extended). If you have FLV QuickTime encoder installed on your computer, you can export to the Adobe Flash Video format (FLV). You can also export an animation to separate image files. The file formats include: BMP, Cineon, Dicom, JPEG, OpenEXR, Photoshop, PNG, Targa, and TIFF. Exporting Directly to Video Export Directly to Video Open a document. If the document is an animation, the frames will be visible in the Animation panel. Click the File menu, point to Export, and then click Render Video. Type a name for the video or use the one provided. Click Select Folder, select the folder where you want to store the file, and then click OK. Click the QuickTime Export option. Click the QuickTime Export list arrow, and then click the video format you want. To select option s re la ted t o th e format you selected, click Settings, make your selections, and then click OK; options vary depending on the format. Select the option with the range of frames you want to include. If available, select the alpha channel option and specify the frames per second (fps) you want. Click Render. 10 9 8 7 6 5 4 3 2 1 10 3 4 6 7 9 8 5 Settings dialog box From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 475 Export Directly to an Image Sequence Open a document. If the document is an animation, the frames will be visible in the Animation panel. Click the File menu, point to Export, and then click Render Video. Type a name for the video or use the one provided. Click Select Folder, select the folder where you want to store the file, and then click OK. Click the Image Sequence option. Click the Image Sequence list arrow, and then click the video format you want. Specify the start number and number of digits you want in the file name, and then select the size you want. To select option s re la ted t o th e format you selected, click Settings, make your selections, and then click OK; options vary depending on the format. Select the option with the range of frames you want to include. If you want, specify the frames per second (fps) you want. Click Render. 11 10 9 8 7 6 5 4 3 2 1 6 3 4 11 8 10 9 7 5 Settings dialog box From the Library of Wow! eBook ptg 476 Chapter 19 Exporting an image to Zoomify allows you to display high-resolution images on the Web that users can zoom into and pan around in order to view more detail. When you export to Zoomify, Photoshop exports JPEG files and HTML that you can put on your web server. An image exported to Zoomify downloads in the same time as a regular image, yet you get the added magnification benefits. During the export process, you can select the background and navigation for the image using a template, specify the output location, specify image quality, set the base image width and height for web browsers, and open the image in your browser. Exporting an Image to Zoomify Export an Image to Zoomify Open a document. Click the File menu, point to Export, and then click Zoomify. Click the Template list arrow, and then select the background and Zoomify Viewer template you want. Click Folder, select the output location you want, and then click OK. Specify the Image Tile Options you want; drag the slider to adjust the quality settings. Specify the desired base image width and height in pixels. To open the im age i n yo ur web browser, select the Open In Web Browser check box. Click OK. 8 7 6 5 4 3 2 1 4 3 8 5 6 7 Image with Zoomify From the Library of Wow! eBook . replace the existing data. 9 8 7 6 5 4 3 2 1 5 8 2 6 4 9 From the Library of Wow! eBook ptg 474 Chapter 19 Photoshop lets you export a document with animation as a QuickTime movie or an image sequence slice type determines how the slice appears in a web browser after you save it for the Web from Photoshop. There are two content types: Image and No Image. Image contains image data, while No. Your Information From the Library of Wow! eBook ptg 472 Chapter 19 When you work with images in Photoshop, you can define variables to drive the graphics in your web document. Data-driven graphics