Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
-
Upload
barnaby-richardson -
Category
Documents
-
view
222 -
download
1
Transcript of 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
3Creating Web Images Chapter P
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
4Creating Web Images Chapter P
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
5Creating Web Images Chapter P
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
6Creating Web Images Chapter P
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
8Creating Web Images Chapter P
Previewing in the BrowserIn ImageReady, preview Web effects in the Web browser:– Click the Preview in Default Browser
button on the toolbox
9Creating Web Images Chapter P
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
10Creating Web Images Chapter P
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
11Creating Web Images Chapter P
RolloversChanges an object’s appearance when the pointer passes over a specific area of the image
12Creating Web Images Chapter P
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
13Creating Web Images Chapter P
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
14Creating Web Images Chapter P
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
15Creating Web Images Chapter P
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
16Creating Web Images Chapter P
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)
17Creating Web Images Chapter P
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
18Creating Web Images Chapter P
Optimizing Files: PhotoShop
Original image format
Three optimized versions of the image in
GIF and JPEG format
19Creating Web Images Chapter P
Optimizing Files: ImageReady
Original image format: size is 799 KB
Three optimized versions of the image in
GIF format
20Creating Web Images Chapter P
Understanding Compression
GIF, JPEG, PNG compression creates compressed files without losing substantial components
21Creating Web Images Chapter P
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
22Creating Web Images Chapter P
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
23Creating Web Images Chapter P
Comparing Image TypesGIF optimization:
Colors are streaky and broken-up
JPEG optimization:Colors are crisp and
appear seamless
25Creating Web Images Chapter P
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
26Creating Web Images Chapter P
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
27Creating Web Images Chapter P
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
29Creating Web Images Chapter P
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
30Creating Web Images Chapter P
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
31Creating Web Images Chapter P
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
32Creating Web Images Chapter P
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
33Creating Web Images Chapter P
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
34Creating Web Images Chapter P
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
36Creating Web Images Chapter P
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
37Creating Web Images Chapter P
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
38Creating Web Images Chapter P
Slice Palette
Selected slice
Web address of Web page: opens when user clicks on the slice in a
Web page
39Creating Web Images Chapter P
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
40Creating Web Images Chapter P
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
41Creating Web Images Chapter P
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
42Creating Web Images Chapter P
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
44Creating Web Images Chapter P
Viewing Rollover States
Rollover states change based on mouse position
45Creating Web Images Chapter P
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
46Creating Web Images Chapter P
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
47Creating Web Images Chapter P
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
48Creating Web Images Chapter P
Animation Example
When frame 1 is selected the man
appears
When frame 2 is selected the
woman appears
50Creating Web Images Chapter P
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
51Creating Web Images Chapter P
Tweening ExampleMan morphing into woman
Two-frame animation after
five tween frames are added
52Creating Web Images Chapter P
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
53Creating Web Images Chapter P
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