The Ultimate Web Design Workspace for Photoshop

The Ultimate Web Design Workspace for Photoshop

We independently research, test, review, and recommend the best products—learn more about our process. If you buy something through our links, we may earn a commission.

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

Adobe Creative Cloud Discount

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

Ultimate Photoshop Web Design Workspace

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 Plugin Overview

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!

More Photoshop Tips & Tricks:

74 thoughts on “The Ultimate Web Design Workspace for Photoshop”

  1. 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.

  2. 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!

  3. 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 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 and it will have no problems finding the Workspace files

        Hope that help Jacob!

  4. 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.

    • 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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!

  9. 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?

  10. 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?

  11. 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

    Now open load up multipla images and press first F11 then F12.

  12. 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.

  13. 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?

  14. 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.

  15. 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.

  16. 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.

  17. Wow, surprisingly similar to my setup. It looks a lot cleaner however than what I stare at all day, haha. Great post!

  18. Very useful post, what do you think about using Fireworks? I see that you use Photoshop for web design work, Jacob.


  19. Photoshop always amazes me… For bitmap creation, I still think Photoshop beats any competitors hands down.

  20. 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.

  21. 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!

  22. 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. 🙂

Comments are closed.