2-Tier Affiliate Program | Web Templates | More Articles
Crossing the Great Graphics Barrier
by Blaine Fallis bf@friendlywebdesign.netOne of the first hurdles in learning Web design is understanding the use of graphics. The greatest of programmers can come up against the graphics barrier and sometimes just fall flat. Even professional desktop publishers when faced with a "design for the Web" task, can make critical errors.
1. Size Matters --> Making your featured graphics too large is a web design no-no. Yes, a graphic generally looks better when it's big, but consider the costs. If a graphic is too large, text cannot flow around it gracefully. Most reading widths should be in the area of 480 to 600 pixels across, and if you have a photo you want to mix into an article that's 400 pixels wide, guess what? You'll either squeeze the text into an 80-pixel area (less Hspace), or just have to make the graphic take it's own row! Plus larger graphics as we all know take awhile to download. Let's not forget about those poor blokes who are still on dial-up! My rule-of-thumb is: experiment with the image and try it at various sizes... don't fall in love with the larger version! See what it looks like at 200 pixels across. Give yourself a moment and get used to the image 50% reduced. Also... never change image sizes of a file after it has been made into a jpeg. Make your edits and changes first in a hi-res format such as png, psd, or bmp, being careful to change width and height proportionally. Then and only then, optimize for the Web. Also, to make the text flow around the image, use align="left" or align="right" and be sure to add Vspace and Hspace of 6 to 20 pixels.
2. Gif or Jpeg? --> In a nutshell, gif files love flat colors, and
stripes are ok too if they run horizontally. You can make a 2-tone image
that's huge -- 1600 by 1200, and save it as a gif with just 2 or 4 colors,
and have a file that's only 10k in size! For example, take a look at
http://lynda.com -- that background image is 1280 by 1024 in size, and
weighs in at only 15k. Why? Because it only uses a total of 4 colors!
Gif is a great "bang for the buck" format, but photographic
images look like something out of Blair Witch Project when reduced to
16 or fewer colors. You'll need 128, even 256 colors, and still gifs
will pixelate a photographic image. No sweat... Jpegs excel at making
these images look great while keeping the file size low.
Gifs therefore, are a sneaky way to create great Web graphics of fewer colors,
with incredibly low file sizes. And by using a Web Color Palette you can achieve
exact color matches... which comes in handy for matching up with a specific
background color. Jpegs just won't match exactly and your image will leave
tell-tale square borders around that jpeg you hoped would match your background
color.
3. Animation How To? --> Ever hear of an animated jpeg? Nope. Using
several frames of gifs that all use, say 2, 4, or 8 colors, you can piece
together a fairly long animated gif while keeping the file size under
control. But how is it actually accomplished? Well that depends on the
program you use, but the principle is the same. In Macromedia Fireworks,
a quick way to make an animated gif is to "duplicate frame" about
8 times, and as you go to each successive frame, you can alter the image
slightly. In Adobe ImageReady a lot can be accomplished quickly by going
frame to frame and making various layers visible, invisible, or by changing
the alpha settings, adding layer effects, and more. But before you go
crazy creating things remember... your final image will be equal in size
to approximately the size of the original image (e.g. frame 1) times
the number of frames. So a 6k image seems small enough until you multiply
that by 9 frames, and suddenly you're at 54k! That's way too big! Your
final HTML page in total should be 54k or less... are you going to double
that just to add in 1 little animated gif? Rather, use the 4, 6, or 8
color method, create yourself a little 1k image and then go to town animating
that! You could have 16 frames and still be small enough.
©
Blaine Fallis, Managing Director - Friendlyweb.net
Web hosting that's different from the
ground up. Our acclaimed Appies Web Site Manager
puts all the tools in your hands: phpBB, Photo Gallery,
Appies calendars, Appieshop, Superior email management,
Site Map Creator, Company Directory creator, web mail.
Affiliate opportunity: HostingScouts call
866-437-3257 ext 811
"If you're going to lead by example there has to be an element of calculated risk. You've got to challenge ideas and stir the pot by taking action."
Chris Pirillo, LockerGnome
