GRAPHICS> Scanning : File Format : Linework : Photos : Image Manipulation : Filesize : Transparency : Animation : Banners : Buttons : Backgrounds : Protecting Your Artwork

Graphics

Even if you think you're not creative, it's your use of graphics that will make your site unique. The web is such a visual medium and no matter how interesting your text content is, without graphics you just won't maintain the readers interest. It's the "look" of your site that will stick in people's minds.

Mastering graphics manipulation takes a fair bit of time and practice, but it's worth the effort. I'm no graphic designer, and I'm utterly hopeless at making a site look "slick". However, I've got the practical skills to do what I want with an image so I can at least produce whatever I can conceptualise. Making graphics suitable for a website involves at least 90% practical, learnable skills. You could be the most creative person in the world, but if you don't know how to treat an image appropriately for the web, you will never get a site to look any good.

The main issue with web-graphics is juggling file size (and therefore download time) vs. image quality. It's a trade-off, but there's a lot you can do to reduce file sizes without noticeably losing visible quality. If you're coming to the web from a print media background, how can I put it as gently as possible? "Forget everything you know". The web is nothing like print media, and the issues are often completely reversed. Download speed is everything - your 1meg photoshop files will have to be shrunk to under 1% of their original file size - live with it!

Always work on an image at least as big as you'll need for your page. You can always make it smaller later, but you can't really make it bigger again once you've shrunk it, it'll look terrible if you try (because you've thrown away information about the bigger picture & the computer just bulks it out with the nearest pixel - making for a pixellated mess).

Screen resolution on a monitor is 72 or 96 dpi (dots per inch). Unless your intention is for people to be downloading your graphics to print, any higher resolution is just making your filesize bigger than it needs to be. It won't actually LOOK any better on a screen. Even if you DO want a high-resolution version available, put it off your main pages, as an optional extra. You don't want to hold up the downloading of your main pages - people who do want a print-quality version can go off to collect it if they like the look of the screen-resolution version on the main page.

As this whole site avoids Flash and other vector-based graphics applications, unless otherwise specified I will always be talking about bitmap-based graphics (ones made up of tiny dots). I'll cover the basic difference in the Fonts section if you want to get your head around the concepts involved.