homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Graphics Gospel
What are your top web gfx do's and don'ts?

 3:03 am on Feb 14, 2001 (gmt 0)

Lets work up a little web graphics primer for people... what are your top rules of thumb for creating good web graphics? Nice looking, fast loading, etc.

(Note to BoneHeadicus... "Use Fireworks" does not count as a tip! ;) )

Here are a couple of mine (for GIFs):

1. Save in a perceptual palette if precise color matching is not necessary. It will often allow an end product much closer to the original, and will display *relatively* true to form across platforms and funky monitor settings.

2. Use a program (or plug-in) that allows you to add, remove or specify certain colors in each GIF file. The ability to tweak the 'guts' of a specific graphic often makes all the difference in the end result.



 3:08 am on Feb 14, 2001 (gmt 0)

ALWAYS, ALWAYS, [big]ALWAYS[/big], make sure to save your .psd (or whatever object or layered format you use) at regular intervals prior to merging and exporting. I've had to re-create so many images it's not even funny anymore.


 3:15 am on Feb 14, 2001 (gmt 0)

[addendum to oilman's advice] DON'T EVER throw out your original files! Even if it's been two or three years... You WILL want it later. Usually within a month or two of "cleaning out" your graphics collection.

My brain hurts just thinking about it...


 5:56 am on Feb 14, 2001 (gmt 0)

Always keep a record of the exact fonts you use to create graphic text. Record everything: font name, point size, letter spacing, anti-alias setting, drop shadow settings, exact color, everything.

You will need to get that exact look again and again, and a close match is never as good as an exact match.


 7:51 am on Feb 14, 2001 (gmt 0)

If doing photos for a website, always put the domain name on the photo in a corner. If you know the background color of the site, just wrap the picture in a border of the same color, and place the domain or site name underneath in a standard font as a caption.
It will prevent a large portion of all photo thefts and if someone hotlinks to the picture, atleast you get the name branding out of it.


 2:42 pm on Feb 14, 2001 (gmt 0)


A cool trick I learned from I think it was tedster.
When reducing images hit the sharpen button before resampling and resizing and do it in steps rather than all at once. In other words to go from 600x600 you would hit sharpen and then resample to 400x400 then hit sharpen and go to 300x300 and hit .....until you get where you need to be.

Its an experimentation kind of thing as too much sharpen will pig out the file size and do you no good. Thats when 400000 levels of undo come in handy and one reason you gotta have as much ram as you can and even set a scratch disk to another drive. Ram is really cheap right now too. 256meg chips for less than a hundred bucks.

As oilman said...save, save, save.

Also a good practice is to copy your font folder to a backup source. And your MM extensions folders in DW and FW too. I have learned this the hard way. Write your work to a cd if you have one.

I partition my drive into about 4 parts. I keep windohs and all the application on c drive and make an image with Norton Ghost. I then keep all my working directories on drive f or d or whatever. That way, not IF BUT WHEN I have to restore c drive all I have to do is drop in the last image I made with Ghost and I'm right back in bidness ;) in 20 minutes. I never lose the data only the applications...follow me? This is not infallible as I recently learned because you may run into trouble with the mbr as well ;). Back up the data you have on f or d drive regularly as well.

BTW you can also use a drive to store all those templates you use that are on 4 CD's right now...like AutoF/X PhotoGraphic Edges. Which if you don't use you might want to look into because it makes ordinary pix look really good.


 7:57 pm on Feb 16, 2001 (gmt 0)

Graphics are the biggest hog of page size there is... On commercial sites I always try to keep navigation buttons and thumbnail gfx under 1K in size, and keep header gfx and photos under 5-6K.

If you have a spectacular photo that you really want to put up, put a smallish version in the page, and link it to a full-size version in a sized-to-fit javascript pop-up window. Looks slick and guarantees only those who really want to see the large version will end up waiting for it.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved