Copyright Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)
What is Adobe Photoshop 7.0?
Photoshop, now up to version 7.0, is the leading professional image-editing program, released by Adobe. Photoshop is useful for both creating and editing images to be used in print or online. Easy to use, but full of high-quality features, Photoshop is the best choice for any image manipulation job.
Opening Adobe Photoshop 7.0
Click the "Start" menu and go to the "Programs" folder. You will see an "Adobe" folder with "Photoshop 7.0" inside; click this icon.
Photoshop will initially open with a tool panel and a variety of windows, all of which look incredibly intimidating at first. You can ignore the right-most set of windows for now. First, lets familiarize ourselves with the main menu.
File create new images, open pre-existing images, print, exit the program, etc. Edit undo, copy, paste, cut, preferences, basic image manipulation, etc. Image change the image or canvas size, rotate, adjust brightness & contrast, etc. Layer Create / delete layers, merge layers together, layer effects, etc. Select Adjust the selected area of your image Filter Apply filters and effects to your images View Zoom in and out of your images Window Open or close different windows within Photoshop
Creating a New Canvas / Image
Go to the File menu and select New (or press Ctrl+N).
A window will appear asking you how large you would like your canvas (or working area) to be. Pick a size large enough to work with; you can always crop your image later, so its better to have too large an area than too small an area. For comparisons sake, your monitors total space is probably 1024 x 768. Make your decision, and click OK.
Your canvas will open as a blank, white window. The top of it will say Untitled (until you save it), and will be at 100% (unless it is too large to fit on the screen at once, in which case it may appear at 66.7% or smaller).
Opening a Pre-existing Image
Go to the File menu and select Open (or press Ctrl+O).
Find the image on your computer that you wish to edit, and click Open. Your image will open in a new window within Photoshop.

Editing an Image

Once you have an image created or opened, you can edit or draw on top of it with Photoshops Tools window, which is the long, thin window that is automatically open on the left side. Here is a break down of all the tools contained on this bar:
1. Marquee Tool used for selecting areas of an image 2. Move Tool used for moving an image to a different area of the canvas 3. Lasso Tool used for selecting areas of an image that may not necessarily be comprised of straight lines 4. Magic Wand Tool used for autoselecting large areas of an image that are similar in color 5. Crop Tool used for reducing the image to a certain area (cropping) 6. Slice Tool used to slice an image into different sections; generally used for the creation of images for a web page design 7. Healing Brush Tool used to fix imperfections in an image by copying other pixels from the image. The Healing Brush tool will also match the texture, lighting, and shading to perfectly match the are you are fixing 8. Brush Tool used with the mouse to simply draw lines on your image
9. Clone Stamp Tool used to clone or copy one area of an image to another; first hold Alt and click an area of the image to copy, then click on a different area to copy it there 10. History Brush Tool used to copy and draw a pre-existing image in different artistic styles 11. Eraser Tool used to erase certain areas of an image 12. Gradient Tool used to create gradient fills for an image, of any color 13. Blur Tool used to blur or blend areas of an image 14. Dodge Tool used to uniquely adjust the brightness and contrast of an image 15. Path Selection Tool used merge overlapping components into a single component 16. Type Tool used to place text on an image 17. Pen Tool used to draw lines and curves with better precision 18. Rectangle Tool used to draw rectangles and other polygons 19. Notes Tool used to leave notes for yourself on your image 20. Eyedropper Tool used to select and match specific colors 21. Hand Tool used to quickly view different areas of an image 22. Zoom Tool used to zoom in and out of an image 23. Set Foreground / Background Color used to set the foreground (front) and background (back) colors of an image; can also be used to change the colors of text, etc. Click on the boxes to change the colors (a new window will appear). 24. Edit Modes used to switch back and forth between modes 25. Switch Screen Modes used to switch between full screen and standard screen modes 26. Jump to ImageReady used to easily launch the ImageReady program

Understanding Layers

One of Photoshops most powerful features is the ability to create and use multiple layers within the same image. A layer is literally what it sounds like: one layer on top of another, all of which can be edited independently of each other and laid on top of or beneath one another, and then later combined to form a single, flat image. When you first create an image, you will be working with the Background layer. You cannot always use all effects on a background layer, so you may wish to start working directly with normal layers. To create a new layer, click the Layer menu, and pick Layer from the New menu (or click Shift+Ctrl+N).
In the new window that pops up, click OK. Now look down in the bottom-right of the screen to the lower-most window, which we havent looked at yet. It will have three tabs on it: Layers, Channels, and Paths. Well be staying on the main Layers tab, for now. It should look something like this:
You will notice that Layer 1 is above Background in the window. This means that anything thats on Layer 1 will take priority over anything in the Background layer. Things in the Background layer will be obscured by things in Layer 1. Why would you want to do this? You can switch back and forth between layers to move items independently of items in other layers, allowing you to lay things out exactly as you want. So what are all these options in the layers window?
1. Paintbrush Symbol This symbol (and the blue shading of the layer) notes the currently active layer 2. Show / Hide Layer When the eye icon is visible, the layer is displayed in your project. If the eye is clicked, then the layer is hidden but not deleted. 3. Link Icon Indicates if the layer is currently linked to another layer. When linked, layers act locked together (and will move with each other, accordingly), but still remain separate layers. Layers can be linked together by selecting one layer, and then clicking the boxes in the other layers to display the Link icon (number three on the above list and image). 4. Background The Background is technically not a layer, however, it can be edited. It is the bottom-most portion of the image. 5. Layer Each layer has its own name (default is by numbering). Click a layers name to edit on that layer. 6. Text Layer Adding text creates a new text-specific layer.

