19. Designing for the Web and Devices

If you need to manipulate a photographic image, there’s not a better program on the market than Adobe Photoshop that will do the job for you. In previous versions of Photoshop, you needed to use ImageReady to prepare images for the Internet. Now you can do it all right from Photoshop CS3.

Photoshop uses various document formats such as JPEG, GIF, PNG, and WBMP, to save images for the Web. For example, the JPEG format is used primarily for compressing photographic images, while the GIF format is used for compressing clipart and text. Each format is designed to serve a purpose, and knowing when to use a specific format will help you design fast-loading, dynamic Web documents.

However, saving files in a specific file format is not the only way Photoshop helps you create Web-friendly images, you can also slice images. When you slice an image, you’re cutting the image into several pieces. Since the Internet handles smaller packets of information more efficiently than one large piece, slicing an image makes the whole graphic load faster, and Photoshop helps you slice images with ease.

Saving for the Web

PS 13.2

Photoshop’s Save For Web & Devices command is a dream come true for prepping images for the Internet, or even for saving images in a quick-loading format for PowerPoint slide presentations, and you don’t even have to leave Photoshop. The Save For Web & Devices command lets you open any Photoshop document, and convert it into a Web friendly format using the GIF, JPEG, PNG, or WBMP formats. You can even try different optimization settings or compare different optimizations using the 2-Up or 4-Up pane. In addition, the dialog area below each image provides optimization information on the size and download time of the file.

Save for the Web

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Important

If you’re viewing the document using 2-Up or 4-Up the first image is the original. You can’t change the original, only one of the sample images.

Click the Preset list arrow, and then select a new format from the available options.

Click the Format list arrow, and then select from the following options:

GIF. The Graphic Interchange File Format is useful for clipart, text, or images that contain a large amount of solid color. GIF uses lossless compression.
JPEG. The Joint Photographers Expert Group format is useful for images that contain a lot of soft colors, like photographs. JPEG uses lossy compression.
PNG-8. The Portable Network Graphic 8-bit functions in a manner similar to the GIF format. PNG uses lossless compression.
PNG-24. The Portable Network Graphic 24-bit functions in a manner similar to the JPEG format. PNG-24 uses lossless compression.
WBMP. The Web Bitmap format converts an image into black and white dots, for use on some output devices, like cell phones and PDA’s.

Select from the various options that change based on your File Format selection.

Click the Color Table palette (available for the GIF, and PNG-8 formats), and add, subtract, or edit colors in the selected document.

To change the selected image’s width and height, select the Image Size palette, and then make adjustments.

To move the selected image directly into the Device Central application, click the Device Central button.

Click Save.

Enter a name, and then select a location to save the image file.

Click OK.

Photoshop saves the modified file, and returns you to the original image.

For Your Information: Working with Matte and Transparency

The Matte option, when available, specifies the background color used to fill anti-aliased edges that lie adjacent to transparent areas of the image. When the Transparency option is selected, the matte is applied to edge areas to help blend the edges with a Web background of the same color. When the Transparency option is not selected, the matte is applied to transparent areas. Choosing the None option for the matte creates hard-edged transparency if Transparency is selected; otherwise, all transparent areas are filled with 100% white. The image must have transparency for the Matte options to be available.

Working with Save For Web Options

PS 13.1

When you work with Save For Web & Devices, the intention is to prepare the image in one of four Web formats: GIF, JPEG, PNG, and WBMP. Save For Web & Devices comes with options, which will help you through the process. For example, if you choose the JPEG format, you can select the amount of compression applied to the image or if you select the GIF format, you can choose how many colors are preserved with the image. The PNG format lets you save images in an 8-bit (256 colors) or a 24-bit (millions of color) format. The options available with Save For Web & Devices give you the control you need to produce small image files with quality.

Work with Save For Web Options

Open a document.

Click the File menu, and then click Save For Web & Devices.

Select from the various Save For Web & Devices tools:

Hand Tool. Drag the image to change the view of a document.
Slice Selection Tool. Select a predefined image slice.
Zoom Tool. Click on the image to expand the view size.
Eyedropper Tool. Drag the image to perform a live sampling of the image.

