1. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Photoshop Domain 2: Identifying Design Elements When Preparing Images Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 111

2. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objectives Demonstrate knowledge of image resolution, image size, and image file format for web, video, and print Demonstrate knowledge of design principles, elements, and image composition Demonstrate knowledge of typography Demonstrate knowledge of color correction using Photoshop 222

3. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objectives (cont.) Demonstrate knowledge of image-generating devices, their resulting image types, and how to access resulting images in Photoshop Understand key terminology of digital images. 333

4. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Vocabulary Aspect ratio Background Bitmap Camera Raw CMYK Cropping Document size Downsampled Dpi Field of view Foreground Gamut High Dynamic Range (HDR) Image composition Interpolation 444

5. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Vocabulary (cont.) Line screen frequency Lpi Pixel Raster Image Readability Resolution RGB Screen frequency Screen ruling Typography Upsampling Vector V isual hierarchy 555

6. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Domain 2.0 Identifying Design Elements When Preparing Images Domain 2 focuses on design elements andimage composition. Domain 2 focuses on design elements and image composition. This domain is similar to the second domainin the Web Communication (DreamweaverCS5) and Rich Media Communication (FlashCS5) certification objectives. This domain is similar to the second domain in the Web Communication (Dreamweaver CS5) and Rich Media Communication (Flash CS5) certification objectives. 666

7. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.1 Demonstrate Knowledge of Image Resolution, Image Size, and Image File Format for Web, Video, and Print Resizing an Image The Image Sizedialog box displaysthe image data,which includes thenumber of pixels inan image, the sizeof the image ininches, and theresolution. The Image Size dialog box displays the image data, which includes the number of pixels in an image, the size of the image in inches, and the resolution. 777

8. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.1 Demonstrate Knowledge of Image Resolution, Image Size, and Image File Format for Web, Video, and Print (cont.) Resizing an Image To change the image data, which affects the resolutionand file size, you must resample the image, whichincreases or decreases the number of pixels contained inthe image. To change the image data, which affects the resolution and file size, you must resample the image, which increases or decreases the number of pixels contained in the image. Photoshop uses a method called interpolation toresample an image, using existing pixel colors to createnew color values. Photoshop uses a method called interpolation to resample an image, using existing pixel colors to create new color values. You can crop an image to resize it. Cropping allows youto remove the outside portion of an image to correct itsfocus. You can crop an image to resize it. Cropping allows you to remove the outside portion of an image to correct its focus. 888

9. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.1 Demonstrate Knowledge of Image Resolution, Image Size, and Image File Format for Web, Video, and Print (cont.) Printer Resolution The resolution on a printer is measured in ink dots perinch (dpi). The more dots per inch, the higher the imagequality. The resolution on a printer is measured in ink dots per inch (dpi). The more dots per inch, the higher the image quality. This actual number of printer dots is referred to asscreen frequency, screen ruling, or line screenfrequency and is measured in lines per inch (lpi). This actual number of printer dots is referred to as screen frequency, screen ruling, or line screen frequency and is measured in lines per inch (lpi). When preparing your image for print, it is often easier tospecify your image in the printed dimensions, oftenreferred to in inches, as well as the image resolution; thisis referred to as the document size. When preparing your image for print, it is often easier to specify your image in the printed dimensions, often referred to in inches, as well as the image resolution; this is referred to as the document size. 999

10. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.1 Demonstrate Knowledge of Image Resolution, Image Size, and Image File Format for Web, Video, and Print (cont.) File Formats There are many different file formats available forgraphics. It is important to choose the correct fileformat for how and where the image will be used. There are many different file formats available for graphics. It is important to choose the correct file format for how and where the image will be used. Image Optimization The Save for Web & Devices command on theFile menu provides a method to optimize imagesfor publishing on the web and mobile devices. The Save for Web & Devices command on the File menu provides a method to optimize images for publishing on the web and mobile devices. 10

11. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz What is a pixel? – Answer: A single point in a picture laid out in rows and columns. True or False? Scaling an image to resize it changes the image data. – Answer: False. 11

12. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Class Discussion Review Table 2-2 that describes the most commonly used file formats for graphics. Discuss the importance of choosing the correct file format for how and where an image will be used, such as the web, video, photos, print, a Microsoft PowerPoint presentation, or a Microsoft Word document. 12

13. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Lab Activity Complete Step-by-Step 2.1, which provides practice resizing and optimizing an image. 13

14. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.2 Demonstrate Knowledge of Design Principles, Elements, and Image Composition Graphic design includes design elements, design principles,and image composition. It is important to understand someconcepts to be able to create an attractive layout. Graphic design includes design elements, design principles, and image composition. It is important to understand some concepts to be able to create an attractive layout. Image Composition and Principles An image composition is the arrangement of the visualelements of your image to create a visually compellingdesign. An image composition is the arrangement of the visual elements of your image to create a visually compelling design. When composing or laying out your design, there are somebasic concepts you should consider for your graphic designproject, such as aspect ratio, framing, field of view,foreground, and background. When composing or laying out your design, there are some basic concepts you should consider for your graphic design project, such as aspect ratio, framing, field of view, foreground, and background. 14

15. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.2 Demonstrate Knowledge of Design Principles, Elements, and Image Composition (cont.) Image Composition and Principles (cont.) Visual hierarchy isused in graphicdesign to emphasizeimportant elementsand organize contentin a logical manner. Visual hierarchy is used in graphic design to emphasize important elements and organize content in a logical manner. 15

16. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz What is the aspect ratio of an object? – Answer: The relationship of an object’s height to its width. 16

17. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Class Discussion Review each of the design elements and design principles in Table 2-3 and discuss the importance of understanding design concepts in order to be able to create an attractive layout. How can you achieve balance by applying symmetry or asymmetry? 17

18. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Lab Activity Complete Step-by-Step 2.2, which provides practice cropping an image. 18

19. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.3 Demonstrate Knowledge of Typography When adding text to a digital image it isimportant to consider the font, style, color, andspacing. When adding text to a digital image it is important to consider the font, style, color, and spacing. The selections made to design the text and theplacement of the words are called typography. The selections made to design the text and the placement of the words are called typography. Readability is the feeling that is conveyed tomake the typeface comfortable and easy toread. Readability is the feeling that is conveyed to make the typeface comfortable and easy to read. 19

20. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz What is readability? – Answer: The feeling that is conveyed to make the typeface comfortable and easy to read. 20

21. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Lab Activity Locate a graphic image that includes text in a magazine, flyer, web page, or other source and evaluate its readability. Are there any changes that could be made to the size, style, or alignment of the text to make it more readable? 21

22. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.4 Demonstrate Knowledge of Color Correction Using Photoshop CS5 RGB color mode uses red (R), green (G), andblue (B) in various combinations to create thecolors you see on a computer display, atelevision screen, or a movie in a theatre. RGB color mode uses red (R), green (G), and blue (B) in various combinations to create the colors you see on a computer display, a television screen, or a movie in a theatre. CMYK color mode uses cyan (C), magenta (M),yellow (Y), and black (K) to create various colorsin print. CMYK color mode uses cyan (C), magenta (M), yellow (Y), and black (K) to create various colors in print. Colors that are in a range that can be displayedor printed are referred to as a gamut. Colors that are in a range that can be displayed or printed are referred to as a gamut. 22

23. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.4 Demonstrate Knowledge of Color Correction Using Photoshop CS5 (cont.) You can use the Histogram panel to interpretcolors in an image. You can use the Histogram panel to interpret colors in an image. High dynamic range (HDR) images allow aphotographer to record a much larger rangeof tonal detail than can be captured in onephoto. High dynamic range (HDR) images allow a photographer to record a much larger range of tonal detail than can be captured in one photo. 23

24. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz Which color mode would you use when submitting your graphic design to be printed? – Answer: CMYK How would you view colors that are out of gamut? – Answer: Click View on the Application bar (Win) or Menu bar (Mac), and then click Gamut Warning. The colors outside the range are highlighted in gray. 24

25. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Lab Activity Open an image and use the Proof Setup command to view the image’s simulated output in a variety of options, such as type or color of paper. Which option would you use to proof for color blindness? 25

26. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.5 Demonstrate Knowledge of Image- Generating Devices, Their Resulting Image Types, and How to Access Resulting Images in Photoshop You can create an image with a digital or filmcamera and from scanning an image. You can create an image with a digital or film camera and from scanning an image. The Open command opens each image into its ownPhotoshop document. The Open command opens each image into its own Photoshop document. The Place command allows you to place multipleimages into a single document. The Place command allows you to place multiple images into a single document. You can scan images directly into Photoshop byclicking File on the Application bar (Win), pointing toImport, and then clicking WIA Support. You can scan images directly into Photoshop by clicking File on the Application bar (Win), pointing to Import, and then clicking WIA Support. 26

27. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.5 Demonstrate Knowledge of Image- Generating Devices, Their Resulting Image Types, and How to Access Resulting Images in Photoshop (cont.) The Camera Raw format contains minimallyprocessed data that is not ready to be used and stillneeds to be processed. The Camera Raw format contains minimally processed data that is not ready to be used and still needs to be processed. 27

28. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz True or False? Camera Raw files are much larger than JPEG files, sometimes two to six times larger. – Answer: True What is the difference between the Open command and the Place command on the File menu? – Answer: The Open command opens each image into its own Photoshop document. The Place command allows you to place multiple images into a single document. 28

29. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.6 Understand Key Terminology of Digital Images Bitmap vs. Vector Graphics A bitmap image, technically known as araster image, is represented by pixels in agrid layout; each pixel contains colorinformation for the image. A bitmap image, technically known as a raster image, is represented by pixels in a grid layout; each pixel contains color information for the image. A vector image is created with mathematicalcalculations and can be enlarged without aloss of quality. A vector image is created with mathematical calculations and can be enlarged without a loss of quality. 29

30. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Objective 2.6 Understand Key Terminology of Digital Images (cont.) Bitmap vs. Vector Graphics 30

31. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Quick Quiz True or False? When a vector image is enlarged, the quality of the image is lost, and the pixels are visible, often resulting in jagged edges. – Answer: False How do you rasterize an image? – Answer: Click Layer on the Application bar (Win) or Menu bar (Mac), point to Rasterize, and then click an option. 31

32. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Summary 2.1 Demonstrate knowledge of image resolution, image size, and image file format for web, video, and print 2.2 Demonstrate knowledge of design principles, elements, and image composition 2.3 Demonstrate knowledge of typography 32

33. Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Summary (cont.) 2.4 Demonstrate knowledge of color correction using Photoshop CS5. 2.5 Demonstrate knowledge of image- generating devices, their resulting image types, and how to access resulting images in Photoshop 2.6 Understand key terminology of digital images. 33