7. Effects When you add effects to a layer, a sub-menu appears with that layer listing the effect applied to it. Double-click an effects name to bring up that effects menu to make adjustments. 8. Add a Layer Style By picking an option from this menu (such as Drop Shadow, Inner Glow, or Bevel and Emboss), you can apply special effects to a layer. 9. Add a Mask Masks are used to hide pixels on a layer in order to view the rest of the image. Layer masks are either a black or white background color. The default color is white, which lets pixels be seen, while black hides pixels. 10. Create a New Set By making a new set, you can create a separate folder for layer storage. 11. Create New Fill or Adjustment Layer The options in this menu allow you to change the color properties and dimensions of a layer. For example, you can make a layer lighter or darker, add a gradient (a blending of two colors), or invert the entire layer. 12. Create a New Layer Clicking on this icon creates a new layer. You can name your layer in the text box that appears and position it in the palette. 13. Delete a Layer Deletes the currently selected layer. You can also drag a layer to the trash. 14. Opacity Use this to adjust a layers opacity (its transparency). Some notes about layers: Layers can be repositioned in different orders in the Layers palette by clicking on a layer and dragging it to a new position in the palette. To make a layer appear on the top-most part of the image, drag it higher up on the list. Do the opposite to position a layer at the bottom-most area of an image. Only a selected layer can be edited. To select a layer, click on the layer name in the palette. You can only work with layers in a *.psd file (Photoshops native format). If you want to modify a *.gif or *.jpg file (or any other type of image file) with layers, copy and paste that image into a new, blank Photoshop canvas.
Switching Back and Forth Between Layers
The layer thats selected under the Layers tab will be the one changes are made to when working on the canvas. If you wish to work on a different layer, click the name of that layer. Remember, if you want to bring a different layer to the front of the image, click and drag it above or below to where you want it.

Cropping an Image

If an image is too large and you would like to cut it to just focus on one section of the image, you can crop it to that size and area. Select the Crop tool, and click and drag around the area you want.
You can resize the area (or rotate it) with the mouse by clicking any of the corners. When youre done, just click over to any other tool and a window will appear asking you if youd like to crop the image. Click yes, and the image will be reduced to the area youve specified.

Resizing an Image

If you dont want to crop your image (meaning you want the ENTIRE image, just at a smaller size), you can resize your image to any dimensions you wish. Select Image Size from the Image menu.
The default in Photoshop is to keep image resizing at Constrain Proportions. This means that if the height is changed, the width will be changed at the same ratio. This keeps your image looking approximately the same, only at different sizes. If
you wish to change this, just un-click the Constrain Proportions check box at the bottom of the Image Size window.
You can change the image size either by pixels or percentages. Use either you wish to either enlarge or reduce the size of your image (keep in mind that enlarging images will reduce the quality).

Moving an Image

You can move an image to any area of the canvas you wish. Select the Move tool, and click and drag the image to any area of the canvas you wish.
Selecting / Deleting a Part of an Image
Choose the Marquee tool, and click and drag around a part of an image. A rotating, dotted line will surround that area. To delete this section that youve selected, hit the Delete key on your keyboard.
The Magic Wand can select a larger area of an image by grabbing similar looking pixels and grouping them together. Select the Magic Wand tool and click an area of an image. It will select a large portion of the area which you can move, delete, etc.

Adding Text

Click the Text tool on the tool bar and click in your image where youd like to add text.
The text will appear on top of the image, and it will be on its own new layer. You can change the font, style, size, anti-aliasing, and color of your text on the menu directly below the main Photoshop menu.

Altering Your Images

Photoshops most powerful aspect is its ability to edit and manipulate images easily and with professional quality. The second section of the tool menu contains tools that specifically help you to edit your images. When you click any of these tools, Photoshops sub-main menu will change to reflect new options available to you. Most will look something like this, or very similar:
1. Name The name of the tool youre using. 2. Brush Picker Here you can select the diameter, hardness, and spacing of the brush / tool you are using. 3. Mode Effect mode 4. Opacity The transparency of the tools effects. 5. Flow The flow rate of the stroke. 6. Airbrush Click to enable airbrush capabilities with the tool. Brush / Pencil Tool The Brush tool can be right-clicked to also show the Pencil tool as an option. Both are very simple tools that allow you to directly draw on top of an image. Select a color with the Foreground Color option on the tool bar, and select a brush size from

the tools sub-main menu, above. Click and drag across an image to draw on top of it.
Clone Tool The Clone tool will copy pixels from one part of an image and copy them to a new part of the image. The Clone tool is most useful in situations such as removing blemishes from a face in a photograph, clearing a few clouds out of a bright blue sky, etc. Choose the Clone tool. Hold the Alt button on your keyboard, and click in an area of the image that youd like to copy. Now click elsewhere in the image, and move the cursor around. The image will clone itself to that second area.
Eraser Tool The eraser simply deletes sections of an image. Click the Eraser tool, and click and drag around your image. The eraser will erase the image to whats set as the Background color.
Gradient / Paint Bucket Tool The Gradient tool can be used on its own, or right-clicked to also select the Paint Bucket tool.
A gradient is a horizontal fading of colors, most commonly used in the creation of banners for web pages. Select the Gradient tool, and go to the sub-main menu for a drop-down of available gradients. The default is the most common.
Once youve selected which gradient you wish (and a color in the Foreground color tool), just click and drag across your image. The direction you drag (left to right, right to left, etc.) determines the flow of the gradient.
The Paint Bucket lets you fill in a large section with the same color. Select the Paint Bucket by right-clicking the Gradient tool, and click in an area of your image. It will fill with the color selected as the Foreground color.
Blur Tool The Blur tool is useful for covering up small distortions in an image by blending the surrounding pixels together. To blur something, select the Blur tool, and click and drag around the area you wish to blur.

Rotating an Image

You can rotate and flip your image in any direction you wish. In the Rotate Canvas list under the Image menu, theres a wide variety of options to choose from.
If you select Arbitrary for a rotation, a new window will appear asking you for the direction (clockwise or counter-clockwise) and the degree of the rotation.

Drawing Shapes

While Photoshops main power is in manipulation of images, its also possible to draw your own (as seen with the pencil and pen tools). The Rectangle tool (and all of its sub-tools) allows you to draw shapes on a canvas. To draw a simple rectangle, pick a Foreground color (which will be the fill color for the shape), select the Rectangle tool, and click and drag on the canvas until its the size you wish.
Note that drawing a shape will create a new layer. You can draw a wide variety of shapes with the Rectangle tool and its sub-tools, including the Custom Shape Tool, which gives you even more options. Select the Custom Shapes Tool (by right-clicking the Rectangle tool), and look through your options in the drop-down box from the sub-main menu.

