adobe photoshop complete handout

PHOTOSHOP

Photoshop is the leading digital image editing application for the Internet, print, and other new media disciplines. It is embraced by millions of graphic artists, print designers, visual communicators, and regular people like you. It's likely that nearly every picture you've seen (such as posters, book covers, magazine pictures, and brochures) has either been created or edited by Photoshop. The powerful tools used to enhance and edit these pictures are also capable for use in the digital world including the infinite possibilities of the Internet.

The newest version of Photoshop (CS5 Extended) includes features such as:

• Content Aware fill
• Puppet Warp
• Bristle Tips
• Easier HDR
• Mixer Brush
• And more.

It is almost impossible to use or even learn all of Photoshop's tools to their maximum benefit. Photoshop has been around since 1982! That's around 25 years of troubleshooting and advancing software. This workshop will go over the main features of the program so that you will feel confident to explore the remaining features on your own.

Photoshop is a very complex program and not one that can be mastered overnight. In fact, unless you use Photoshop for several hours every day, you’ll never be a Photoshop expert—but you don’t need to be an expert to successfully use Photoshop! There is an excellent on-line help system within Photoshop that you can use as you manipulate your images.

When you start Photoshop, your screen will look something like this if you open an image:

The rectangular boxes scattered around the screen are called palettes. They give you quick access to many of the features of Photoshop. The elements of Photoshop that you will most often use are the:

·         Menubar

·         Toolbox

·         Options Toolbar

·         Color Palette

·         Document Window

·         Layers Palette

The Menubar gives you access to the file management and general commands for the program. It has many features in common with other programs that you use. Where would you go to copy something? Where would you go to save a file?

The Options Toolbar is a context sensitive toolbar and changes as you select different tools from the Toolbox. It gives you quick access to settings and features for the tool you are currently using.

The Document Window is where the image you are currently editing is displayed.

The Toolbox gives you access to all the tools in Photoshop. The most commonly used tools are labeled in the diagram to the right. Remember, you’ll use the Toolbox in conjunction with the Options Toolbar!

The Color Palette lets you mix custom colors or choose colors from the Swatches Palette. The colors you choose can be for the foreground or the background color depending on which color chip is selected in the Toolbox.

kjkjlj

The Layers Palette shows you all the layers in your image with the topmost layer at the top of the list. The Layers Palette will let you create, delete, hide and copy layers.

You’re probably wondering what a layer is and why you’d want to use layers with your images. Layers can be thought of as a stack of overhead transparencies. Maybe you remember your grade school teacher putting down a transparency of a map of the U.S. in 1776. Then she put another transparency on top of the first showing the states that joined the U.S. between 1776 and 1825, another transparency on top of the first two showing the states that joined the U.S. between 1825 and 1860. She built an image using several layers. Each layer had different information on it—no single layer had all the information. She could have written on one layer without affecting the other layers. That’s the way layers work in Photoshop and they give you a lot of control over your image and its final appearance.

Say you have an image and you’d like to add text. Maybe, by accident, you misspell one of the words, or you use the wrong color or the wrong font. If your text is on a layer, you can easily change it. If your text is directly on the image, it’s very difficult to make changes to the text. Just remember as you are working in Photoshop to be on the layer you want to edit. You click on the layer you want to edit in the layers palette and that layer will be highlighted. A text layer named UWEC in Winter is selected in the illustration above.

The Layer controls are simple to use. If you want a new layer, click once on the New Layer Icon on the Layers Palette. If you have a layer you want to get rid of because you made a mistake or don’t like how it looks, click on the layer you want to delete and drag it to the Layer Trash icon. If you’d like to hide a layer, click once on the Show/Hide Layer icon (the eye) and the layer will become invisible. To make it reappear, click again on the Show/Hide Layer icon (the eye will disappear when the layer is invisible). To apply a style to a layer (like drop shadow or embossing), select the layer and click once on the Layer Style icon and adjust the dialogue box until your layer appears the way you want. When you are adjusting an image, like removing a color cast or adjusting the brightness, try out your changes on an Adjustment Layer to try out the adjustments.

