Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Adobe Photoshop CS3 Revealed – Chapter 16

FOR THE WEB CREATING IMAGES

Chapter 16 2Creating Web Images

Learn about Web features

Optimize images for Web use

Create a button for a Web page

Create slices in an image

Create and play basic animation

Add tweening and frame delay

Use Camera Raw features

Chapter Lessons


Creating Images for the Web Using Photoshop for the Web

Create images for use on the Web

Create buttons and other features unique to Web pages


Use Photoshop to create the images– Add interactive functionality to images

that will be viewed on the Web– Divide images into smaller, more

manageable parts– Create efficient Web-ready files

Photoshop and the Web


Previewing in the BrowserPreview Web effects in a Web browser:– Click the Preview in Default Browser

button in the Save for Web & Devices dialog box


Understanding SlicesDivide a Web site image into smaller sections called slices

Use a slice to assign special features to specific areas within an image:– Links– Animations


AnimationsAn image sequence: – Simulates an object moving on a Web

page

Create an animation by:– Making slight changes to several

images– Adjusting the timing between the

appearance of each image


Converting an Image to HTML

HTML is the language used to create Web pages

Slices in an image become cells in an HTML table

Animations become files in object folders


Optimize Images for Web Use Understanding Optimization

Optimizing means:– Saving a file in a Web format that

balances the need for detail and accurate color against file size

Optimize an image to reduce file size and make an image Web-ready


Image ComparisonCompare an image in the following common Web formats:– JPEG (Joint Photograph Experts

Group)– GIF (Graphics Interchange Format)– PNG (Portable Network Graphics)– WMBP (Bitmap format used for mobile

devices)


Save For Web Dialog BoxOriginal View Tab– Displays the graphics without any

optimization

Optimized, 2-Up, 4-Up View Tabs:– Displays the graphic in the original

format and in other file formats such as GIF or JPEG


Optimizing Files

Original image format

Three optimized versions of the image in

GIF and JPEG format


Understanding Compression

GIF, JPEG, PNG compression creates compressed files without losing substantial components


Understanding JPEG FilesFile compressed by discarding image pixels

Does not support transparent color

Known as “lossy” because it loses data when it compresses a file


Understanding GIF FilesFiles compressed by limiting colors

8-bit format

Maximum number of colors is 256

Supports one transparent color

Known as “lossless” because the file compresses solid color areas but maintains details


Comparing Image TypesGIF optimization:

Colors are streaky and broken-up

JPEG optimization:Colors are crisp and

appear seamless


Optimization Format Considerations


Create a Button for a Web Page Defining Buttons

Graphical interface that helps visitors navigate through and interact with a Web site– Create a new button shape– Apply a preformatted button style– Import a button created in another

program– Assign actions to a button


Creating a ButtonDraw a shape with a shape tool on a layer

Apply a color or style to the shape

Add text to explain what will happen when the button is clicked


Applying a Button StyleUse one of 65 predesigned button styles on the Styles palette

Create a new style

Apply a style to a button by double-clicking one of the button styles on the Styles palette


Button Styles


Converting Files to HTMLA Photoshop file must be converted to HTML before it can be used on the Web

To convert a file to HTML:– Click Edit on the menu bar, point to Copy

HTML Code, click For All Slices

Photoshop stores the HTML code on the Clipboard so that it can then be pasted into the web page using an HTML editor


Create Slices in an Image Understanding Slices

A slice is a rectangular section of an image that is used to apply features such as links

Slices are used to determine the appearance of special effects in a Web page

Create a slice with any marquee tool or the Slice Tool


Using SlicesUser-slice– The designer creates the slice– Enclosed in a solid line border

Auto-slice– Photoshop creates the slice in

response to the user-slice– Enclosed in a dotted line border


Selecting a SliceA selected slice is bounded by a yellow border

Contains a bounding box and sizing handles

Resize a slice by dragging a handle


Slice ComponentsColored line used to identify the slice typeOverlay that dims the appearance of unselected slicesNumber that identifies each individual sliceSymbol that identifies the type of slice


Adjusting Slice AttributesClick Slices under the Preferences command on the Edit menu

Choose to display slice lines, numbers, and symbols

Specify line color, number, and opacity


User Slice Symbols


Using Layer-Based SlicesUse the New Layer Based Slice command on the Layer menu to create a slice from a layer on the Layer palette

Easy way of creating a slice without needing to draw an outline


Creating a Layer-Based Slice

Select the layer on the Layers palette

Click Layer on the menu bar

Click New Layer Based Slice– A new slice surrounds the selected

layer


Slice Options dialog box

Web address of Web page: opens when user clicks on the slice in a

Web page


Assigning a Web Address to a Slice

To assign a Web page address to a selected slice:– Type the URL of the Web page in the

URL text box– The URL is the address of the Web

page


Understanding Image MapsAn image is divided into multiple areas:– Each area is assigned to a Web

address

Each area is known as a hotspot– When a user clicks the hotspot the

browser opens a different Web page


Create and Play Basic Animation Understanding Animation

Animation is a series of still images displayed rapidly

Animation palette displays a thumbnail of the animation image in each frame

Frame:– Individual image used in animation


Creating an AnimationPlace images on layers in the image

Hide all but one layer

Duplicate the frame

Turn off the displayed layer

Turn on the layer you want to see


Animation Example

When frame 1 is selected the man

appears

When frame 2 is selected the

woman appears


Animation Tools


Add Tweening and Frame Delay Understanding Tweening

Tweening adds frames that change action in an animation in slight increments from one frame to the next

To add tweening to a frame:– Click the Tween… button– Enter the number of in-between

frames required


Tweening ExampleMan morphing into woman

Two-frame animation after

five tween frames are added


Setting Frame DelaysLength of time the frame appears

Click the Selects frame delay time list arrow to set the delay time in whole or partial seconds

Set the frame delay for:– Each frame– Several frames at once


Add Tweening and Frame Delay Understanding Tweening

Tweening adds frames that change action in an animation in slight increments from one frame to the next

To add tweening to a frame:– Click the Tween… button– Enter the number of in-between

frames required


Camera Raw dialog box


Edits to Raw FileIcon indicates edits to Raw file


Chapter 16 TasksLearn about Web features

Optimize images for Web use

Create a button for a Web page and apply a button style

Create slices in an image


Chapter 16 TasksAssign a Web address to a slice

Create an animation

Add Tweening

Add Frame Delay

Learn about Camera Raw features

Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Documents

Transcript of Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.