How (NOT) to do graphics for the web!

Introduction and Background

I make no claims to being an expert on web graphics. This is in fact my main qualification for writing a beginners guide to graphics for the web. If you know anything about graphics please read on - you will be wasting your time - but your feedback will be invaluable to me and any one else just starting on the road to web graphics mastery!

My original exposure to the internet was rather daunting - they must all be from Mars - 'cos they 'aint speaking English. One of the first things I noticed was how slow it was to get anything of interest - I was using a 9600 modem on a 486 PC - and I would sit there, waiting patiently for the browser to load a load of images before displaying some text confirming that I was not interested in that page - I almost gave up till I discovered that I could switch off graphics in the web browser.

Tip number 1 - Keep graphic images small (less than 20K?) so they load quickly. Make sure some text appears on the page as soon as possible - before the images are loaded. Always define the size of the image in the HTML source: use the WIDTH and HEIGHT attributes to define the size of the image in pixels.

Logo0056: size:16K res:1165*1165 pixels. Logo0057: a reduced size version at 473 * 473 and 6K (displayed). Original computer generated gif file - two circles with writing between them. It was printed out and the artwork added. Using a single colour should reduce the size of the final file.

The final art work was scanned in at the highest resolution to produce logo0058 116K 3984*3984 pixels - this was much too large. I then progressively reduced it in size to produce the first image that was just about suitable for publishing. The first attempt looked really awful - till I used the Gif Construction set from alchemy mindworks which was used to rescale the image and to produce the transparent background. I gave up trying to work out how to do this in corel photo paint - probably a good product - if I could get it to work. - At the moment I like the paint program that comes with windows 95. For some reason reducing the size worked OK on the web drawing but was awful on the letters.

So the next attempt was to try to get the letters to look OK. This time I reduced the original image by 50% and after each reduction edited the picture so the words looked OK - very time consuming - there has got to be a better way!

Quick Tip - remember to check the image paths - these should be relative to your page and should not point to your C: drive - If your web page is pointing to images on your hard drive only you will be able to see the - Sometimes testing does not show all the problems!

At this point I have some tentative conclusions that I will try out the next time - these may be wrong - if you try them let me know - when I try them I will let you know - watch this space:
First Mistake I think was trying to work at a greater resolution than the final image a lot of time was wasted reducing the image and in the process losing quality - tried anti aliasing and just shrinking but nothing satisfactory: Options to try next time:

work in pixels at the final size required.
try more colours - possibly shadows hide a multitude of sins.
try the various transformations available - emboss soften and notepaper sound promising.

This was scanned as a black and white picture - using an output resolution of 90 which ended up giving a graphic that is 150 x 150. A little bit of editing to make all the background transparent.

This was scanned as a black and white picture - using an output resolution of 50 which ended up giving a graphic that is 80 x 80. A little bit of editing to make all the background transparent.

Banners

In an attemt to promote my web site I enrolled in the linkexchange program which involved creating a banner 40 by 400 pixels large, below are the various banners I have created. Please note that thew special offer has expired long ago! But if you want a web site set up please send me an email.

The first banner I created was a simple background colour with writing on the top as shown below: Create an image of the correct size (40*400) in pixels - flood fill with your required background. Then add the text. Do a few quick mockups - it took me ages to get the font size right to fill the space available.

Banner01.gif

I then joined smartclicks - they want a banner that is 50*400 - I was lazy and just added the outside border:

B50_0001.gif and b50_0002.gif:

As soon as I thought I had mastered banners I discovered that they could be animated - so back to the drawing board - again there must be a simpler way to do this - if you know please tell me - if I find out I'll tell you. I created the banner as before as shown below. To see the animation you will need to click the back and forward button to reload this page.

Right - you have seen the animation - I suppose you want to know how it is done - but first a warning this takes a long time. First the full banner was created as described above. I then cut out a rectangle around the mouse and pasted the mouse a mouse length behind itself, then rubbed out the original mouse, remembering to save the new image after each change. I then went into the Gif Construction set and run the animation wizard. After experimenting with the delay I found that 20 to 40 seemed to work the best.

web_g003