TOOLBOX TOOLS

The toolbox looks complicated but is rather simple to use once you’ve tried out each of the tools. Look closely at the toolbox; any tool with a small arrow in the bottom right corner has more choices available. When you click the tool and hold down, an additional selection of related tools will appear. Here’s a quick description of each of the tools labeled in the diagram below.

MARQUEE—lets you select areas on your image. The rectangular marquee is the default setting, but clicking and holding down will reveal an elliptical marquee.

LASSO—lets you make freehand selections on your image. Clicking and holding down will reveal the polygonal lasso tool.

CROP—lets you trim your image.

HEALING BRUSHES—this is a combination tool that contains four tools. The top tool is the Spot Healing Brush that can remove things. Clicking and holding down on this tool will reveal the Healing Brush tool that can be used to fix creases and defects in old pictures. The Patch tool repairs things in a selected area. The bottom tool, Red Eye, removes red eye from flash photos.

CLONE STAMP—is a very fun tool as it lets you paint copies from one part of an image to another part or to another image. Let’s say you have one rose but you’d like a bouquet. Using this tool, you can make exact copies of a rose and create your bouquet! To use the Clone Stamp:

1. Open your file.
2. Click on the Clone Stamp tool in the toolbox.
3. Move the Clone Stamp tool to the area of your image you want to copy.
4. Hold down the OPTION key and click with the Clone Stamp tool on the image.
5. Move the Clone Stamp tool to the area of your image where you want to put the copy (or clone).
6. Click down and continue clicking or moving the cursor to draw in a duplicate of the original image.

ERASER—lets you erase portions of your image. When you erase something, the background color or image will be revealed. You can switch to the Magic Eraser tool by clicking and holding down on the Eraser tool. The Magic Eraser tool removes solid color areas which is useful for making transparent backgrounds in clipart.

BLUR—lets you blur hard edges in an image. This is particularly useful when combining images.

MOVE—lets you move selections and layers. Use this to reposition things like text on your background. Remember, when this tool is selected you can use the arrow keys to nudge objects pixel by pixel around the image.

MAGIC WAND—lets you select areas that have the same or similar color. You can expand the selection color range by holding down the SHIFT key as you click. You’ll see a small + sign appear by your tool as you hold down the SHIFT key. To subtract from the selected color range, hold down the OPTION key as you click. A small - sign will appear by your tool and the selected color range will be decreased.

BRUSH & PENCIL & COLOR REPLACEMENT—these two tools share the same icon on the Toolbox. The tool you see is the Brush but when you click and hold down, additional tool choices appear, one of which is the Pencil. Both of these tools let you paint on your image. You can set the stroke, edge, color, thickness, etc. of these tools on the Options Toolbar. You can use the Color Replacement tool to replace the color in an image with another color while the shading and texture will remain unchanged. This is particularly useful for making web graphics.

GRADIENT & PAINT BUCKET—another combined tool. The tool you see in the Toolbox is the Gradient tool but when you click and hold down additional tool choices appear and one is the Paint Bucket. The Gradient tool creates blends between the Foreground and Background Colors. The Paint Bucket fills selected areas with the foreground color.

TYPE—lets you put text on top of images or create text to use on web pages, presentations and print materials.

SHAPES AND LINES—gives you access to various shape tools to let you draw lines, rectangles, rounded rectangles, ellipses and custom shapes. There are a number of custom shapes you might find useful so explore your options!

EYEDROPPER—lets you select specific colors from an image. If you’d like to use the color from a snowman’s scarf for text on the image, you’d click on the eyedropper, move it to the scarf and click once. Your foreground color will be whatever color you clicked on.

ZOOM—lets you magnify your image. To do detailed editing, you may need to zoom in closely. Just click on the Zoom tool then click on your image until it’s the correct size. To zoom out, hold down the OPTION key and a minus sign will appear in the magnifying glass, again click on your image to zoom out. alternatively look at the Options Toolbar. When the Zoom tool is selected, two small magnifying glasses appear on the Options Toolbar. One has a + sign, the other a - sign. You can probably guess how they work!

