The second in a series of reference guides, this one covers graphics design and has tons of expert tips and advice for creating both online/offline media.

Setting up your canvas

Plan and Play small scale

Don't jump straight in at the deep end with a huge resolution canvas image. While your playing with ideas just stick to a standard screen resolution. Vector programs such as Illustrator or Flash are great for playing as if you end up creating something amaizing you can easily enlarge it when you are ready. You could also try the old pen and paper, not much in the way of fancy effects but good for layout ideas.

High Resolution Source Images

Before you start any print based design project for a client, make sure you inform them that any images they wish to include in the design must be large enough for print and that horrible little stamp sizes email attachments just woun't cut it.


If worse comes to worse and they have asked you to add a manufacturer or sponsors logo for example, try Google Image Search and see what you can find.

Choosing a colour mode

Be sure that the first thing you do when designing is to set the correct colour mode! Design for screen such as websites and video should be set to (RGB or Bitmap). For print based media use (CMYK), this is due to the screens ability to use higher contrast levels than printers, therefore colour seen on a computer screen is often different from the colour of the same object on printed media.

Guides can be helpful

When designing for print using guides and rulers are essential for complex designs such as box or package layouts, and they help you to plan precisely. Be sure to set these up straight after you have sorted out your document size, resolution and colour mode. Because thereís nothing worse than screwing up the fold lines on print day ouch! In Adobe Photoshop you can find these under the "View" menu

Colour moods

Remember when planning your colour schemes that particular colours can bring out certain moods and can often give meanings to your artwork you would never expect.


Here's an amazing web site that shows just how colours can be subconsciously associated with many different things.

Fonts help evolution

If you donít add new fonts to your collection regularly you might run the risk of getting stuck using only your favourites. Therefore your design style may never evolve. A good font can often make any design great and changing a font will often change the whole appearance and style of any project. Hereís a great collection of freely available fonts from my collection to give you a little push towards evolution! (Font Selection )

Stuck for inspiration? Try abstract

When stuck for inspiration I will often end up playing around with various shapes and images with an (ordered chaos) type behaviour. 9 times out of 10 through this kind of playing, I will come up with a great idea depending on how some random images or effects came together.

Choosing a resolution

Another essential part of any pre-production is to also take into account the HUGE importance of setting the right resolution. For screen resolution particularly website design use 72 dpi as this will ensure your font sizes match those used on websites.


For print based media the standard set by most print companies is 300 dpi. The only real need to go above this resolution is for very detailed media that may contain extremely small text (a bit like the small print on an insurance contract ha ha)

Design Tips and Tricks

Save, Copy & Backup

We have all probably had that horrible feeling when a program crashes and then you realise you didn't save, the only advice I can give especially when working on huge multi layered design projects is to not only save regularly but to go that little bit further. Save a new fresh file-named copy of your project every hour, why you ask? Well I've had a few times where my software crashed unexpectedly and ended up corrupting the file itself making it totally useless.

Choose colours wisely

When thinking about colour schemes for your designs be sure not to include too many different colours, especially if you are trying to put across some form of brand image or style. Play with different shades of one colour or choose two colours that are closely related as this will help all elements of a design relate to each other and be recognisable for that particular brand or identity. Here's a great tool that generates shades of a chosen colour.

Know when to stop

It's quite hard to know when to stop especially when you're on what I like to call (a natural high) due to the fact that your ideas have come together so well that your design looks better with every click. This feeling will often make you keep thinking that if you just add one more bit here and there it will be even better, but take care you don't over do it and create an over busy, over layered monster.

Try Home Made Vector

Anyone can make great vector artwork even if you are totally useless when it comes to drawing. Just gather some photographs that relate to your project. Then use a vector illustration program such as Illustrator or my favourite Flash. All you then need to do is draw around the main features, then fill them with closely related colours that link each of the sections e.g. white for skin grey for shadows. You'll be surprised at how easily it is to give plain images you're own style with this technique.

Adobe Flash Drawing Tools

You may not have thought about this but the vector based drawing tools in Adobe Flash are some of the best I've ever used, this along with the fact that you can select and edit any part of a finished shape over different layers makes this a great wildcard for things like logo design. You can also export artwork to other formats such as Adobe Illustrator when your done.

Use Lorem Ipsum

