Graphics Creation

If you want to create graphics for your web pages you will need access to a decent drawing or painting program. There are lots of them available as shareware, and some are quite good. Upgrading from a paint program to a photo-processing program (such as Adobe Photoshop) can really increase the quality of your graphics as well as allow for greater manipulative power.

Unfortunately, the learning curve for Photoshop is fairly steep. However, the price you pay in studying how to use Photoshop is well compensated for by the quality of the graphics that you can create and manipulate using it.


Some useful tools

This is a list of the graphics tools that you can use to create images for web pages. Unfortunately all of these but XV and Transgif are commercial software.

Type rendering (the 3D lettering)

Pixar Typestry

Adobe Photoshop

Image processing, enhancement

Adobe Photoshop

GIF_Converter shareware for Macintosh to convert among GIF, JPEG, PICT, and other graphic image formats.

Palette conversion

Debabelizer

Palette manipulation

XV


Transparent GIFs

Here are some links to programs that will make the background of your gifs transparent. Showing you how to use each one of the following programs is beyond the scope of this course. However, there are some web pages dedicated to explaining how to make a gif transparent, and I will point you to one of them here. It is a good exercise to go and try to find other web pages with similar information. PhotoShop Version 5 can create transparent GIFs directly, using the File menu's "Export" and then "GIF89a Export...", if the image is already in indexed color mode.

Macintosh
Transparency shareware for Macintosh. You may well also want to explore other pages at this site.

Windows
LView Pro shareware for Windows.


Photoshop Version 5 Techniques

How to create a drop shadow:

  1. Fire up Photoshop and choose New from the File menu.

  2. Choose suitable dimensions for your image.

  3. Choose a suitable medium dark background color.

  4. Choose the text tool "T" in the toolbar.

  5. Click somewhere in the new file workspace.

  6. Choose a font face and size; for larger sizes a serif face may be readable, but for smaller sizes be sure to use a sans-serif face.

  7. Select the color to be white; in some cases a pale off-white color may work well.

  8. Type your text.

  9. Use the mouse to select all of the text, and type a value of 40 for the Tracking; in some cases you will choose to adjust the tracking value larger or smaller to provide a good match between the text and the image size.

  10. Make sure Anti-aliased is ON, to smooth away the "checkerboard" effect at the edges of each character.

  11. Click okay.

  12. From the Layer menu, select "Effects" and then "Drop Shadow..."

  13. Select mode "multiply".

  14. Set the opacity to 80%.

  15. Select an angle of 120 degrees; in some cases a value as high as 150 degrees may work well.

  16. Un-check the box for "Use Global Angle".

  17. Set the blur to a number of pixels that is perhaps one or two pixels larger than one tenth the point size of the type face.

  18. Set the distance to a number of pixels that is half to two-thirds the value you chose for the blur.

  19. Set the intensity to a value of 0%; in some cases a value as high as 100% may work well.

  20. You can see the effect by clicking to check and un-check the "apply" box; you may want to adjust the blur and distance values up or down a bit.

  21. Voila!

  22. Make sure you both save it as a PhotoShop file (so you can copy it for another graphic, or come back later and revise it without having to start over) and also save a copy as a JPEG, or export a copy as a GIF, for use on your Web page.

    Face With Shadow Without Shadow
    Serif Example serif face with drop Shadow Example serif face without drop Shadow
    Sans-serif Example sans-serif face with drop Shadow Example sans-serif face without drop Shadow

As you can see from the above illustrations, even with a fairly large size type face, a serif face will be harder to read than a sans-serif face.

A drop shadow will enhance readability of lighter color text on a darker color background, especially if the distance and blur are not too large, and especially if the text has been rendered with "anti-aliasing" turned on (that tends to smooth and soften the edges, which the drop shadow will bring back, providing better "definition" of the characters). In other situations, or with other settings, especially dark text on a light background or too large a distance and blur, a drop shadow will seriously degrade readability of text.


Consistent Look and Feel

Before setting out to create Web page graphics for official institutional pages, you should consult with the people responsible for hardcopy publications such as the course catalog. You should identify and obtain the various standard fonts, and learn the rules that are in place for which font gets used in what situations, so that the on-screen "branding" of the institution's Web presence is consistent with that of the hardcopy publications.

You should also establish a standard set of colors (specified in terms of their RGB values) for use on Web pages. These may well not match exactly the colors used on print publications, in order to be sure that as many computers as possible will be able to reproduce them accurately.

Do identify a fairly dark color that can be used as a background for white or pale text, such as Ohio University's green that I used in the drop-shadow examples, above.


Back   Topics   Next

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/html2/graphics.html) on January 29, 2002.

Please E-mail any comments or suggestions to acatec@www.ohiou.edu.