Tutorials
Software
Articles
Links
|
 |
The Domain onlinetutorials.net is for sale. For more information, please click here!
Graphics Basics
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-editing 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 trial.
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.
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. 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
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
|
