Graphics Primer (Related Forum – Website Graphics Design & Usage [webmasterworld.com] )
Graphics are a basic component of a good website. They engage the viewer and may be the first element that influences a visitor to remain on or flee from your Internet property. While not always true, sharp graphics contribute a sense of professionalism and authority to your site. Mis-aligned, fuzzy, or gaudy images tend to scream at the user to leave and find the next site on down the line.
Skillful use of web graphics include a knowledge of image formats, image size, and how the graphic is to contribute to the purpose of your website. Here are a few tidbits to get you going.
Image Formats
GIF – An 8-bit file format with a maximum of 256 colors. This is a good choice for images with sharp edges and few complex color variation.
JPEG – 24-bit file format that handles millions of colors. This format is a good choice for photographs and images with many color variations. This is not a good choice for images that contain text due to its tendency to leave artifacts around sharp edges when compressed.
For more on image formats, see: [htmlhelp.com...]
Image Size
Due to bandwidth constraints on Internet connections, it is still essential that a website loads quickly. Images can greatly slow down the load time of a web page. Try to achieve the smallest image size possible while still maintaining image quality. Some techniques to get a smaller image size is to reduce images to 72dpi, slice large graphics into several smaller parts and rejoin through HTML coding, reduce the size of an image by cropping/resizing/both, and compress the image in your graphics program. You can read more information here on compressing graphics [webmasterworld.com] and this thread for a discussion on image size and page loading speed [webmasterworld.com].
To create and manipulate graphics, you need software. Below are a few suggestions on free utilities to manipulate existing graphics and programs that will help you create images on your own. Don’t forget to read the help files if you download a program. They often give you vital tips on graphic design as well as help you find your way around an otherwise frustrating piece of software. Also see Webmasterworld Members’ software recommendations [webmasterworld.com].
Free Utilities
Modify graphics, cut down on image size, save in different formats, cut and crop, and make slideshows.
Irfanview [irfanview.com]
Other recommended programs [webmasterworld.com]
Image Creation
Paint Shop Pro [jasc.com] – Many professional tools for under $100
Adobe Photoshop [adobe.com] – Industry standard of excellence but very pricey.
Fireworks [macromedia.com] – Another popular tool but also expensive
If you would rather not mess with making your own graphics, there are many places on the Internet where you can use photos and graphics for free,
Free icons [iconbazaar.com]
WebmasterWorld member recommendations for free photos [webmasterworld.com]
WebmasterWorld member recommendations for free clip art [webmasterworld.com]
Once you get the basics of graphic creation and manipulation down, check out some of the threads below that will help fine tune your graphics skills:
Manipulating background color [webmasterworld.com]
Software for banner design [webmasterworld.com]
High resolution screen shots [webmasterworld.com]
Creating curves on images [webmasterworld.com]
Images that gradually fade [webmasterworld.com]
Working with color combinations [webmasterworld.com]
Small text in graphics [webmasterworld.com]
How to bend type [webmasterworld.com]
Is the web safe palette dead? [webmasterworld.com]
[edited by: JamesR at 6:51 pm (utc) on June 5, 2002]
