Elements of Graphic Design for Your Website
By Kelly Paal
We've all seen them. Poorly designed web sites that make you cringe as soon as they load. But how do you keep your website from becoming, well, ugh. You could hire a professional web designer, and that's expensive, or maybe you already hired a professional, or someone who claims to be professional, and you don't like what they're doing with your site. It all comes down to the K.I.S.S. principle; keep it simple stupid. And you're probably asking well what does this really mean for web design.
Here are some basic graphic design/web design principles that you can use on your site:
1. Background, be careful what color you use for the background of your site. Yes I know that you're trying to get noticed, but really they've already decided to look at your page so why does it have to be orange? Seriously though, consider how long you want people to be on your site, half an hour, one hour, more? Whatever the time chose your background color and then sit in front of your computer and stare at it, for awhile. Is the color easy to look at? Difficult? Does it make your eyes water? Does it make you calm? If you can look at the color for about fifteen minutes without a problem you're okay.
2. Text, related to the above be careful what text color you use. Follow the rules above for determining a text color. It should be easy to read, and look at.
3. Font, no more that three fonts on the entire website. I mean that! A big mistake that I see a lot of times is the use of more than three different fonts, it get's hard to read no matter how neat you think it looks.
4. Font size, no more that three font sizes either. Now I don't mean three font sizes for each of the three fonts you've chosen. I mean no more than three fonts with a total of three sizes throughout the entire site, and if you can get by with less even better. It will simplify your site.
5. Scrolling, this is a big one literally. I've been on too many sites where I had to scroll down so far that my computer beeped at me. This is really important on your main page. Keep it very sparse, generally any information that someone has to scroll more than one full page down for will not be read.
This is only a start of course but it's a start and it is on these issues that I see so many problems. Always remember that simplicity is best.
About The Author
Kelly Paal is a Freelance Nature and Landscape Photographer, exhibiting nationally and internationally. Recently she started her own business Kelly Paal Photography (www.kellypaalphotography.com). She has an educational background in photography, business, and commercial art. She enjoys applying graphic design and photography principles to her web design.
Internet Marketing Tools - 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 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:
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)
Optimize Your Graphics for the Web
By Mario Sanchez
Heavy graphics cost you money and traffic. They cost you money because heavy graphics require both significant storage space and bandwidth. Since your web host will usually give you a limited amount of storage space and a maximum data transfer allowance, heavy graphics can cause you to exceed those limits, in which case you'll have to pay extra.
Then, heavy graphics cost you traffic: put up a web page that takes more than 10 seconds to load, and your visitors will run away faster than you can say back button. If you happen to be running an e-commerce website, you already know that traffic equals money, so heavy graphics will make you lose both.
Fortunately, there is a solution: you can optimize your graphics for the web. Your graphics should be in either .gif or .jpg formats (.gif works best for logos and navigation buttons, while .jpg works best for photographs.) The idea is to reduce the size of your graphics so that they take as few bytes as possible while retaining acceptable quality.
This can be done using free on-line graphics optimization tools. One of the best ones out there is Gifbot, by Netmechanic (http://www.netmechanic.com/GIFBot/optimize-graphic.htm). They have a user-friendly web-based interface that works like this: you upload your picture, they process it, and almost instantaneously they will give you several lighter versions of your graphic for you to chose. Pick the image that takes the fewest bytes while still retaining and acceptable quality level. It is not uncommon to reduce the weight of a picture by up to 70% with no noticeable decrease in quality (especially if the image is in .jpg format.)
Another useful tip is to use thumbnails. Thumbnails are miniature versions of a picture that are hyperlinked to its actual size version. The thumbnail will load fast, and by clicking on it your visitors will be able to see the actual size version.
Use both of these techniques and you will have a faster loading website, while having more storage space and bandwidth available for that useful content your visitors are always looking for.
About the Author
Mario Sanchez publishes The Internet Digest (http://www.theinternetdigest.net), a website and newsletter that gives you free advice on Internet Marketing, Web Design and Small Business. To subscribe go to: (http://www.theinternetdigest.net/newsletter.html)
Five Free Graphics Tools
By Dianne Reuby
Graphics often need a bit of a tweak before you add them to your pages. Cropping, making the background transparent, resizing, or just finding that picture that you **know** you've got somewhere on your hard drive! Irfan View can carry out all these tasks, and includes a great browser which loads at the click of a key, and displays thumbnails for you to choose from. It will also do screen captures. Available from many freeware sites (see below), you can also
download from (http://softwarecenter.net/irfanview/)
GIF files can be "optimized" - have all the unnecessary information cut out of them. This makes them quicker to load on a web site, without affecting their quality. GifClean32 from (http://members.tripod.com/~mharing/GifClean32.html) will do this, and is very easy to use. JpgCleaner from (http://rnbw.tsx.org) does the same for JPG files.
NOTE: Some clipart creators ask you not to use these tools on their graphics, as the programs can remove the copyright info from the file. So check first!
Do you want an icon for your web site? Having a "favicon" which displays in Internet Explorer address bar and favorites list can make your site stand out. GoldIcon will let you create 32x32 BMP icons. Get it from (http://www.goldshell.com) To find out more about favicons and how to use them, go to (http://www.favicon.com/)
Harm's Tile from (http://www.users.uswest.net/~sharman1/) will allow you to create seamless tiles for backgrounds, buttons, etc. It has several effects that can be used alone or combined together, such as ripple, fish-eye, buttonise and more. It's fun to use, too!
UFX (Ultimate Effects) - (http://www.ultimatepaint.com/ufx/) can apply special effects to your pictures. It's prime purpose is for scanning and manipulating photos, but it can be used on other graphics too. You can also use Adobe Photoshop plug-ins with it. Use it for screen capture, transparent gifs, special effects and other tasks too.
Some of my favourite freeware sites:
(http://www.completelyfreesoftware.com/)
(http://www.webattack.com/)
(http://www.jumbo.com/)
(http://www.moochers.com/)
Some of my favourite free graphics sites:
(http://www.iconarchive.com)
(http://www.clipartcastle.com)
(http://www.clipart.com)
(http://www.free-backgrounds.com/)
About the Author
Dianne Reuby is co-author of the e-book "First Website Builder", (http://newbieclub.com/builder/?pramclub) Dianne created and runs the Free Site Builder web site and ezine, dedicated to helping newbies create web sites with free tools, services and resources. Visit FSB at (http://freesitebuilder.co.uk/) Send for a complete list of free articles and lessons by e- mail : mailto:fsb-lessons@getresponse.com
|
