HTML3
Sections
  Home
    Intro
    History
    FAQ

  Choices
  Side bar

  Styles
  Headers
  Footers
  Effects
  Chars
  Address
  Links
  Images
    Rollovers
  Tables
  Forms
  SSI
  Plugins
Resources
  Colour editing
  Image creation
  JS Tricks
  Servers
  Tokens
  Latin-1
|
|
HTML³: Image Creation |
-
-
|

Image Creation

One thing that still gives people trouble is how to create images for use in web pages. This roughly divides into two questions: what format to use, and what software to use.


Graphic formats

The two main contenders that you should know about are GIF (Compuserve's Graphics Interchange Format) and JPEG (the Joint Photographic Expert Group's format). Where the RISC OS sprite format stores images in an uncompressed format, both of the above find ways of squashing down the image so it doesn't take up as much room on disk, and so doesn't take as long to download. Although this is the strength of these formats, it can also lead to their weaknesses.

The GIF format is designed for drawings where there's not much in the way of shading; simple, flat colours, such as line drawings, cartoons, that sort of thing. The compression is based upon finding similar areas of the image, for instance a big block of white, and storing that in a simpler form; if it's very hard to find similar areas of colour then the compression won't work very well. There's also a limit to the number of colours you can store, a maximum of 256 (or 255 if you use transparency). So, it no good trying to store a photograph in GIF format, as it hasn't got enough colours to do it justice, and the compression won't work very well.

JPEGs, on the other hand, are designed to handle photographs and complex images. They work by discarding information that the eye can't really see; although the image looks the same to us, you actually lose a lot of information. You can even select how heavily compressed the image is - if 0% is very heavily compressed (and probably unrecognisable) and 100% is no compression, I usually stick to 75%m although if you're worried about keeping a picture almost intact but still need to use a compressed format like JPEG then 90% is a good compromise. For this trick to work you have to have a complicated image to start with, such as a photograph; like pulling back the curtain at the end of the Wizard of Oz, if you try to compress simple images into JPEG format you'll see how the trick is done. Your image will become blocky, and some of the colours might not seem right - a white background might look greyish, a black line will have grey swirls around it and so on.

Examples:

The following examples will only really become apparent if you're viewing this page in at least 32,000 colours.

Simple images:
The following image is a GIF; notice how the red looks bright, and the white background is clean:

GIF good
GIF good

Now look at the following image, which the same picture that has been compressed as a JPEG and zoomed in:

JPEG bad
JPEG bad

Notice how the red looks muddy, and the white has apparently random colours in it?

Complex images:
Now for a photograph. This sunset was taken through a train window with a digital camera, which stores the images as a JPEG on its memory card:

JPEG good
JPEG good

Now let's try the same image in GIF format:

GIF bad
GIF bad

Although the basic image is there, it's grainier due to having to use a trick to get a highly coloured image into the 256 colours allowed in GIF format. Dithering has been used; that's where if you place two colour next to each other they make an apparent third colour - if one small dot of yellow and one small dot of red are placed closed together look a bit like orange. As a consequence, not only is the image not quite as good, it also falls foul of the GIF compression method - this image is nearly 8KB in size, whereas the superior quality JPEG above is nearer 2.5KB. That might not seem like much with these small offerings, but imagine larger images, magnified by the number of images you have on a website in total - the difference can add up dramatically.

Okay, so if dithering's making the image so big, let's try the same image with no dithering:

Another bad GIF
Another bad GIF

Oh dear. Hardly looks like the same picture does it?

So there you go, simple isn't it? Apart from if you have a fairly complex image. What do you do then? My advice is to store an uncompressed version of the image somewhere safe, and then try a few versions:

  • Undithered GIF. Some software allows you to pick the best palette to fit a particular image, so it can look better than the one above which used the standard coloursafe palette.
  • Dithered GIF.
  • JPEG at your usual setting (75%?)
  • JPEG at a higher setting (90%? 95%?)
Which one gives the best image? Which one gives the smallest file size? Which one gives the best of both?