Click the Thumbnail Options button, and then select color profile and bandwidth options for the selected document.

Click the Zoom list arrow, and then select a view size for the sample images.

Click the Toggle Slice Visibility button to show or hide the image slices.

Click the Preview In Default Browser list arrow, and then select the image.

Click Save.

Optimizing an Image to File Size

PS 13.1

The Save For Web & Devices dialog box has many options to help you create the exact image you need—including helping you compress an image down to a specific file size. For example, you’ve just created an image you want to display on the Web, but the maximum file size you can use is 35k. You could open the image, and experiment with Save For Web’s compression options, or you could use the Optimize To File Size option.

Optimize an Image to File Size

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the 2-Up palette, and then select the sample image.

Click the Format Options button, and then click Optimize To File Size.

Enter a file size in the Desired File Size data box.

Click the Current Settings option or the Auto Select GIF/JPEG option to let Photoshop choose between the JPEG or GIF format.

Click the following Use options:

Current Slice
Each Slice
Total Of All Slices

Click OK.

Photoshop compresses the selected sample.

Click Save to save the compressed image.

Working with Web File Formats

PS 13.1

If you design Web documents, you know that the size of your images is very important. Photoshop gives you the option of compressing images in one of four Internet formats: GIF, JPG, PNG, and WBMP. The GIF format compresses images that contain solid colors with sharp, definable edges, such as clipart, and text. The JPG format reduces the size of image files that contain a lot of soft transitional colors, such as photographs. The PNG format is a hybrid format designed to take the place of the GIF and JPG format. Finally, the WBMP format was created to display images on low-resolution devices like cell phones, and PDA’s by converting the image into dots of black and white. Whatever format you need to create stunning Web images, Photoshop will help you get there.

Work with Web File Formats

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Select one of the samples.

Click the Format list arrow, and then select a format from the available options.

Select the options you want to change the image’s compression, and color options.

Click Save.

The Save Optimized As dialog box appears.

Enter a file name in the Save As box.

Click the Format list arrow, and then select to save the image in HTML And Images, Images Only, or HTML Only.

Click the Where (Mac) or Save In (Win) list arrow, and then select the location to save the file.

Click the Settings and Slices list arrows to further define the output files (if you save a single image without slices, you can leave these settings at their default values).

Click Save.

For Your Information: Creating an HTML File for an Image

When you save an optimized file using the Save Optimized As command, you can choose to generate an HTML file for the image. This file contains all the necessary information to display your image in a Web browser.

Optimizing a JPEG Document

PS 13.1

Photoshop comes complete with everything you will need to properly compress any JPEG Document. The Internet is typically a slow device, and your visitors typically do not have much patience. When you compress a JPEG image, you’re essentially removing information from the image to reduce its file size. The unfortunate results of that reduction is loss of image quality. Internet graphics are not always the best for quality; however, reducing file size is a necessary evil, to keep visitors from clicking off your site, and moving to another. To keep the visitors happy, your JPEG images must load fast, and Photoshop is just the application to help you accomplish that goal.

Optimize a JPEG Document

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Click the Format list arrow, and then click JPEG.

Select from the following Quality options:

Quality. Click the list arrow, and then select a preset JPEG quality from Low (poor quality) to Maximum (best quality).
Amount. Enter a JPEG quality compression value (0 to 100). The lower the value, the more information (color) is sacrificed for image size.
Blur. JPEG images compress better when the image has soft edges. Apply the Blur option to increase the softness of the image (at a sacrifice to image quality).

Click the Matte list arrow, and then select from the available options.

JPEG images do not support transparency. If you image contains transparent areas, use the Matte option to fill them in using a specific color.

Select the Optimized check box to further compress the image. This is not supported by all browsers.

Select from the following options:

Progressive. Select the check box to load a JPEG in three progressive scans. Not supported by all browsers.
ICC Profile. Select the check box to embed an ICC color profile into the JPEG image. This increases file size but helps maintain color consistency between monitors, and operating systems.

Click Save to save the current image using the Save Optimized As dialog box.

