Graphic design
Graphic Design forms an integral part of web design. Want to know what it is all about ... here is a brief intorduction, with links to places where you can find out…
Graphic Design forms an integral part of web design. Want to know what it is all about … here is a brief intorduction, with links to places where you can find out more.
A Brief Introduction
Graphic images are basically of two types
- Raster Images : these are images where information about every pixel is stored.
- Vector Images : these are images where info about the basic shapes which make up the image are stored, for eg. when we save a red circle, the file contains info about the radius of the circle & the color of the circle. this usually means that we can scale (change the size) of images without any reduction in quality (ie. pixelation et all, all those small boxes and color loss).
To prepare images for the web we use image manipulation software like Paintshop Pro (shareware jasc.com), Photoshop (expensive adobe.com) or Fireworks (my favourite macromedia.com).
Images on the web are usually saved as a gif, jpeg and pjpeg files.
- gif - the favourite format, small, supports transparency, no image loss, has a color depth of 256 colors
- jpeg - used for photographs, supports millions of colors, image loss takes place, does not support transparency.
- pjpeg - progressive jpeg, loads faster than a jpeg
- png - png is the best file format around, but support for it among browsers is not all that. These have all the great qualities of gifs along with support for millions of colors.
The main types of images created for the web are:
- Images which serve as links, these are usually plain text on a color background, or we use two images with different backgrounds and a little bit of javascript to get image rollovers when you take a mouse over them.
- Images which are part of the design, eg. banners, photographs etc. these are usually spruced up. or we make collages using different photographs and add a little bit of text. Apply a couple of filters and bingo you have a world class image.
Animation:
Animated gifs are created using software which basically bunch together a number of gif images into one image. A similiar effect can be achieved using java and individual gif files.
Macromedia Flash is the numero uno choice as far as animation goes nowadays!
In the end- small, smaller, smallest.
Images should take up as little bandwidth as possible. they should be as teensy, weensy … etc. as possible. think small, reeeaaal small!! That is what developing web graphics is all about - striking the correct balance between quality and file size. There are many methods that you use to get optimal images. Most software nowadays lets you optimizes files quite easily. A couple of versions back… hooo boy! We had to do everything ourselves. we managed by reducing the number of colors, adding transparency, cropping, resizing ….. etc.
Resource Links
visit these sites and get more info about raster images vs vector images, the png story, gifs vs jpeg, graphics software, image optimization.
www.webmonkey.com - these guys are the best possible resource for web designers. go here first! they should have info about most of the above topics.
www.ozones.com - the best graphic designer in the world (according to many). very very very useful site for people into photoshop..
Originally published on naren.8m.com, my first website, in 1999; recovered from the Wayback Machine.