LIBRARIES, INFORMATION TECHNOLOGY, ART MUSEUM

[an error occurred while processing this directive]

Academic Technology Services

Information Center

Creating Web Graphics

Photoshop Tools
Setting Your Tool Options
Creating Title Graphics with Photoshop (tm)
Creating Button Graphics with Photoshop (tm)
Creating Bullet/Dot Graphics with Photoshop (tm)
Creating a 3-D Bar with Photoshop (tm)
Scanning Images for the Web
University of Rochester Clip Art

Much of these instructions deal with using Adobe Photoshop, an expensive but very nice graphics editor. I recommend becoming comfortable with Photoshop if you are committed to created sharp-looking Web pages. I also recommend using graphics programs (Photoshop and scanning software) on the Macintosh, even if you are a PC user. You can use a Power Mac, which will write to a PC disk.

Photoshop is available in CLARC and the Multimedia Center (Rush Rhees Library), Taylor 41B and 31 (River Campus), and in the Simon School's Computer Center.

Tools in Photoshop

The descriptions below correspond to the tool icons to the left. The corresponding tools may not line up correctly on your browser.

Switch foreground/background
Set the foreground color or background color
Revert to default colors (black/white)

Standard and Quick Mask modes

Screen modes (windows, full screen with or without menu bar)

Setting Your Tool Options