Your choices include word bubbles, arrows, and even shapes that dont fill themselves in with a color.

Eyedropper Tool

When working with images, you may find that you want to reselect a color youve used, but arent sure exactly what color it is. You can use the Eyedropper tool to reselect that exact color for you. Select the Eyedropper tool, and click anywhere on an image that has the color you want to select.
The Foreground color will change itself to the color youve selected.

Zoom Tool

If you find that you need to zoom in or out of your image for any reason (for example, to be more precise in deleting areas), you can use the Zoom tool. Click the Zoom tool (it looks like a magnifying glass). If you click once on your image, it will zoom to double its size (100% to 200%, and so on).
If you right-click, you can select the Zoom Out, which will reduce its size. Note that this doesnt actually change the size of the image. It simply changes your view of the image on the canvas.

History

One of Photoshops most powerful and useful abilities is the option to go back in the history of your image. This means that at any point, you can go back to a previous version of your image. This is particularly useful if you find youve made a mistake several steps back. Youll notice that the History window (which can be opened via the Windows >> History menu if its not already open) lists all of the steps youve made in your image.
To go back to any of these instances, just click the name of one of the steps, and your image will go back to how it previously looked at that point in time.
Brightness & Contrast
Sometimes when working with images, you may need to adjust the brightness and/or contrast (especially with scanned images). Photoshop makes this very easy. Select Brightness/Contrast from the Adjustments >> Image menu.
A new window will appear allowing you to slide the brightness and contrast any way you wish.
The Brightness/Contrast command lets you make adjustments to the overall tonal range of an image. Adjustments made in here will affect every pixel in your image, unless a selection is made beforehand.

Layer Styles

You can do much more with layers other than piling images on top of each other. Once you have added images or text to a layer, you can add distinctive styles to them, making them stand out even more. Once youve added an item to a layer (such as text), click the Add a layer style button in the Layers window. A list of styles will appear which you can add to your layer.
The most common layer style you will see and use is the traditional Drop Shadow. Click Drop Shadow to bring up the Layer Style window, which will automatically open to the Drop Shadow section.

Opacity refers to the transparency of the shadow (how well can you see it / see through it). The Angle is the angle at which the imaginary light is coming from to create the shadow. Distance is the amount of space near or away from the object or text the shadow appears. Spread refers to the thickness or solidity of the shadow. Size is, simply, how big the shadow is. Experiment with the different settings. Youll notice that as you adjust these settings, your image on the canvas will take on the changes. This is just a preview; none of the changes will actually take effect until you click OK.
There are a wide variety of layer styles. Experiment with the different layer styles to find one (or a combination of some) that suit your needs. For example, Inner Glow will create textures and colors within your text or objects, while Outer Glow will do the same outside your objects (similar to a Drop Shadow).

Filters

Photoshop has a wide variety of filters you can apply to your images. They include obvious ones such as blurring and sharpening, but also very advanced ones such as ripples, distortions, and rendering clouds. You can browse through the available filters by selecting the Filters menu.
Play around with the available filters, and remember that you can undo your actions at any time with the History window.

Saving Images PSD Format

If you are working with a very complex image (lots of layers, filters, etc.), you may want to think about saving it. Saving as a PSD file (Photoshops native format) allows you to open it up again with all the layers and such intact. If you save it as another type of image, Photoshop will flatten the image. To save your image as a PSD, just select Save from the File menu, and select a place on your hard drive or disk to save it.
Saving Images For the Web
On the Internet, there are two file types for images on websites that are the most predominant: GIF (*.gif) and JPEG (*.jpg). The GIF format is geared towards images that do not need to be viewed with a large amount of colors. The standard GIF file will be of 256 colors or less. This is perfect for the Internet, and more specifically, images that will appear directly on a web page. The JPEG format is geared toward images of a real world or natural sense, such as photographs. JPEG images are generally of thousands of colors or grayscale. JPEG can hold up to 16 million colors. High quality, larger images stored in a websites Image Gallery may be saved as JPEGs. Photoshop comes with features specifically geared to optimize pictures for the web.

Select Save for the Web from the File menu.
Saving as a GIF File Underneath Settings, select GIF from the drop-down menu. One of the most important features in this menu is the Colors setting. The more colors your image has, the more colors you should allow your GIF to have. However, since you want to create optimized images for the web, it is best to use as little possible color as possible, while still saving a clear image. If your image has very few colors, you should change the color setting to reflect the small number of colors. The small the number of colors, the small the file size the GIF will have. If you want, your image can have a solid outline color. You can choose this by going to the Matte selection, and picking a color. Other options in this menu need not be changed. These are standard defaults for saving GIFs. When you are ready, click Save and save the image by giving it a file name.
Saving as a JPEG File Underneath Settings, select JPEG from the drop-down menu. Go to the dropdown menu with JPEG High displayed. There you can determine the quality of the image for the web. Naturally, higher quality images will have a larger file size. It is not necessary that images be extremely high quality. Usually, Medium is a good
setting to choose. To refine the quality of the image, use the Quality setting. Here, you can save the JPEG as a percentage of the original images quality. For example, 50% would be half the quality of the original image. When you are ready, click Save and save the image by giving it a file name.

Web Project

Curriculum Guide

Adobe Photoshop 7.0

Module 2

Adobe Education

Adobe Web Project

PHOTOSHOP 7.0

