Images are becoming an ever more important part of web design; where early web pages were more about the quick transmission of information and ideas, these days higher transfer rates and higher expectations mean that images are at least as important, if not more so, than textual content.
<P>
Style over content; well, at least it keeps me in a job. <img src="smiley.gif" alt=":-)" width="18" height="18" border="0">
<P>
The image window is ridiculously easy to use - drop an image on to it, click on OK, what could be simpler? So, as well as a brief rundown of the controls, I'll try and impart a few pearls of wisdom with regards to creating and processing images for web usage; please feel free to ignore these at your leisure.
<P>
<H3>HTML³ Image controls</H3>
<P>
The first box you'll see is the one marked <TT>Image</TT> - this is where you can enter the URL of the image file, and is essentially all you need to get started. Of course, one of the reasons for using HTML³ is that all of that nasty typing is such a strain, so to make it easier you can just drop an image file onto this window and the program will fill this box in for you.
<P>
Underneath the <TT>Image</TT> box you'll see a tickbox bearing the legend <TT>Make dragged files relative</TT> - this is useful if you keep your images in a separate directory to your other files, as it'll take the path between the image and your HTML file and work out the best route between them. There is of course another requirement for this to work - the program needs to know where your HTML file is! You can edit this in the <TT>Options</TT> window, or, if you're as lazy as I am, you'll probably prefer to drop your file onto the HTML³ iconbar icon. You can also drop the directory that contains, or will contain, your HTML file onto the icon, and once you've set the location for one file you don't have to change it just because you're working on another file - you only need to change it when you move to working in another directory. Oh, and it's stored when you quit the program, so next time you load up, you can start work again immediately.
<P>
You may also have noticed that, to the right of the <TT>Image</TT> box, there's a button which should bring up a drop-down menu; this is your image history, where up to the last 30 images you've used will be available for easy re-use. This isn't just the filename, but the entire profile of sizing, alternative text and so on. If you do re-use the same image (or, to be more correct, an image with the same URL - for instance, two images called "gfx/bar.gif") then the details of the latest version will be stored, and moved up to the top of the list.
<P>
<a name="alt"><H3>Alt. text</H3></a>
Underneath all the image file gubbins is the <TT>Alt. text</TT> box - this is the text displayed when the image is loading, isn't displayed, or on PCs it gets displayed if you leave the mouse pointer over it. Me being as lazy as ever, I've given myself three ways of getting out of having to type something here - when you drag a file onto the window, as well as the filename being entered automatically you'll also get alternative text based on the filename - any path and extension information is removed and the first letter is capitalised, so a file called <TT>gfx/bar.gif</TT> would give the alternative text <TT>Bar</TT> (for an Acorn Sprite file it would be the name of the first sprite in the file). Of course this isn't perfect for every image, but it's better than nothing. Alternatively, you can draw from the image history to select a piece of text you've already used; selecting alternative text from the history list only affects the alt text box without changing the filename etc. because I was working on a project with a lot of game screenshots on every page and I got hearty sick of writing in "Surveillance shot" for every image. Finally, you can pick text up from various other text boxes in other parts of HTML³ using the "grabber" icon - for instance, if you're using the image within a link you might want to use the same text as that entered into the JavaScript link description.
<P>
<a name="name"><H3>Image name</H3></a>
Next comes the image name; this is covered in more detail in the <a href="roll/html">section on JavaScript rollovers</a>, but basically the rule of thumb is that if you want to influence the image using JavaScript, then a name is essential - otherwise, it's useless. Again, a name will be chosen based on the name of a file dropped onto the window, and as the same routine also chooses the name of the image to be influenced on the rollover section of the links window, the two should match up and you'll get cool lighty-uppy buttons with ease.
<P>
<a name="align"><H3>Alignment</H3></a>
Winning the award for the most gratuitous use of graphics in this program is the section covering image alignment, although the girly pictures do serve some purpose - there's a green line showing which bit of a text line is aligned with. Other than that, well, Netscape uses images and I wanted to do better, plus the girl sticking her tongue out in Argo's old browser was made redundant when they switched to using Fresco, so I gave her a new job; and yes, her eyes do move when you click on the icons - you should see what she does when I open my graphics directory (well, she is based on my ex).
<P>
<TT>Default</TT> won't use any special image alignment attributes; the other options on the top row will align images with lines of text (or other images) as shown by my beautiful assistant. These are by no means the only image alignment tags in use, bu they're fairly common ones; as with other areas of HTML³ I've had to make a best guess as to which ones will be of use in the real world, where there are so many "standards" to choose from.
<P>
The second line of alignment options are different; the first two, <TT>left</TT> and <TT>right</TT>, allow you to place an image and have text flowing around it, perhaps because you want to have a large, ornate, drop capital at the start of a paragraph, or simply because having text flowing around a photograph or screenshot looks quite cool. This won't work on older browsers - Acorn's !Browse counts as old in this case, although Fresco and Webster XL can handle it without problems. A couple of things to bear in mind though; the text may look uncomfortably close to the image, so you might want to consider using the <a href="#spacing">spacing options</a> to give the image a little breathing space; and because HTML is not a precise layout language - you can't guarantee how wide someone's browser window is, so the text might stop flowing in the way you thought it would, it's best to put in some form of clearing break after the paragraph you wanted to flow - <TT><br clear="right"></TT>, <TT><br clear="left"></TT>, or the catch-all of <TT><br clear="all"></TT> to clear both sides (and which is available from the Styles window). Finally, <TT>centered</TT> is not an image alignment attribute at all, rather it uses the standard <TT><center>...</center></TT> tags to centre an image on the page - it's included here because of the amount of times I've used an image centred in a page with a caption underneath, and this program is all about making life easier, not following rules.
<P>
<a name="sizing"><H3>Sizing</H3></a>
Next come the sizing options - for the most part this is again automatic when an image is dropped onto a window, the exception being that I can't figure out a way to do this for Acorn Sprite files without loading the whole file into memory, which I can't really do. Using image sizes is not compulsory, but it does help; when a browser first downloads a page it helps if it is told how big an image is so that the right amount of space can be reserved at the start, so that the page isn't flicking as it's constantly reformatting as images are downloaded.
<P>
You can, however, specify sizes other than an image's real size, and a decent browser should be able to stretch the image to fit the size you've specified; although this usually ends up looking a bit naff, if you use it carefully it can be quite fun, so I've included a few controls to scale the image to twice the size (<TT>x2</TT>) or scale it down - and of course you can use them multiple times to scale x4, x8, x16 and so on (within reason). There's a reset button just in case you get a bit lost, which will reset the numbers back to the original values when the image was dropped onto the window.
<P>
And finally for this section there's a tick box next to the <TT>x</TT> (width) box because most decent browsers will allow you to specify an image's width as a percentage of the available space, an option used to good effect by Acorn Arcade who design their horizontal rules to scale to whatever window width the viewer is using.
<P>
<a name="spacing"><H3>Spacing</H3></a>
The spacing options come next, and as already explained in the alignment section they allow you to set a certain amount of padding around a graphic so that text and other images don't come too close. <TT>Horizontal</TT> spacing adds the specified number of pixels to both the left and right edges of the image - which, over-used, may make the image look even more out of place than not using spacing at all - and of course similar rules apply to the <TT>vertical</TT> spacing. These options may not work on all browsers, but then of course neither will text flowing around images in the first place.
<P>
<TT>Border</TT>, on the other hand, is a much older attribute which, if the image is linked, puts a border of the specified width in the current link colour around all four sides of the image's bounding rectangle (ignoring the fact that the image may well have a mask to make it appear non-rectangular). in days gone by this was useful to show that the image was a link (in the same way that linked text was always underlined), but in these days of changing mouse pointers, status bars, JavaScript descriptions and rollovers, and better use of graphics, it's not really necessary to use it - a pity then that Netscape ignores a <TT>border=0</TT> when you link an image to an imagemap.
<P>
<a name="imagemaps"><H3>Imagemaps</H3></a>
Speaking of imagemaps, the last section allows you to link the image to both types of imagemap - server and client side. With a server side image map, a file is uploaded to the web server (along with your HTML file) which stores a list of coordinates and URLs to link to if the user clicks within those coordinates. The image has to have a link around it pointing to that file, and to tell the browser that the link is to an imagemap and so it shouldn't download the file when the image is clicked on, the attribute <TT>ismap</TT> is added to the image tag. However, this old style of imagemap is slow - the browser has to tell the web server where the user clicked, the server then looks at the imagemap file, works out the link these coordinates correspond to, and then the browser has to get this information back from the server, all of which can take a few seconds.
<P>
Much better is the new client side mapping, which has the list of coordinates and URLs built into the web page itself, and so can be accessed almost instantly by the browser. All that has to be added to the image tag is <TT>usemap="#<I>mapname</I>"</TT> and the browser will look for a map called <TT><I>mapname</I></TT> in the current file. For backwards compatibility though you should really use both styles of map. Creating these maps could be a tricky and complicated process, unless you take the easy route and download something like <a href="http://www.atlantic.oaktree.co.uk/">!Imagemap</a> (currently up to version 2, although !Imagemap 1 was pretty good too), or <a href="http://prompt.essex.ac.uk/users/gerph">!Imagen</a> will do. You can then draw shapes over your image, assign URLs to these shapes, and then save out both server side and client side definitions. Bah, kids today have it easy - when I first started creating imagemaps, we had to do it by hand. In binary. And they hadn't even invented the zeroes!
<a name="ideas"><H3>Graphics software and ideas on use</H3></a>
I think you know what the Help, Cancel and Okay buttons will do, so now a few words on creating your graphics. 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 helps 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?
<P>
<ul>
<li>If you can't afford great software, then start with what you've got. <B>!Draw</B> 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 <B>!Configure</B> (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, and if you're doing a site about vampires you might be able to download a Type 1 font from the Internet, use the Type 1 to Acorn Font converter supplied by Acorn with your computer (!<B>T1ToFont</B>), and get a cool scary font for free.
<P>
Unfortunately, unlike <B>ArtWorks</B> 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, <B>InterGif</B> 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 <B>Impression</B> 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.
<P>
<li><B>InterGIF</B> is great - it's completely free, and can be downloaded from <a href="http://utter.chaos.org.uk/~pdh/software/intergif.htm">Peter Harltley's website</a>. 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 <B>ChangeFSI</B> - 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.
<P>
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 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.
<P>
<li>As mentioned above, don't ignore <B>Paint</B> either - again, it's free. As well as taking screenshots, filling in backgrounds and masking duties, 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.
<P>
<li>If I might blow my own trumpet yet again, I've written another program which might help improve the look of graphics which can be freely downloaded; it's a 256 colour palette editor called <B><a href="http://www.goodwin.uk.com/richard/programs/index.html#graphics">PalMaker</a></B>. 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 PalMaker to create a new palette 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. I don't know of any programs which will create 16 colour palettes easily - apart from the <a href="fx.html#colour">Effects window</a> of HTML³ of course!
</ul>
<P>
<H4>Other notable mentions amongst the free or cheap programs</H4>
<ul>
<li><B><a href="http://www.inter.nl.net/users/J.Kortink">Creator</a></B> (or <B>Translator</B>, 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).
<P>
<li><B>ChangeFSI</B> - later versions can save as JPEGs, and you don't have to go out and download it.
<P>
<li>Although you can use you web browser to view images, it's often a good idea to have a good set of image viewers around to see the fruits of your labours - <B><A HREF="http://www-sop.inria.fr/rodeo/personnel/Frank.Lyonnet/Dark/Acorn/FYEO/fyeo.html">FYEO2</a></B> (For Your Eyes Only 2) to convert GIFs and JPEGs back into sprites quickly, <B><a href="http://www.dcs.ed.ac.uk/home/pmh">SesAnim</a></B> or InterGif's <B>IGViewer</B> to view animations, and NoPaint to drag-and-drop edit the order in which sprites appear to alter animation sequences.
</ul>
<P>
<H4>Inexpensive software</H4>
<ul>
<li><B><a href="http://www.dansoft.co.nz/">WebFX3D</a></B> - allows you to take a line of text, make it appear in 3D, add lighting effects, textures, and even make it animate.
<P>
<li><B><a href="http://www.eff.co.uk/">effTTT</a></B> - 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.
</ul>
<P>
<H4>Full price stuff</H4>
<ul>
<li><B><a href="http://www.spacetech.co.uk">Photodesk 3</a></B> - 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 the best of the range, if the budget doesn't stretch to the full version you can get a <B>Light</B> version which is good enough for most people.
<P>
Warning: the next few paragraphs may seem like an advert! I really like this package, but you might want to skip forward (although there's some ideas you might like in the Plugins bit :)
<P>
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 excellent 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... and this is all without using it to actually alter the contents of the image! 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 this - at an extreme level I can take images from a digital camera taken without a flash and get something usable, including one picture which was completely black to the eye, but with some careful restoration ended up a perfectly good image of someone's face; it's also great for editing out little imperfections - at an extreme level 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).
<P>
If the budget runs to the <B>effects plugins</B>, then I suggest you get these too. 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).
<P>
<li><B><a href="http://www.cconcepts.com/">Artworks</a></B> - 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.
<P>
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 now 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 <B><I>always</I></B> 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.
<P>
The alternative to ArtWorks will be...
<P>
<li><B><a href="www.cerilica.com">Vantage</a></B> - at the time of writing this was not yet released. So, I haven't yet tried it, 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 to be almost desktop publisher like, with blocks of text that can have effects applied and even be spellchecked in situ; 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; and to cap it all, probably the first decent PNG creator so you can have multiple levels of transparency and blend those graphics into your web page with such subtleties like semi-transparent shadows over a textured background...
</ul>
<P>
<a name="tips"><H3>Last tips</H3></a>
<ul>
<li>For photographs, use the <B>JPEG</B> file format - I usually set the compression to optimised 75%, which gives a good compression rate without losing detail. suing GIF for photographs will not only mean you only have 256 colours instead of the full range of up to 16.7million, but the file will tame much longer to download.
<P>
<li>For line art and simple drawings, save as <B>GIF</B> - JPEG will cause blocky interference-like patterns in large areas of flat colour.
<P>
<li><B>Colours and palettes</B> - a contentious issue, 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. 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 (and I've got the web logs to prove it - Acorn only sites with more Internet Explorer and Netscape hits than Fresco, Browse and Webster 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.