For the purpose of the examples given (creating title and buttons), you should have the tool options set as below. To set a tool option, double click on the tool on the tool menu bar. A window will appear with several options in it (after this window is open, you only need to click once on the next tool, and the options will change to that tool's options).

Marquee/Select Tool:: Shape: Rectangular; Style: Normal; Feather: 0 pixels
Gradient Tool:: Threshold; Opacity: 100%; Style: Foreground to Background; Midpoint: 50%; Type: Linear; Dither: checked (on)
Eye Dropper:: Sample Size: Point Sample
Fill/Paint Bucket Tool:: Threshold; Opacity: 100%; Tolerance: 0; Anti-aliased: off; Contents: Foreground; Sample Merged: off
Pencil Tool:: Threshold; Opacity 100%; Fade: off; Auto Erase: off
Brushes (behind Options window):: Smallest possible brush (upper left)

Creating Title Images With Photoshop

The following instructions will walk you through the process of creating a GIF with a transparent background and shadowed text, like the ones below:

Beginning a New Image
Open Adobe PhotoShop and select File:New. In the New dialog box, choose a width no greater then 460 pixels and a height of 100-150 pixels. Make sure the Resolution is set at 72 dpi and the Mode is set to RGB Color. From the menu bar, choose Window:Palettes:Show Swatches. This will give you a selection of colors to choose from.

Before continuing, you should make sure your tool options are set according to this guide.

Click on the Eye Dropper Tool and then choose the fourth lightest grey at the bottom of the swatches. If you are going to use a different background color or background image, select a color similar to the background color of your Web page, using the Swatches, Picker, or Scratch.

Select the Paint Bucket Tool and click on the image to fill it in. Note: The color you use for the background should not be used in the foreground of the image at all, because everything of this color will disappear later.

Creating the Shadow

We want to create a shadow for the letters using dark grey blurred text. Click on the Eye Dropper Tool and then click on the third darkest grey at the bottom of the swatches.

Now choose the Type Tool and click on the image somewhere (anywhere) You may need to click twice. In the Type Tool dialog box, type some text in the box and then select the font and size and options such as bold, italics, etc. (Try Times Bold at 45 point size.) Make sure that the Anti-alias option is selected and Shadow and Outline are not selected. If the squares at the very bottom are checked, you should be able to preview the font and options. Click OK when you are done. If the resulting text is not the right size, type delete to get rid of the text, then repeat the process until you are satisfied with the font and size. You should now have text outlined in a moving dotted line. Click on the inside of this dotted line and drag then words into position (or use the arrow keys).

Choose Select:All or use the Select Tool to draw a box around the text. Then choose ñFilter:Blur:Blur Moreî to blur the shadow.

Adding the Foreground Text

Click on the Eye Dropper Tool and select the color for the foreground text using the Swatches, Scratch, or Picker. If you want the foreground text to have a color gradient, you need to choose a background color too.

Do this by clicking the color switching arrow at the upper right of the color squares. This will switch the foreground and background colors. Now select another color from the Swatches, Scratch, or Picker.

Choose the Type Tool and click on the image until you get the Type Tool dialog box. Do not change any settings in this box; just choose OK. Drag the text into place (or use the arrow keys) so that you can see the shadow behind it.

If you want a gradient color look, choose the Gradient Tool. Draw a line from one end of your gradient to the other. Experiment with the Gradient Tool until you like the way your text looks.

Cropping and Saving

Choose the Select tool and draw a box around your text. Choose Edit:Crop from the menu bar. Now we need to change the image type in order to save it as a GIF. Choose Mode:Indexed Color... from the menu bar. The Resolution should be set to 8 bits/pixel; the Palette should be set to Adaptive (or Exact, if possible) and Dither should be set to None. Click OK.

Choose File:Save As... and give the file a name and location. Make sure the Format says CompuServe GIF.

Making the Background Transparent
Quit Adobe PhotoShop and load GIF Transparency. Select

File:Open GIF...

and then open the image that you just saved. Click on the background of the image to make this color transparent. The background should appear to turn grey. On a Web page, the grey part will actually be the background of the page. Select File:Save As GIF89... then choose OK and Replace. The background is now transparent. If you make any changes to the image, you will need to make it transparent again.

Creating Button Graphics with Photoshop

The following instructions will walk you through the process of creating a rectangular GIF image with a 3-D button look. For example:

Beginning a New Image
Open Adobe PhotoShop and select File:New.... In the New dialog box, choose a width of 80 pixels and a height of 40 pixels. Make sure the Resolution is set at 72 dpi and the Mode is set to RGB Color. From the menu bar, choose "Window:Palettes:Show Swatches". This will give you a selection of colors to choose from. Make sure the tool options are set according to this guide.

Click on the Eye Dropper Tool and then choose the color you want the button to be (try the blue which is the fourth from the bottom and eight from the right).

Click on the Paint Bucket Tool and then click on the image to fill it with the color you chose.

Making a 3-D Look with Shadows and Highlights

Click on the Eye Dropper Tool and then go to the Scratch color menu. Select a pale shade of the color you just selected (for example, light light blue). Now zoom in on the picture using Window:Zoom In. Repeat this three times until the ratio above the picture says 4:1. From the menu bar, choose Window:Palettes:Show Info. This will tell you where your cursor is.

Choose the Select Tool and draw a rectangle from the point 4,4 to the point 75,35 (your position is next to the cross in the Info box). This rectangle should appear to be equidistant from each edge. Now choose Select:Inverse from the menu bar.

Click on the Paint Bucket Tool and then click on the selected portion of the image (the rectangular border). That should make a light colored ractangle.

Now click on the Eye Dropper Tool and select a color from the Scratch, Picker, or Swatches menu. This color should be a dark shade of the original color.

Now click on the Pencil Tool and draw a diagonal line (consisting of four pixels) from the lower left corner of the light color to the lower left corner of the inside. Draw another diagonal line from the upper right corner of the inside color to the upper right corner of the dark color. If you accidentally put dots on the lower right side of the line, donÍt worry about it. If you accidentally draw dots on the upper left side, choose Edit:Undo. (You can also use the Eye Dropper tool to get the light color again, by clicking on the image, and then use the Pencil Tool to correct your mistakes.)

Now click on the Paint Bucket Tool and then click on the light color somewhere in the lower right portion. Now you should have the left and top sides in a light color and the right and bottom sides in a dark color.

Choose Select:All and then choose Filter:Blur:Blur More.

Adding the Text

Click on the little black and white squares that are located to the lower left of the color squares on the tool menu. This sets your foreground color to black and your background color to white.

Now select the Type Tool and click somewhere on the image until the Type Tool dialog box pops up. Choose a font, size, and options. Anti-alias should be selected, but outline and shadow should not be. (Try typing "Home" in Times Bold, 22 points.) Click OK when you are finished typing your text.

Use the arrow keys to move your words into position (or click inside the letters and drag it to where you want it). Click outside the letters to paste them into place.

Saving your Button
From the menu bar, choose Mode:Indexed Color... The Resolution should be set to 8 bits/pixel; the Palette should be set to Adaptive (or Exact, if possible) and Dither should be set to None. Click OK. Choose File:Save As... and give the file a name. Make sure the Format says CompuServe GIF.

Creating Bullet/Dot Graphics with Photoshop

The following instructions will walk you through the process of creating a round GIF image with a 3-D sphere look. For example:

Beginning a New Image
Open Adobe PhotoShop and select File:New.... In the New dialog box, choose a width of 10 pixels and a height of 10 pixels. Make sure the Resolution is set at 72 dpi and the Mode is set to RGB Color.

Double click on the Select/Marquee Tool to get the options window. Set the Shape to Elliptical. Click on the Gradient Tool and then set the Type to Radial. Zoom in several times on the image by using Window:Zoom In.

Selecting Colors
From the menu bar, choose Window:Palettes:Show Swatches. This will give you a selection of colors to choose from. Click on the Eye Dropper Tool and then choose a dark shade of the color you want (try the dark blue which is the fourth one in the bottom row).

Now click on the double arrow to the upper right corner of the color squares on the toolbar. This switches your foreground and background colors. Now choose a light shade of the color you want the bullet to be (try the light blue which is exactly in the middle).

Drawing the Bullet
Click on the Select/Marquee Tool and then select a circle by clicking in the upper left corner of the picture and dragging the circle down to the lower right corner. When you release the mouse button, you should see a symmetrical circle. If this didn't work, try it again.

Click on the Gradient Tool draw a gradient line. Do this by clicking about halfway between the center of the circle and the upper left edge. Draw the gradient line down to almost the lower right edge. This should be a diagonal line.

When you release the mouse button, the circle should be filled in with different shades of your chosen color. Hopefully, there will appear to be a shiny spot on the upper left side and a shadowy region on the lower right side. If you donÍt like the way this turned out, you can use the gradient tool until you like it.

Saving and Making Transparent
From the menu bar, choose Mode:Indexed Color... The Resolution should be set to 8 bits/pixel; the Palette should be set to Adaptive (or Exact, if possible) and Dither should be set to None. Click OK. Choose File:Save As... and give the file a name. Make sure the Format says CompuServe GIF.

Quit Adobe PhotoShop and load GIF Transparency. Select File:Open GIF... and then open the image that you just saved. Click on the background of the image (the white part) to make this color transparent. The background should appear to turn grey. On a Web page, the grey part will actually be the background of the page. Select File:Save As GIF89... then choose OK and Replace. The background is now transparent. If you make any changes to the image, you will need to make it transparent again.

Creating a 3-D Bar with Photoshop

The following instructions will walk you through the process of creating a GIF image with a 3-D bar look. For example:

Selecting Colors
From the menu bar, choose Window:Palettes:Show Swatches. This will give you a selection of colors to choose from. Click on the Eye Dropper Tool and then choose a dark shade of the color you want (try the dark blue which is the fourth one in the bottom row). Now click on the double arrow to the upper right corner of the color squares on the toolbar. This switches your foreground and background colors. Now choose a light shade of the color you want the bullet to be (try the light blue which is exactly in the middle).

Creating the 3-D Effect
Click on the Gradient Tool then draw a gradient line on the image. Do this by clicking at the top edge of the image and then dragging the line down to the lower edge. The line should be perfectly vertical. When you release the mouse button, you should have a gradient of color (light at the top, dark at the bottom). Zoom out using Window:Zoom Out to preview your image.

Saving your Image
From the menu bar, choose Mode:Indexed Color... The Resolution should be set to 8 bits/pixel; the Palette should be set to Adaptive (or Exact, if possible) and Dither should be set to None. Click OK. Choose File:Save As... and give the file a name. Make sure the Format says CompuServe GIF.

Scanning Images for the Web

Scanners on Campus
The MultiMedia Center in Rush Rhees Library has PC and Macintosh Color Scanners with a software package called DeskScan. They also have Adobe Photoshop for the Mac and PC. The Macintosh hooked up the scanner is a Power Mac, so it will read and write to PC disks.

CLARC, also in Rush Rhees Library, has several color scanners hooked up to Macintosh Computers. They have Ofoto scanning software as well as Photoshop.

The Faculty Computing Resource Center (FCRC) in Taylor Hall has a black and white and a color scanner connected to Macintosh computers.

If you are working at the Simon School, talk to Kevin Brennan in the computer center there.

The Medical Center has the Copy Center and Graphics. They will provide scanning for $5 a scan, and they do a good job. The Miner Library and Public Relations Office offer image conversion (to GIF or JPEG) as well as creation of graphics.

Scanning Photos
There are several different types of scanners and scanning programs, so the instructions I give here will be a general guide, not a specific walk-through.

First, you should set the resolution. If you want the computer to end up the same size as the original, the final resolution should be 72 dpi. If you set it larger than 72, the image will be clear but large. If it's smaller, the final image will be smaller. In some programs, including Ofoto, there are two resolutions to set. The first one decides how much information is read from the picture and the second one decides how much information is saved. The first one should never be smaller than the second. The second resolution (in Ofoto, the Print Resolution) is the one that needs to be 72 dpi to make the final image the same size as the original. Most programs have preset choices. If you choose one of these, it should be color or black and white photo.

Next, you can usually choose to do a prescan. This will let you make sure that the picture was put in the scanner the right way, etc. You can repeat the prescan until you think the picture is straight.

After the prescan, you can select the area that you want to scan and save. The scanning software usually tries to guess at the border of your picture, but you can fix its guess if you need to.

Before doing the final scan, you may want to adjust the brightness, contrast, or color balance to make the preview as clear as you can. One way to test your settings is to look at the white background parts of the image and see if they are shadowy, of if the black parts really look grey.

When you have adjusted the settings to your liking, do the final scan. In DeskScan, this will also save the image. In Ofoto, you save the image after the final scan. When you are asked for a file type, choose PICT if possible. If you are using a PC, you may need to choose BMP.

Converting for the Web
I suggest that you scan image with a Mac if only so that you can use Photoshop afterwards to crop them, touch them up, shrink them, and/or convert them. Remember, Web images need to be in JPEG or GIF format, and most scanning programs won't save images in those formats.

After saving your image in the scanning program, quit that and load Photoshop. You can use Photoshop to crop the picture to the size you like, adjust the brightness or contrast, etc. Photoshop also does a nice job of shrinking pictures. When you're ready, choose Mode:Indexed Color... from the menu bar. The Resolution should be set to 8 bits/pixel; the Palette should be set to Adaptive (or Exact, if possible) and Dither should be set to None. Click OK. Choose File:Save As... and give the file a name. Make sure the Format says CompuServe GIF.

Last modified: 4/09/97