There is another format that combines features of both of the above - PNG (Portable Network Graphics) doesn't lose any information, and can store a full 16.7 million colours, all in a compressed format. However, file sizes are often larger than the two other formats. Many people choose this format over GIFs due to a patent on the GIF compression method that restricts its use in America, but there are no such problems in Europe, and we'll see below the support often isn't very good.

A new format called SVG (Scaleable Vector Graphics) allows you to define images in a similar way to defining a web page - with tags surrounded by triangular brackets. However, at the time of writing support this is pretty new, and not very well supported (or at least, the plug-in to make it work is not widely installed).

Finally, don't use RISC OS native Sprites in web pages; not only do non-RISC OS browsers not know how to support them, some RISC OS browsers don't either (e.g. Oregano). It used to be fine to use these in help pages and RISC OS CD Roms, but it should really be avoided if at all possible now. Ditto Windows BMPs - they work in some Windows browsers, but not in non-Windows browsers.

Colours and palettes

This is a somewhat contentious issue when applied to GIFs, which I can only give my opinion on and let you decide for yourself. Some people say that you should either use a palette which consists of the standard 216 internet-safe colours, or if your audience is entirely Acorn based only use the standard 256 Risc OS colours.

Internet Explorer rules?
Internet Explorer rules?
However, personally I think this is rubbish - I use optimised palettes for my graphics to show them at their best. For a start, the 216 Internet safe colours and the 256 Risc OS colours match up hardly anywhere apart from black and white, so you're going to alienate someone anyway - consider the number of die-hard Acorn fans who want to catch up on the latest news, but use the PC at their office workplace to do so because it's free. I've got the web logs to prove that many RISC OS only sites get more Internet Explorer and Netscape hits than all the RISC OS native web browsers put together.

These days people have much better machines, so you're compromising the quality of your images to be compatible with outmoded technology - even PCs in 256 colours can alter the desktop palette to display the images in a better quality, and dither the images on the fly to get even better performances. The only way to produce graphics that are safe for everyone to view is create a site that is completely black and white - no greyscales in case someone's using a black and white desktop - and preferably with no graphics what so ever in case someone's viewing the site with a text only browser like Lynx. You can't please everyone no matter what you do, so I say please yourself and do what you think is right for your site and the majority of its target audience.

Most other formats have 24bit (16.7 million) colour support, and so palette issues aren't really a problem. I will say however that PNGs don't seem to get dithered, so for example a nice smooth white to blue blend may look "banded" when viewed in a browser with less than full colour available to it.

This PNG may have "banding" on your machine.

This PNG may have "banding" on your machine if you don't have a 16 million colour+ desktop. Or not.


Transparency

Both GIF and PNG allow for transparent areas in your image. GIF does this by sacrificing one of its colours - instead of a 256 colour palette you only have 255 and a see-through "colour", but let's face it, one out of 256 is no great loss. PNG has much better support for transparencies - 256 levels. As the human eye can only really see 256 levels of shading this is in effect extremely smooth - if the web browser can handle it. Alas, none of them can. The only browser I know of with full transparency support was Acorn's Browse, which is no longer available. Most RISC OS browsers can handle one level - on or off. You might think this is poor, but Internet Explorer can't handle any - it renders the "transparent" area as grey, which is absolutely useless. This is version 5.x by the way, not one of the early versions - you'd have thought they'd have got it right by now. So, GIF wins by default.

Animation

The only one of the bitmap formats we've gone through so far that has animation support built in (and usable) is GIF; not only does it compress single images, it then further compresses animated images by only storing the differences between the frames. As such the animation must again be fairly stylised, with flat areas of plain colour and no big changes in the animation if you want people to be able to download the file quickly.

As we've seen elsewhere in the documentation, any image type can be animated if you have a JavaScript enabled browser; I've recently animated a few photographic style images on a website with two photographic JPEGs mixed with two PNGs of semi-realistic drawings. Although the files themselves are compressed, you're still downloading a number of separate files and as such this trick is only really usable for simple slideshows.

SVG has some animation support built in; in fact you can do some rather clever things with it, such as draw a clock face and then have it show the correct time (based on the time your computer is set to, in the same way as JavaScript). However, as mentioned before this format isn't yet widely supported.

