Creating Images for the Web Chapter 17 Creating Images for the Web

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

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

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

© 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

© 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

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

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

© 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

© 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

© 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

© 2011 Delmar Cengage Learning Button Styles © 2011 Delmar Cengage Learning

© 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

© 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

© 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

© 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

© 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

© 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

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

© 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

© 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

© 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

© 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

© 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