Designing flexible website visuals

Almost web designers begin their layout designs in Photoshop - its so much more flexible than jumping straight into your actual web design application like Dreamweaver or Go Live. Well, here are some great tips for when you are working up visuals that have personally saved me a-lot of headaches and repetition of work!

Double-up your dimensions
Yup, as it says on the tin - double (or even quadruple) up your image dimensions! For instance, if you are working up an 800×600 optimised design, your ’safe’ visible design area is 760×420 - so work up your visual to 1520×840, which is double this.

This has many advantages - you get a reasonable printout if you need to have a meeting without a laptop and it also allows you to resize your layout if you have a change of heart and want to go for an optimised 1024×768 layout. Obviously, when you have finished your layout you resize it by 50% (with a little unsharp mask) ready for optimisation.

Get your guides right
As you are working up your visual, you often have a change of heart how the content, navigation and advertising areas size up in relation to each other. As you resize or move elements around, you should be putting in or moving guides to accommodate these elements.

Get your guides snapped to exact pixel measurements by changing your measurements to pixels and holding down shift as you move your guides - they will then snap to exact pixel (or any other) increments. I usually find it eases development further down the line as I move into Dreamweaver if I try and keep to 5 pixel increments too. It also makes things a bit easier when slicing and dicing your layout!

Keep all your type live
Dont rasterise or path any of your type - keep it live in-case you need to change or amend it!

Use the shape tool
Use the shape tool to create panels rather than making a selection on a layer and filling it with colour. It makes then much easier to resize and change. Also you get nice crisp edges whatever you do to the dimensions, rather than a nasty edge if you keep resizing a basic filled bitmap layer.

Always work in RGB
It goes without saying that you should always be working in RGB for designs destined for on-screen useage (eg website and multimedia). It is the colourspace that your work will be seen in, the files are 25% smaller than CMYK and you have a wider and brighter colour gammut available - so make the most of it!

Leave a Reply