EXPLORING GRAPHICS FOR THE WEB
Dr. Richard L.
Bowman
Academic Computing, Bridgewater College, Bridgewater, VA,
USA 22812
I. Introduction
Computer graphics are common enough that such terms as
gifs and jpegs are almost an accepted part of American
English. And yet many persons find the associated file
extensions of .gif, .jpg and .bmp bewildering. This
tutorial will de-mystify some of the procedures for
creating and manipulating graphics, particularly when
used on web pages.
Note: If you have not yet
set your computer to show the file extensions, do it now.
Double click on My Computer on your desktop and from the
Tools menu select Folder Options. Click on the View tab
and then locate the Advanced Settings option of
"Hide file extensions for known file types."
Click in the box immediately in front of this item to
deselect this option. Finally, close the Folder Options
window by clicking the OK button. Now the extensions on
all files will be visible when their file names are
visible.
II. Guidelines for Making Graphics for the Web
1. Use graphics primarily to convey
information. Limit the use of web graphics that
are only for spicing up a web page. Remember that any
graphic on a web page will slow down the loading of that
page, particularly for those uses using a dial-up
Internet connection. However, information is not just
quantitative data; a picture of an author might be useful
to inform and dress up an English literature web page.
2. Keep the size of web graphics as small as
possible. A good rule-of-thumb is to keep all
graphics under 40 kB. In general, they should be around
20 kB or less. However, if an image is the real
information, try the technique of placing a small
thumbnail of the full image on the main web page and link
it to the much larger graphic. Giving the actual size of
the larger graphic next to the thumbnail image would be a
nice user-friendly touch.
3. Check to see how your web page looks in
text-only browsers. Persons with certain visual
handicaps will often use a text-only browser such as
"lynx." Also, persons accessing the web through
slow connections may turn off the loading of graphics in
their browsers.
4. Limit the image formats to either jpg or
gif when using graphics on a web page. Many
browsers can display other formats, too, but none are yet
universally used except for jpg (or jpeg) and gif.
5. Use a quality factor of 85 or 90 for jpg
image files. The jpeg format allows for various
levels of compression of the data necessary to displaying
a particular image at a particular resolution. A value of
100 is the best quality, least compression, possible with
the jpeg format. However, since the algorithms used by
web browsers to display graphics do not show all of this
detail anyway so that graphics can be displayed faster, a
web author can use a quality of 90 or 85 to make smaller
image files that still look OK in a browser. Full size,
high resolution images, that users will use for other
purposes, should be saved with the maximum quality of
100.
6. Copy the final version of any graphic to be
used on the web to the same folder where the web page is
located or will be located. This will ensure
that including that image in the appropriate web page
will be handled easily and correctly by the web authoring
program that generates the web page.
III Getting Acquainted with Freely Available Graphics
Software
Many powerful computer programs exist for working with
graphics. However, much can be done with freely available
programs that already exist on many Windows PC's
or which can be easily obtained and installed. Paint
(a basic component of the Windows operating
system), WordArt (from with in Microsoft Word)
and IrfanView (a free download from the
Internet) are introduced here. If you work on your home
computer, some graphics program may have come with your
printer or scanner. Do learn to use these, too.
1. Open Paint.
On the Windows Start menu, find Paint under
Programs/Accessories. Click on it to begin your artistic
venture. Move to the View menu and make certain that the
Tool Box, Color Box and Status Bar are all selected and
visible as part of Paint.
2. Set the size of the graphic. For
buttons on web pages, a reasonable size is about 100 by
30 pixels. An image of 300 by 200 pixels can be used as
the lead-in graphic on the main page of a web site. As an
exercise, create a logo for yourself. But before actually
adjusting the size of the graphic in Paint, a
word is needed about pixels and Paint.
The native file format for Paint is bitmapped
graphics (.bmp). This means that its images can appear
very pixelated (grainy) when displayed and usually
require large amounts of memory when they are saved. In
addition, not all browsers can display bmp graphics
files. The best solution is to work with larger bitmapped
images in Paint and then to make them smaller
and saving them in compressed format through a program
such as IrfanView, described below.
So for this example, begin with a size of 150 by 150
pixels and then resize it to 75 by 75. The picture area
in Paint can be adjusted by selecting the Image
menu and then choosing Attributes. Paint should
now look like this.
3. Make a border. Select a color from
the Color Box at the bottom of the window by clicking on
that color. Then in the Tool Box choose the Rectangle
tool by clicking on it. This is the button with a
rectangle on it. (Holding your cursor over a button for a
moment without clicking the mouse will make the name of
that button to show up.)
Create a box a few pixels inside of each edge of the
graphic. Move the cursor to a few pixels inside the upper
left corner and drag the mouse down to the same number of
pixels inside the lower right corner. Release the mouse
button and a square will have been created. The location
of the cursor in pixels is indicated in the Status Bar at
the bottom of the Paint window. Use this
information to make this square to be in from the edge
the same distance all around the logo.
Now fill the outside of this square with the same
color as the square that has just been made. To do this,
choose the Fill With Color tool (a paint bucket with
paint flowing out of it is on the button) and then move
the mouse so that the tip of the pouring paint from the
can is inside the white space surrounding the edge of the
graphic. Click with the mouse, and the border is filled!
Hint: To clear out a
mistake, go immediately to the Edit menu after making the
mistake and click on the Undo option.
4. Add your initials. To place your
initials in the inside of the logo, choose the Text tool
(the one with the "A" on it). Move to the
inside of the graphic near the upper-left corner and drag
down to the lower right corner. A dotted-lined square
will be visible. Click inside the square and begin
typing. The font family, size and style can be changed in
the Fonts window. If this window is not showing, go to
the View menu and click on the Text Toolbar option.
Hint: If your initials are
not placed quite where you want them to be, do not fret.
Simply choose the Select tool (with a dotted-line
rectangle on it). Click and drag the mouse cursor through
the area you wish to adjust. After releasing the mouse
button, go back and click in the middle of the selected
area and move it around as you wish. Releasing the mouse
button will set the selected region down in its new
location.
5. Save the logo. From the File menu
select the Save As option. In the resulting dialog box,
ascertain that the file type is "24-bit
Bitmap," move to the location of your web page
files, and enter an appropriate file name, such as,
"logo.bmp". Later open this file in IrfanView,
resize it to 75 by 75 pixels and then save it as a jpg
file with 90% quality. (Read further along in this
tutorial for more details on this procedure.)
Here is my logo after being resized and saved as a jpg
file.
6. Experiment! There are many more
possibilities to work with in Paint. Make a
larger canvas and give them a try. Here is an example
created at 470 by 245 pixels in Paint and then
resized to 300 by 156 in IrfanView and saved as
a jpg file with 90% quality.
1. Find the WordArt
tool. Microsoft Word has a useful little
"program" called WordArt that creates special
effects with text. To get to WordArt, open up Word
and select the Drawing button on the toolbar. On the
Drawing toolbar select the WordArt button. To
access WordArt from the Insert menu, select Picture and
then WordArt.
2. Create the text effect. Select one
of the pictured text effects and see what your creative
impulses produce. When the image looks as you would like
it to appear, close the picture editing session from the
"Edit Picture" toolbar. This toolbar may not be
visible. To make it appear, from the View menu select
Toolbars and then the "Edit Picture" toolbar.
Once selected, this toolbar will show up if and only if
you are editing or creating a picture.
3. Save the text image. The graphic
created by WordArt is automatically embedded in
the Word document where it was created and will be
printed where placed. To use WordArt in a web
page or other graphical creation, click on the image in
the Word document to make sure it is selected
and then copy it. Open a graphical program such as IrfanView
and paste this image from the Windows clipboard
into the program. Then resize and save it as appropriate.
Here is a sample creation from WordArt.
Hint: Also try experimenting
with the other drawing tools or effects that are
available from the Drawing toolbar in Word.
Note: Microsoft Office often
ships with the program PhotoEditor. However,
since the freely available IrfanView has much
higher quality resizing routines and other capabilities
not present with PhotoEditor, I urge persons to
follow through in obtaining and using IrfanView,
as describe next.
1. Obtain and install IrfanView.
Another excellent piece of free software that is easy to
acquire and use is IrfanView. It is now part of
the standard load on Bridgewater College lab computers.
If it is not on your office computer, contact the IT
Center to have it installed. For home use, download it
from http://www.irfanview.com/
. Its latest version is only 800 kB as a self-extracting
compressed file and thus downloads quickly. Download the
appropriate file and save it in a logical location on
your computer. Locate this file and double click on it.
Follow the dialogue boxes that appear. Most of the
defaults can be left as they are. Probably it is best to
select "Image only" to be associated with IrfanView.
2. Open an image and resize it. Run IrfanView
from the Start button or from its icon on your desktop.
From the File menu Open the logo file created in
Paint above. Move to the Image menu and select
Resize/Resample. Make certain that the "Preserve
aspect ratio" box is checked. Change the width value
to 75 pixels and notice that the length value also
changes appropriately. Then click the OK button. After
resizing is completed, one often needs to sharpen the
image. This can be done through the Image menu and the
Sharpen option. The amount of sharpening done with any
one selection of this option can be set through the
Effects and then the Effects Browser options in the Image
menu. Setting this to a value of 5 allows for one to
apply it several times to acquire the desired effect
rather than doing too much at any one time.
3. Save the image. Under the File
menu select "Save as" to save the image in a
different format. For web purposes, choose either gif or
jpg. For better color rendering, the usual choice should
be jpg unless a special transparency effect is desired
under the gif format. For web publishing set the quality
of the jpg compression to 90 or even 85. The smaller
amount produces a smaller image file (and thus a faster
loading image) but there might be more distortion at
lower quality settings.
4. Make other adjustments to an image as
necessary. When working with other images, e.g.,
from cameras and scanners, there may be other adjustments
that are necessary or desirable.
- One can crop an image to more clearly focus on
the object of interest. Quite often the pictures
amateurs take are too far away from the subject
and have too much extraneous material along the
border of the image. Crop it away! Remember the
rule of thumb: place the focus of interest in a
picture near the center of one of the quadrants
of the image. Cropping can be done in IrfanView
through the Edit menu.
- The color balance of the image may also be
adjusted for most realistic effect. Quite often
digital cameras or scanners will leave the color
balance of an image to be slightly
"unreal." Adjusting the color can often
be done by increasing the Gamma Correction
followed by increasing the contrast (this
brightens the image without washing it out) and
then reducing the intensity of the blue color
while increasing the red component. This is where
IrfanView excels. Software that comes
with digital cameras can usually do all of this
but may do it by sliders or wheels and not show
an associated number so that the effect is
difficult to reproduce. To make adjustments in
color, go to the Image menu and choose the
"Enhance colors" option. Remember, if a
particular adjustment does not look right, just
Undo it!
- Use the "Enhance color" option and the
"Effects browser" to make other
modifications to your images that your creativity
wants to experiment with doing.
IV. Scanning (Digitizing) Pictures
A scanner can be used to scan photographs and other
pictures so that they are in a digital format such as
jpeg. Pages of text can also be scanned, and then optical
character recognition software may be used to convert the
image of the text back into real characters.
To do the actual scanning at Bridgewater, the HP
scanner in MCK 226 (or those available in other
locations) may be used. IrfanView can be used to
access the appropriate software to control the actual
digitizing of the image. Run IrfanView and from
the File menu select Acquire. Wait while the scanner
software is opened and follow the prompts to obtain the
image. To OCR a document, go to the Start button and
select the appropriate scanner software from there.
Note: When using scanned
pictures or diagrams from other sources, be sensitive to
copyright restrictions and protocols!
V. Converting from One Graphic Format to Another
As noted earlier in this tutorial, the output from Paint
is in bitmap form, that is, it will have the extension
.bmp as part of its file name, but the two main graphic
formats in use on the Internet today are gif and jpeg (or
jpg). To convert a file from one graphic file format into
another, simply open the file in a graphics program and
then use the Save As option from the File menu to save it
in the proper format and with the correct extension.
While the latest versions of Paint can save
images in gif and jpg format, my suggestion is not to use
it do so. Paint does not allow the user to set
the parameters that are allowed in each of these file
formats. Rather, it simply sets what it considers to be
the most usual default values. IrfanView, on the
other hand, lets all of these parameters under the
control of the user.
Hint: When saving a graphic
file that is to be used on a web page, it is a good idea
to keep the file name short and to make certain that no
spaces are included in the name.
Note: While the jpeg format uses a
pretty good compression routine and allows for a full
24-bit color scheme, the gif format for images sometimes
makes a smaller file. The gif format has a maximum of 256
colors and is thus not appropriate for photographs, but
it can be a good choice for logos and other
"constructed" graphics. In addition, one of the
gif format versions allows for the specification of a
transparent color. This can be useful with logos and
other graphics where one desires the background to show
through if it is changed.
VI. Inserting Pictures or Graphics into a Web Page
Assuming the necessary image is already copied into
the same file folder as the web page you are
constructing, open the appropriate web page in FrontPage
and position the cursor at the proposed location for
the graphic. From the toolbar press the
"Picture" button. Browse to locate the graphic
file, or simply type in its name. Complete the
installation of the image by pressing "OK."
Right click on an image in FrontPage and select
the "Picture Properties" option to make some
adjustments in how the image will be displayed on the web
page.
Graphics (photographs, buttons, or other images) can
be made to be active hyperlinks to other web pages.
Simply click once on the image and then select the
"Hyperlink" button in FrontPage. In
the dialog box add the address of the web resource to
which you desire to link.
First Hint: It is very
important for those using browsers that do not support
graphics and for the visually handicapped that a web
author provides alternative text which will be displayed
when the graphic cannot be displayed. This can be added
through the "Picture Properties" option.
Second Hint: DO NOT RESIZE
the image in FrontPage! This will not really
resize the image; it only resizes how it is displayed.
The browser algorithms that do this are of poor quality
and the file still takes the same amount of time to
download since its real size has not changed. If an image
needs to be resized, do it in IrfanView or
another graphics program with good algorithms for doing
this.
VII. More Advanced Topics
There are many other advanced paint and drawing
programs on the market or available as shareware. Check
the PC archives on the Internet for more choices. And by
all means, keep experimenting and looking for more
effective ways to communicate with your students and
colleagues through your use of graphics on your web
pages.
|