Adobe Photoshop: The Movie Project
The mood of the meeting is very upbeat. People are laughing, talking fast; spattering their conversations with nice job and totally awesome. You are quite a hit at this gathering. Its been several weeks since you started your job as Director of Marketing for Palisades Pictures, one of the most profitable independent studios in Hollywood. Over the years, theyve had such hits as Konstruction Kombat, Two Miles Down, and Deadly Instructions. Youve come on board just prior to the release of Lost and Found in Wunderland, a spy thriller revolving around 3D animation and the dangerous worlds it creates. What youve been doing up until now has been the initial designs for the posters and the Web site. All of your work is on display at this meeting and now everyone wants more, more, more. Can you add Lauras picture in front of the car chase? The explosion isnt big enough. The animation needs to be faster. What about that scene in act two? Are you going to include any of that on the Web? The Managing Director, who is a person larger than life, cuts in, One thing at a time, people, one thing at a time. The room hushes. The Managing Director just smiles and continues on, We only have two more weeks before we have to see this stuff out there, so you cant have everything just choose what is the most important. Lauras car chase! The explosion! The animation! Cut! shouts the Managing Director. Heres what well do. Lets enhance some of the pictures for the poster, and then reuse those same pictures for the Web. I think for the sake of time we should also use them in our marketing as well. Margaret, you were saying something about banner ads, and rolling over them or something like that. Margaret clears her throat. Yes, we need to create standard banner ads. We have deals with several Web sites, such as the portals and those movie sites. We need something interactive for people to click over to our site. The Managing Director points to you. Interactive graphicswe have the right person for the job right here.
Adobe Web Project: Photoshop 7.0, The Movie Project

Welcome

Adobe Photoshop 7.0 software introduces the next generation of image editing with powerful new features that offer something for every user. Photoshop 7.0 delivers the broadest and most productive toolset available. The Photoshop tool (including Adobe ImageReady 7.0) allows students (and teachers) to explore the reaches of creativity, work at peak efficiency, and achieve the highest-quality results across almost all media. This Adobe Web Project introduction to Adobe Photoshop and Adobe ImageReady will afford your students an understanding of the precision and control over their images, plus the flexibility to produce anything from small designs to large projects. You will be introduced to tools, palettes, drawing and working in Photoshop, colors, and Web publishing. The purpose of Lesson One is to prepare you to use the basic tools of Photoshop and to apply them in preparation of basic Web design. You also will work toward a Final Project in Photoshop and a summative Web-based project at the conclusion of the four Lessons. As an educator, you will appreciate that Adobe Photoshop also provides a consistent work environment with other Adobe applications including Adobe Illustrator, Adobe LiveMotion, and Adobe GoLive. Adobe Web Project ties these four powerful tools together.

Using the View menu

Enlarge or reduce the view of an image by using the View menu and doing one of the following: Choose View > Zoom In to enlarge the display of the image. Choose View > Zoom Out to reduce the view of the image.
Each time a Zoom command is chosen, the view of the image is resized. The percentage at which the image is viewed is displayed in the Title bar and in the lower left corner of the document window.
As a variation, you can also use the View menu or hand tool to fit an image onto your screen by doing the following: 1. 2. 3. Choose View > Fit on Screen. The size of the image and the size of the monitor determine how large the image appears on-screen. Double-click the zoom tool ( Double-click the hand tool ( ) to return to a 100% view. ) to fit the image on the screen.

Scrolling an image

Important! You can use the hand tool to scroll through an image that does not fit in the active window.
If the image fits in the active window, the hand tool has no effect when you drag it in the image window.

Using the Info bar

The Info bar is positioned at the lower left corner of the application window (Windows) or the document window (Mac OS). In Photoshop, you can choose from a menu to display information about a documents size, profile, scratch size, efficiency, timing, and current tool.
In ImageReady, you can choose to display the original and optimized file size, optimized information, image dimensions, watermark strength, undo/redo status, original image in bytes, optimized image in bytes, the amount of optimized savings, and download times. You can also use the ImageReady Info bar to change the view of an image.

Palettes

Palettes are used to monitor and modify images.
By default, palettes appear in stacked groups on the right side of the screen. They can be moved as desired.
Showing or hiding palettes
Window > Show displays the selected palette at the front of its group. Window > Hide conceals the entire group.
Changing the palette display
It can be productive and fun to reorganize the work space in various ways. Experiment with several techniques: Activity Hide or display all open palettes and the toolbox Hide or display the palettes only Make a palette appear at the front of its group Action Press Tab Press Shift+Tab Select the palettes tab
Take your time to open/close palettes as well as to change the palette display until you are comfortable with palettes.
Additional Skill-Building Activities
To the Teacher: This is an optional activity for your class depending on the skill level of your students and the time you have available. However, it may be useful as a brief review of online Help for all skill levels. Online Help has complete information about using palettes, tools, and the application features. Adobe Photoshop online Help includes all pertinent documentation plus keyboard shortcuts, full-color galleries of examples, and more detailed information about some procedures.