The single greatest breakthrough in the layout and typesetting industry, Lorem Ipsum is derived from ancient Latin and has been used as standard dummy text ever since the 1500's. Why? Well using repetitive words like "text here text here" in areas of your layout often stick out like a sore thumb. Lorem Ipsum however with its more-or-less normal distribution of letters gives a good natural flow to the text, making it seem like readable English as the eye passes over.

Text for web in Photoshop

A problem encountered when I was new to layout design, was to mimic the un-smoothed standard text shown websites in Photoshop. To achieve this you will need to first select the font tool, then look for the Anti-Aliased (aa) icon setting and set this to "None". There you have it instant web style text that will look the same in a browser, (be sure to also read the section on resolutions for a perfect font match).

Check out Blending Options

Adobe Photoshop's blending options can be found in the layers panel. They are great for adding important final touches to various design elements, and with some of the right techniques can help turn dull lifeless text or images into some real works of art. See our Jazz up text with Gradient Overlay tutorial, for some examples of this great Photoshop feature.

Gradients Are Great

Gradients are very popular these days especially with all this web 2.0 talk. They are the secret behind all those shiny buttons and menus and can really bring a design to life when done right. To see some of a various techniques and effects possible with gradients, see our article Becoming a Gradient Junkie.

Avoid Tacky Effects

Spend time gently tweaking various effects and blending options, don't just chuck on a default bevel or high contrast drop shadow as they can look seriously unprofessional)

Document Size Reference

A Paper Sizes




1682 ◊ 2378 mm


1189 ◊ 1682 mm


841 ◊ 1189 mm


594 ◊ 841 mm


420 ◊ 594 mm


297 ◊ 420 mm


210 x 297 mm


148 ◊ 210 mm


105 ◊ 148 mm


74 ◊ 105 mm


52 ◊ 74 mm


37 ◊ 52 mm


26 ◊ 37 mm

Web Advert Banner Sizes




728 ◊ 90 pixels

Full Banner

468 ◊ 60 pixels

Half Banner

234 ◊ 60 pixels

Square Button

125 x 125 pixels

Micro Button

88 ◊ 31 pixels

Medium Button

120 ◊ 60 pixels

Large Button

120 ◊ 90 pixels

Vertical Banner

120 ◊ 240 pixels


120 ◊ 600 pixels

Wide Skyscraper

160 ◊ 600 pixels

Vertical Banner

120 ◊ 240 pixels

Small Square

200 ◊ 200 pixels


250 ◊ 250 pixels

Common Print Sizes



CD Cover (Front)

12 x 12 cm

CD Cover (Back)

11.75 x 15.1 cm

DVD Cover (Inside)

18.24 x 12.24 cm

DVD Cover (Outside)

27.48 x 18.27 cm

Business Card (Eur)

85.60 ◊ 53.98 mm

Business Card (US)

89 ◊ 51 mm

Business Card (Jap)

91 ◊ 55 mm (Yongo)

Postcard (UK)

152.4 x 101.6 mm

Postcard (US)

152.4 x 107.95 mm

Poster (UK Quad)

30 x 40 inches

Poster (US One-Sheet)

27 x 41 inches

Finishing your project

Choosing Image Formats

Once you have completed your project you will need to save your final image ready for the client or print company.


For set size print work save a full layered PSD (for backup) JPG and PDF files (as these are some of the most commonly used file types for both web and print).


For vector illustrations full Illustrator AI files (for backup) and an EPS (that can also be loaded in Photoshop). Saving in all these formats will guarantee no problems when sending for print.

Ask for opinions

Before sending the final design to the client ask a friend or co-worker to take a look. They may well pick upon areas that you are unable to see, as you may be in a way blinded by love over all your hard work.


If they suggest any major changes maybe think about creating an alternative version of the design, giving the client some choice.


I guess if the client comes back liking your friends suggestions, I would think about asking them to check a few more designs in future :)

Sleep on it

If your one of these zombie of the night types (I know I am), you may always face the decision of whether to send a proof to the client late at night or maybe wait until the morning? But try to remember judgement could be effected by obvious tiredness.


Another theory is that after your subconscious mind has kicked in during a good nights sleep, you may end up thinking differently about something. So go on! count some sheep, its a good move particularly if your stuck for ideas.

Also see our Web Development Guide >>>

 Subscribe to our feed

Send to a friend