Building Web Graphics from the Ground Up

Building web graphics can be one of the hardest or easiest tasks you face as a web designer, depending on the purpose of your website. While some websites will pride themselves with the fanciest graphical interfaces on the Internet, others will be happy with a few HTML tables and a simple header graphic.

There are plenty of programs catering for graphics design, and if you're serious about getting in on the act, you should have one of the following packages:

- Adobe Photoshop CS2
- Adobe ImageReady
- Macromedia Fireworks
- ULead PhotoImpact
- Jasc PaintShop Pro
- Xara Xtreme

While all of the above programs are relatively similar in terms of the available features, Adobe Photoshop remains by far the most popular choice of software. For the most comprehensive graphical development package, you'd be well advised to invest in Adobe's premium product.

Once you've opened your design suite, you'll usually find a wide variety of tools and effects that can be applied to your work. It's worth noting that you may need to have an image open for these options to appear.

Shape creation tools, paintbrush menus and various selection options are usually displayed on the primary toolbar.

The development of graphics is largely dependant on the usage of layers. We use layers to add different levels of content to our graphical designs. For example, if you've been developing a piece of traditional art, you might like the idea of applying a border around the edge. To add borders, it's a good idea to use a transparent layer and apply a 1-pixel stroke. This will add a neat border, without hard-printing it on to the original image. In the same way that we don't paint a border on to a portrait!

Once you have an open canvas to design your web graphic, there are many different techniques that can be used to get the job done. You'll find thousand of web graphic tutorials on the Internet, but to become a great designer, you should be keen to learn the art of your craft. Explore the various options and experiment thoroughly, even if it doesn't lead to something that can be used on the web.

There are also several in-built features which can be used to make graphic design easier. Patterns, textures and brushes are incredibly popular and you can create some intriguing graphics with them. Don't let that be an excuse to get lazy though. It's easy to apply an impressive little pattern and consider the job done; but you won't win any awards for originality.

A great graphic designer has an eye for the innovative. To create unique work, you don't need to know the obscenely complicated methods from tutorials on the Internet. You simply need to learn what each tool does, and how to implement it.

Blending effects are another commonly used technique to give a piece that extra finishing touch. Have you ever seen an outer glow around an image, or a box-like shadow to create emphasis? This is all done through the blending effects menu, it might be named something slightly different depending on your choice of software.

As the years pass, graphic editing utilities are becoming incredibly sophisticated and the blending effects are advancing. Popular features include:

- Inner glow : Creates a lightened effect inside the perimeter of the image.
- Outer glow : Creates a lightened effect outside the perimeter of the image.
- Beveling : Creates an engraved look, or adds a groove to an image.
- Inner shadow : Creates a heavy shadow inside the perimeter of an image.
- Outer shadow : Creates a heavy shadow outside the perimeter of an image.
- Stroke : Creates a stroke of pixels, or a border - on the perimeter of the image.
- Gradient : Applies a transition of colors over the top of the image.

These are the widely accepted features that you'll find in most graphical development suites. Photoshop, in particular, comes with many more filters and image manipulation tools that can also be applied. Be sure to explore your software and determine what features are available to you.

As tempting as it may be to revamp your website with fancy graphics all over, be sensible about how far you go with your designs. Are your web graphics utilizing lots of solid color? It's amazing how many designers will save blocks of images in GIF or JPEG format, when a simple HTML tag for the background of a table cell would do the trick.

Websites using lots of web graphics are typically much slower to load. This can be a problem depending on who you plan to serve your content to. A gaming audience, for example, is likely to have high spec computers and thus, make better candidates for your slower loading designs. Optimization is certainly important, and by limiting web graphics to the bare essential inclusions, you can do wonders for your loading times.

How does this affect your web graphic design specifically? Well, it puts important emphasis on how you save your files. GIF format is great for compression although you should be aware that it compresses via rows and not columns. This means that if you have a lot of vertical lines in your image, it won't compress as well. JPEG should be used for photographic work and pixel intensive designs.

You can also take the simple step of resizing images to improve web performance. By scaling the images down, you can reduce their physical size. Be aware that resizing an image with text can cause problems due to the way that the proportion is altered; it can look pretty horrific if you're not careful.

If you're going to scale an image down, you should make sure you restore the original ratio. Scaling images upwards is extremely inconvenient and shouldn't be practiced unless you're working with vectors.

The art of building web graphics doesn't develop on its own accord. It takes many hours of practice to come to terms with the many tools at a web designer's disposal. But the rewards are obvious. A great web designer is a great web designer for life, and the ability to produce good graphics will prove invaluable as you develop your site------------------------------------------------------------------------------------------------------ If you are a business owner get listed at Best Technology Site, part of Localwin Network.