Lesson Two: Working with Images
This section of Adobe Web Project is for the advanced beginning to intermediate student. You are assumed to have a basic-level understanding of the use of software for design and illustration as well as a comprehension of software interface components. You are assumed to have a familiarity with the Web and online resources. In addition, you must have mastered the basic Adobe Photoshop skills presented in Lesson One.
Photoshop is the industry-standard program that offers sophisticated manipulation of digital images and artwork. To create effective artwork, however, you must understand some basic concepts about how to work with digital images, colors, and layers. This goal of this Lesson is to introduce you to graphics and how to work with images. Finally, you will be introduced to creating and formatting type. Lesson Two is designed to be taught in approximately two to three class hours, depending on the teachers pace of instruction and the prior knowledge of the students.
In this lesson you will learn
about bitmap images and vector graphics about image size and resolution to open and change images to import images to work with color modes to create and work with layers to create and work with type
Key Definitions for Lesson Two
Word Bitmap images Definition Bitmap imagestechnically called raster imagesuse a grid of colors known as pixels to represent images. Each pixel is assigned a specific location and color value. Bitmap images are the most common electronic medium for continuoustone images, such as photographs or digital paintings, because they can represent subtle gradations of shades and color. Bitmap images are resolutiondependentthat is, they contain a fixed number of pixels. As a result, they can lose detail and appear jagged if they are scaled on-screen or if they are printed at a lower resolution than they were created for. Vector graphics are made up of lines and curves defined by mathematical objects called vectors. Vectors describe an image according to its geometric characteristics. Vector graphics are resolution-independentthat is, they can be scaled to any size and printed at any resolution without losing detail or clarity. As a result, vector graphics are the best choice for representing bold graphics that must retain crisp lines when scaled to various sizesfor example, logos. The smallest discrete element of an image or picture on a CRT screen (usually a single-colored dot); the greater the number of pixels per inch the greater the resolution. An imitation, representation, or similitude of any person, thing, or act, sculptured, drawn, painted, or otherwise made perceptible to the sight; a visible presentation; a copy; a likeness; an effigy; a picture; a semblance. The number of pixels or dots displayed per unit of length on the monitor, usually measured in dots per inch (dpi). Monitor resolution depends on the size of the monitor plus its pixel setting. A color mode determines the color model used to display and print images. Photoshop bases its color modes on established models for describing and reproducing color. Common models include HSB (hue, saturation, brightness); RGB (red, green, blue); CMYK (cyan, magenta, yellow, black); and CIE L*a*b*. Photoshop also includes modes for specialized color output such as Indexed Color and Duotone. ImageReady uses RGB mode to work with images. A new image in Photoshop or ImageReady has a single layer. In Photoshop, this layer is called the Background or Layer 1. You cannot change the position of the background layer in the stacking order (it is always at the bottom of the stacking order); nor can you apply a blending mode or opacity to a background layer (unless you first convert it to a normal layer). A background layer can be converted to a normal layer by double-clicking on it in the Layers palette. Layers allow you to make changes to an image without altering your original image data. For example, you might store photographs or elements of photographs on separate layers and then combine them into one composite image. Where there is no image on a layer (that is, in places where the layer is transparent), you can see through to the layers below. All layers in a file have the same resolution, start with the same number of channels, and have the same image mode (RGB, CMYK, or grayscale).

How large an image appears on-screen depends on a combination of factorsthe pixel dimensions of the image, the monitor size, and the monitor resolution setting. The examples above show a 620- by 400-pixel image displayed on monitors of two different sizes and resolutions.

Image resolution

The number of pixels displayed per unit of printed length in an image, image resolution is usually measured in pixels per inch (ppi). In Photoshop, you can change the resolution of an image; in ImageReady, the resolution of an image is always 72 ppi. This is because the ImageReady application is tailored to creating images for online media, not print media. In Photoshop, image resolution and pixel dimensions are interdependent. The amount of detail in an image depends on its pixel dimensions, while the image resolution controls how much space the pixels are printed over. For example, you can modify an image's resolution without changing the actual pixel data in the imageall you change is the printed size of the image. However, if you want to maintain the same output dimensions, changing the image's resolution requires a change in the total number of pixels.

72-ppi

300-ppi inset zoom 200%

Monitor resolution

The number of pixels or dots displayed per unit of length on the monitor, usually measured in dots per inch (dpi). Monitor resolution depends on the size of the monitor plus its pixel setting. Understanding monitor resolution helps explain why the display size of an image on-screen often differs from its printed size. Image pixels are translated directly into monitor pixels. This means that when the image resolution is higher than the monitor resolution, the image appears larger on-screen than its specified print dimensions. For example, when you display a 1- by 1 inch, 144-ppi image on a 72-dpi monitor, it appears in a 2- by 2-inch area on-screen. Because the monitor can display only 72 pixels per inch, it needs 2 inches to display the 144 pixels that make up one edge of the image.

Printer resolution

The number of ink dots per inch (dpi) produced by all laser printers, including imagesetters. Most desktop laser printers have a resolution of 600 dpi and imagesetters have a resolution of 1200 dpi or higher. To determine the appropriate resolution for your image when printing to any laser printer, but especially to imagesetters, see "screen frequency." Ink jet printers produce a spray of ink, not actual dots; however, most ink jet printers have an approximate resolution of 300 to 600 dpi and produce good results when printing images up to 150 ppi.

Formatting characters

Photoshop/ImageReady gives you exact control over individual characters in type layers, including font, size, color, and alignment. In Photoshop, a font family and a style can be chosen by typing the desired names in the text box. As you type, the name of the first font or style beginning with that letter appears. Continue typing until the correct font or style name appears. Be sure to deselect the font name before entering new type in the image.

To select characters:

1. 2. 3. Select the type tool ( ). Select the type layer in the Layers palette, or select in the text flow to automatically select a type layer. Position the insertion point in the text, and do one of the following: Drag to select one or more characters. Click in the text and then Shift-select to select a range of characters. Choose Select > All to select all the characters in the layer. Double-click a word to select it. Triple-click a line to select it. Quadruple-click a paragraph to select it. Quintuple-click anywhere in the text flow to select all characters in a bounding box. To use the arrow keys to select characters, hold down Shift and press the Right arrow or Left arrow key. To use the arrow keys to select words, hold down Shift+Ctrl (Windows) or Shift+Command (Mac OS) and press the right-arrow or left-arrow key. To select all the characters in a layer without positioning the insertion point in the text flow, select the type layer in the Layers palette, then double-click the layer's type icon ( ).
Using the character palette
1. 2. 3. Choose Window > Character Select the Character palette tab. With the type tool ( ), select Palettes in the option bar.

Choosing a font

1. 2. 3. 4. Choose a font family from the Font Family menu in the Character palette or options bar. Choose a font style from the Font Style menu (Character palette or options bar). Select the Color selection box in the options bar or Character palette. Select a color using the color picker.
1. 2. 3. 4. 5. 6. What is the main difference between a bitmap image and a vector graphic? What is the biggest disadvantage to an increased number of pixels in an image? What is the purpose of layers? Typography gives __________ __________ to language. Photoshop can create both ________________ and __________________ type anywhere in an image. Why are characters formatted in type?

