Designing Graphics
for Your Web Site
Designing graphics
for your web site is an intimidating subject for many Internet entrepreneurs.
However, most of us must learn some basic design techniques to avoid the
high costs of hiring a professional graphics designer.
You can create your own graphics that can look just as nice as some of the
professionally created graphics for a fraction of the cost.
In order to create your graphics, you will need to invest in a good graphic
design program. You don't have to spend hundreds of dollars on a fancy graphics
design software. Paint Shop Pro is a wonderful graphics program and 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
The first and probably most important graphic technique we're going to discuss
is text. This is probably what you will use the most. Not just any text,
but text to be used with your logo, banners or page titles.
When you're ready to begin, open Paint Shop Pro and click on "File" then
"New" and type in a width and height for your image. Make sure your "Image
Type" is set to 24-bit and select your background color. You can leave the
other settings at their defaults. Make sure you give yourself a large enough
space to work with, as you can reduce it later.
Your first step will be to select a good font. Depending upon the effect
I want to achieve, I use one of three different fonts; Impact, Verdana, or
Arial Black. If you don't have these fonts installed on your computer, you
can find them here:
http://www.microsoft.com/typography/fontpack/default.htm
The first text effect we will be creating will display your text in a large
font size with a drop shadow effect. This drop shadow effect can also be
used with any other images you create.
Your first step will be to select your text color. To change the foreground
and background colors, double click on the top and bottom color squares on
the right. Your text will be
displayed in the color within the top box, which is the foreground color.
For this example, I will be using a light color as my foreground color.
Once you've selected your text color, click on the text tool on the left
side (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. I
will be using "Impact" bold, size 24. 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 to
drag your text to your desired position.
With your text
still selected (with marching ants), at the top of the screen, go to "Image"
then "Effects" then "Drop Shadow." This will launch the "Drop Shadow" window.
Your image will be viewable with the drop shadow in the little window at
the right. You can try different settings until you achieve the shadow effect
you desire.
Another text effect that is popular will display your text in a graduated
color effect. Your text can be displayed with a dark color at the top and
gradually get lighter or just the opposite.
To achieve this effect, the foreground (top box) color must first be set
to white. Next, click on the text tool and follow the same procedure for
displaying your text. You should now see your text displayed as "marching
ants," only with no color. Now you'll need to select a dark color for your
foreground color and a light color for your background color.
Once you've selected your colors, click on the "Flood Fill" icon on the left.
To change the effects of the Flood Fill tool, locate the little box on your
screen that says, "Controls" then click on "Tool Controls." Under "Fill Style"
select "Linear Gradient" and then click on "Options" at the bottom. The "Blend
Mode" should be set to normal. In order to select which color will be at
the top of your text, where it says, "Degrees" type in either 0 or 180 depending
on your desired effect, then click OK. Now place your mouse over each letter
and fill it by clicking on your mouse.
After you've filled your text, you can either create the shadow effect or
"right click" on your mouse to deselect your text.
If you'd like to decrease your graphics window size, click on the "Selection
tool" on the left (dotted rectangle) and select the portion of your graphic
that you'd like to display within your new sized image. Click on "Edit" then
"Copy" then "Edit" - "Paste as a new image."
After you've completed your graphic, go to "File" then "Save As" and select
a folder. Type in a name for your graphic and save your new file in the .GIF
format. The program will prompt you and ask you if it's all right to reduce
your file to 256 colors. Click on yes. Your new graphic is now saved.
Now that you've mastered these new techniques, try them with some of your
other images. The drop shadow effect can be used with photographs or just
about any image you'd like. Try the graduated color effect with your banners
or image backgrounds and give your graphics a professional look.
Copyright © Shelley
Lowery
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design
Mastery.
http://www.webdesignmastery.com
And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book.
http://www.ebookstarter.com
Visit Web-Source.net to sign up for a complimentary subscription to Etips
and receive a copy of the acclaimed ebook, "Killer Internet Marketing
Strategies."
http://www.web-source.net
You have permission to publish this article electronically, in print,
in your ebook or on your web site, free of charge, as long as the author
bylines are included.
More Articles
|
|
