Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES
Chapter P2Creating Web Images 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
Chapter P3Creating Web Images 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
Chapter P4Creating Web Images 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
Chapter P5Creating Web Images 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
Chapter P6Creating Web Images 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
Chapter P7Creating Web Images ImageReady Workspace
Chapter P8Creating Web Images Previewing in the Browser In ImageReady, preview Web effects in the Web browser: –Click the Preview in Default Browser button on the toolbox
Chapter P9Creating Web Images 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
Chapter P10Creating 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: –Rollovers –Links –Animations
Chapter P11Creating Web Images Rollovers Changes an object’s appearance when the pointer passes over a specific area of the image
Chapter P12Creating 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
Chapter P13Creating 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 Rollovers and animations become files in object folders
Chapter P14Creating Web Images 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
Chapter P15Creating 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
Chapter P16Creating Web Images 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)
Chapter P17Creating 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
Chapter P18Creating Web Images Optimizing Files: PhotoShop Original image format Three optimized versions of the image in GIF and JPEG format
Chapter P19Creating Web Images Optimizing Files: ImageReady Original image format: size is 799 KB Three optimized versions of the image in GIF format
Chapter P20Creating Web Images Understanding Compression GIF, JPEG, PNG compression creates compressed files without losing substantial components
Chapter P21Creating 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
Chapter P22Creating 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
Chapter P23Creating Web Images Comparing Image Types GIF optimization: Colors are streaky and broken-up JPEG optimization: Colors are crisp and appear seamless
Chapter P24Creating Web Images Optimization Format Considerations
Chapter P25Creating Web Images 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
Chapter P26Creating 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
Chapter P27Creating Web Images 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 double- clicking one of the button styles on the Styles palette
Chapter P28Creating Web Images ImageReady Button Styles
Chapter P29Creating Web Images 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
Chapter P30Creating 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 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
Chapter P31Creating Web Images 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
Chapter P32Creating 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
Chapter P33Creating 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
Chapter P34Creating 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
Chapter P35Creating Web Images User Slice Symbols
Chapter P36Creating 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
Chapter P37Creating 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
Chapter P38Creating Web Images Slice Palette Selected slice Web address of Web page: opens when user clicks on the slice in a Web page
Chapter P39Creating 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
Chapter P40Creating 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
Chapter P41Creating Web Images 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
Chapter P42Creating Web Images 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
Chapter P43Creating Web Images Rollover States Normal (default) Over Down Click Out Up None
Chapter P44Creating Web Images Viewing Rollover States Rollover states change based on mouse position
Chapter P45Creating Web Images 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
Chapter P46Creating 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
Chapter P47Creating 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
Chapter P48Creating Web Images Animation Example When frame 1 is selected the man appears When frame 2 is selected the woman appears
Chapter P49Creating Web Images Animation Tools
Chapter P50Creating 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 Tweens animation frames button –Enter the number of in-between frames required
Chapter P51Creating Web Images Tweening Example Man morphing into woman Two-frame animation after five tween frames are added
Chapter P52Creating Web Images 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
Chapter P53Creating Web Images 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
Chapter P54Creating Web Images Chapter P Tasks Assign a Web address to a slice Create a rollover effect Create an animation Add Tweening Add Frame Delay