Key Definitions for Lesson Three
Word Image map Definition Image maps enable you to link an area of an image to a URL. You can set up multiple linked areascalled image map areasin an image, with links to text files; other images; audio, video, or multimedia files; other pages in the Web site; or other Web sites. The main difference between using image maps and using slices to create links is in how the source image is exported as a Web page. Using image maps keeps the exported image intact as a single file, while using slices causes the image to be exported as separate graphic files and HTML tables. Another difference between image maps and slices is that image maps enable you to link circular, polygonal, or rectangular areas in an image, while slices enable you to link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an image map. Slices allow you to create rollovers efficiently. They also let you designate no image areas where you can add HTML text.
Adobe Web Project: Photoshop 7.0, The Movie Project 36

Image map vs. slices

Teachers will want to note the following: The full version of Photoshop provides tools for creating and manipulating static images for use on the Web. You can divide images into slices, add links and HTML text, optimize the slices, and save the image as a Web page. ImageReady provides some of the same image-editing tools as Photoshop. In addition, it includes tools and palettes for advanced Web processing and creating dynamic Web images such as animations and rollovers.
Only a few of the powerful effects of Photoshop/ImageReady are taught in Adobe Web Project.
Lesson Three is designed to be taught in approximately two to three class hours, depending on the teachers pace of instruction and the prior knowledge of the students. This lesson is designed to be completed in both Adobe Photoshop and ImageReady as noted.

Working with Slices

A slice is a rectangular area of an image that can be used to create links, rollovers, and animations in the Web page. Dividing an image into slices lets the work be selectively optimized for Web viewing. User slices are those slices created using the slice tool in Photoshop. Types of slices 1. 2. Image slice No Image slice Web page divided into slices

Shift-drag to constrain the area to a square. Or Alt-drag (Windows) or Option-drag (Mac OS) to drag an image map area from its center.

Viewing image maps

Select the Image Map Visibility button ( Do one of the following: ) in the toolbox.
Choose View > Show > Image Maps. Choose View > Show Extras.
When the image map select tool is selected, the image map areas show automatically. The image map areas can Show or Hide using the Image Map Visibility button.
Selecting and modifying image maps
1. 2. Select the image map select tool ( ).
Click an image map area in the image. Shift-select will add areas to the selection so you can choose more than one image map. You can move, arrange, align, and duplicate tool-based image map areas using the Image Map palette.
The image is saved when you output HTML.
To the Teacher: This is an optional activity for your class depending on the skill level of your students and the time you have available. However, it may be useful as a brief review of Transformations for all skill levels. The commands under the Transform menu let you apply specific transformations to a selection, layer, path, vector shape, or selection border. Photoshop or ImageReady previews the effect and surrounds the selected area with a bounding border that lets you manipulate the selection, layer, or path. You can apply several commands in succession before applying the cumulative transformation. For example, you can choose Scale, drag a handle to scale, and then choose Distort, drag a handle to distort, and press Enter or Return to apply both transformations. In Photoshop, you can also enter numeric values in the option bar.
Transform is located in the Edit menu.
To scale, rotate, skew, distort, or apply perspective:
1. Do one of the following: To transform part or all of a layer, select it. Then choose Edit > Transform > Scale, Rotate, Skew, Distort, or Perspective. To transform part or all of a path, select it. Then choose Edit > Transform Points or Transform Path > Scale, Rotate, Skew, Distort, or Perspective. To transform a selection border, make or load a selection. Choose Select > Transform Selection. Then choose Edit > Transform > Scale, Rotate, Skew, Distort, or Perspective. Drag the handles, or in Photoshop, enter values in the options bar to achieve the desired effect. To apply additional transformations, repeat steps 1 and 2. Press Enter or Return to apply the cumulative transformation or click OK ( or select Cancel ( ) in the options bar to cancel the transformation. ) in the options bar. Press Esc
To scale or skew around the center point, press Alt (Windows) or Option (Mac OS) when choosing the Scale or Skew command.

In this lesson, you will learn to
create a rollover by using the Rollover palette create a multilayered image to use as the basis for the rollover or animation use the Layers palette in conjunction with the Rollover palette to create rollover sequences optimize and save the rollover create a Web animation using the Animation palette add, select, rearrange, and delete frames copy and paste frames work with layers
Key Definitions for Lesson Four
Word Animation Definition
A sequence of images, or frames, that is displayed over time. Each frame varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed in quick succession. An alternate image that gets shown when a user moves their cursor over an image that has a link associated with it. JavaScript controls this behavior. Using the Rollover palette, ImageReady automatically writes this code for you.

Rollover

Rollover palette Optimizing
Lets you create, view, and set options for the frame state in a Rollover. The process of fine-tuning the display quality and file size of an image for use on the Web or in other online media. Adobe Photoshop and Adobe ImageReady give you an effective range of controls for compressing the file size of an image while optimizing its online display quality. You can optimize images in the three major graphic file formats used on the Web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG-8 or PNG-24 (Portable Network Graphics, with 8-bit or 24-bit color).

Creating a Rollover

A rollover is a Web effect in which different states of an image appear when a viewer performs a mouse actionsuch as rolling or clickingon a link in a Web page. A state is defined by a specific configuration of the Layers palette, including layer location, styles, and other formatting options. You will use a slice to define the active area for a rollover. By default, every slice or image map area has one statethe normal state. (The normal state corresponds to the appearance of an image when it is first loaded into a Web browser and no rollover effects have occurred.) When new states are added to the rollover, a snapshot of the slice or image map area is captured in the previous state. You can then use the Layers palette to make changes to the image in the new state. You can also add an animation to a rollover state. How you work with layers is an essential part of creating rollovers. Placing the image content for a rollover on its own layer allows you to use Layers palette commands and options to create rollover effects. When creating rollovers or animations, some changes made to a layer affect only the active state or frame, while others affect all states or frames. When working with layers, you can create or copy selections in the layer; adjust color and tone; change the layer's opacity, blending mode, or position; add layer effects; and perform editing tasks as with layers in any image. Using layer attributes to create animation effects is very simple, and it allows student to save an animation file in Photoshop format for later re-editing. Keep in mind that some changes you make to layers affect only the active frame, while others affect all frames: Frame-specific changes Affect only the selected frames in the Animation palette. Changes you make to a layer using Layers palette commands and optionsincluding a layer's opacity, blending mode, visibility, position, and layer effectsare frame-specific. Global changes Affect all frames in an animation. Changes made to the layer's pixel values, using painting and editing tools, color and tone adjustment commands, filters, type, and other imageediting commands, affect every frame in which the layer is included.