Optimizing a GIF Document

PS 13.1

The GIF file format is used primarily for images that contain solid colors with sharp edges, such as clipart, text, line art, and logos. Since the Internet is a slow device, using the GIF format on images significantly reduces their file size, and will create fast-loading graphics. The GIF format utilizes an 8-bit pixel, and creates a document with a maximum of 256 colors (the less colors the smaller the file size). The GIF format has been around long enough for it to be considered an Internet “native” format. A native format is one that does not require a specific plug-in for the browser to display the file.

Optimize a GIF Document

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Click the Format list arrow, and then click GIF.

Select from the following options:

Color Options:

Reduction. Click to select a visual reduction method for the image colors.
Colors. Enter or select a value from 2 to 256 maximum colors.
Web Snap. Enter or select a value from 0 to 100 to instruct the GIF compression utility how many of the image colors should be Web safe.

Dither Options:

Method. Click the list arrow, and then select from the available dithering schemes. Dithering is how the GIF format mixes the available image colors.
Amount. Enter or select a value from 0 to 100 to instruct the GIF compression utility how many of the image colors should dither.

Transparency Options:

Transparency. Check to make the transparent areas of a GIF image transparent.
Matte. Click to fill the transparent areas of a GIF image.
Dither. Click to select a dithering scheme, and enter an amount for the mixing of the matte color.

Other Options:

Interlaced. Check to have the GIF image load in three scans.
Lossy. Enter or select a value from 0 to 100 to instruct the GIF compression utility how much image loss is allowed.

Click Save to save the current image using the Save Optimized As dialog box.

Optimizing a PNG-8 Document

PS 13.1

The PNG-8 file format is used primarily for images that contain solid colors with sharp edges—clipart, text, line art, and logos—and was designed as an alternative to the GIF file format. Since the PNG-8 format generates an image with a maximum of 256 colors, it significantly reduces an images file size. While similar to the GIF file format, the PNG-8 format is not completely supported by older browsers. However, it is considered a native format to the creation of Flash animation movies.

Optimize a PNG-8 Document

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Click the Format list arrow, and then click PNG-8.

Select from the following options:

Color Options:

Reduction. Click to select a visual reduction method for the image colors.
Colors. Enter or select a value from 2 to 256 maximum colors.
Web Snap. Enter or select a value from 0 to 100 to instruct the PNG-8 compression utility how many of the image colors should be Web safe.

Dither Options:

Method. Click the list arrow, and then select from the available dithering schemes. Dithering is how the PNG-8 format mixes the available image colors.
Amount. Enter or select a value from 0 to 100 to instruct the PNG-8 compression utility how many of the image colors should be dithered.

Transparency Options:

Transparency. Check to make the transparent areas of a PNG-8 image transparent.
Matte. Click to fill the transparent areas of a PNG-8 image.
Dither. Click to select a dithering scheme, and enter an amount for the mixing of the matte color.

Other Options:

Interlaced. Check to have the PNG image load in three scans.

Click Save to save the current image using the Save Optimized As dialog box.

Optimizing a PNG-24 Document

PS 13.1

The PNG-24 file format is used primarily for images that contain lots of colors with soft transitional edges, such as photographs, and was designed as an alternative to the JPEG file format. The PNG-24 format generates an image with millions of colors, and still manages to reduce the size of a file. While similar to the JPEG file format, the PNG-24 uses lossless compression, and does not compress files as small as the JPEG format. So for the time being, most designers are still using the JPEG format for creating fast-loading Web graphics.

Optimize a PNG-24 Document

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Click the Format list arrow, and then click PNG-24.

Select from the following options:

Transparency Options:

Transparency. Check to make the transparent areas of a PNG-24 image transparent.
Matte. Click to fill the transparent areas of a PNG-24 image.

Other Options:

Interlaced. Check to have the PNG-24 image load in three scans.

Click Save to save the current image using the Save Optimized As dialog box.

Optimizing a WBMP Document

PS 13.1