FOREGROUND/BACKGROUND COLORS, SWITCH COLORS AND DEFAULT COLORS
How do you control colors in Photoshop? Take a look at the toolbox. There are two colored rectangles (color chips) near the bottom. The default setting for these color chips is black in front (foreground) and white in back (background). That means if you started typing text, you’d have black text. You click the double-headed arrow to switch the background and foreground colors. On the image above, pretend the foreground color is yellow and the background color is blue—I could make the foreground color blue (and the background color yellow) by clicking the double-headed arrow. To change the foreground color completely, go to the color swatch palette and click on a color chip—that color is now your foreground color. You should set your colors before you type text or draw objects. You may have noticed the small black and white color chips near the bottom left of the foreground and background colors on the toolbox—if you click them, that resets the foreground and background colors to black and white (default colors).

For a complete explanation of all the tools in Photoshop, consult one of the many tutorials available on the web, use the built-in Photoshop help or check out the UW—Eau Claire LTS Online Help Documentation on Photoshop at

CONFIGURING PHOTOSHOP

SNAP
sometimes you can't move things exactly where you want them; they seem to go where they want to go. It's likely that Snap or Snap to is turned on. Simply turn it off by going to View—Snap or View—Snap to and if either is checked they are on and you just need to select them to uncheck them. Lots of programs have some kind of snap feature (including PowerPoint) and usually it is annoying so get in the habit of turning it off.

RULERS
You can turn on Rulers so you can see the size of your image. It's easy, just go to View—Rulers and they will appear. The units are of course set in Preferences and we want pixels because other units are basically useless when working with graphics!

PREFERENCES
Like most programs, Photoshop has Preferences settings you can adjust. If you were on your own computer, Photoshop would remember your Preferences settings. Unfortunately, you're probably working in a campus computer lab and you may need to set your preferences each day you use Photoshop.

The most useful preferences to change are Units & Rulers. You want to set the Rulers to pixels!

ADJUSTING A WEB PAGE BACKGROUND

You've found the perfect background for your web page. You really like it BUT, it's too dark; text won't be very readable on it regardless of what color text you use. What can you do? Well there are lots of things you can try in terms of adjusting the image but here's one that often works quite well.

1. Open your background image in Photoshop.

2. Make sure your image is in RGB Color mode.

3. Copy the image onto another layer by dragging the background layer onto the New Layer icon at the bottom of the Layers Palette.

4. Delete the background layer by dragging it into the Layer Trash on the Layers Palette.

5. Look at the Layers Palette. Near the top right of the palette is a field labeled Opacity. Change the number from 100 to 50 as a first guess.

6. Your image probably looks a little strange. You can't tell in Photoshop if it will work or not, you need to test it in Dreamweaver.

7. Save your image as a .jpg, but give it a slightly different file name like background1.jpg.

8. In Dreamweaver, set background1.jpg as a page background. Try text on it. Decide if it is still too dark or too light.

9. If the new background was still too dark, adjust the Opacity downward some more. Save the file with a different file name like background2.jpg. Test it in Dreamweaver. Keep adjusting until the background will work with text.

10. If the new background was too light, adjust the Opacity upward. Save the file with a different file name like background2.jpg. Test it in Dreamweaver. Keep adjusting until the background will work with text.

COLOR MODE

Photoshop is kind of sneaky about one thing—to really use the different settings and options, you must be in RGB color mode. Remember GIFs? They are in indexed color mode and when you open a GIF in Photoshop the first thing you want to do is change to RGB color mode. You change modes by going to Image—Mode—RGB Color. If you've opened a file and notice that many menu choices are greyed out, check the color mode and switch to RGB Color mode!

COMBINING IMAGES

