Creating Web Graphics
Contents
These instructions deal with using Adobe Photoshop, an expensive but
very nice graphics editor. Familiarity with Photoshop will allow you
to create sharp-looking web pages.
Photoshop is available in the University Information Technology Center and the Ed Tech Center
(Rush Rhees Library), Taylor 41 and 31, Hylan 303, and Harkness 114 (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.
 |
Marquee makes rectangular or elliptical selection
Lasso selects other shapes
Magic Wand selects areas by color
Move will move a selection
Cropping cuts the image down to the selected size
Type creates text
Hand scrolls through a window
Zoom maginifies an image
Paint Bucket fills in an area
Gradient fills an area with a grade of color
Line draws a straight line bewteen two points
Eyedropper sets the foreground color
Eraser paints with background color or other image
Pencil draws freehand or straight lines
Airbrush creates a spray of paint
Paint Brush paints smoother than the Pencil
Rubber Stamp paints with a copied image
Smudge smears the image
Blur/Sharpen softens or focuses an area
Dodge/Burn/Sponge creates other special effects
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:
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. 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).
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 Ed Tech Center in Rush Rhees Library has PC and Macintosh Color Scanners
for use with Photoshop software.
The University Information Technology Center, also in Rush Rhees Library, has scanners hooked
up to Macintosh and PC Computers. These also use Photoshop to scan..
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 BMP or GIF.
Converting for the Web
Just remember, Web images need to be in JPEG, GIF, or PNG format.
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.
|
