Ultimate Web Design Workspace for Photoshop

The Ultimate Web Design Workspace

In this post, I outline how I have personally set up my web design workspace and why I have found it to be the most productive layout for producing web work since I’ve started using Photoshop. Take note that I am using a 27″ monitor at 2560×1440 resolution though this layout should work on monitors 17″ and up.

1. Document Set-Up

This is where the magic happens, the blank canvas. I usually start with the 960 GS and set the width at 1400 pixels. The main Photoshop tools are still on the left (by default) with the canvas in the middle and the other windows on the right of the screen.

2. Layer Comps

If you’re not using Layer Comps already and you’re working as a designer, you’re mind is about to be blown. This isn’t the place to give a tutorial on them but having them in your workflow is pretty much essential, as it saves hours of time. Layer Comps are also very handy for putting together a presentationsvia the ‘Export Layer Comps’ script.

3. History & Snapshots

The History window allows you to go back in time based on every change you make. I usually have my history settings set at the default of 20, but often take ‘Snapshots‘ so I can easily come back to previous states with a simple click. Take note that snapshots do not save with the PSD.

4. FontShop & Extensis Web Font Plugins

FontShop & Extensis allow you to view and use web fonts right within Photoshop. I only click this icon when needed as it often can slow PS down. Also, take note for Extensis you will need the Suitcase Fusion font management software, which is available for 30 day trial.

5. Folders & Layers

A large Layers window allows for easy scanning and organisation which boosts productivity while designing. I break down each ‘page’ down into 4 general folders; Header, Content, Footer & Background.

I also have ‘Auto Select’ set as ‘Layer’ and the ‘Show Transform Controls’ checked on. See the very top left toolbar in the screenshot to toggle these to your liking.

6. Swatch Palette

The Swatch palette ensures that the colors you use are consistent through the document. Simply add colors to the Swatches palette and then when needed, highlight your text or layer and change the color.

7. Styles Window

Similar to the Swatch window, the Styles window allows you to easily change colors and add effects to elements throughout your document. Handy for buttons, forms, rectangles, navigation, etc.

8. Character

The Character window allows you to easily change the most common text settings on the fly such as the font, size, leading, tracking and color. Pretty much essential for web layout.

9. Paths / Channels

I break up the Character and Paragraph windows with Paths & Channels as a personal preference so the type tools don’t seem so cluttered. The Paths window allows you to easily create paths, shapes & selections and Channels is mainly used for photo editing.

10. Paragraph

The Paragraph window controls the justification of text, as well as margins, spacing, hyphenation (set this as off by default) and roman hanging punctuation.