Sometimes you’ll have two or more pictures you want to combine into one image. Again, there are many ways to accomplish this task. In this example, we are moving Hibbard to the desert by using the Lasso tool.

1. Open your image in Photoshop.

2. Magnify the image if necessary using the Zoom tool.

3. Use the Marquee or Lasso tool—whichever is appropriate, to encircle the object. It doesn’t need to be a perfect selection at this point.

4. Do an Edit—Copy.

5. Open the second image. Do an Edit—Paste. This pastes your selection from the first image onto a new layer in the second image.

.

6. Since the object is on a separate layer, use the Move tool to adjust its location in the new combined image. Remember, you can use the arrow keys to nudge it into position.

7. Use the Marquee or Selection tool to clean up the edges. Since the object is on a separate layer, deleting pixels reveals the background underneath. You want just the building, no sky or trees.

8. If the edge of the object is too obvious, use the Blur tool to soften the edges and blend the object into the background.

CROPPING IMAGES

1. Open your file.

2. On the Toolbox, click the Crop tool.

3. Move the cursor (that now looks like the crop tool) to your image. Draw a rectangle approximately around the area you want to keep. Use the squares on the outline of the area to adjust your crop area exactly.

4. Double click inside the rectangle (but not the exact center). Your image is cropped.

CREATING EDGE EFFECT

1. Open your image.

2. Copy the image onto another layer by dragging the background layer onto New Layer icon at the bottom of the Layers Palette.

3. Delete the background layer by dragging it into the Layer Trash on the Layers Palette.

4. Using the Marquee tool, draw a rectangle. Alternatively, you can use the Elliptical Marquee tool and draw a circle or oval. Be sure to leave enough of an edge outside of the area you draw for an edge effect to be visible on.

5. Click the Quick Mask on the Toolbox. A red haze will appear on the edge of your image.

kjkjlj

6. Go to Filter and choose a filter to give an edge effect. The Artistic, Blur, Brush Stroke, Distort and Sketch filters all have choices that will give nice edge effects (like Torn Edges, Rough Pastels). Not all filters or all choices in a filter will give an edge effect, you need to experiment!

7. Switch to Standard Mode and then do Select—Inverse.

8. Do Edit—Cut or hit the Delete key.

9. If you don’t like your effect, revert to your original image and try again with a different filter.

10. If you’re using your image on a white background, you’re fine. You can save your edge effect image in any format you prefer.

11. If you’re using the image on a colored background you’ll need to put that colored background on a layer below your edge effect and then save your image in any appropriate format.

ADDING A CREDIT LINE TO AN IMAGE

Even when using images you own or ones in the public domain (or under Creative Commons License), you must provide a credit line on or under the image. While there are a number of ways to accomplish this, the method provided here is fairly easy.

1. Locate an image that you can use for the purpose you intend (be sure to follow copyright guidelines). Note the following information associated with the image:

* Photographer
* Preferred Credit Line (you need to search this out for the site, no two sites have the same preferences)
* URL
* Any information in the caption (if one is present) that you might find useful in the future

2. Resize the graphic in Photoshop to the final size you want in your particular application. You CANNOT resize after adding the credit line.

3. We need to add canvas below the image for the credit line and perhaps a caption. To do that, go to Image-Canvas size. Add about 20-30 pixels to the Height and on the diagram by Anchor, click the box in the middle of the top row. That will add 20-30 pixels of white canvas to the bottom of your image.

4. Click on the Type Tool. Pick a font and probably use black as the text color. You need to adjust the font size to be appropriate, remember points in Photoshop have no relation to what you are used to in a word processing application. Type in the credit line required and possibly a caption.

5. Crop the image to get rid of any excess canvas on the bottom.

6. Your image is ready to use! Here are two examples:

FIXING PICTURES

Quite often pictures have problems. Maybe the colors are very green or very blue. Maybe the picture is too dark or too light. Maybe everyone has red eyes. Maybe you have some old photos with spots, tears or creases. Photoshop has tools to help you fix pictures. There are some very sophisticated techniques that could fix just about any problem. The techniques delineated below are fairly simple. Before you do anything, make a copy of the file and work on the copy so if you ruin it, you still have the original file.

