Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.

Similar presentations

Presentation on theme: "Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES."— Presentation transcript:

1 Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES

2 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

3 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

4 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

5 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

6 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

7 Chapter P7Creating Web Images ImageReady Workspace

8 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

9 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

10 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

11 Chapter P11Creating Web Images Rollovers Changes an object’s appearance when the pointer passes over a specific area of the image

12 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

13 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

14 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

15 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

16 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)

17 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

18 Chapter P18Creating Web Images Optimizing Files: PhotoShop Original image format Three optimized versions of the image in GIF and JPEG format

19 Chapter P19Creating Web Images Optimizing Files: ImageReady Original image format: size is 799 KB Three optimized versions of the image in GIF format

20 Chapter P20Creating Web Images Understanding Compression GIF, JPEG, PNG compression creates compressed files without losing substantial components

21 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

22 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

23 Chapter P23Creating Web Images Comparing Image Types GIF optimization: Colors are streaky and broken-up JPEG optimization: Colors are crisp and appear seamless

24 Chapter P24Creating Web Images Optimization Format Considerations

25 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

26 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

27 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

28 Chapter P28Creating Web Images ImageReady Button Styles

29 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

30 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

31 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

32 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

33 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

34 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

35 Chapter P35Creating Web Images User Slice Symbols

36 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

37 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

38 Chapter P38Creating Web Images Slice Palette Selected slice Web address of Web page: opens when user clicks on the slice in a Web page

39 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

40 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

41 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

42 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

43 Chapter P43Creating Web Images Rollover States Normal (default) Over Down Click Out Up None

44 Chapter P44Creating Web Images Viewing Rollover States Rollover states change based on mouse position

45 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

46 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

47 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

48 Chapter P48Creating Web Images Animation Example When frame 1 is selected the man appears When frame 2 is selected the woman appears

49 Chapter P49Creating Web Images Animation Tools

50 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

51 Chapter P51Creating Web Images Tweening Example Man morphing into woman Two-frame animation after five tween frames are added

52 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

53 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

54 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

Download ppt "Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES."

Similar presentations

Ads by Google