EXPLORING
GRAPHICS FOR THE WEB
Dr. Richard L.
Bowman
Academic Computing, Bridgewater College, Bridgewater, VA,
USA 22812
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.
|
Introduction 
