Photoshop:
It Only Attacks When It Senses Fear



Photoshop, in its power, can be very scary. There are so many levels to its usability, you may feel overwhelmed. We certainly did, until we heard this story: a gentleman working in Hollywood as a designer/animator uses Photoshop to create the titles for a popular syndicated sci-fi show. He admitted to a friend of his that he feels like he only uses 5% of its power--doesn't even know how to use the filters--but is quite happy with the results. The moral of this story: even professionals don't understand it all, so use what works and don't worry about the rest!


What you really need to know

Photoshop is an incredibly popular and powerful tool for web designers, and is well worth your time and effort to find a lab which supports Photoshop--and with the increasing popularity and importance of the Web, it is likely to be easier to access in the coming years. As of this writing (7.96), Photoshop 3.0 can be found in the

Photoshop 2.5 can be found in the

The main things you'll be using Photoshop for is creating titles, banners, buttons, and retouching scanned images. Here are the basic steps for manipulating scanned images in Photoshop.

  1. Open your image in Photoshop, and then immediately make a copy. Photoshop only has one level of "undo," that is, you can only undo the last thing you did and not something you did two moves ago, so keeping a copy of the original while you make changes is very important. Make sure you are working in RGB mode; do not change your mode to Indexed Color or save as a .gif or .jpg at this point; it will reduce the quality of your image.
  2. Crop the image to remove excess space around the borders or to take out superfluous information. You can do this using the marquee tool and the "Crop" command under the "Edit" menu, or by using the Cropping tool in the toolbox. Click your mouse on the upper left corner of the area you want to crop, and drag diagonally to cover the area you'd like to keep. Everything outside of this box will be removed. Once you have the "marching ants" that denote a selection, move your cursor over the image until you see a pair of scissors, and click your mouse. If you have cropped incorrectly, use the "Undo" command under the "Edit" menu and start again.
  3. Scanned images tend to be a bit washed out, so it is important to balance the black and white elements using the "Levels" dialog box, found under the "Image" menu and the "Adjust" submenu. Make sure the Preview box is checked, and drag the gamma triangle (the gray triangle under the middle of the Input histogram) until the midtones are balanced. Click OK.
  4. Adjust the overall color balance, by using the "Color Balance" dialog under the "Image" menu and the "Adjust" submenu. Drag the sliders for midtones, shadows, and highlights until you have the balance of colors you desire.
  5. Adjusting the focus of an image can be tricky. In general, color scans, especially with photographs, will only require a bit of sharpening. Pull down the "Filter" menu and the "Sharpen" submenu, and select "Unsharp Mask." Experiment with the settings; too much sharpening can posterize your image. With black and white scans, particularly from older books, there tends to be what looks like a half-tone screen laid over the image. To remove this, try the "Despeckle" filter under the "Filter" menu and "Noise" submenu. If that doesn't work, try "Dust and Scratches" under the same menus. This will tend to blur the image a bit, so try adjusting the levels until you get something you're happy with.
  6. If you are planning on working on the image some more, save it in RGB mode and the original compression style (i.e., .tif, .pct). If you are done, and want to save the image as a .gif, change the mode to Indexed Color and select 8-bit, adaptive, diffused. For smaller images, you can get away with 6- or 7-bit (which will reduce the file size), but it will saturate your colors slightly. Once you have changed the mode, save the image as a .gif. Make sure you use the pull-down menu to change the compression style, as well as changing your extension to .gif. If you want to save the image as a .jpg, no mode change is necessary; remain in RGB and Save As a .jpg file; again, make sure the pull-down menu says JPEG.


Titles, banners, and more

Photoshop 2.5 is quite a useful tool, allowing you to apply filters (including sharpening tools and more exotic tools such as emboss, pointilize, and gaussian blur). The most important things to remember about using 2.5 to create your images and banners are:

  1. Have a good idea of what you want to do with your image before you start
  2. Use the "Undo" command (under the Edit pull-down menu)
  3. Using the power of the selection

Everyting in 2.5 is created on one image plane, that is, images, colors, and text will all be on one layer and cannot be manipulated independent of each other. If you've placed text, for example, in the wrong place on your background, you have three options in 2.5:

  1. While the text (or image) is still selected (the "marching ants"), hit the delete key on your keyboard and start over;
  2. Use the "Undo" command under the Edit menu; or
  3. While the text (or image) is still selected move your mouse and place your cursor over the object. Press down (and do not let go) and move the object to the area you desire; alternatively, while the object is selected, utilize your keyboard arrow keys to move the object into place.
Photoshop 2.5 is a very good image retouching and manipulation tool; however, its banner and text capabilities are not as good as 3.0, and will take a little more manual manipulation, time, and patience. Adobe's 3.0 upgrade for Photoshop is much better if you are creating complex banners, titles, buttons, etc.

