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, youll never be a Photoshop expert
but you dont need to be an expert to successfully use Photoshop! There is an excellent online 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, youll 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.
Youre probably wondering what a layer is and why youd 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 itno single layer had all the information. She could
have written on one layer without affecting the other layers. Thats 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 youd 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, its 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 theLayers Palette. If you have a layer you want to get rid of because you
made a mistake or dont like how it looks, click on the layer you want to delete and drag it to
the Layer Trash icon. If youd 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 anAdjustment Layer to try out the adjustments.
TOOLBOX TOOLS
The toolbox looks complicated but is rather simple to use once youve 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. Heres a quick description of each of the tools labeled in the
diagram below.
MARQUEElets you select areas on your image. The rectangular marquee is the default
setting, but clicking and holding down will reveal an elliptical marquee.
LASSOlets you make freehand selections on your image. Clicking and holding down will
reveal the polygonal lasso tool.
CROPlets you trim your image.
HEALING BRUSHESthis 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 STAMPis a very fun tool as it lets you paint copies from one part of an image to
another part or to another image. Lets say you have one rose but youd 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.
ERASERlets 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.
BLURlets you blur hard edges in an image. This is particularly useful when combining
images.
MOVElets 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 WANDlets 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. Youll 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 REPLACEMENTthese 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 BUCKETanother combined tool. The tool you see in the Toolbox is
theGradient 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.
TYPElets you put text on top of images or create text to use on web pages, presentations
and print materials.
SHAPES AND LINESgives 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!
EYEDROPPERlets you select specific colors from an image. If youd like to use the color
from a snowmans scarf for text on the image, youd click on the eyedropper, move it to the
scarf and click once. Your foreground color will be whatever color you clicked on.
ZOOMlets 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 its the correct size. To
zoom out, hold down the OPTIONkey 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,
youd 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 blueI 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 chipthat 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 toolboxif 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 UWEau 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 ViewSnap or ViewSnap 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 thingto 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 toImageModeRGB 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 youll 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 Lassotool.
1. Open your image in Photoshop.
2. Magnify the image if necessary using the Zoom tool.
3. Use the Marquee or Lasso toolwhichever is appropriate, to encircle the object. It
doesnt need to be a perfect selection at this point.

4. Do an EditCopy.
5. Open the second image. Do an EditPaste. 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 andSketch 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 SelectInverse.
8. Do EditCut or hit the Delete key.
9. If you dont like your effect, revert to your original image and try again with a different
filter.
10. If youre using your image on a white background, youre fine. You can save your edge
effect image in any format you prefer.
11. If youre using the image on a colored background youll 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 andDarken 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 FilterNoiseDespeckle and/or FilterNoiseDust and
Speckles and/or FilterNoiseReduce 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 hasDestination 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 ImageAdjustmentsShadow/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 FileOpen.
2. Locate the file on your local hard drive, H drive, zip disk, USB/thumb drive or floppy disk.
3. Click Open.
4. Voilyour image is now on the screen!
RESIZING IMAGES
1. Open your file.
2. Go to ImageImage Size.
3. In the dialogue box, look at pixel dimensions. Type a new number in the Width box and
the Heightwill change automatically.
4. Click OK. Your image is now resized.
ROTATING IMAGES
1. Open your file.
2. Go to ImageRotate 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 FileSave 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. Theres 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 partwhat 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. Dont bother with progressive if youre 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 youre 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 FileSave 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. Theres 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 partwhat 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 FileSave 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. Theres 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 FileSave 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. Theres 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 youd 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.

Theres a small right pointing arrow near the topclick 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 FileNew. In the dialogue box, make sure that Background ContentsWhite 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 its time to have some fun. Lets 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 appearyou 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, youve 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, its 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 .gifit 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 #9999CCthats 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. Dont have a heart attack when your text disappearsits still there!
3. Your colored layer is on top of your text layeryou 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 isnt 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 textnot any extra
space. Save it as a .jpg. DO NOT save your file as a .gifit 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 SelectAll.
3. Go to EditDefine Pattern and click OK.
4. Switch to the file with your text. Create a New Layer on your Layers Palette.
5. Go to EditFill 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 disappeareddont worry its really still there.

6. If your background layer is on top of your text layer, you need to switch their order. Look
at yourLayers 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 textnot any extra
space. Save it as a .jpg. DO NOT save your file as a .gifit 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 youd like several pieces of text that are the same
style for a menu or page titles?
Actually its quite easy once youve got the text the way you want it. Lets pretend youre
setting up a class web site and you want a fancy menu. You need text that says: Syllabus,
Assignments, Resources and Handouts. Heres what you would do.
1. Go to FileNew. In the dialogue box, make sure that Background ContentsWhite 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 thats the color of your web page. If youre using a
solid color, fill in your background with the color of your web page. If youre 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 its exactly right, youre 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. Youve 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 textnot 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 FileSave 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 doesnt after youve 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 youll want to place a piece of clipart on a colored or textured background and
you dont want your clipart to be in a white squareyou 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 Eraserchoose 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 theMagic Eraser.
4. Click in as many areas of the background as needed to make it transparent.
5. Go to FileSave 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!