Internet
Marketing Tools - Graphics Basics
Part four of ten
By
Shelley Lowery
Graphic
design is an intimidating subject for many Internet
entrepreneurs. However, most of us must learn some basic
design techniques in order to avoid the high costs of
hiring a professional designer.
In
order to create or edit your graphics, you'll need to
invest in a good graphics program. The most popular
program used by Internet marketers is Paint Shop Pro.
This powerful program is the only program you'll need
to design professional looking graphics. You can download
a free 30- day trial and register the software for only
$99. http://www.jasc.com/
Image
Formats
The
most popular image formats used on the Internet are
GIF and JPEG.
Graphic
Interchange Format, better known as GIF, uses a maximum
of 256 colors and is best suited for images such as
logos, buttons and bullets.
GIF
images can be saved in two different formats:
-
87 - 89a
The
89a format is the preferred GIF format, as it has the
following benefits:
Transparency
Images
saved in the 89a GIF format can have a transparent background.
This will enable the canvas of an image to be transparent
and enable the background to show through.
Interlacing
Images
saved in the 89a GIF format can be saved as interlaced.
This will enable your image to display as it is being
loaded into a web page. The image will gradually become
clearer as the page loads.
Animation
Images
saved in the 89a GIF format can be used to create animated
images. Animated images are simply several GIF images
compiled into one GIF image file that loops. In order
to create an animated image, you'll need a special editing
program.
Joint
Photographic Expert Group, better known as JPEG, is
the best format for photographs. JPEG images can contain
millions of colors and allow you to specify the degree
of compression.
Although
there are many graphics programs available on the Internet,
this tutorial will focus on using Paint Shop Pro 7.01.
If you are using a different version of Paint Shop Pro
or another graphics program, the graphic tools mentioned
below will not be located in the same places.
Editing
Images
When
working with images in Paint Shop Pro, you will have
the ability to save your image in PSP format. This format
will enable you to begin working on an image, save it
in PSP format and finish the image at a later time.
It will preserve all of your work without any changes.
If
you would like to edit an image that has been previously
saved in the GIF format, you must first increase the
image's colors to 16 million. If you don't, your colors
will be limited. Go to "Colors" - "Increase Color Depth"-
"16 million colors (24 bit)" to increase your image's
colors.
Resizing
Images
If
you'd like to resize an image in JPEG format, you can
do so in one of two ways -- through your graphics program
or within your HTML. You can resize your image within
your HTML by changing the HEIGHT and WIDTH values. To
retain your images original characteristics, make sure
you adjust the height and the width equally. In other
words, if your original image dimensions are 50x100
(width 50 and height 100), to reduce your image to one
half the size, change the width to 25 and the height
to 50. Although you can use this method, it's not recommended,
as it will make your file size larger than necessary.
If
you'd like to resize an image in JPEG or GIF format,
go to "Image" - "Resize" and select "Percentage of original."
Type in your selection in the first box and click on
"OK." There's no need to fill in the second box, as
it will be filled in automatically. For example. If
you would like to reduce your image to half the size
it is now, type in 50. This number is telling the program
that you'd like to reduce the image's size by 50%.
If
you would like to increase your image's size, type in
a number over 100. Your original image is considered
to be 100%. If you would like to increase your image's
size by 50%, type 150 in the first box.
Rotating
Images
If
you'd like to rotate an image, go to "Image" - "Rotate"
and select your preferences.
When
rotating an image, it may lose some of its clarity (become
blurry). You can correct this problem by sharpening
your image. Go to "Effects" - "Sharpen" -"Sharpen."
If after sharpening your image it still appears a little
blurry, simply sharpen it again.
Working
With Text
If
you would like to use text within your image, your first
step will be to select your text color. The "Styles"
boxes are located on the right hand side of your screen.
The top box should be set to Null (off) and the bottom
box should be set to Solid, which will look like a paintbrush.
To
change the style of each box, click on the black arrow
and make your selection. To change the text color, click
in the center of the bottom box and select your preferred
color. Your text will be displayed in the color within
the bottom box.
If
you would like to outline your text in a different color,
click on the black arrow of the top box and select the
paintbrush. Your text will be displayed in the color
your bottom box contains and outlined in the color your
top box contains.
Text
Tool
Once
you've selected your text color, click on the text tool
on the left-hand side of your screen. It looks like
a capital A. This will launch your text window. Select
your font and text size from the drop down menu and
type in your text. Make sure you select "Antialias"
and "Floating" then click "OK."
Antialias
will smooth out all of the rough edges of your text
and blend it in with your background color. You will
use the Antialias setting with various graphic tools
when designing your graphics, so it is important to
remember its function.
You
will now see your text with, what looks like, marching
ants around it.
If
you'd like to move your text, click and hold your left
mouse button directly over your text to drag it to your
desired position. Try to center it as well as possible,
but don't deselect it.
If
you would like to rotate your text, now is the time
to do it. Simply follow the same instructions (above)
used to rotate an image.
If
you make a change to your image and you're not satisfied
with the outcome, you can undo your last change by going
to "Edit" - "Undo." It will only undo the last thing
you did.
Adding
a Drop Shadow
Your
next step will be to add a drop shadow effect. With
your text still selected, go to "Effects" - "3D Effects"
- "Drop Shadow." Your selected text will be displayed
in the window. Try different settings until you achieve
the effect you'd like. Click on OK. When you're satisfied
with your text, right click on your mouse to set it.
Now
that you have a basic understanding of graphics, take
some time to learn some additional techniques. There
are many free tutorials available on the Internet. Not
only will it assist you in creating professional looking
images, but it will also save you a great deal of money.
Copyright
© Shelley Lowery 2002.
About
the Author: This article was adapted from the highly acclaimed
ebook series, Web Design Mastery. Web Design expert and
author Shelley Lowery's latest ebook is an in-depth guide
to professional web design that is rapidly becoming known
as the "Bible" for professional web design. http://www.webdesignmastery.com |