RED EYE
Red eye results from the reflection of a flash on the retina. Many digital cameras have a setting to reduce red eye. so become familiar with your camera and use it properly so you don't need to fix your pictures in Photoshop!

1. Open your file.

2. Zoom in closely on the eye(s).

3. Select the Red Eye tool. It's a tool under the Spot Healing Brush Tool.

4. Click in the center of the eye. Decide if you like the result or not. You can adjust the Pupil Size and Darken Amount on the Options toolbar if you need to make changes. Try it out!

---

OLD PICTURES
Old pictures often have speckles, spots, and/or creases or color casts. How you approach them depends on the situation.

1. If you have small speckles or spots, you might want to try the Filter approach. There are three filters that can really help pictures if there are speckles scattered throughout the image. Try Filter—Noise—Despeckle and/or Filter—Noise—Dust and Speckles and/or Filter—Noise—Reduce Noise. Two of these filters have settings you can try. What you might want to do is duplicate the original image unto several layers and label each layer with the filter/settings you tried and compare the results.

2. If you have just one or a few spots you probably want to try one of the Healing Brushes tools.

• The Spot Healing Brush tool is rather fun. Set your brush diameter to a reasonable size, not too big and not too small. Then click on the spot and the tool samples the image within the brush diameter and replace the spot with the image. It can take some practice to select the appropriate brush diameter to get a seamless repair. This will NOT work on large spots. 
 

 

• The Healing Brush tool works on larger spots or streaks; think of it as a small version of the clone tool. Set your brush diameter; this is really tricky and can take some practice. Zoom in on your image. Move your mouse to an area near the spot that you want to fill in the spot with. Hold down the Option key and click once. Let go of the mouse button, move to the spot and drag over the spot with your mouse cursor. Some of the settings on the Options 
• toolbar may assist you in your repair, try them out! 

• The Patch tool is good for larger spots or areas. Make sure the Options Toolbar has Destination selected. Draw around an unblemished area near the spot. Let go of the mouse button and move the cursor over the selection area; click down and drag the selection area over the spot. It will probably match very nicely.

3. If you have creases or tears, try using a combination of the Spot Healing Brush tool and the Patch tool. Realize that fixing old photos can take a lot of time and patience if there are major repairs.

---

New Pictures
Basically, it's the same techniques as for old pictures only think a bit differently. Want to remove a dirt smudge or pimple from someone's face? Try the Spot Healing Brush or the Healing Brush. Want to remove the date stamp from a photo corner? Try the Patch tool. It's a matter of being crafty and trying things out!

PEOPLE TOO DARK, BACKGROUND GREAT
Sometimes pictures of people are shot with strong light from behind (the people were in shadows, while the background was in bright light). As a result, you have a gorgeous sky or background but you can barely see the person's face. There's an easy fix for this.

1. Open your picture in Photoshop.

2. Make a copy of the picture and work on the copy so you still have the original.

3. Go to Image—Adjustments—Shadow/Highlight. Make sure the Preview box is checked.

4. Play with the Amount sliders until the picture looks good. Often the default settings works fine. Make sure the background doesn't look strange after you've made your adjustments.

5. Click OK.

 

6. Save your picture.

USING GUIDES

Guides
Guides are neat and come in handy at times to line things up. Guides work easiest if the Rulers are turned on. When the Rulers are on, simply click somewhere in the ruler area, hold down your mouse button and drag a guide to where you want it on your image. You can have vertical and/or horizontal guides. To get rid of the guides, use the Move tool, grab the guide, drag it to the ruler and it will disappear. Guides won't print and they will not appear when you insert the image in another program.

OPENING FILES

1. Go to File—Open.

2. Locate the file on your local hard drive, H drive, zip disk, USB/thumb drive or floppy disk.

3. Click Open.

4. Voilà—your image is now on the screen!

