Tips and tricks for webdesigners

As a webdesigner I try to find the easiest way to complete tasks and to improve the quality of my designs. Day in, day out I am working in photoshop and illustrator lately, so every timesaver is an advantage in the design process.
Personally I like it when a group of people share their knowledge and experience, so feel free to add tips and tricks to this article in the comment section.

Layer comps
Imagine yourself working on a website for a bakkery, the website has three pages which all need a custom layout.  Then you can create three seperate PSD’s and show them to the client or you can use layer comps which make it possible to create different states using one PSD instead of three…

Lately I am using this technique to compress the ammount of PSD files on my machine.
The layer comps palet in photoshop CS4 can be opened by clicking the” window” menu and select “Layer comps”.
Now you can create a couple of comps by clicking the new comp icon in the palet, you can select some options as shown on the screenshot below

once you have created your layer comps you can start enable/ disable layers, reposition things, add things… until you are sure about the composition, once you are happy you select the composition which will be saved,

next click the refresh button to update the layer comp as shown below

Great! Now you have succesfully saved your comp , remember to always select the appropiate comp before refreshing!
Play arround with this technique and discover the possibilities

Template
As most programmers I am lazy which means I look for ways to make my work easier and less boring.  Doing repetitive work doesn’t learn you anything,  it only costs time and money. So before I used this technique  I always created folders when I started on a weblayout. Now I decided to create a template for websites with folders and the most common used things when you are building a website, so the naming such as (footer, content, header etc…) is already done and the colors are already adjusted so it gives a clear overview when you are working on a weblayout.

you can download the template right here

enjoy!

Naming and colors of your layers
Not working structural is many times the reason why you get confused working on a project, bringing structure into your PSD saves time and makes working easier and more fun.

First of all if you are working on anything in photoshop or illustrator force your self to name your layers. Imagine yourself opening a layout you worked on 5 weeks … losing your way into the document is the result if you don’t name your layers properly.
It is easy all you have to do is double click the name area on the specific layer you want to change.  Type the proper name and hit enter that’s all!

Another thing you can do to work more structural is working with folders which you can give a specific color. By doing this you can visually know without even reading anything what that folder contains.
How do you accomplish this? Well it’s simple all you have to do is create a new folder

Next click the folder icon of that folder. Next a popup apears and you are able to change the name of the folder and choose a specific color.

Use the navigator

The navigator is a great tool when you like to zoom in alot while working on photos or anything else. You can activate it using the “window” menu and select “Navigator”.

Once you have opened it you sure will notice a overview of your document. But the navigator is more then a small preview of your document. It enables you to zoom and navigate in your document using one palet. Before I used the navigator I always thought it was a pain in the ass navigating through a document which is zoomed in for 1400%.  I used the hand tool (h) which is also an option. But the navigator is so much more fun to use and easier! And again a tip which saves time and increases the pleasure of working in photoshop.

There you go, I hope you have learned alot reading this article and believe me after working in photoshop for years I still learn alot every day. So don’t hesitate to add a tip or trick in to the comment section

Cheers