The Ultimate Web Design Workspace for PhotoshopPosted on 17
I’ve been using Adobe Photoshop on a near daily basis, since 2006 and over this time I’ve learned quite a number of tips & tricks. I’ve optimized Photoshop for performance, learned all the essential shortcut keys and tools, and have recently found out what I consider the ‘ultimate web design workspace’.
What is a workspace?
“By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar of Photoshop.”
For more information on workspaces, see here.
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.
You can download the workspace here. Detailed instructions for installation can be found in the link above or in short, below. Note that this file was made in CS4 but it seems to work in newer and older versions, even though it gives a message saying otherwise.
Place the file above into this location:
Applications / Adobe Photoshop / Locales / En_US / Additional Presets / Mac / Workspaces / Basic Workspaces / FILE HERE.mnu
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 presentations via 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.
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.
The Paragraph window controls the justification of text, as well as margins, spacing, hyphenation (set this as off by default) and roman hanging punctuation.
So there you have it, the ultimate Photoshop web design workspace. What do you think? Do you have any Photoshop workspaces to share? Please do!
More Photoshop Tips & Tricks:
- Tips For Working with Photoshop & Dreamweaver
- Tips For Working with Photoshop & Illustrator
- Tips For Working with Photoshop & InDesign
- Speed up Photoshop Projects using Adobe CS Review
- Web Design and Checkout Abandonment – Tips & Insights (2)
- Hidden Symbolism in Logo Design: 40 Creative Examples (6)
- 5 Overlooked Social Media Tips to Boost Branding, Clicks & Conversions (4)
- 7 Free Product Design e-Books from UXPin’s Library (2)
- Colossal Birthday Bundle + 50% Off All Deals + Win an iPhone 5S (1)