RESIZING IMAGES

1. Open your file.

2. Go to Image—Image Size.

3. In the dialogue box, look at pixel dimensions. Type a new number in the Width box and the Height will change automatically.

4. Click OK. Your image is now resized.

ROTATING IMAGES

1. Open your file.

2. Go to Image—Rotate Canvas.

3. A variety of choices will be offered (180°, 90° CW, 90° CCW, Arbitrary, Flip Canvas Horizontal and Flip Canvas Vertical). Choose whichever is appropriate for the situation. Remember, the Arbitrary setting is a great way to straighten crooked scans!

SAVING IMAGES

| jpg | gif | tif | psd |

TO SAVE A FILE AS A JPG
1. Open your file and edit your image.

2. Go to File—Save As.

3. A dialogue box will appear. Type an appropriate file name in the Save As field. Be sure to change the save location to an appropriate one. There’s nothing worse than losing a file!

4. Towards the bottom of the dialogue box is a Format drop down menu. Select jpeg.

5. Make sure to uncheck the Embed Color Profile box near the bottom IF the graphic is to be used for a web page.

6. Click Save.

7. Now comes the hard part—what choices to make in the JPEG dialogue box. The defaults are usually fine but you can decide for yourself. The choices you make depend on what you are going to use the JPEG for. Don’t bother with progressive if you’re not using the graphic on the web. Quality depends on what your trade off is between quality and file size. Only you can decide that and it will change depending on your purpose. Remember, the higher the quality, the larger the file and if you’re using the file on a web page, the longer it will take to appear on the page. Here's some general guidelines.

• If your graphic is text for a web page, set the quality to high or maximum.
• If your graphic is a non-text image for a web page, set the quality to medium or low.
• If your graphic is an image for print materials, reconsider using a jpg at all. You're better off with a .tif.

8. After you set your choices, click OK and your file will be saved as a JPEG with the file name and in the location you specified earlier.

TO SAVE A FILE AS A GIF

1. Open your file and edit your image.

2. Go to File—Save As.

3. A dialogue box will appear. Type an appropriate file name in the Save As field. Be sure to change the save location to an appropriate one. There’s nothing worse than losing a file!

4. Towards the bottom of the dialogue box is a Format drop down menu. Select Compuserve GIF.

5. Click Save. Click OK if asked about flattening layers.

7. Now comes the hard part—what choices to make on the GIF dialogue box. Most of the time, the default choices are fine. Click OK and a GIF Options dialogue box appears. Click OK and your file is saved.

TO SAVE A FILE AS A TIF

1. Open your file and edit your image.

2. Go to File—Save As.

3. A dialogue box will appear. Type an appropriate file name in the Save As field. Be sure to change the save location to an appropriate one. There’s nothing worse than losing a file!

4. Towards the bottom of the dialogue box is a Format drop down menu. Select tif.

5. Click Save.

6. A TIFF Options dialogue box appears. Leave the settings at the defaults except for Byte Order. If you move between Mac and PC regularly you are better off choosing the IBM PC option. Click OK.

7. A message will appear that says something like “Including layers will increase file size”. Click OK. Your file is saved at last! Remember, .tif files are great for master images and print materials.

TO SAVE A FILE AS A PSD

Sometimes you want to save your edited image as a Photoshop file (PSD). That keeps all the layers, text information and some of the special effects. Having that original file is very helpful when you go back and need to reedit things.

1. Open your file and edit your image.

2. Go to File—Save As.

3. A dialogue box will appear. Type an appropriate file name in the Save As field. Be sure to change the save location to an appropriate one. There’s nothing worse than losing a file!

4. Towards the bottom of the dialogue box is a Format drop down menu. The default format should be Photoshop; if not, change it.

5. Click Save. You may see a message about Maximize Compatibility. Just click OK. Your file is saved.

6. Always save text created in Photoshop as a .psd file. You need this format to fix your text and make more text with the same effects. You can always save it later in other formats suitable for your use.

