Homepage

Animation
Categories

4th of July
Airplanes
Aliens
Animals
Arrows
Balloons
Bars
Birds
Butterflies
Canadian
Cars
Cats
Cartoons
Christmas
Computers
Construction
Dancers
Dogs
Dolls
Emails
Eyes
Fish
Flags
Flowers
Food Items
Frogs
Globes
Holiday
Hearts
Insects
Lights
Money

Motorcycles
Music
Nautical
Neon
Numbers
People
Racing
Skulls
Smileys
Space
Stars
Trees
Turtles
Wording

Non
Animated

FONTS
Fun Fonts

INTERFACES
Interfaces

WEBMASTER TOOLS
HTML Colors
Add Chat To Site

Javascript
Scripts
Tutorials

Website
Templates
Templates

Apartments
Ultimate Restaurant Guide by City

Ultimate Entertainment Guide by City

TX Apartments
MA Apartments
Austin Guide
Denver Guide

Vacation Guide




Crossing the Great Graphics Barrier

One 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 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


Webmaster
Articles
Bad Economy?
Link Exchanges?
Free Advertising
Cheap Hosting
Gif or Jpeg?

Website evaluation

Animated

Backgrounds

Non
Animated

BACKGROUNDS
Bkgrnds I
Bkgrnds II
Left Bkgrnds
Search

SETS
3D Bttn Sets
Web Sets
Button Sets

3D ELEMENTS
3D Arrows
3D Stars

Divider bars
3D Bars
Bubble Ends
Wavey Bars I
Lightning

LOGOS
Orig. Logos

BUTTONS
Anything Goes
Sm 3D Bttns
Lg 3D Bttns
3D Balls
3D Ovals
Btn. Plaques
Fan Blades
Pill Bttns BLK
Pill Bttns WHT
Wavy Pills
Left Diamonds
Techno Buttons
Techno Bttns II
Triangle Btns
Square Ends



Whats New!
Homepage
Advertise
Contact Us
Link To Us


Graphic Jobs
Find A Job
Need an Artist?
Work At Home
Hosting
 


Offre 5000 gif animate e diversi sfondi per le pagine web.