MP2 (W4&5) Digital Image MP2: Learning Objectives Required Readings Recommended Resources I. Demonstrate how to upload web pages to the Internet II. Develop Hyperlinks - Understand how to add hyperlinks to your web page. - Understand the differences between inline and block-level elements - Understand how to format text. - Understand the XHTML 1.0 specifications. III. Publish images & Edit colors on web pages - Understand what image compressions are available and when to use them. - Understand and demonstrate how to include graphics on a web page. - Understand how to manipulate colors on your web page. IV. Explore interface design and graphics on web (Textbook2: Ch4 & 11) V. Apply Photoshop to edit images - Understand how to edit photos via Photoshop - Understand how to edit text and create links and images on webpage - Textbook1: Ch4, Ch5, & Ch6 - Textbook2: Ch 4 & Ch11 - Photoshop Tutorial: http://www.atomiclearning.com/highed/en/search?p=25&filters={}&q=photoshop - Displaying and Sharing Your Digital Photos http://www.shortcourses.com/display/index.html - MegaPixel Calculator - shows the size of an image based on the resolution of your digital camera http://web.forret.com/tools/megapixel.asp - Walking the Talk with Julieanne Kost - a professional photographer shares some shooting and editing techniques http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/2006/02/08/talkingwith-julieanne-kost.html - Top Ten Digital Photography Tips by Derrick Story http://www.macdevcenter.com/pub/a/mac/2002/10/22/digi_photo_tips.html - Wikipedia's Image Editing page http://en.wikipedia.org/wiki/editing_digital_images - Examples of Digital Imaging on the Web - I Can't Stop Thinking! - Explorations of alternative presentations of graphical images in web comics http://www.scottmccloud.com/comics/icst/ - 10 ways - Interactive presentation exploring "what makes visual language so powerful" http://www.interact10ways.com/usa/home.asp - Max Lyons Digital Image Gallery http://www.tawbaware.com/maxlyons/ - New York Public Library Digital Gallery http://digitalgallery.nypl.org/nypldigital/index.cfm - delerium digital images http://www.wdass.net/missy/work.html I. Introduction of Digital Image Before you start learning basic functions in Photoshop, you will need to understand some basic concepts of images. Our focus here is mainly on creating/editing images that you will share on web site. When publishing images on the web, it is important to consider the following characteristics of your images: a. width and height -- if an image is too large, viewers may have to scroll to see the entire image Instructional Technology, Educational Foundations and Leadership 1
b. file size -- large files are slower to download and delay the display of your web page for viewers on slower connections c. image resolution -- most computer monitors only support fairly low resolution graphics (72 or 96 pixels-per-inch), so saving web images as higher resolution provides data that web viewers cannot effectively see (it also makes the file size unnecessarily larger!) 1. Image Pixels What happens if your audience wants to download and print these images on a photo or high quality laser printer? Should you include multiple copies of your images: one for screen display and another for printing? Dennis Curtin's A Short Course in Pixels (http://www.shortcourses.com/sensors/) provides further discussion about some of these issues. Some of the information may seem a bit technical at first, but read it through a couple of times. More advanced users may want to download the Excel Spreadsheet he mentions in this online article and experiment with changing image resolution and other image parameters to see what happens to the file size and quality of your image(s). Digital images are formed from tiny dots of color. The dots, usually many millions per image, are so small and close together they blend into the smooth continuous tones we're so familiar with from film. A bitmap is a picture stored as a set of pixels that correspond to the grid of dots on a computer screen. To display the picture, the computer sets each dot on the screen to the color specified for it in the bitmap which can be created with any graphics editors. According to Dennis Curtin s A Short Course in Pixels, digital photographs are actually mosaics of millions of tiny squares called picture elements or just pixels. Like the impressionist painters who painted wonderful scenes with small dabs of paint, your computer and printer use these tiny pixels to display or print photographs. To do so, the computer divides the screen or printed page into a grid of pixels. It then uses the values stored in the digital photograph to specify the brightness and color of each pixel in this grid a form of painting by number. A pixel has no size or shape. It is a conceptual unit to explain the resolution of the digital photos. Dennis gives two explanations for this concept. (Quote directly from the website) 1.1 NO SIZE: As pixels are enlarged, an image is spread over a larger area, and its perceived sharpness falls (from the same viewing distance). When enlarged past a certain point, the individual pixels begin to show the image becomes pixilated. a. If both mosaics cover an area of the same size, the one created using small tiles has more tiles so it has sharper curves and more detail. b. If there is the same number of large and small tiles, the area covered by the small tiles is smaller. When viewing both mosaics from the same distance, the smaller one looks sharper. However, if you view the small mosaic from close up, its sharpness and detail appear almost identical to the larger one viewed from farther away. 1.2 NO SHAPE: To make an image larger or smaller for a given output device, you must add or subtract pixels. This process, called resampling, can be done with a photo-editing program, or by an application you're using to print an image. a. When an image is re-sampled to make it larger, extra pixels are added and the color of each new pixel is determined by the colors of its neighbors. b. When an image is re-sampled to make it smaller, some pixels are deleted. 2. Choose Image Size (Quote directly from the website) The camera you use determines how large your images can be, but most also allow you to select smaller sizes. Here are some rules of thumb about what image sizes you need for certain outputs. 2.1 On the Internet, images are displayed on screens that have resolutions of 1280 x 1024, 1152 x 864, 1024 x 768, 800 x 600, or 640 x 480. A few years ago, a 1024 x 768 monitor was unusual so most people in the industry settled on assuming that the lowest common denominator for screen sizes was 640 x 480 or, at best 800 x 600. For this reason, images to be e-mailed or posted on the Instructional Technology, Educational Foundations and Leadership 2
Internet should be of similar or smaller sizes no more than 800 pixels wide. This ensures that the images will display correctly on the vast majority of computers. If an image is too large, users will not be able to see it all at once and will be forced to scroll around it. If too small, details will be lost. Size also affects the speed with which images travel over the Web. Smaller (and more compressed) images travel faster so people see them more quickly. 2.2 For laser and inkjet printers you need between 200-300 image pixels per inch. If your camera can capture images that are 2400 pixels wide, you can expect good results when prints are up to 12 inches wide. 2.3 When images are printed on a printing press, as they might be for a catalog, the pixels in the image are printed as dots on the page. Photographs that are to be printed on a press are first digitally "screened" to break the image up into dots. If you are ever involved in this process your print shop will give you specifications for your images 3. Image File Formats Once you create a graphics document, you will need to choose a file format to save this photo. Mostly, graphics files tend to be very large. Thus, each file format employs a compression technique. Below are the file formats that are most commonly used. 4.1 BMP (.bmp): Bit-mapped is suitable for drawings. Other resource: http://en.wikipedia.org/wiki/bmp_file_format 4.2 GIF (.gif): GIF presents Graphics Interchange Format which has fast transfer over the Internet and supports graphics and animation. Other resource: http://en.wikipedia.org/wiki/gif 4.3 JPEG (.jpg): JPG presents Joint Photographic Experts Group. JPG is an effective storage of photographs and it is a standard for displaying images on the Web. Other resource: http://en.wikipedia.org/wiki/jpeg 4.4 TIFF (.tif): TIFF represents Tagged Image File Format. It is a bit-map cross platform and application format. But the files have larger size. Other resource: http://en.wikipedia.org/wiki/tiff 4. Tricks of scaling images in Photoshop: Generally, the sacrifice in image quality won't be worth the savings in file size. It's better to manipulate the image in Photoshop or a similar application to reduce the number of colors or physical size of the image, thus reducing the file size. Using width/height to decrease the image's size means the server still loads the original graphic file. It would be better to use an image editing program to resize the image. Using width/height to increase the image's size will stretch your image, making it appear pixelly. Resizing with width/height can distort the image unless you're careful to maintain the proportions of the original image. Use Photoshop to resize images: After opening your image file in Photoshop, 1. Go to Image > Image Size 2. Give values for Width and Height in the pop-up screen. 3. A recommend image size for a web image is no larger than Width: 480 pix and Height: 360 pix. Instructional Technology, Educational Foundations and Leadership 3
Use thumbnail pictures to save loading time: A good use of resizing is creating a thumbnail picture that's clicked to link to the larger image. Browsers store images in a memory cache, so the image is only loaded once. Although initially it might seem inefficient to load a large image that's been scaled to a smaller thumbnail size, you avoid loading two separate images. Once the graphic is loaded for the thumbnail, it won't have to load again for the full size image. This memory cache is also a reason to use the same picture over again on your web site since it doesn't need to reload. For more detail use of Photoshop, please refer to the Photoshop Instruction that will be uploaded in the second week of MP2. Note: You can also use the instruction for Photoshop (Adobe Photoshop CS3 Classroom in a Book ) provided by Safari Books (http://safari.oreilly.com/9780321492029) to help you learn more advanced functions of Photoshop. Rather than purchasing the texts, you will need to first download the examples that the book refers to from the CD. To download the example files, follow these steps: Click the link for the Table of Contents for the book from your bookshelf. In the blue menu bar below the book cover image, click the Examples link A new window will open to the FTP site. Choose the zip file, called PSCS3_CIB.zip, and save it to your hard drive. The download will take approximately one hour on a high speed (DSL or Cable) connection and much longer on a dial up connection, so please plan accordingly! Create a folder on your hard drive and name it so that you will remember it is the folder for the lessons from this book (for example, you could call it "Photoshop Textbook Files"). Extract (unzip) the PSCS3_CIB.zip file to this directory. Be sure to select the option to Use folder names so that your folders for the lessons will match the instructions in the book! II. Introduction of Photoshop Here we will learn some basic editing functions of Photoshop. The version we use in the computer lab is Photoshop Element 5.0. Let s first know a little bit about Photoshop: 1. What Photoshop does and is used for: a. An image-editing program designed to manipulate digital photos and any scanned image. Image must be digitized in some form to work on. b. Powerful professional program- that is deep and takes time to learn c. Controls and tools are fairly intuitive though d. Current version is CS4 2. Introduction of the Interface Instructional Technology, Educational Foundations and Leadership 4
a. Interface: You can open the program click on the Photoshop icon in the Start-Program-Photoshop (PC) list. Tools are in tool bar at left. There allow you to manipulate the image. At the top of the interface are drop-down menus. These include File, Edit, Image, Layer, Select, Filter, Analysis, View, Window, and Help. Also various menu palettes can appear on screen by going to the Window menu at the top and selecting whichever menu you d like to see. For example you could choose Layers and the layers palette would appear. There are over 20 types of palettes. If your view of Photoshop does not resemble the screen capture below, then close Photoshop. This time as soon as you launch Photoshop hold shift+alt+control. This restores preferences to default settings. b. Toolbox: Along the left side of the screen above is the toolbox, which contains all of Photoshop's tools, as well as several other functions. These tools include several kind for making selections, crop, manipulation (dodge, burn, etc), retouching, move, type, zoom, and many others. Anytime you see a small triangle in bottom left of the tool that means there are other tools in that particular box. To see those you click and hold on the triangle and a fly out menu appears showing the other tools. The color proxies indicate the foreground and background colors (you can also choose colors by clicking on them), and the two icons surrounding the proxies allow you to set the colors to the default black foreground and white background, and to swap the foreground and background colors. Directly below the proxy icons are the Quick Mask mode buttons Instructional Technology, Educational Foundations and Leadership 5
c. Basic Image Adjustment-Level: After opening an image via File-Open, you can adjust the color level of the image. Here we are going to work with an image and adjust the lightness/darkness of it and adjust the contrast (difference between the darkest and lightest tones). In order to do so, you will go to Image-Level (Control-L) to open the Levels panel. Upon opening the levels dialog you will see a graph-like image. This is called the histogram and it graphically represents the range of tones in your image and the amount at any given point. The left side is the shadow area, the middle is the mid-tone area, and the right side of the graph is the highlight area. a) How to lighten and darken an image: When the image is first opened up. Check to see if the shadow and highlight sliders are touching the edges of the raised areas of the histogram. If not they should be moved inward. This will place the shadow and highlight correctly. The middle slider can be moved left or right to lighten or darken the image. b) How to adjust contrast: Contrast can be increased by moving the shadow and highlight sliders toward the inner part of the histogram. Make your adjustments slowly. Instructional Technology, Educational Foundations and Leadership 6
Contrast can be decreased by adjusting the output sliders, which are below the input sliders. This feature is not used very often. c. Basic Image Adjustment-Curves: You can use Image-Adjustments-Curves to adjust the curves of the image. The curves function is similar to Levels but it offers more precision. Tones in the image are represented on another graph-like interface. The diagonal line that appears is how the image looks when opened. The line can be manipulated to lighten or darken the entire image or in specific areas by selecting points on the line and dragging them up or down. The lower left area of the line represents the shadow areas in the image. The center of the graph is the midtones and the top right area is the highlights. a) How to lighten/darken & change contrast: To lighten or darken the entire image click on the center of the diagonal line and drag up or downward respectively. To lighten or darken specific areas in the image- click on the line to create points to "lock" those areas down. Then drag the area you wish to lighten or darken. d. Color Correction: You can Use of Levels and Curves to correct color. Levels and curves are also powerful tools in the area of color correction refers to getting the "correct" color in the image. To do color correction one selects a color channel from the channels menu at the top of the dialo box. You can choose red, green, or blue. a) Open Image of Woman in Green Instructional Technology, Educational Foundations and Leadership 7
Instructor: I-Chun Tsai b) Inside the Levels dialog are 3 eyedroppers -from left to right these are the shadow, midtone, and highlight eyedroppers. If I know an area in this image is white I can click on it with the right or highlight eyedropper and instantly the green color cast is gone. c) Select hightlight eyedropper (one on far right) d) Click on area of image that you know should be white (In this case the woman's' shoe.) e) Demo color correction with use of sliders in Levels with RGB channels: If you open the levels dialog with the same woman with green color cast you can color correct with the red, green, and blue channels using the histogram. The procedure is to simply open the Red channel and slide the highlight slider to the left until it touches the histogram data. Then you repeat this using the green and blue channt:~s and the image is color corrected. d. Repairing an image with various tools- Rubber stamp, healing brush a) The healing brush tool does just as the name indicates- it heals. If you have say a blemish on a persons' face and you want make it disappear this is the tool to use. Instructional Technology, Educational Foundations and Leadership 8
You start by choosing the tool in the toolbox. It looks like a band-aid. You select the size of the brush by clicking on the right or left bracket keys. Select a brush that is a little bigger than the blemish. Position the cursor (actually a circle) over an area near the area to be retouched and hold down the option key (alt key) and click. You are selecting the color that is similar to the blemish area. This will be the source of the repair pixels. Then position the brush over the blemish and click and drag. Photoshop blends the pixel tone and texture automatically. b) Demo correction of pimples: (Class opens image of Girl in white and uses healing brush) Instructional Technology, Educational Foundations and Leadership 9
Instructor: I-Chun Tsai c) Red eye removal Demo Zoom in on eyes Use selection tools to select the red eye area Use shift key to select multiple areas Ctrl + J to make copy of selection in a new layer Select the new layer and use Ctrl + U (Layer/New Adjustement Layer/Hue and Saturation) Change the Red: Hue and Saturation Change the Magentas: Hue and Saturation Use Blur tool to make the color changed blur d) Changing colors of an individual object Open Sunflower Image Go to Image Menu -Adjustments-Replace Color Click on eyedropper Click on sunflower petals Click on + or - eyedropper to add to or take away from selection e) Drag hue slider to change color Open Sunflower Image Go to Image Menu -Adjustments-Replace Color Instructional Technology, Educational Foundations and Leadership 10
Instructor: I-Chun Tsai Click on eyedropper Click on sunflower petals Click on + or - eyedropper to add to or take away from selection Drag hue slider to change color e. Introduction of other tools: Clone Stamp - The clone stamp uses information starting at your target area, and simply copies exactly what is there to wherever you are marking. There will be a small + whatever area you are getting the information from. Using the clone stamp tool is much like using the "Healing brush" in that before you can do anything, you must first select your target area. To do this select your brush size either on the top bar below the "File, Edit, etc" menu or use the bracket buttons ( [ and]) that reside to the right of the "P" on your keyboard. Once you have your brush size selected (which can be changed after selecting your target area) press and hold the "alt" button and simply click once. Let go of the "alt" key and move your brush to where you would like to place the information and begin cloning. You can change the opacity (how opaque your marks are) and the "hardness" of your marks (you can soften the edges so they're more "blurry" around the edges of your marks, or make the edges "harder", or more crisp) right next to where you change the brush size. Dodge - In a darkroom, dodging is spot correcting for overexposure. If there is an area of a photo that is too dark but everything else is the correct exposure you can correct that through dodging. The same goes for photoshop. To use the dodge tool select the icon that looks much like a black lollipop (a circle with a stick). It may be hidden under the Bum icon (looks like a hand making a circle with the thumb and forefinger) or the sponge tool (looks like a sponge). Again, at the top underneath the "File, Edit, etc" menu you can adjust the brush size and harness. You can also select the "range", which is what tones of the image it effects (Shadows/Midtones/Highlights) and the "Exposure", which is how fast it is affected. A lower "Exposure" works slower, and a higher exposure percent works much faster to lighten the area you are painting. Burn - Burning works exactly like the Dodge tool but does the exact opposite. Burning "bums" in any areas of the picture that are underexposed/too light. Its icon looks like a white hand making a circle with the thumb and forefinger and, if not on the tool bar, can be found under the "Dodge" or the "Sponge" tools. Sponge - The sponge tool works just like the bum and dodge tools, but for color.under the "File, Edit, etc" menu you can select to "Saturate" or to intensify the color or to "desaturate" or to decrease the intensity of the color. Increasing the "flow" percentage increases how fast the photo is effected. If not on the tool bar, can be found under the "Dodge" or the "Bum" tools. Sharpen - This tool looks like a triangle, is under the same button as the "blur" tool, and is pretty much useless. If a photo is blurry, you might want to take a new one (if possible). Blur - If you want less depth of field (lessen the amount of the picture that is in focus) one way to do this is to use the blur tool. It looks like a white water drop or tear drop. You can change the brush size, mode, and strength at the top similar to the other tools stated above. Instructional Technology, Educational Foundations and Leadership 11
Crop - The crop tool is used to crop and resize images. You can either use the tool as is, or insert the "width", "height", and "resolution" options into the top menu to control the dimensions and size of your image. Be careful to not lose image quality through making small pictures larger. Remember: Web images should be set to either 72 pixels per inch, or 96ppi depending on the monitor resolution. The smallest monitor is 800x600px, so no images should ever be larger than that for the web unless specified. Print images that are to be sent to press are typically 300ppi. Resizing an Image - a) Go the the top menu Edit: Image: Resize Image b) You can resize the image though pixels, inches, or other measurements. To select these, go to the drop down menus and select the measurement you would like to use. c) Do not use the resize canvas unless you want your picture to stay the same, just expand or contract the canvas itself. Instructional Technology, Educational Foundations and Leadership 12