How To Give Your Graphics A Professional Look

By Author: Websquare
Total Articles: 1
Comment this article

I'd avoid calling this Tip really a Tip. What I'm going to talk about is such a matter that everybody seems to have his/her own view about. It's quite difficult to admit that your graphics is not professional, particularly if you have had some experience in Web design already. Furthermore, your notion of professionalism may be rather different from mine.

Nonetheless, I feel justified to share my views on this matter. I believe that many people don't make high-quality Web graphics not because they can't but because no one taught them, and they have had too little experience to find out some of the tricks of the trade themselves. I will try to avoid indistinct declarations and limit myself to the sort of advice that has proven useful and that can be followed unambiguously. I'm not going to grant you artistic talent if you lack one; but you could learn here how to hoodwink many, many people into thinking that you possess it.

Always anti-alias

The first and foremost directive of any Web graphic artist is: Never create an image without anti-aliasing. If you're new in the business, ...
... you should know that anti-aliasing is the term applied to those soft, non jagged edges of image elements (say, letters) that are composed of - if you zoom into the image - pixels that are neither the colour of the foreground letters nor that of the background, but somewhere in between. Such an edge makes a human eye think that the image is, in some miraculous way, of higher resolution (and, therefore, of better quality) than the screen itself. No anti-aliasing, on the other hand, is the giveaway of an amateur artist.

I'd better not teach you how to get this effect, because this very much depends on the painting program you use. The rule of thumb is - the better and classier is the program, the easier it is to make anti-aliased images with it. For instance, in Microsoft Paintbrush the trick is merely impossible, whereas in Adobe Photoshop, on the contrary, it is rather difficult to make a non-anti-aliased image.

If you have failed in finding anti-aliasing in your program's Help, try doing this: Create an image twice or thrice larger than required, confirm it is in 24-bits colour mode (this may be named RGB colour or true colour in your program) and then resize the image to the preferred size. If this won't give you anti-aliased edges, the probability is that you need something more commanding for your work.

Well, in fact there are circumstances when anti-aliasing should be avoided - but these cases are pretty rare. For example, if your image has only horizontal and vertical lines, edges, and outlines, then it should be better left sharp without any anti-aliasing. Moreover, very small text characters sometimes look superior without anti-aliasing.

Stay away from rectangular shapes

To this point, no graphic format I know of permits creating really non rectangular images. Conversely, rare is a professionally designed site where much of the graphics would not be (or, rather, look) non rectangular.

With text heads made as images, this rule turned into nearly mandatory. Unless you plan to create a background for your text that is a graphic element by itself, you'd better make no background at all - that is, create it transparent or the same colour as the page background.

The underlying principle behind this suggestion is pretty straightforward. For human perception, rectangular shape is a synonym for being stopped, controlled, disconnected; thus, avoiding rectangularity makes the impression of the graphic having no boundaries, merging with other images and with the text on the page into one complex design. This is what makes it truly a page, not just text accompanied by some detached graphic chunks.

Limit number of colours

Reserved use of colours is one clearer sign of a professional design. Unless you're utilising various complex graphics, you should at all times try to restrict the whole design of your page to no more than half a dozen colours, together with those of the background, body text, links, and all the graphic elements. If you're going to employ photographic images, you should think about the overall tone of the images you choose so that they would match other design elements. A good quality graphic package such as Photoshop will make it fairly easy to alter the colour spectrum of a photo.

The next step towards professionally mastering your colours may be called colour symbolism. Once you've selected some well matching colours for your page, you should spend some time deciding which of the design elements should be which colour and why. The two rules to have in mind are: First, elements alike in form or function (say, all section heads, or all gradients, or all horizontal rules) should be, if possible, of the same colour; and second, the hierarchy of colours should be scrutinised. This means that your whole page, similar to any separate image, should be controlled by no more than two colours and the less space should it occupy.

Join crisp and blurred

In the real world, we frequently scrutinise either crisp and blurred outlines or edges at the same time. No wonder, joining these two opposed notions in computer graphics considerably improves its impact. The most well-liked graphic effect of these days, drop shadows, is based accurately on such a combination of crisp letters with their blurred shadows.

Be real natural

The reference to the real world in the above is the clue for one more technique to get better graphics. It looks like human perception is best satisfied neither by realistic reproduction of the nature nor by purely abstract graphic forms, but by artistic mixtures of these two. And not to my surprise, computer graphics have a propensity to be short more of natural than of artificial components.

The remedy may be rather straightforward: Take any photograph you like, scan it, and utilise in your design! Don't allow yourself to be stopped by the fact that the photo may have nothing to do with the content of your site. Unless you take an image of the Pope or Barack Obama, believe me, nobody will ever ask themselves, why in the world this photo is here. Conversely, the impact of a simple photo may be unattainable by any amount of painting and drawing by hand.

Keep in mind that I'm talking about combining natural and artificial elements, that is, using a photo not as such but somewhat as an integrant part of the design. For instance, if you just take a random photo and place it bordered and centred to the top of your page, this may truly stumble your readers. As an alternative, consider making the photographic image a background for your logo, or text header, or navigation map.

There's no need to make a photo the centre of your masterpiece and no need to cut out the main part of the photo either. Take whatever piece you like, be it a corner of the window pane, a standalone tree, or a girl's leg. Cut out a tiny element from the photo and enlarge it. Make the edges of your cut-out non rectangular and blur them out. Join the photo layer with the text and other artificial elements of your image - for instance, make the text drop a shadow on the photo. Use the wealth of image filters in Photoshop or other painting program - most of these filters are above all cool when employed on natural images. In a word, be creative!

This article has been provided by courtesy of Websquare Web Design - which is an independently owned and managed web design and website development company based in Yorkshire, UK. Websquare offer website design and development, search engine optimisation, online marketing and e-commerce services from their offices in Yorkshire.