1. Creating Images for the Web
Chapter 17
Creating Images for the Web

2. © 2011 Delmar Cengage Learning
Chapter Lessons
Learn about web features
Optimize images for web use
Create a button for a web page
Create slices in an image
© 2011 Delmar Cengage Learning

3. © 2011 Delmar Cengage Learning
Creating Images for the Web
Create images for use on the web
Create buttons and other features unique to web pages
© 2011 Delmar Cengage Learning

4. © 2011 Delmar Cengage Learning
Photoshop and the Web
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
© 2011 Delmar Cengage Learning

5. © 2011 Delmar Cengage Learning
Previewing in the Browser
Preview Web effects in a web browser:
Click the Preview in Default Browser button in the Save for Web & Devices dialog box
© 2011 Delmar Cengage Learning

6. © 2011 Delmar Cengage Learning
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:
Links
Animations
© 2011 Delmar Cengage Learning

7. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

8. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

9. © 2011 Delmar Cengage Learning
Optimize Images for Web Use
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
© 2011 Delmar Cengage Learning

10. © 2011 Delmar Cengage Learning
Image Comparison
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)
© 2011 Delmar Cengage Learning

11. © 2011 Delmar Cengage Learning
Save For Web & Devices 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
© 2011 Delmar Cengage Learning

12. Three optimized versions of the image in GIF and JPEG format
Optimizing Files
Original image format
Three optimized versions of the image in GIF and JPEG format
© 2011 Delmar Cengage Learning

13. © 2011 Delmar Cengage Learning
Understanding Compression
GIF, JPEG, PNG compression creates compressed files without losing substantial components
© 2011 Delmar Cengage Learning

14. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

15. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

16. Colors are streaky and broken-up Colors are crisp and appear seamless
Comparing Image Types
GIF optimization:
Colors are streaky and broken-up
JPEG optimization:
Colors are crisp and appear seamless
© 2011 Delmar Cengage Learning

17. © 2011 Delmar Cengage Learning
Optimization Format Considerations
© 2011 Delmar Cengage Learning

18. © 2011 Delmar Cengage Learning
Create a Button for a Web Page
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
© 2011 Delmar Cengage Learning

19. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

20. © 2011 Delmar Cengage Learning
Applying a Button Style
Use one of many pre-designed button styles on the Styles panel
Create a new style
Apply a style to a button by double-clicking one of the button styles on the Styles panel
© 2011 Delmar Cengage Learning

21. © 2011 Delmar Cengage Learning
Button Styles
© 2011 Delmar Cengage Learning

22. © 2011 Delmar Cengage Learning
Converting Files to HTML
A 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 Application 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
© 2011 Delmar Cengage Learning

23. © 2011 Delmar Cengage Learning
Create Slices in an Image
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
© 2011 Delmar Cengage Learning

24. © 2011 Delmar Cengage Learning
Using Slices
User-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
© 2011 Delmar Cengage Learning

25. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

26. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

27. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

28. © 2011 Delmar Cengage Learning
Using Slice Symbols
© 2011 Delmar Cengage Learning

29. © 2011 Delmar Cengage Learning
Using Layer-Based Slices
Use the New Layer Based Slice command on the Layer Application to create a slice from a layer on the Layers panel
Easy way of creating a slice without needing to draw an outline
© 2011 Delmar Cengage Learning

30. © 2011 Delmar Cengage Learning
Creating a Layer-Based Slice
Select the layer on the Layers panel
Click Layer on the Application bar
Click New Layer Based Slice
A new slice surrounds the selected layer
© 2011 Delmar Cengage Learning

31. © 2011 Delmar Cengage Learning
Slice Options Dialog Box
Web address of Web page: opens when user clicks on the slice in a Web page
© 2011 Delmar Cengage Learning

32. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning

33. © 2011 Delmar Cengage Learning
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
© 2011 Delmar Cengage Learning