The best format for longer cartoon-style graphics is Flash; this started as a proprietary format from Macromedia, but there's now freeware players available for most computer systems. It works in almost exactly the same way as vector drawing packages like Draw, ArtWorks or Vantage; it stores the shapes of drawings, which takes up much less space than storing a replica of the image itself, and they can be zoomed, stretched, rotated and so on without causing jagged edges. You can even store sounds and photographs inside, although obviously the more you put in the longer it takes to download.

Add in interactivity - the ability to click on parts of the image and get it to react differently - and you can use this format for a variety of tasks; your whole website can be one big animated flash file (although don't expect too many people to download it if your target audience is the home user with a slow dial-up connection), simple games like whack-a-mole, jokes like the gerbil in a microwave (it insults you until you press buttons on the microwave to fry it), and even brand new short cartoons like Tim Burton's Stain Boy.

Although the end user still has to have a plug-in installed in their browser to make this work, it's much more likely to be there, especially as the latest PC browsers get them by default. The RISC OS version is available from http://members.ams.chello.nl/l.smiers/flash/flash.html. There are no easy tools under RISC OS for creating Flash animations yet, but there's writeflash from Henrik Bjerregaard Pedersen with which you can write a "script" and get it compiled into a Flash file: http://www.login.dknet.dk/~henrik/.

For full-on movie clips, RISC OS isn't well supported at all. Of the main formats most people use to distribute movie clips on the Internet, RISC OS can't even play any of them properly, never mind create them within most people's budgets. MPEG files can be played - usually slowly - but there's no sound support; Quicktime used to be supported by MovieFS, but this doesn't appear to have been updated recently and can't handle the latest format; other formats such as RealMedia and Windows Media have no support at all. RISC OS machines have their own movie format in Replay, but that's not supported on any other platform, and still not easy to create on a budget.


Graphics software

It's said that a bad workman always blames his tools, and also that buying great graphics packages won't make you an artist overnight, but basically it will help if you can afford some decent software. You see a lot of web sites, probably designed on a PC, where people use whatever free software comes with the computer, and end up with graphics which are jagged around the edges (because they can't get nice anti-aliased images) and in naff colours (because they use the colours in the standard Windows palette). We users of Risc OS machines however can do better than that, can't we?

  • If you can't afford great software, then start with what you've got. Draw is a decent vector graphics package once you get into it, and it has the advantage of being able to do antialiased (smooth edged) text - if you use a larger text size and it stops being smooth around the edges, you can use Configure (run !Boot on Risc PCs to get this) to increase the size of text where antialiasing switches off. Good use of fonts in bold colours can be very effective, for instance on a black background you might only need to use a standard font like Homerton Bold in white or red to create a great title graphic. For instance, if you're creating a site about vampires (or certain slayers thereof), pick a nice scary font from the font site and write it in red on a black background. With the smoothing it can look quite effective, without doing much to it.

    Unfortunately, unlike ArtWorks ordinary shapes aren't antialiased... unless you use a trick. Other programs can often use Draw files in much the same way as ArtWorks files. For Instance, InterGif can take a Draw file and output an antialiased GIF. Another way to do this, especially if you want to have control over size and rotation of an image, is use a copy of Impression which can load ArtWorks files - chances are when you load a Draw file into it, it'll use the ArtWorks display modules and will antialias your image. Use Paint to snapshot this image and you're away. When taking snapshots like this - the same applies to grabbing things from an ArtWorks window too - try to set your desktop mode to the maximum number of colours possible, so that the image doesn't dither (have lots of dots). I often grab images in 24 bit (16.7 million colours) and then use something like InterGIF to drop it down to fewer colours without lowering quality.

  • InterGIF is great - it's completely free, and can be downloaded from Peter Harltley's website. Designed as a tool for creating animated GIFs, it's equally (if not more) useful for creating static images too. It can take most image formats (any handled by ChangeFSI - Acorn's free graphics converter - as there's an interface to ChangeFSI built in) and output GIFs; it can take sprites in any number of colours and guess the best colours for it; it can take a sprite with a mask and convert this to a GIF with a transparency, optionally removing any unnecessary masked border from the image to avoid problems with Netscape.

    I often use it to be lazy - screenshot an image from ArtWorks (or Draw) in full colour, drop this into Paint, fill the area around the main part of the image with a colour I'm not going to use, globally change this colour to be masked, and then use the transparency Auto and Trim options in InterGif to crop the image and the Palette... option to convert to 256 colours. It's much quicker when you're pushed for time then dropping the file into PhotoDesk, cropping the image manually, analysing the image for the best colours. converting it from RGB to Indexed colour mode, finding the background colour, realising that the background colour is used elsewhere, using Paint to use a different background colour without antialiasing the fill which Photodesk might do, and then loading back into Photodesk to specify the background colour when saving as a GIF. Of course the ease at which InterGif allows you to convert a series of Sprite files - or one sprite file with a number of images in - into an animated GIF means that it more than fulfils its original purpose too.

  • As mentioned above, don't ignore Paint either - again, it's free. As well as taking screenshots, filling in backgrounds and doing masking, Paint can be used to touch up those slightly rough pictures, crop images, and, if you're patient, it can be used to create graphics from scratch. I'd only recommend it for small images - icons and suchlike - but when you think about it, Paint is quite sophisticated; it can create images in any colour depth (i.e. two colour images, 256 colour images, 16.7 million colours images - Paint handles them all); it can have multiple views open, so you can have a zoomed view for working close-up, and another window where the image is normal size so you can see what your changes look like; all the tools work in any zoom factor; you can scale, crop, rotate, cut and paste images. Okay, sure, so it doesn't have an undo buffer, doesn't antialias, and doesn't do graduated fills, but if you save regularly, figure out how to mix your colours properly, and use simple designs it's very handy.

  • If I might blow my own trumpet yet again, I've written a couple of other programs which might help improve the look of graphics which can be freely downloaded; they're palette editors (PalMaker for 256 colour palettes, 16PalMake for 16 colour palettes) available from the programs area of my website. It might be that you only have access to black and white images - an old scanner or video digitiser, shots from old films or photographs, or perhaps a colour image where the quality is bad so you convert it to monochrome to improve the quality (you can convert images to shades of grey quite easily using ChangeFSI). Using palette editors to create a new colour scheme can add a lot to the image - you can either tint the image to give it some colour, or perhaps tint it to look old by giving it a sepia look, use a series of blends between colours to give a fake colour effect, or use it to make certain areas look darker or lighter to change the mood of the image. Photodesk can create 256 colour palettes and blend between colours, but my program gives more control - it's sole purpose is palette design - and it's free; the only other way of creating 16 colour palettes easily is the Effects window of HTML³ of course!

Other notable mentions amongst the free or cheap programs

  • Creator (or Translator, by the same author) - you can convert from pretty much any bitmap graphics format to any other, including finding the best palette for converting a deep format Sprite into a GIF (although I like to keep dithering to a minimum and so use the non-dithering InterGif, some people might want it and so Creator is better in this respect - it loses out on transparency control though).

  • ChangeFSI - later versions can save as JPEGs, and you don't have to go out and download it. It's also useful for changing size, colour depth etc., or some simple effects by switching off dithering, increasing contrast and so on.

Inexpensive software

  • WebFX3D - allows you to take a line of text, make it appear in 3D, add lighting effects, textures, and even make it animate.

  • effTTT - EFF's True Type font converter. Although your machine probably came with T1ToFont which converts Adobe Type 1 fonts to a RISC OS usable format, True Type is the main PC font type - and hence more plentiful. The use of a good font in a simple headline graphics can be much more effective than lots of flashy graphics, colours and effects, and it's pretty easy to do. If downloading and converting fonts isn't your style, then buying a font CD is an even easier option, although they tend to be the same fonts on all of these CDs, and going out and finding your own stuff from some hip "font foundry" gets you the more unique, funky stuff. See the font site for a whole load of fonts that have been converted this way.

Full price stuff

  • Photodesk - if you can afford it, it's well worth it; there are other high-end graphics packages available, such as Studio 24 Pro, and while I don't want to suggest that they are in any way bad (Studio 24 is quite a nice package for creating graphics from scratch due to good spraycan facilities), Photodesk is simply better than anything else. And while version 3 is (currently) the best of the range, if the budget doesn't stretch to the full version you can get a Light version which is good enough for most people.

    Although I usually create my graphics in ArtWorks so I can pull them around, resize them, align them etc. I always use Photodesk to finish them off, either for its cropping abilities, the way you can resize images without introducing jagged edges, the way it saves in a number of formats, the optimised palette option... When scanning, the scanner I use always makes the images a little dark and tinted slightly yellow, so I use "Brighten mid tones" in the Gamma effects, and the automatic Balance controls to correct the colour problem; I can also take images from a digital camera taken without a flash and get something usable, including one picture which was completely black to the human eye, but with some careful gamma correction ended up a perfectly good image of someone's face; it's also great for editing out "little imperfections" - I once used it to take a photograph of about 20 people standing outside a bank in Silicon Valley and seamlessly edited out all but two of them (shades of Russian history) using the cloning tool to copy bits of floor and wall texture around; and for flat ArtWorks images I often use it for adding texture and highlights (using some nice star-shaped spraycan brushes I created for the job).

    The latest version comes with a number of effects plugins that were previously only available separately. Some good effects which will help you create a distinctive look for your web site with the minimum of effort are: Zoom blur on a square image of a person's face create a funky "frame" for the image; outline glow and min/max for bringing out details in an image; the crystallize effect makes a photo look like a painting (watercolour/oils) and hatching makes it look a little like it's been pencil drawn; and don't get me started on the great chrome effect, which at low levels can make a line drawing look like a spraycanned image - I found this out making a spray logo for myself when playing multiplayer Half-Life - at normal levels it can turn a simple drawing, preferably quite flat but with a graduated fill diagonally across it - into a nicely chromed version, and super-saturated it can turn a few letters of plain text into an extremely cool piece of artwork without any further work (it looks like a sort of burny-melty mass). You can also pixelise people's faces for that "Crimewatch UK" look, or using masks get multi-level pixelising so the edges are very pixelised but the centre of the image, perhaps a person's face, is completely normal (a trick I saw in Edge magazine).

  • Artworks - I personally find this very easy to use as you can experiment, make mistakes, and generally play around with your graphics much more when using vector graphics as opposed to bitmap images in, say, Photodesk, and has the advantage of being quite cheap these days so if you're on a budget it might be worth a look. It's not without its flaws, but it does allow you to create images quickly, edit them by shifting bits around, stretching them, deleting them without ruining the rest of the image around it, apply graduated fills, blend between objects, create warping envelopes and suchlike.

    However, it's starting to show it's age, and I have to say that it's text handling sucks bigtime. It only allows single lines of text, with no changing effects on these lines (like, if you want a word in bold, you have to have a line of normal text, a new line consisting of the word in bold, and then another line with the rest of the normal text, and then you assemble them into a single line); regular text always antialiases to the 11th colour, which is usually white - useless if you're trying to place it on a red background, and very useless if you've changed the colour list to have blue as the 11th colour as I did for a while and thought I'd broken the font manager with too many dodgy fonts - you fix this you have to give the text an outline colour (which you might not want, so have to make it almost 0 width), or add a graduated fill (which, if you also don't want, might be from black to black!), or turn the text into shapes which means you can no longer edit it.

    A much better fix is to invest in the text area module from Martin Würthner. Although this adds another 35 quid to your bill, it offers quite sophisticated text handling, including multi-column support. It's almost like adding a DTP upgrade to your favourite old graphics package. And there's some other modules on his site you might be interested in, such as hatch pro.

    The alternative to ArtWorks will be...

  • Vantage - at the time of writing this was not yet released (at the time of editing I have a sort of pre-release beta, which looks cool but as yet is pretty useless for hardcore usage). So, I haven't yet tried it properly, and it's almost certain to be a lot more expensive than ArtWorks for some time to come, so how can I recommend it? Well, I've read the specs, the web site, the advanced info, and I'm drooling with anticipation. I'd have put in my order even if it was just ArtWorks with transparencies and bitmap texturing, but it appears to be so much more; it's text handling appears much more advanced (and even has spellchecking); as it's designed by a company that does a lot of "proper" graphic design it has colour handling capabilities that have so much attention to detail it borders on the obsessive.

HTML³: © Richard Goodwin 1997-2002

|