CigarettesCheap cigarrettesCheap cigarettes online
Alexander Ward's profile picture

Top 5 things that web designers should use in photoshop

Adobe Photoshop Screenshot with overlaid Logo

Recently a friend of mine who is just starting out in the web design world (at uni) sent me an email asking me what core photoshop skills would a web designer need, as I was writing my reply I realised this was turning into a blog, so here it is

I’ve tried to narrow this down to a list of 5 of the most important things I can think of. Of course this is subjective. The ‘Rules’ of web designer are getting fuzzier every week as technology changes. When I started in the industry dial up Internet and a lack of CSS or web standards meant that your design was quite restricted, tables were used to layout websites and images had to be small. These days even mobile phones can reach broadband speeds so creating image-based layouts is no longer an issue, plus the introduction of XHTML/CSS has produced a simple and fluid way to make some truly beautiful websites.

So without further babbling, here are the top 5 skills I think you need as a modern day web designer and why they are useful:

1) Learn to use the grid -  Even if you are making a completely mental site design, don’t forget that it has to be understandable to people, for this reason the grid function can be invaluable, think of it this way, when you lay the site out in CSS, unless you are using absolute positioning for everything or creating the entire design in images (can look cool but be careful about accessibility) your site will have an invisible grid anyway so it definitely helps to use one in photoshop.

2) Guides - Like the grid this is a great tool for laying out the ‘zones’ of your page, personally whenever I make a new site the first thing I do is to create a 960px wide box in the middle of the screen and put guides on each side, then i work out how big the header will be ( the grid can be handy here ) and set a guide at the bottom of it then I do the same for the navigation bar and any columns. This way I have the basic shape of my site mapped out in guidelines already.

3) The offset tool – As I mentioned earlier, large images are no longer an issue with sites these days, however this does not mean you can load a 9000×9000px image as your background. To be honest even if you could, it would be inadvisable as that single element causes you to loose a lot of control.

Instead, its better to create the illusion of a big image, when the web was young, tiled backgrounds were horrible tiny images which were badly repeated, however these days a tiled background can make a huge difference to the design of a site (great example here: http://pralinenschachtel.de/). Learn how to use the offset tool in photoshop to test and create seamless tiled images

4) The Gradient tool - This one is more subjective as some people don’t like gradients and it is possible that the web design style will change to shun then again like it did in the late 90’s, however used correctly a subtle gradient can turn a good design into a beautiful one.

5) The Layers palette - I promise you now, this is the best part of photoshop to master, your first few sites will make you wonder why, then when you come back to that file for your first redesign it will make you realise. A badly organised layers palette is the stuff of nightmares when it comes to websites. Imagine your layout has 250 layers all called ‘layer #’ or ‘copy of layer #’ it can turn a five minute job into a full morning. Always make sure you name every single layer with a descriptive label. When you have a number of layers all related to the same element, group them, then when you have a number of related groups together, group them too. Ideally you want to have a top level group for each zone of your site (eg, header, navigation, body, columns, footer).

Like this? Share it with your friends:
| More
PC Speed Doctor
View related article

User Poll

What kind of Twitterer are you?

In this weeks article, we ask, how do you use twitter?