Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


The Ultimate Web Design Workspace for Photoshop

Posted on

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.

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

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.

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

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:

SUBSCRIBE: RSS, Email, Twitter, Facebook



71 JUST™ Creative Comments

  • Sonny Reply

    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

  • Dietmar Reply

    Thanx for this suggestions. Allthough I’m working with far less menus open (Like the layers, type and brushes)…

  • Nathan Sarlow Reply

    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 :)

    • Jacob Cass Reply

      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!

  • B. Moore Reply

    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?

    • Jacob Cass Reply

      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?

      • B. Moore Reply

        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 Data\Adobe\Adobe Photoshop CS6\Adobe Photoshop CS6 Settings\WorkSpaces

        CS3 on Win XP sp3:
        C:\Documents and Settings\{INSERT YOUR USERNAME}\Application Data\Adobe\Adobe Photoshop CS3\Adobe Photoshop CS3 Settings\WorkSpaces

        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!

  • René B. Reply

    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.

  • Libbie Reply

    I have one word. Fireworks!

    • Mike Boardley Reply

      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.

  • Jess Reply

    NICE – some of the best tips I’ve seen, even working with PS for YEARS. Thanks for sharing.

  • zarel Reply

    Wow.. the resolution of your screen is big… can cover everything.. and still have an empty space..

  • Andrew Richardson Reply

    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.

  • Tommaso Reply

    FontShop & Extensis Web Font Plugins from which adobe photoshop version are availables?

    Thanks

  • Tim Reply

    Layer comps are awesome, thanks!

  • Rob Cubbon Reply

    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?

    • Jacob Cass Reply

      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.

  • Brad D Reply

    Great layout Jacob and thank you for making it available.

  • James Sumner Reply

    Wow, you have a 27 inch screen.

  • Dainis Graveris Reply

    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!

  • Chad Lewine Reply

    pretty much spot-on with my setup! great list

  • Seth Louey Reply

    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?

  • Joint Medias Reply

    Geez, a 27″ monitor? That’s huge!

  • JAVIER Reply

    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.

  • Lform Web Reply

    Wow, never realized how powerful Layer Comps is, thanks!

  • Michael Reply

    Will this translate into FireWorks as well?

  • jimmynagi Reply

    hi jacob sir,

    i am not finding the way to install it, please tell me how to install it..

    thank you.

  • Virginia Reply

    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!

  • Michael Reply

    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?

  • Tommy Hood Reply

    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

  • Hakan Yilmaz Reply

    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.

  • Josh Reply

    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.

  • Vijay Reply

    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?

  • Website Design Reply

    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.

  • Rene Merino Reply

    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.

  • Alexander Reply

    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.

  • Web desain Reply

    Looks like fontshop relly usefull, thanks for sharing!

  • Adverse Reply

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

  • Diana Reply

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

    Diana

  • Linda Reply

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

  • Best Reply

    Thanks for the good article. I have new ideas up. The article was really special.

  • Irshad Reply

    Need for Windows, I am a windows User and Photoshop 5.5

  • kem merino Reply

    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.

  • Steven Reply

    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!

  • Allise Reply

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

  • Manish Tiwari Reply

    thank you its great and very use full for me….

  • NO TRACKBACKS


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 


© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).