TEXT, PHOTOSHOP & WEB PAGES

CREATING TEXT IN PHOTOSHOP FOR WEB PAGES
If you’d like small pieces of text to use on your web page that is NOT a cross platform font, you must create it as a graphic in Photoshop. Fortunately, Photoshop has lots of easy ways to make really great looking text. Here are the basics:

1. Load the web safe colors palette.

• Look at your color palette and choose the Swatches tab.
• There’s a small right pointing arrow near the top—click it and a menu pops open.
• Select Web Safe Colors.
• Choose OK in the dialogue box.
• The web safe colors are in your palette.

2. Go to File—New. In the dialogue box, make sure that Background Contents—White is selected. Look at the Preset drop down menu and select 800 x 600 pixels. Set the Resolution to 300. Click OK.

3. Select the Type tool and click anywhere on your Document Window.

4. Look at the Options Toolbar and select the font, style, size and color you want.

5. Type your text. Make any adjustments.

6. Now it’s time to have some fun. Let’s try out some of the text special effects. Click on the Move tool but make sure the Text Layer is selected in the Layers Palette.

7. Look at your Layers Palette. Near the bottom is a funny f symbol, the Layer Style icon. Click it and a drop down menu appears. This lets you add special effects to your text like drop shadows, bevels, embosses, pattern overlays and strokes.

8. Select one of the effects like Drop Shadow. A dialogue box will appear—you need to try the controls and see what happens.

9. Of course you can apply multiple effects like a Drop Shadow with a Bevel to get really cool text!

10. OK, you’ve got some really cool text for your web page but what do you do now? That depends on your web page.

IF YOU HAVE A WEB PAGE WITH A WHITE BACKGROUND
If you have a white background on your web page, it’s a piece of cake! Simply save your file twice. First as a .psd (Photoshop file so you can go back and reedit the file if you need to) and then as a .jpg file (to use on your web page). DO NOT save your file as a .gif—it will look terrible. Also remember to uncheck the Embed Color Profile check box in the .jpg save dialogue. That's very important to match your background perfectly.

IF YOU HAVE A WEB PAGE WITH A SOLID COLOR BACKGROUND

1. Look at your Color Palette. If you hover over any of the color chips, a code will pop up like #9999CC—that’s the hexadecimal designation for the color. Find the color chip that corresponds to your web page background (you probably want to write it down somewhere safe) and select it. Your web page background color is now on the foreground color chip in Photoshop.

Integer sed…

Integer sed…

2. On the Layers Palette, create a New Layer. Use the Paint Bucket tool to color in the entire layer. Don’t have a heart attack when your text disappears—it’s still there!

3. Your colored layer is on top of your text layer—you need to switch their order. Look at your Layers Palette. Drag the layer with your colored background under the layer with the text. Your text should reappear. You can reorganize the other layers as necessary.

4. If the text isn’t the way you envisioned, dump the text layer into the Layer Palette Layer Trash icon and start over.

5. If the text is the way you want it, save it as a .psd (Photoshop file so you can go back and reedit the file if you need to). This is the master file for your text.

6. To save the text for your web page, crop the image to include only the text—not any extra space. Save it as a .jpg. DO NOT save your file as a .gif—it will look terrible. Also remember to uncheck the Embed Color Profile check box in the .jpg save dialogue. That's very important to match your background perfectly.

IF YOU HAVE A WEB PAGE WITH A PATTERNED BACKGROUND
1. Open up your background from the web_kit.

2. Go to Select—All.

3. Go to Edit—Define Pattern and click OK.

4. Switch to the file with your text. Create a New Layer on your Layers Palette.

5. Go to Edit—Fill and set the Use field to Pattern. Click the drop down arrow by Custom Pattern to choose your background. Click OK. You now have a layer with your background on it. Your text may have disappeared—don’t worry it’s really still there.

6. If your background layer is on top of your text layer, you need to switch their order. Look at your Layers Palette. Drag the layer with your patterned background under the layer with the text. Your text should reappear.

