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

2. Chapter 162Creating 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

3. Chapter 163Creating Web Images 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

4. Chapter 164Creating Web Images 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

5. Chapter 165Creating Web Images 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

6. Chapter 166Creating Web Images 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

7. Chapter 167Creating Web Images 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

8. Chapter 168Creating Web Images 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

9. Chapter 169Creating Web Images 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

10. Chapter 1610Creating Web Images 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)

11. Chapter 1611Creating Web Images 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

12. Chapter 1612Creating Web Images Optimizing Files Original image format Three optimized versions of the image in GIF and JPEG format

13. Chapter 1613Creating Web Images Understanding Compression GIF, JPEG, PNG compression creates compressed files without losing substantial components

14. Chapter 1614Creating Web Images 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

15. Chapter 1615Creating Web Images 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

16. Chapter 1616Creating Web Images Comparing Image Types GIF optimization: Colors are streaky and broken-up JPEG optimization: Colors are crisp and appear seamless

17. Chapter 1617Creating Web Images Optimization Format Considerations

18. Chapter 1618Creating Web Images 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

19. Chapter 1619Creating Web Images 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

20. Chapter 1620Creating Web Images Applying a Button Style Use 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

21. Chapter 1621Creating Web Images Button Styles

22. Chapter 1622Creating Web Images 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 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

23. Chapter 1623Creating Web Images 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

24. Chapter 1624Creating Web Images 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

25. Chapter 1625Creating Web Images 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

26. Chapter 1626Creating Web Images 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

27. Chapter 1627Creating Web Images 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

28. Chapter 1628Creating Web Images User Slice Symbols

29. Chapter 1629Creating Web Images 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

30. Chapter 1630Creating Web Images 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

31. Chapter 1631Creating Web Images Slice Options dialog box Web address of Web page: opens when user clicks on the slice in a Web page

32. Chapter 1632Creating Web Images 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

33. Chapter 1633Creating Web Images 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

34. Chapter 1634Creating Web Images 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

35. Chapter 1635Creating Web Images 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

36. Chapter 1636Creating Web Images Animation Example When frame 1 is selected the man appears When frame 2 is selected the woman appears

37. Chapter 1637Creating Web Images Animation Tools

38. Chapter 1638Creating Web Images 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

39. Chapter 1639Creating Web Images Tweening Example Man morphing into woman Two-frame animation after five tween frames are added

40. Chapter 1640Creating Web Images Setting Frame 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

41. Chapter 1641Creating Web Images 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

42. Chapter 1642Creating Web Images Camera Raw dialog box

43. Chapter 1643Creating Web Images Edits to Raw File Icon indicates edits to Raw file

44. Chapter 1644Creating Web Images Chapter 16 Tasks Learn 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

45. Chapter 1645Creating Web Images Chapter 16 Tasks Assign a Web address to a slice Create an animation Add Tweening Add Frame Delay Learn about Camera Raw features