The WBMP file format creates images from 2-color pixels, and is used for images that are displayed on small hand-held devices such as PDA’s and cell phones. The WBMP format generates an image with 2 colors (black and white) and significantly reduces the images file size. The WBMP format is new to the world of wireless devices, and while it creates small images, the black and white pixels create very low-quality images.

Optimize a WBMP Document

Open a document.

Click the File menu, and then click Save For Web & Devices.

Click the Original, Optimized, 2-Up, or 4-Up palettes to view the document using different layouts.

Click one of the sample images to change its default format.

Click the Format list arrow, and then click WBMP.

Select from the following options:

Method. Click the list arrow, and then select from the available dithering schemes. Dithering is how the WBMP format mixes the available image colors.
Amount. Enter or select a value from 0 to 100 to instruct the WBMP compression utility how many of the image colors should be dithered.

Click Save to save the current image using the Save Optimized As dialog box.

Creating an Animated GIF

An animation is a sequence of images, or frames, that vary slightly to create the illusion of movement over time. One of the most Internet compatible ways is the animated GIF. The original designation, GIF89a, gives you an idea of how long this format has been around. The GIF file format (Graphics Interchange Format) is used primarily for clipart, text, and line art, or for images that contain areas of solid color. Once the image is created, you can open and use it in any application that supports the GIF file format.

Create an Animated GIF from Scratch

Open Photoshop.

Click the File menu, and then click New.

Enter a name in the Name box.

Click the Preset list arrow, and then select from the available presets, or enter in a customized Width and Height, and Resolution.

Click the Color Mode list arrow, and then select a color mode for the image.

Click the Bit Size list arrow, and then choose a bit depth for the image (8-bit recommended).

Click Background Contents, and then click White, Background Color, or Transparent (animated GIF files look best using Transparency).

Click OK.

Create the first image for the animated GIF.

Press Ctrl+J (Win) or Alt+J (Mac) to create a copy of your first animation in a separate layer.

Modify the second image (animations are essentially the same image, modified slightly between each animation frame or, in this case each layer).

Repeat steps 10 and 11 until you have enough cells for the animation.

Click the Window menu, and then click Animation.

Click the Animation Options button on the Animation palette, and then click Make Frames From Layers.

Click the Play button to view your animation in the document window.

Click the Save button, and then click Save For Web & Devices.

Fine-tune the image using the available options.

Click Save to save the current image using the Save Optimized As dialog box.

Working with Animations

PS 13.5

After you create an animation in the Animation palette, you can use controls at the bottom of the Animation palette to work with the animation. You can use controls to select frames, play back the animation, and specify how many times you want to play it back. If you need to quickly copy or remove frames, you can use the Duplicate Selected Frames or Delete Selected Frames buttons. Animation is all about creating motion, which can be difficult frame-by-frame. In Photoshop, it’s not necessary to create every frame. You can use the Tweens Animation Frames button to help you create frames between one frame and another. Tweening allows you to quickly animate objects. The animation appears by default in the Frames view, however, you can also display it in Timeline view (Extended) (New!). In Timeline view, you can see how each layer plays. In this view, you can also create onion skinning (New!), which allows you to view multiple frames simultaneously.

Work with an Animation

Open a document with an animation.

Click the Window menu, and then click Animation.

Select any of the following options to play and select frames in the animation:

First Frame. Selects the first frame.
Previous Frame. Selects the previous frame.
Play. Plays the animation.
Next Frame. Selects the next frame.

Click the Loop Count list arrow, and then select the option you want.

Once. Plays the animation one time.
Forever. Plays the animation continuous over and over again in a loop.
Other. Opens the Loop Count dialog box where you can select a specific number of times to loop the animation.

Select any of the following options to work with frames:

Tween Frames. Creates motion tween between frames.
Duplicate Frames. Duplicates the selected frames.
Delete Frames. Deletes the selected frames.

To switch to Timeline view (Extended), click the Convert to Timeline Animation button (New!).

This is a toggle button to switch back and forth between Timeline and Frame animation view.

Select any of the following options to play and select frames in the animation:

Zoom In and Zoom Out. Changes the Timeline view to see more or less.
Onion Skinning. Displays multiple frames simultaneously.

