Best Photoshop Layout for Web Design


Best Photoshop Layout for Web Design

If you're a regular Photoshop user you'll know that you can have different layouts and windows within the program depending on what you're working on. I've been using Photoshop since 2007 but only really got into it in the last 2 years, trying to perfect my knowledge, I know I've still got a lot to learn.

Many have asked me what is my preferred layout/workspace for when I do web design so I'm about to share it with you.

Note: I am using Photoshop CS6 on a 21.5-inch 1920x1080 screen. If you have a larger display you'll be able to fit even more on the screen.

1. File setup

I set the width of my file at 1200px, the height can change of course depending on what you're designing. I also use guides but not all the time, it's good practice though - my guides are at 960 width with 20px of spacing between each line.

2. Color swatches

Swatches are usually there when you open Photoshop, however you can find it under "Window". Colours are very important when it comes to web design as most of you will know. I always work out whether I'm trying to go for a dark or light theme. Then as I'm going along I try different colours which I think will work. If I want to save a colour for later I can easily save it as a new swatch and it'll add it to the selection of preset colours - you can see in the screenshot there are 5 different swatches after the brown colour, these are my own custom swatches.

3. Typography

Typography window can be found in "Window/Character". Typography plays a huge role when I web design so I want all my fonts at hand. I always have the typography window open because it easily enables me to change fonts, the weight, size, line height and the letter spacing.

4. Navigator

Navigator can be found in "Window/Character". For some odd reason I've never gotten used to using shortcuts to zoom in and out. So I always have the navigator window open in the top right. Not everyone will need this window, but I find it useful.

5. Layers

If you haven't got this window open when web designing there is something wrong with you.

6. History

History can be found in "Window/History". This window can be a huge time saver. It'll let you go back on changes you have made. It'll by default save the last 20 actions, you can adjust this to have more but of course it is resource intensive so I advise against it unless you have lots of RAM. I have 12GB of RAM so I've adjusted mine to save the last 100 actions. To adjust how many actions you would like for it to save you go to "Preferences/Performance". In there you should find an option to adjust the amount of history states you would like.

The window will also enable you to take snapshots of different states. So if you want to save a particular spot you can do and then go back to it when you like.

Note: This does not save with the Photoshop file. So all your history and snapshots will be lost once you close Photoshop.

7. Styles

Styles can be found in "Window/Styles". I don't use this window too much but what it allows you to do is save layer styles. So if you like to add a particular style to text, buttons or shapes, it'll let you save these styles and enable you to add them quickly.

That is essentially my web design layout. Do you have a different web design layout? Or recommend using any other windows I haven't mentioned?