The best thing about Photoshop 3.0 is the feature called "Layers," which is incredibly helpful in the creation of titles and banners, and in gussying up your images. Layers essentially help circumvent the single-undo problem, in that each element of your image can be placed on different layers, and manipulated separately. Take a look at the layers palette on the left. It shows the layers of a button bar for an AS@UVA project. Each button has its own layer, the text has its own layer, as does the text shadow. The opacity can be changed separately, the elements can move independently, and if you're not happy with the results, you can throw the layer away (in the layer palette trash can).

Layers can be created in two ways. Click the paper icon at the bottom left of the palette and a New Layer dialog box appears; or, when you paste an element into your image, keep it selected (the "marching ants") and double click on the words "floating selection" in the layers palette, which will bring up the above mentioned New Layer dialog box. Layers can be moved on the plane of the image by rearranging them in the palette. Click on the desired layer, and drag to its new position. Two things to remember: nothing can go below the Background layer, and shadows and glows (which we'll talk about in a bit) should always be in the layer below their objects (see the text and text shadow at left). Another important note: make sure you have selected the layer you want to work on (it will be gray in the palette), otherwise you'll be making changes to another object.
Layers are invaluable in creating banners, especially when you want to combine a shadowed image with shadowed text.

So how do you create the shadows? The steps for an image are:

  1. Select the object you'd like to place the shadow behind, either with the marquee or lasso selection tools. Copy and paste it into a new layer below the object.
  2. Choose the move tool and nudge the new layer away from the original object in one pixel increments (can also be done with the arrow keys on your keyboard).
  3. Make sure the shadow layer is selected, and click "preserve transparency" at the top of the layers palette. Choose a color for the shadow and fill it (under the Edit menu). Generally, it is best to use the colors of the object mixed with gray.
  4. Deselect preserve transparency and apply the "gaussian blur" effect (under the Filters menu).
  5. Adjust the opacity of the shadow layer, using the "opacity" slider bar at the top of the layers palette.

The steps for a text shadow are quite similar.

  1. Create a layer and place your text, using the Text tool in the toolbar. Take note of the font, size, and spacing; this will not be retained in the Text dialog when you work on your shadow.
  2. Create a layer for the text shadow, and use the Text tool to place the same text in your new layer. Use the Move tool to place the shadow at the angle you want.
  3. Adjust the opacity of the layer and apply the Gaussian Blur filter.

Another interesting effect to use is a glow (best seen in the titles for the X-Files). It's a great look, and easy to do:

  1. Select an object (or text) using the marquee, lasso, or magic wand tool (selects all pixels with same color) and save the selection by choosing "Save Selection" under the "Select" menu.
  2. Create a new layer below the object
  3. While the new layer is still chosen, choose "Load Selection" from the Select menu.
  4. While the object in the new layer is still selected, choose "Feather Selection" from the Select menu, and set the feathering to, for example, 20 pixels.
  5. Choose a color for the glow, and fill the selection (from the Edit menu).


So I have the layers. What now?

If you want to save your image and come back to it, you must remain in RGB mode--which means you cannot compress it. Save your image as a Photoshop document (.psd) until you are ready for your final save. When the time comes when your masterpiece is ready for the world, you must

  1. Merge the layers (using the pull-down menu at the top right of the Layers palette)
  2. Choose Indexed Color from the Mode menu; if it asks you to flatten layers, say OK
  3. Load the NewCLUT palette, or choose 8-bit, adaptive, diffused, and save your image as a .gif


A note about colors

There are thousands, millions, of wonderful colors you can use in Photoshop for your banners and titles. However, web browsers don't see all of those great colors, instead adapting what you have to their internal palette. Generally, you won't see a big difference; but if you want to be completely safe, use the NewCLUT color palette created by Linda Wineman and available at her site. She has taken the color palette common to all major browsers, and created a plug-in for Photoshop. Once you have downloaded the palette, here's how you get it into Photoshop.

  1. Put the palette (it will show up like a Photoshop document) into the Color Palettes folder, within the Goodies folder, which is within the Photoshop application folder
  2. From the Windows menu, choose "Show Swatches" from the "Palettes" submenu.
  3. Click the arrow on the top right of the swatches palette, and choose "Load Swatches". Find the NewCLUT palette in the Goodies folder and click Open.
  4. Manipulate your image, choosing colors as needed from the NewCLUT swatch.
  5. When you are ready to save, choose "Indexed Color" under the Mode menu. When the dialog box appears, choose the Custom radio button and click OK. When the color table appears, click Load... and find the NewCLUT palette in the Goodies folder. Click OK and proceed with saving your image as a .gif.


Trial, error, and creativity

These are just a few of the tools we have found are incredibly useful in creating images for the web. No doubt you will find some of your own. Don't be afraid to play with the program, and be creative--and let us know what new tricks you come up with on your own!

Home Graphics Video Design

compiled by

Julie K. Rose and Michael R.H. Owens

QUESTIONS AND COMMENTS?
last updated 6.20.96