To display other commands and options, click the Animation Options button.

To switch to Frame view, click the Convert to Frame Animation button.

Slicing Images the Easy Way

PS 13.4

Photoshop allows you to slice a document into smaller image pieces. You might want to slice an image to create interactive links, however, the best reason is speed. You gain speed by compressing individual slices to reduce the image size. There are two types of slices: user and layer-based. You can draw directly on an image to create a user slice using the Slice tool, or create a layer and then change it into a layer-based slice. When you create a slice, Photoshop also creates auto slices, which fill in the space in the image that is not defined by the slice. User and layer-based slices appear with a solid line with blue symbols, while auto slices appear with a dotted line with gray symbols. The slices also appear numbered from left to right and top to bottom. A layer-based slice uses all the data in the layer to make up the slice. If you want to make changes to the slice, you need to edit the layer, which makes it a little more difficult to use than a user slice. When you edit or move the layer contents, the slice is automatically changed too.

Create a User Slice

Open a document.

Select the Slice tool on the toolbox.

Important

To make slicing a little easier, drag a few guides from the Ruler bar to help guide your slicing tool.

Click the Style Setting list arrow on the Options bar, and then select the style you want:

Normal. Specifies the slice size as you drag.
Fixed Aspect Ratio. Specifies a ratio for the slice height and width.
Fixed Size. Specifies the slice height and width in pixels.

Drag and release the slice tool in the document to create a rectangular or square slice.

To constrain the slice to a square, hold down Shift as you drag. To create a circle, hold down Alt (Win) or Option (Mac).

Continue to drag and release until you have the image correctly sliced.

Create a Layer-based Slice

Open a document.

Select the layer you want in the Layers palette.

Click the Layer menu, and then click New Layer Based Slice.

Did You Know?

You can convert an auto or layer-based slice to a user slice.Select the slice using the Slice Select tool, and then click Promote on the Options bar.

You can create slices from guides. Add guides to the images, select the Slice tool on the toolbox, click Slices From Guides in the Options bar. To create a new guide, click the View menu, click New Guide, click the Horizontal or Vertical option, specify the position in inches, and then click OK.

You can lock guides. To keep a guide from being moved, click the View menu, and then click Lock Guides.

You can remove guides. To remove guides, click the View menu, and then click Clear Guides.

You can show and hide guides. Click the View menu, point to Show, and then click Guides. The command toggles the guides on and off.

For Your Information: What’s the Subslice?

The subslice is a type of auto slice that is automatically created when you create overlapping slices. The subslices create a stack of slices one on top of the other, which you can rearrange. The subslice shows you how the image is divided when you save the optimized file. Subslices appear with a number and a slice symbol. When you make changes to a slice related to a subslice, the subslice automatically gets recreated.

Working with Slices

PS 13.4

After you create slices within an image, you can use options in the Photoshop window or the Save For Web & Devices dialog box to work with slices. You can select options to show or hide slices, select one or more slices, delete or duplicate slices, and view or change slice settings. If you have an image with more than one slice, you need to optimize the slices in the Save For Web & Devices dialog box. You can use the optimization option to link multiple slices slices together. For linked slices in the GIF and PNG-8 format, Photoshop shares a color palette and dither pattern to hide the seams between slices.

Work with Slices in the Photoshop Windows

Open a document with slices.

Use any of the following:

Show or Hide Slices. Click the View menu, point to Show, and then click Slices.
Show or Hide Auto Slices. Select the Slice Select tool, and then click Show Auto Slices or Hide Auto Slices in the Options bar.
Select Slices. Click the Slice Select tool, and then click the slice you want. Use Shift+click or drag to select multiple slices.
Delete Slices. Select the slices, and then press Delete.
Duplicate Slices. Select the slices, and then Alt (Win) or Option (Mac) drag the selection.
View Slice Options. Click the Slice Select tool, and then double-click the slice you want.

Work with Slices in the Save For Web & Devices Dialog Box

Open a document with slices.

Click the File menu, and then click Save For Web & Device.

Select the file type you want, select any options, and then make any adjustments you want.

