Download for Web

Adobe Photoshop CS
Design Professional
CREATING IMAGES
FOR THE WEB
Chapter Lessons
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
Creating Web Images
Chapter P
2
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
Creating Web Images
Chapter P
3
Photoshop and ImageReady
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
Creating Web Images
Chapter P
4
Jumping Between Programs
Photoshop 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
Creating Web Images
Chapter P
5
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
Creating Web Images
Chapter P
6
ImageReady Workspace
Creating Web Images
Chapter P
7
Previewing in the Browser
In ImageReady, preview Web effects
in the Web browser:
– Click the Preview in Default Browser
button on the toolbox
Creating Web Images
Chapter P
8
Updating Files
The 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
Creating Web Images
Chapter P
9
Understanding Slices
Divide 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
Creating Web Images
Chapter P
10
Rollovers
Changes an object’s appearance
when the pointer passes over a
specific area of the image
Creating Web Images
Chapter P
11
Animations
An 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
Creating Web Images
Chapter P
12
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
Creating Web Images
Chapter P
13
Jumping to Other Programs
Jump 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
Creating Web Images
Chapter P
14
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
Creating Web Images
Chapter P
15
Image Comparison
In 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)
Creating Web Images
Chapter P
16
Save For Web Dialog Box
Original 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
Creating Web Images
Chapter P
17
Optimizing Files: PhotoShop
Original image format
Three optimized
versions of the image in
GIF and JPEG format
Creating Web Images
Chapter P
18
Optimizing Files: ImageReady
Original image format:
size is 799 KB
Three optimized
versions of the image in
GIF format
Creating Web Images
Chapter P
19
Understanding Compression
GIF, JPEG, PNG compression
creates compressed files without
losing substantial components
Creating Web Images
Chapter P
20
Understanding JPEG Files
File compressed by discarding image
pixels
Does not support transparent color
Known as “lossy” because it loses
data when it compresses a file
Creating Web Images
Chapter P
21
Understanding GIF Files
Files 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
Creating Web Images
Chapter P
22
Comparing Image Types
JPEG optimization:
Colors are crisp and
appear seamless
Creating Web Images
GIF optimization:
Colors are streaky and
broken-up
Chapter P
23
Optimization Format
Considerations
Creating Web Images
Chapter P
24
Create a Button for a Web Page
Defining Buttons
Graphical interface that helps visitors
navigate through and interact with a
Web site
In ImageReady:
– Create a new button shape
– Apply a preformatted button style
– Import a button created in another
program
– Assign actions to a button
Creating Web Images
Chapter P
25
Creating a Button
Draw 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
Creating Web Images
Chapter P
26
Applying a Button Style
Use one of 65 predesigned
ImageReady button styles on the
Styles palette
Create a new style
Apply a style to a button by doubleclicking one of the button styles on
the Styles palette
Creating Web Images
Chapter P
27
ImageReady Button Styles
Creating Web Images
Chapter P
28
Converting Files to HTML
A 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
Creating Web Images
Chapter P
29
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
Creating Web Images
Chapter P
30
Using Slices
User-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
Creating Web Images
Chapter P
31
Selecting a Slice
A selected slice is bounded by a
yellow border
Contains a bounding box and sizing
handles
Resize a slice by dragging a handle
Creating Web Images
Chapter P
32
Slice Components
Colored line used to identify the
slice type
Overlay that dims the appearance of
unselected slices
Number that identifies each
individual slice
Symbol that identifies the type of
slice
Creating Web Images
Chapter P
33
Adjusting Slice Attributes
Click Slices under the Preferences
command on the Edit menu
Choose to display slice lines,
numbers, and symbols
Specify line color, number, and
opacity
Creating Web Images
Chapter P
34
User Slice Symbols
Creating Web Images
Chapter P
35
Using Layer-Based Slices
Use 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 Web Images
Chapter P
36
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
Creating Web Images
Chapter P
37
Slice Palette
Selected
slice
Web address of Web
page: opens when user
clicks on the slice in a
Web page
Creating Web Images
Chapter P
38
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
Creating Web Images
Chapter P
39
Understanding Image Maps
An 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 Web Images
Chapter P
40
Creating an Image Map
In 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
Creating Web Images
Chapter P
41
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
rollover
Add and modify states on the
Rollovers palette
Creating Web Images
Chapter P
42
Rollover States
Normal (default)
Over
Down
Click
Out
Up
None
Creating Web Images
Chapter P
43
Viewing Rollover States
Rollover states
change based on
mouse position
Creating Web Images
Chapter P
44
Previewing Rollovers
Click 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
Creating Web Images
Chapter P
45
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 Web Images
Chapter P
46
Creating an Animation
Place 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
Creating Web Images
Chapter P
47
Animation Example
When frame 2 is
selected the
woman appears
When frame 1 is
selected the man
appears
Creating Web Images
Chapter P
48
Animation Tools
Creating Web Images
Chapter P
49
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 Tweens animation
frames button
– Enter the number of in-between
frames required
Creating Web Images
Chapter P
50
Tweening Example
Man morphing
into woman
Two-frame
animation after
five tween frames
are added
Creating Web Images
Chapter P
51
Setting Fame Delays
Length 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
Creating Web Images
Chapter P
52
Chapter P Tasks
Switch 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
Creating Web Images
Chapter P
53
Chapter P Tasks
Assign a Web address to a slice
Create a rollover effect
Create an animation
Add Tweening
Add Frame Delay
Creating Web Images
Chapter P
54