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.”
sponsored message
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.
Download:
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.
sponsored message
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
sponsored message
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.
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!
Thanks for sharing! It’s actually pretty similar to my setup..
I’ve never really heard of layer comps but will probably look into it – I usually just toggle my layers/folders on/off
I’ve been using photoshop for over a decade and still haven’t established a workflow this nice.
Thanks for the inspiration. I better ‘just get my s##t sorted’ now.
Thanx for this suggestions. Allthough I’m working with far less menus open (Like the layers, type and brushes)…
Yeah this is similar to my layout too, although I also have the info and navigator panels open too. And concur that Layer comps is a life changer (as is using smart objects for recurring objects).
The info panel makes it easy to see pixel dimensions of any selection, vector object or layer transform.
The navigator panel makes it quick to navigate around the page when I’m zoomed in working on some small details.
The other thing I do is set up 2 different workspaces. One for 1 screen and 1 for 2. I can just click a button at the top right to switch between the 2 for when I go between my desk and working on-site (or from my couch).
As part of your workspace, you can also customize the menus to hide tools you don’t use so you’re not sorting through loads of functions or click on ‘Flatten All Layer Effects’ instead of ‘Layer comps to files’.
Wish I had seen this article a few years ago Jacob 🙂
Nathan,
I used to have the info panel up but found I never actually looked at it and it was just wasting space on the screen. If I want to check a size I usually just copy merged and go to new document (for rectangles at least). I wish I had known this layout too a few years ago!
Or use the slicing tool 🙂
I removed the Info panel with Photoshop CS6 – having the size display next to the marquee tool completely fixed that part of my flow 🙂
Thanks for the info!
The “Icing on the cake” for this post would be for you to actually upload and share the actual saved Photoshop Workspace file…. will you please?
I actually looked how to do this but all the tutorials on the web pointed me to a place that didn’t actually exist (for CS5 at least). Any insight?
I sure do Jacob.
Your are looking for a folder called “Workspaces” inside is the file.
They are located there in both CS3 & CS6 not sure bout CS5 but I don’t see why CS5 would be different.
CS6 on Win XP sp3:
C:Documents and Settings{INSERT YOUR USERNAME}Application DataAdobeAdobe Photoshop CS6Adobe Photoshop CS6 SettingsWorkSpaces
CS3 on Win XP sp3:
C:Documents and Settings{INSERT YOUR USERNAME}Application DataAdobeAdobe Photoshop CS3Adobe Photoshop CS3 SettingsWorkSpaces
fyi “Application Data” is a hidden folder in Win XP sp3.
Another way to find the file would be to search for the actual “Workspace” name…. for instance mine in CS6 is called “work-web-1”.
BUT there is 1 problem…
Win XP Search is HORRIBLE and will not find the file (not sure about Win 7 or 8) so I suggest using a awesome search app called Everything over at voidtools.com and it will have no problems finding the Workspace files
Hope that help Jacob!
Thanks for that. I actually use a Mac but I used your suggestion of searching the folder and found it. You can now download here: https://justcreative.com/wp-content/uploads/2012/04/TheUltimate-WebDesign-Workspace.zip
Great stuff.. Thanks for sharing this.
I primarily use illustrator, I would love to see how your workspace is for illy 🙂
Keep up the great work.
I use the default ‘Typography’ workspace for Illy which works for most cases. I don’t do web work in Illustrator that often though.
I have one word. Fireworks!
Preach it Libbie!
The fact that an article like this exists should tell people something.
Photoshop while extremely powerful, is agnostic when it comes to workflow and projects.
Fireworks’ workflow and tools are screen / web based from the get go.
Rather than spending time learning how to optimize something not optimized for web design, learn something that is. Fireworks will save you far more time and energy over the long haul.
The CSS panel in Fireworks CS6 is probably one of the biggest time savers ever!
Layer comps vs. Pages in Fireworks? Not even close.
Props to the author for this article and no dis-respect is meant by my comment.
NICE – some of the best tips I’ve seen, even working with PS for YEARS. Thanks for sharing.
Wow.. the resolution of your screen is big… can cover everything.. and still have an empty space..
Have you ever tried designing in the browser? It’s faster than designing in photoshop and smoother for clients because there is no “translation” to HTML (sometimes it’s just not possible to get the photoshop comp 100% converted to the HTML design). Using programs like Espresso or Coda makes this process incredibly easy.
I did this with my last project and it worked out very well, basically shaved 3-4 hours off my production time and drastically reduced the headache of trying to get my HTML design EXACTLY like my photoshop comp.
I find it hinders creativity designing in the browser, even if it is faster and even then, that is only at times. It really depends on the project.
FontShop & Extensis Web Font Plugins from which adobe photoshop version are availables?
Thanks
You will have to check their respective websites, as I am not so sure. Thanks!
Jacob, how many inches is your computer monitor screen ?
27″ as it says at the top, thanks!
oh my bad, I’m sorry, I read it from the main image (“the ultimate web design workspace”) and then go to down, thanks for sharing this awesome article, jacob.. really like it!
Layer comps are awesome, thanks!
Really interesting to hear how someone else does it. I’ve never used Layer Comps or Snapshots before – I’ll give them a try next time but I usually keep alternate versions in Layer Folders and save them out as JPGs and present them to the client in browser windows with some basic HTML to centre the image and do the background.
I keep the Layers with the Channels and the Paths. Why? I don’t know – it’s like that when you get the software. It’s usually the Layers palette you’re using so the Paths and the Channels are always there when you want them.
I have the Character and Paragraph palettes further down on the left as they are in the same place in InDesign and Illustrator so I don’t even have to think which application I’m using!
But I have everything usually hidden away. The thing I hate with palettes in Illustrator and Photoshop is doing gradients. You always have to pull the Gradient palette out in order to drag colors to the color stoppers from either the Colors palette or the Swatches palette – I get into a bit of a mess doing gradients, as you can tell. Anyone else have that?
Rob,
You will definitely love layer comps and snapshots, very handy tools! Gradients I do with the blending options. I wish PS had better options for this though, like Illustrator.
Great layout Jacob and thank you for making it available.
Wow, you have a 27 inch screen.
Glad to see you going back to writing! I wish I would have seen this post several years ago when I started, a lot of trial and error!
I wish I had more time to write but with a full time job and my freelance, time is limited!
pretty much spot-on with my setup! great list
Maybe it is the lack of sleep, but I can seem to find out how to instal the workspace. I know how to save, but where is the load?
Place it in the appropriate folder as outlined here:
http://help.adobe.com/en_US/photoshop/cs/using/WS9403857B-903B-4bd5-95D4-D6B4F21C24BB.html
I am not seeing that info at that link.
Me neither
Please see the comment by B. Moore.
I see your B. Moore comment and raise you a CS4 on Mac OS X Lion. Now where?
On my Mac (OS 10.6.8) running Photoshop CS 5.5 I THINK it’s under Applications > Adobe Photoshop CS5.1 > Locales > en_US > Additional Presets > Mac > Wordspaces
I put the Workspaces file in this folder and it showed up in Photoshop. Unfortunately when I chose it, all the windows disappeared and I couldn’t see anything.
This is on a 21″ iMac.
Geez, a 27″ monitor? That’s huge!
I prefer to use inDesign to prototype my website layouts, it is cleaner, for me it is crazy to manage a bunch of layers that Photoshop may generate, inDesing is closer to the process followed while creating the HTML version, the images are linked and not inside the document (more layers), I can create paragraph styles to generate my CSS file later, I can send PDF files to my client instead JPG and once the concept is approved I can use the export for Dreamweaver option and done.
Wow, never realized how powerful Layer Comps is, thanks!
Will this translate into FireWorks as well?
hi jacob sir,
i am not finding the way to install it, please tell me how to install it..
thank you.
i got it , lol 🙂
thanks for this great share.. and tips …
You order the layers like i do! that almost makes me cry :’D
I know that there must be a lot of people who do that, but, most of designers i know just don’t.
Love the workspace tips, thanks!
I continue to be baffled by the amount of web designers who use photoshop and don’t know about layer comps. That should be the amongst the 1st things taught in photoshop web design school.
I currently use dual monitors and have been thinking of a move to 1 large screen. Do you find the 1 large screen better than 2 smaller screens?
I find one screen works for me at 27″. I used to have a 24″ and a 24″.
I cannot find any info on the Adobe site for where or how to install a pre-made workplace. Can you please be a little more specific?
Thanks
BTW, I’m using CS4
Tommy, just paste the workspace file into the appropriate folder (see the comment from B.Moore).
Hey Jacob,
great article.
When working with multiple images, these always get connected into one windows, where you have to break the tabs away. Here is another great “Shortcut” Hack (Mac).
!! — Sorry I only got the german version — !!
1. Open Shortcut Window
2. Go to Window
3. Give a shortcut to only floating Windows (F11)
4. Give a shortcut to side by side (F12)
5. Apply
http://img812.imageshack.us/img812/2315/floating.gif
Now open load up multipla images and press first F11 then F12.
Awesome article! What monitor are you using, just curious. I’ve been stuck between the Dell UltraSharp U2711 and the Apple 27″ Thunderbolt… seems like it just comes down to user preference.
I used to have an UltraSharp back in the day, but I like the the Apple display. That’s my preference.
thx for sharing this wonderful read and ur workspace…I’ve never used layer comp before it. it helps me alot… Just have one question, is there any kind of tool, extension or suggetion for organizing fonts in photoshop?
You can organize fonts outside of PS, using a font management software such as FontExplorer X.
As a web designer I must use Photoshop to create website layout or demo design, logo an use another different work. I think Photoshop is a motherhood to web or graphic design sector. We can use various affective tools to make our website more nice, creative & give it a professional look. As a example we can select perfect image size with its perfect resolution value & we can use different image on different layer, we can use different perfect color combination to make our web page more beautiful. So, the post is absolutely appropriate for this kind of subject. Thank you for sharing the post with us.
NIce post, I notice that I have the lest windows open therefore maximizing my screen real state, I always have the layers comp, swatches, characters and paragraphs which are the ones I use all the time for web design, the others I open them on a need-to-need basis.
I greatly appreciate your blog— I like it’s design, clarity, and ease of use. One thing I would LOVE to see more of is practical web & graphic design techniques— not merely tutorials but showing why something works so well and what types of elements complement eachother— things and methodology that can be replicated from project to project. Anything that would help make your readers truly better at their craft; and not blowing hot-air & baseless opinions (just to get content out) like many other blogs do.
Looks like fontshop relly usefull, thanks for sharing!
Wow, surprisingly similar to my setup. It looks a lot cleaner however than what I stare at all day, haha. Great post!
Very useful post, what do you think about using Fireworks? I see that you use Photoshop for web design work, Jacob.
Diana
I much prefer Photoshop, I find it more powerful in terms of what can be achieved as appose to Fireworks.
Photoshop always amazes me… For bitmap creation, I still think Photoshop beats any competitors hands down.
Thanks for the good article. I have new ideas up. The article was really special.
Need for Windows, I am a windows User and Photoshop 5.5
I liked as much as you’ll obtain carried out right here. The caricature is tasteful, your authored subject matter stylish. nevertheless, you command get got an nervousness over that you want be handing over the following. in poor health indubitably come further until now once more as precisely the similar just about very steadily within case you protect this increase.
Amazing setup but.. how to make it work with Photoshop CC (OSX)? I’ve downloaded file from the top but I don’t have all those folders specified in instruction… Any tips would soooo great!
It’s exactly the same for Photoshop CC. You need to create the folders.
sorry, but i/m unable to get the psd file you’ve supplied. is the link expired?
very bummed, your set up looks amazing!
any info would be so very much appreciated. 🙂
thank you its great and very use full for me….
wow this is a great set up, very similar to mine however i like yours better 🙂
however got to have the dark photoshop UI!
Great workshop! Thanks for sharing
Thank you for a great tutorial. This helps a lot!