Show or Hide Slices. Click the Toggle Slices Visibility button.
Show or Hide Auto Slices. Click the Preview menu, and then click Hide Auto Slices.
Select Slices. Click the Slice Select tool, and then click the slice you want. Use Shift+click or drag to select multiple slices.
View Slice Options. Click the Slice Select tool, and then double-click the slice you want.
Link Slices. Select the slices you want to link, click the Optimize menu double-arrow (Win) or arrow (Mac) button, and then click Link Slices.

A link icon appears on the slices.

Unlink Slices. Select the slice, click the Optimize menu double-arrow (Win) or arrow (Mac) button, and then click Unlink Slice or Unlink All Slices.

When you’re done, click Save to save the image or click Done to save your settings.

Timesaver

Hold down Ctrl (Win) or Command (Mac) to switch between the Slice tool and the Slice Select tool.

Arranging Slices

PS 13.4

Moving and resizing objects in Photoshop is a common task. You can move or resize slices in the same basic way you do other objects. In addition to moving slices, you can also align them along an edge or to the middle, and evenly distribute horizontally or vertically. When you align and distribute slices, you can reduce the amount of unnecessary auto slices, which creates smaller files and faster loads. When you have slices overlapping each other, you can change the stacking to move them up or down in the order. For example, if you have one slice behind another, you can bring the slice forward one level at a time or to the top (front).

Move or Resize Slices

Open a document with slices.

Select the slices you want to move or resize.

To move a slice selection, drag the slice to a new location. You can press Shift to constrain movement up, down, or diagonally.

To resize a slice, drag the side or corner handle of the slice. When you select adjacent slices with common edges, the slices resize together.

You can also click Options in the Options bar to set exact slice position or size.

Did You Know?

You can copy and paste a slice. You can copy and paste a slice like any other object using the Copy and Paste commands. If you copy a slice from Dreamweaver, it retains information from original file in Photoshop.

You can snap slices to a guide, user slice or other object. Click the View menu, point to Snap To, and then select the elements you want. Click the View menu, and then click Snap to display a check mark. When you move a slice toward an element, the slice snaps to the elements within 4 pixels.

Align, Distribute, or Stack Slices

Open a document with slices.

Select the slices you want to arrange.

To align slices, select the alignment button on the Options bar you want: Top, Vertical Centers, Bottom, Left, Horizontal Centers, or Right.

To evenly distribute slices, select the distribute button on the Options bar you want: Top, Vertical Centers, Bottom, Left, Horizontal Centers, or Right.

To change the slice stacking order, select the stack button on the Options bar you want: Bring To Front, Bring Forward, Send Backward, or Send To Back.

Did You Know?

You can combine user and auto slices. Right-click the selected slices, and then click Combine Slices.

You can divide user and auto slices. Select the slice using the Slice Select tool, and then click Divide on the Options bar. In the Divide Slice dialog box, select options to divide the slice horizontally or vertically, down or up in equal parts, or enter an exact size in pixels, and then click OK.

Saving a Sliced Image for the Web

PS 13.4

After you create slices within an image, you can export and optimize each slice using the Save For Web & Devices command, which saves each slice as a separate file and creates the code to display them on a Web page. After you click Save in the Save For Web Devices dialog box, the Save Optimized As dialog box appears. You can use this dialog box to access the Output Settings dialog box and set output options to control the format of HTML files, the names of files and slices, and the way Photoshop saves background images.

Save a Slice for the Web

Open a document with the slice you want to save.

Click the File menu, and then click Save For Web & Device.

Select the file type you want, select any options, and then make any adjustments you want.

Click Save.

Click the Save as Type(Win) or Format (Mac) list arrow, and then select whether to save the images in HTML And Images, Images Only, or HTML Only.

Click the Settings list arrow, and then select the output settings you want. Default Settings is recommended for normal use.

See the next page for details about selecting output settings.

Click the Slices list arrow, and click All Slices, All User Slices, or Selected Slices.

Click Save.

Set Output Options for Slices

Open a document with the slice you want to save.

Click the File menu, and then click Save For Web & Device.

Click Save.