To optimize an animated image:
1. Choose Optimize Animation from the Animation palette menu. Set the following options:
Bounding Box to crop each frame to the area that has changed from the preceding frame. Animation files created using this option are smaller but are incompatible with GIF editors that do not support the option. Redundant Pixel Removal to make transparent all pixels in a frame that are unchanged from the preceding frame. This option is selected by default and is recommended. The Transparency option in the Optimize palette must be selected for redundant pixel removal to work. 3. Select OK. Apply optimization settings, as described in Optimizing images.
When optimizing the colors in an animation, use the Adaptive, Perceptual, or Selective palette. This insures that the colors are consistent across frames. You can also reduce the number of colors utilized to ensure a smaller file size.
Saving animations as animated GIFs
Animations that are viewed in a Web browser are called animated GIFs. When saving an optimized document containing an animation, you can choose to generate an HTML file that contains code for displaying the animated GIF in a Web page. The resulting Web page can contain just the animated GIF or additional Web features, such as links and rollovers, depending on the source document. To save an animation as an animated GIF: 1. 2. Optimize the animation, as described above. Save the image, as described in previous lessons.
Saving animations as QuickTime movies
You can save an animation as a QuickTime movie. The resulting file is viewable in the QuickTime player and can be opened in other applications that support the QuickTime movie format. To save an animation as a QuickTime movie 1. 2. 3. 4. 5. 6. Choose File > Export Original. Select QuickTime Movie from the format menu. Type a filename, and choose a location for the file. Select Save. Adjust the compression settings if desired. Click OK.
1. 2. 3. 4. 5. Describe a simple way to create animation. Why would you want to tween animation frames? How do you optimize an animation? What does optimizing an animation accomplish? Why is working with Layers important in animation in ImageReady?
1. A simple way to create animation is to start with a layered Photoshop file. Use the New Frame button in the Animation palette to create a new frame, and use the Layers palette to alter the position, opacity, or effects of one of the selected frames. You can instruct Adobe ImageReady to tween intermediate frames between any two frames, to change layer opacity or position between two frames, or to add new layers to a sequence of frames. Tweening saves time and effort in animation. Click the Show Options button in the Optimize palette, and then choose File > Save Optimized to optimize animations. When an optimized animated document is saved, an HTML file can be generated that contains code for displaying the animated GIF in a Web page. The resulting Web page can contain just the animated GIF or additional Web features, such as links and rollovers depending on the source document. Working with layers is the key to creating animations in ImageReady. Each new frame starts out as a duplicate of the preceding framethe frame is edited by adjusting its layers.

Adobe ImageReady provides a powerful, easy way to create multiple-frame animations from a single document. Using the Animation and Layers palettes, you will be able to create, edit, copy, paste, and rearrange frames in sequence. You will also be able to use the powerful Tween feature of ImageReady to quickly create new frames that vary a layers opacity, position, or layer effects, and create the illusion of a single element in a frame moving or fading in or out. The purpose of Lesson Five/Photoshop-ImageReady is to take you beyond the fundamentals of Photoshop and ImageReady learned in Lessons One, Two, Three, and Four to design basic Web pages that include images, text, and effects plus animation. Because of the nature of Adobe Web Project, the techniques in Lesson Five feature only a small part of the powerful capability of Photoshop and ImageReady for use in designing Web pages. Lesson Five is designed to be taught in approximately one class hour, depending on the teachers pace of instruction and the prior knowledge of the students. This lesson is designed to be done in both Adobe Photoshop and ImageReady as noted.
about file formats to add digital copyright information to optimize images for the Web to save optimized images
Key Definitions for Lesson Five
Word File formats Definition
You can use various file formats to get images into and out of Photoshop and ImageReady. Graphic file formats differ in the way they represent graphic information (as pixels or as vectors), in how they compress image data, and in which Photoshop and ImageReady features they support. You can add copyright information to Photoshop images and notify users that an image is copyright-protected via a digital watermark that uses Digimarc PictureMarc technology. The watermarka digital code added as noise to the imageis generally imperceptible to the human eye. The watermark is durable in both digital and printed forms, surviving typical image edits and file format conversionsand is still detectable when the image is printed and then scanned back into a computer. Embedding a digital watermark in an image lets viewers obtain complete contact information about the creator of the image. This feature is particularly valuable to image creators who license their work to others. Copying an image with an embedded watermark also copies the watermark and any information associated with it. To optimize an image for the Web, you select a file format and other options in the Optimize panel (Photoshop) or the Optimize palette (ImageReady). You can apply different optimization settings to different slices in an image. You can also use alpha channels to selectively optimize an image within a slice or across slice boundaries.

File Extension (Windows) Choose an option for the three-character file extensions that indicate a file's format: Use Upper Case to append file extensions using uppercase characters or Use Lower Case to append file extensions using lowercase characters. Append File Extension (Mac OS): File extensions are necessary for files that you want to use on or transfer to a Windows system. Choose an option for appending extensions to filenames: Never to save files without file extensions Always to append file extensions to filenames Ask When Saving to append file extensions on a file-by-file basis. Use Lower Case to append file extensions using lowercase characters. To append a file extension to the current file only, hold down Option as you choose a file format from the Save As or Save a Copy dialog box.

Saving Optimized Images

