Creating graphics for the Web:
non-Photoshop techniques

 

 

After a sticky start Photoshop is now as much the tool of choice for online graphics as it is for print creation. Version 3.0 didn't support Internet staples such as interlaced GIFs and transparency, but version 4.0 supports these as an Export... option, which the added bonus that effects like transparency can be linked to an alpha channel.

If, on the other hand, you don't own a copy of Photoshop or don't know what I'm talking about then read on...

There used to be a lot of fuss about these two tricks, and they were considered the height of Web graphics technique for a while. Interlacing is the venetian blinds effect you get with some GIFs, where the browser loads the image in chunks so that you get a very low-res preview as the graphic loads. Transparency is the quirk of the GIF format that allows you to nominate one colour in the index (see the GIF page if this is confusing you) as see-through, so the background colour or pattern can be seen through it.

To make a graphic interlaced you need to import it into an editor that supports this optional extra to the GIF89a standard. Graphic Converter is one such utility, and a very useful utility it is beyond this limited role as well, as it can open nearly every graphics format you're likely to come across on the Internet. The "interlace" check-box is found in the Options dialogue from the Save As... menu command. Graphic Converter is shareware.

GIF Converter is another shareware utility that lets you add interlacing. this time the option is in the File Settings menu command, as shown below.

Interlacing at work
 

Making a colour transparent is equally easy - with the right tools. Graphic Converter has a clunky transparency option available in its Colors menu item. Alternatively there's a piece of shareware called Transparency which does nothing else: you load in a GIF, click on the colour you want making transparent and it disappears.

A note of caution on transparency however: it does not work well with anti-aliased images, leaving a funny-coloured fuzz around the edges, particularly if the original background colour of the image is different to the background colour of the target page. The other thing to look out for is losing parts of your image unintentionally. If you make brown transparent, and the image happens to be a Scottish farming scene, say (hey, it's late. You try making these examples up.) then it'll wipe out your Aberdeen anguses faster than the Ministry of Agriculture, Food and Fisheries. Just like Chromakeying in TV, in fact (because that's exactly what you're doing).

Both are useful tricks to know in some circumstances but there are generally better ways around the problems they set out to solve. You can, for example, add a low resolution preview (such as a one-bit black and white version of a picture) to a file by adding the LOWSRC tag to your IMG SRC tag. If I had a picture of the Queen in glorious 8-bit colour, but I wanted to add a placeholder to show people what to expect when the larger image downloaded I could force Netscape to load a low-res, black and white image first by using this tag: <IMG SRC="images/queenie.gif" LOWSRC="images/one_bit_queenie.gif">.

What makes the LOWSRC tag so attractive is that it is unintentionally very flexible. If you add a set of size attributes to the main image (WIDTH and HEIGHT) then the LOWSRC tag is affected too. So if I had a 100x100 pixel image for my main IMG I could force a one pixel square LOW SRC image to scale up to 100x100 pixels with the following tag: <IMG SRC="images/square.gif" WIDTH="100" HEIGHT="100" LOWSRC="images/pixel.html">. A one-bit one pixel GIF, by the way, takes up a whole 35 bytes. I prefer this to interlacing, personally.

What's more, there's no rule that says the LOWSRC image has to be the same file type as the main image: so you can use a low-quality JPEG instead of a blocky gif. And there's no rule either that says the LOW SRC image has to be low resolution: you can use the tag to make images appear to overlay on top of another, such as making a logo appear on a background.


Related pages:

setting up Photoshop for the Web

Or:

back to the top

 


© Wide Area Communications, 1996, 1997

 

 

Page created by Jim Smith, May 21, 1996.