Click the Format list arrow, and then select the format you want.

Click the Settings list arrow, and then click Other.

Click the Output Type list arrow, and then click Slices.

Select the following options:

Generate Table. Uses an HTML table to display slices.
Empty Cells. Specifies the way to convert empty slices to table cells.
TD W&H. Specifies whether to include width and height for table data.
Spacer Cells. Specifies when to add empty spacer cells.
Generate CSS. Creates a Cascading Style Sheet (CSS) to display the slices.
Referenced. Specifies how to reference slice positions using CSS.
Default Slice Naming. From the list menus, select the options to specify a slice naming scheme.

Click OK.

Click the Slices list arrow, and then select the slices option you want.

Click Save.

For Your Information: Saving Output Settings for Future Use

If you frequently use the same settings to save a file, you can save your output settings as a preset for future use. In the Output Settings dialog box, specify the settings you want to save for HTML, Slices, Background, or Saving Files, click Save, type a name, use the default folder location (the Optimized Output Settings folder), and then click Save. The Output Setting file is saved with the .iros file extension. By saving the Output Settings files in the Optimized Output Settings folder, you can quickly select the custom output setting file from the Save Optimized As dialog box. If you didn’t store the Output Settings file in the default folder, you can also use the Load button in the Output Settings dialog box to use it.

Adding HTML Text or URL Link to a Slice

PS 13.4

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 a URL to a slice with the type Image.

Add HTML Text to a Slice

Open a document with the slice.

Open the Slice dialog box to add text:

Toolbox. Select the Slice Select tool on the toolbox, and then double-click the slice you want to add HTML text.
Save For Web & Devices dialog box. Click the File menu, click Save For Web & Devices, and then double-click the slice you want to add HTML text.

Click the Slice Type list arrow, and then click No Image.

Enter the text you want.

Click the Background or Slice Background Type list arrow, and then select the background you want: None, Matte, White, Black, or Other.

Eyedropper. In the Save For Web & Devices dialog box.

For Save For Web & Devices, select the Text Is HTML check to include HTML formatted tags.

For Save For Web & Devices, select the horizontal and vertical cell alignment options you want.

To line up text in cells in the same row, set a common baselink for all cells in the row.

Click OK.

Add a URL Link to a Slice

Open a document.

Select the Slice Select tool on the toolbox.

Double-click the slice you want to add a URL link.

Click the Slice Type list arrow, and then click Image.

Enter a 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.

For Your Information: 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 of slices: 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 for a slice, double-click the slice with the Slice Select tool, click the Type list arrow, and then select the type you want.

Defining and Editing Web Data Variables

PS 13.3

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 fast and precise. 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 combine a Defined layer with a data set, you can use the information to swap images based on input 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 variables for an additional layer, choose a layer from the Layer list arrow.

Click OK.

Create a Data Set

Open a document.

Select the layer in which you want to define variables.

Click the Image menu, point to Variables, and then click Data Sets.

Select a pre-defined 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.
Pixel Replacement. Click Browse, and then select a replacement image file.
Text Replacement. Enter a text string in the Value box.

Repeat Steps 5 and 6 for each variable in the template.

The Image’s visibility, a type layer’s text, or swapping images, can now be controlled through changing variables.

Click OK.

Exporting Directly to Video

Photoshop lets you export a document with an animation to a QuickTime move 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.

Export Directly to Video

Open a document.

If the document is an animation, the frames will be visible in the Animation palette.

Click the File menu, point to Export, and then click Render to 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 options related to the 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.

Export Directly to an Image Sequence

Open a document.

If the document is an animation, the frames will be visible in the Animation palette.

Click the File menu, point to Export, and then click Render to 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 options related to the 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.

Exporting an Image to Zoomify

Exporting an image to Zoomify (New!) allows you to display high-resolution images on the Web that users can zoom and pan 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 zoom 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 height and width for Web browsers, and open the image in your Web browser.

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 base image width and height in pixels you want.

To open the image in your Web browser, select the Open In Web Browser check box.

Click OK.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 19. Designing for the Web and Devices

Create new playlist

Sign In

Sign Up