Polishing Pixels to Perfection

You'll soon find that much of your time as a web designer is spent on graphics production. There's good reason for this. It's probably the most creative area of web design, and certainly one of the most noticeable aspects when we first visit a web page. Good graphics can be the difference between a site that remains lodged in the memory of a web user, and one which fades in the time spent navigating back to Google.

We're going to look at some of the techniques and background knowledge required to master the art of pixel perfect design. Obviously, to manage this, you're going to need a graphical editing suite. Adobe Photoshop and Macromedia Fireworks (Now owned by Adobe) are both viable solutions and well worth your investment. It can't be overstated that you get what you pay for in the case of these two excellent programs.

Web graphics, as you probably realize, make up more than just simple photos on a website. Graphics can extend from text replacements to the actual nature of the web layout itself.

While they can add an extra level of professionalism to a website, they can also add download times which are quite unprofessional in their own right. So how can we get around the deterrent of lagging pages to create a website that looks as good as it acts?

Optimization is important. Yet many websites will throw the sheer thought out of the window in exchange for page stretching backgrounds that consume valuable bandwidth resources. You should avoid the temptation of designing a 1024x768 splash to cover the user's entire screen. Not only will this dramatically affect the loading times of your site, but you can look "quite frankly" just a little bit silly when a user accesses your website on a different screen resolution.

A better solution is to use tiled background images. By doing this, we can create simple patterns to be repeated across a user's screen and give the impression of an actual background being used. The key benefits are, firstly, the sharper loading speed. And secondly, the background will adjust to the screen resolution accordingly. That's more like the pixel perfect design that we're looking for.

Another good practice is to reuse graphics where possible. By making separate spacers, you can cut down on further download times by simply reusing your current graphics. The browser won't waste any extra time rendering them after the first instance has been displayed. Slicing images is also recommended. By slicing an image in to several smaller graphics, they will load continuously and the user won't be left to stare at a blank screen.

To get to the bottom of graphic optimization, however, we must evaluate the format that we're saving our graphics in. These will usually consist of GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). The key to when to use each format is hidden in their names.

JPEGs are probably the most common format that you'll have heard about. They're an excellent choice,as their name would suggest, for saving photographic images. JPEG is not a lossless format, meaning the quality will suffer when you make changes. When we use a JPEG, the screen will recognize blocks of color and modify pixels appropriately. As a result, the JPEG is great for use with photographic imagery where rich levels of color are regularly used. Unfortunately, they don't hold up quite as well in flat-covered graphics. This is where we should switch to GIF format.

The GIF format has been around for an extremely long time, and is a great solution for saving text based images, vectors or flat-colored graphics. GIF is also a strong competitor in the compression market.

The format uses Run Length Encoding to compress horizontal lines, which means that if you use traditional scanlines, you'll be saving almost half of the original image file size.

Image compression is important for optimizing your web pages and improving the final download times, and this is where GIF holds a great advantage over its JPEG rival. GIF is a lossless format, meaning that it doesn't alter the individual pixels in a graphic. As such, it's an excellent choice for vector based graphics, or areas of blocky color.

Another advantage that comes with using GIFs lies in the ability to make one color completely transparent. You've probably seen instances of this before where the background is missing from an image. Transparency can be a valuable technique. Just remember that if you're going to specify the removal of a particular color, make its one that isn't included in the graphic that you're trying to retain!

Finally, it's important to address a couple of the more popular Photoshop techniques that seem to be grossly overused on the web; the drop shadow and beveling effects.

Quite why these particular effects have taken off is a bit of a mystery. General consensus would suggest that it has something to do with the 3D illusion that they provide, with all the ease of a single button click. But don't let that be an incentive to overuse them. Beveling, in particular, leaves a horribly unprofessional depth which will turn away the trained eye.

There really is no way of establishing pixel perfect design without getting your hands dirty and experimenting in a graphical development suite. It's not something that you'll discover overnight, but once you've mastered it, you'll be one step closer to the kind of web design that'll instantly impress a web user when they arrive on your page.-------------------------------------------------------------------------------------------------------If you are a business owner get listed at Best Technology Site, part of Localwin Network.