7. If the text is the way you want it, save it as a .psd (Photoshop file so you can go back and reedit the file if you need to). This is the master file for your text.

8. To save the text for your web page, crop the image to include only the text—not any extra space. Save it as a .jpg. DO NOT save your file as a .gif—it will look terrible. Also remember to uncheck the Embed Color Profile check box in the .jpg save dialogue. That's very important to match your background perfectly.

Duplicating Text and Text Effects for Menus or Page Headings
Obviously, if you use the Layer Style and play with the settings, it would be hard to duplicate the settings exactly so what can you do if you’d like several pieces of text that are the same style for a menu or page titles?

Actually it’s quite easy once you’ve got the text the way you want it. Lets pretend you’re setting up a class web site and you want a fancy menu. You need text that says: Syllabus, Assignments, Resources and Handouts. Here’s what you would do.

1. Go to File—New. In the dialogue box, make sure that Background Contents—White is selected. Look at the Preset drop down menu and select 800 x 600 pixels. Set the Resolution to 300. Click OK.

2. Fill in your background with white if that’s the color of your web page. If you’re using a solid color, fill in your background with the color of your web page. If you’re using a patterned background, fill in your background with the pattern. The directions for each of those appears on the previous pages.

3. Type Assignments and set your font, color and size the way you want them. Remember, 800 pixels is the maximum width of your web page so judge the text size accordingly.

4. Apply any Layer Style you want. Once it’s exactly right, you’re ready to duplicate the text.

5. Switch to your Move tool. Copy your text layer by dragging it onto the New Layer icon at the bottom of the Layers Palette. You now have two layers each with the word Assignments.

6. Click the eye next to one of the layers to make it invisible. Select the other layer.

7. Switch to your Type tool. Highlight the word Assignments and type in Handouts instead.

8. You now have two layers with different words but the same text style. Keep repeating the process until you've made all the text pieces you need with each piece on a separate layer.

9. Now save your file as a .psd (Photoshop) in your web_site directory. This will let you go back and edit the file sometime in the future if something goes wrong.

10. Switch to your Crop tool. You’ve finished making all your menu graphics. Now you need to save them and get them ready for your web page(s)!

11. Think about the text you typed. Which is the longest? Click the eyes next to each layer to make all layers visible.

12. Use your Crop tool to crop the image to include only the text—not any extra space around it but without cutting any of the letters.

13. Now you need to save each of the text pieces as a .jpg to use on your web page.

14. Make all the layers except the top one invisible by clicking the eye next to each of the layers.

15. Go to File—Save As and choose .jpg as the format. Name the file and save it in your web_site directory. Also remember to uncheck the Embed Color Profile check box in the .jpg save dialogue. That's very important to match your background perfectly.

16. Make the top layer invisible by clicking the eye. Make the next layer visible and save that layer; giving it a unique file name.

17. Continue this process until each text layer has been save separately.

18. You now have your text graphics ready to use on your web site!

This sounds like it would take a lot of time but it really doesn’t after you’ve done it a few times. You can easily create a set of menu text graphics in a matter of 30 minutes or less and most of that time is spent dithering around about the color and text effects!

MAKING TRANSPARENT BACKGROUNDS

Quite often you’ll want to place a piece of clipart on a colored or textured background and you don’t want your clipart to be in a white square—you want the background to show behind the clipart. What you need is a transparent background and GIFs can have one color transparent.

1. Open your file in Photoshop.

2. On the Toolbox, click the Eraser Tool and hold down as you click to access additional tools. One of the tools is the Magic Eraser—choose that tool.

3. Click anywhere on the white background and the background will change to transparent (a grey and white checkerboard). You can use the settings on the Options Toolbar to refine the area selected by the Magic Eraser.

4. Click in as many areas of the background as needed to make it transparent.

5. Go to File—Save As. To preserve the transparent background you just created, you need to save your file as a GIF. Name the file and save it into an appropriate location.

6. You now have a file with a transparent background to use on web pages or presentations!