adobe photoshop cs design professional for the web creating images

Adobe Photoshop CS Design Professional

FOR THE WEB CREATING IMAGES

2Creating Web Images Chapter P

Learn about ImageReady

Optimize images for Web use

Create a button for a Web page

Create slices in an image

Create a rollover effect

Create and play basic animation

Add tweening and frame delay

Chapter Lessons


Creating Images for the Web Using Photoshop for the Web

Create images for use on the Web

Use Adobe ImageReady CS to tailor images and graphics for the Web:– Create buttons and other features

unique to Web pages


Use Photoshop to create the images

Use ImageReady to:– 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 ImageReady


Jumping Between ProgramsPhotoshop and ImageReady work together– Each program updates changes made

in the other

Process– Work on an image in ImageReady– Go to Photoshop to tweak the image– Go back to ImageReady to preview the

image in the Web browser


Learn about ImageReady

Shares similar tools and features with Photoshop:

– Toolbox– Options bar– Many palettes

Switching programs:– Use the Jump to ImageReady button to

switch to ImageReady from Photoshop– Use the Jump to Photoshop button to

switch to Photoshop from ImageReady


ImageReady Workspace


Previewing in the BrowserIn ImageReady, preview Web effects in the Web browser:– Click the Preview in Default Browser

button on the toolbox


Updating FilesThe active program automatically updates the current file each time the program is changed– Work on an image in Photoshop– Switch to ImageReady and make

changes– Switch to Photoshop and the image

shows the changes made in ImageReady


Understanding SlicesDivide a Web site image into smaller sections called slices

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


RolloversChanges an object’s appearance when the pointer passes over a specific area of the image


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

Rollovers and animations become files in object folders


Jumping to Other ProgramsJump from ImageReady to other graphics programs or HTML programs

Procedure:– Click File on the menu bar, point to

Jump To, click Other Graphics Editor or Other HTML Editor, then locate the program required


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 ComparisonIn Photoshop and ImageReady, compare 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: PhotoShop

Original image format

Three optimized versions of the image in

GIF and JPEG format


Optimizing Files: ImageReady

Original image format: size is 799 KB

Three optimized versions of the image in

GIF 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 siteIn ImageReady:– 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 ImageReady 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


ImageReady Button Styles


Converting Files to HTMLA Photoshop or ImageReady 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

ImageReady 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 rollovers and links

ImageReady uses slices to determine the appearance of special effects in a Web page

Use any marquee or the Slice Tool to create a slice


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

Auto-slice– ImageReady 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 Palette

Selected slice

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


Creating an Image MapIn ImageReady:– Click the Rectangle Image Map Tool,

the Circle Image Map Tool or the Polygon Image Map Tool

Use the tool to draw an area

Click the Image Map palette

Type a Web address for the area in the URL text box


Create a Rollover Effect Learning About Rollovers

Use rollovers to respond to a user’s action:– Clicking or pointing to (rolling on) an

area in a Web page

The activity of the pointer determines the appearance or state of the rolloverAdd and modify states on the Rollovers palette


Rollover StatesNormal (default)

Over

Down

Click

Out

Up

None


Viewing Rollover States

Rollover states change based on mouse position


Previewing RolloversClick the Preview in Default Browser button on the toolbox to open the image in the browser

OR

Click the Preview Document button on the toolbox and move the mouse in the image to observe the rollover effect


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 nextTo add tweening to a frame:– Click the Tweens animation

frames button– Enter the number of in-between

frames required


Tweening ExampleMan morphing into woman

Two-frame animation after

five tween frames are added


Setting Fame 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


Chapter P TasksSwitch between Photoshop and ImageReady

Optimize images for Web use

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

Create slices in an image


Chapter P TasksAssign a Web address to a slice

Create a rollover effect

Create an animation

Add Tweening

Add Frame Delay

adobe photoshop cs design professional for the web creating images

Documents

images slide

web divide images

chapter p8creating web

chapter p6creating web

chapter p5creating web

chapter p9creating web

chapter p3creating web

chapter p15creating