There are several ways to save an optimized image for use on the Web: HTML and images: You can generate all files required to use their image as a Web page. This includes an HTML file and separate image files for the slices in the source image. The HTML file includes code for any Web effectssuch as hypertext links, image maps, rollovers, and animationsin the document. The image files use the format and options specified in the optimization setting. Images only: You can save their image with the format and options specified in the optimization setting. If the source image contains multiple slices, each slice is saved as a separate file. HTML only: You can save the HTML code, but not the image data, for their images. In ImageReady, they can also create an HTML file using the Copy HTML command. This command lets you copy the HTML code for an optimized image to the Clipboard, and paste the HTML code into an HTML file. If you subsequently make changes to the source image, you can use the Update HTML command to update the HTML file.
Optimization for the Web is located under the File > Save for Web menu.
To save an optimized image:
1. 2. 3. (Photoshop) Choose File > Save for Web. Select a view and apply optimization settings Do one of the following: (Photoshop) select OK in the Save for Web dialog box. (ImageReady) Choose File > Save Optimized to save the file in its current state. Type a filename, and choose a location for the resulting files. 5. Select a Save As Type option: HTML and Images to generate an HTML file and save each slice as a separate image file. Images Only to save each slice in the image as a separate file. HTML Only to generate an HTML file but not save any image files.
To set preferences for saving image files and HTML files, select Output Settings. (ImageReady) Select Include GoLive Code to reformat HTML and JavaScript code so that rollovers will be fully editable in Adobe GoLive (to be used later). Code is reformatted in the style used by GoLive. Select Save.

NOTE: You need not generate an HTML file to open a Web page in GoLive. Simply save the Web page as a Photoshop (PSD) file, and then import the file directly into GoLive. For more information, see Adobe Web Project/GoLive.
1. 2. 3. Name the several ways to save optimized images on the Web. Explain the Photoshop format. Explain the QuickTime movie format.
1. HTML and Images: You can generate all files required to use their image as a Web page. This includes an HTML file and separate image files for the slices in the source image. The HTML file includes code for any Web effectssuch as hypertext links, image maps, rollovers, and animationsin the document. The image files use the format and options specified in the optimization setting. Images only: You can save an image with the format and options specified in the optimization setting. If the source image contains multiple slices, each slice is saved as a separate file. HTML only: You can save the HTML code, but not the image data, for images. In ImageReady, students can also create an HTML file using the Copy HTML command. This command lets you copy the HTML code for an optimized image to the Clipboard, and paste the HTML code into an HTML file. If they subsequently make changes to the source image, they can use the Update HTML command to update the HTML file. 2. Photoshop format: Photoshop format (PSD) is the default file format for newly created imagesand the only format supporting all available image modes (bitmap, grayscale, duotone, indexed color, RGB, CMYK, lab, and multichannel), guides, and layers (including adjustment layers, type layers, and layer effects). Later versions of Photoshop provide features that are not supported in previous versions. QuickTime Movie (ImageReady): QuickTime Movie format is a cross-platform format used for timebased data, such as video and audio. In ImageReady (only), it is possible to save animations as QuickTime movies and open existing QuickTime movies as animations in order to optimize them for the Web.
Additional Adobe Resources
Instructors have access to these resources at the Adobe Systems Web site (http://www.adobe.com): How-Tos and Backgrounds Tutorials and Techniques Quick tips Troubleshooting

Photoshop Toolbox

The marquee tools make rectangular, elliptical, single row, and single column selections.
The move tool moves selections, layers, and guides.
The lasso tools make freehand, polygonal (straightedged), and magnetic* (snap-to) selections.
The magic wand tool selects similarly colored areas.
The crop tool trims images.
The slice tool creates slices.

Sets opacity, pressure, or ex posure for painting mode Cycles through blending modes Fills selection/layer with foreground or background color Fills from history* Displays Fill dialog box Lock transparent pixels on/off Connects points with a straight line
*Not in ImageReady. Shift Key
Result Moves type in image Aligns left, center, or right* Aligns top, center, or bottom* Selects 1 character left/right or 1 line down/up, or 1 word left/right Selects characters from insertion point to mouse click point Moves 1 character left/right, 1 line down/up, or 1 word left/right Designates new origin over existing type Selects word, line, paragraph, or story Shows/Hides selection on selected type Toggles Underlining on/off* Toggles Strikethrough on/off* Toggles All Uppercase on/off* Toggles Small Caps on/off* Toggles Superscript on/off* Toggles Subscript on/off* Chooses 100% horizontal scale* Chooses 100% vertical scale* Chooses Auto leading* Chooses 0 for tracking* Justifies paragraph - left align last line* Justifies paragraph - force last line* Toggles paragraph hyphenation on/off* Toggles single/every-line composer on/off* Decreases/increases type size of selected text 2 pts./px. Decreases/increases leading 2 pts./px. Decreases/increases baseline shift 2 pts./px. Decreases/increases kerning/tracking 20/1000 ems Action Ctrl + drag type when Type is selected + + + + click , , or Ctrl + + Ctrl + L, C, or R + Ctrl + L, C, or R , or + Ctrl +
Shift + click or click + drag Double-, triple-, quadruple-, or quintuple-click Ctrl + H + Ctrl + U + Ctrl + / + Ctrl + K + Ctrl + H + Ctrl + + + Alt + Ctrl + + + Ctrl + X + Alt + Ctrl + X + Alt + Ctrl + A + Ctrl + Q + Ctrl + J + Ctrl + F + Alt + Ctrl + H + Alt + Ctrl + T + Ctrl + < > Alt + + Alt +
Alt + Hold down Alt to decrease/increase 10x. Hold down Ctrl to decrease/increase 10x. *Not in ImageReady. Shift Key
Result Selects multiple anchor points Selects entire path Duplicates a path Switches from Switches from Switches from Switches from Closes path Closes path with straight-line segment *Not in ImageReady. Shift Key to to or to when over path when pointer is over anchor point or direction point to when pointer is over anchor point or direction point. Action + + click
+ Alt + click + Alt + Ctrl + drag Ctrl Alt Alt + Ctrl Alt + double-click + Alt + double-click

Slicing and Optimizing

Result Toggles browser dither for selected image pane in Optimized view Toggles through gamma previews in selected image pane Toggles through Optimized / 2up / 4up / Original window Toggles between Slice tool and Slice selection tool Draws square slice Draws from center outward Draws square slice from center outward Reposition slice while creating slice Toggles snap to slices on and off Opens context-sensitive menu Save for Web Action + Ctrl + Y Alt + Ctrl + Y Ctrl + Y Ctrl + drag Alt + drag Alt + + drag