The Ultimate Web Designer Workspace Setup In Photoshop

The Workspace 101

The workspace area in Photoshop is located on the right-hand side of the application. Within the workspace area are ‘panels’ that contains various tools. The workspace area is customizable, so it’s easy for you to dock (add) and undock (remove) panels. To dock and undock workspace panels, go to Window (located at the top menu). You’ll then see the full list of all different workspace panels available for use. The active panels that are currently in your document have check marks beside them.

Photoshop CC Workspaces

Photoshop has several default workspaces, located in Window >  Workspace. In this tutorial,  we’ll be saving the workspace we’ve created there so you can use the setup in future projects. Now, that we know a little more about the workspace area in Photoshop, we can now setup our ultimate web designer workspace.

The Ultimate Web Designer Workspace

Unlike the default workspaces in Photoshop, the web designer workspace that we’ll be creating is customized to meet the unique needs of web designers during the mockup phase in Photoshop.

Mockups are critical in the web design process since they provide the client with a visual reference of what their website will look like. It’s important for web designers to have their workspace setup to increase their productivity. In doing so, time is used efficiently, and not wasted looking for certain tools and panels. Let’s see what panels are needed in the ultimate web designer workspace setup in Photoshop.

Layers Panel

The layers panel in Photoshop is a staple for almost all design projects. We need the layers panel to create all of our mockups and graphics in Photoshop. In Adobe CC, we also can now use multiple artboards in the layers panel. This makes it easier for us to create mockups for different screen sizes (i.e. smartphones, tablets, desktops, laptops). With the layers panel, you can now export multiple artboards at once. The layers panel is a must-have in the web designer’s ultimate workspace.

History Panel

The history panel another must-have panel in our customized workspace. Instead of clicking command + Z hundreds of times to revert back to a previous state, you can now easily track and revert back to past changes and moves using the history panel. Each move and state you make are written out for you. This is a heaven-sent tool for us web designers!

Layer Comps Panel

As web designers, we often create different versions or compositions (comps) of are mockups. For example, we might make two different comps of a website mockup, with one version using a dark color and another using a light color.

With the Layer Comps panel, you’re able to manage and view multiple versions of a design all in the one document. No need to create multiple artboards or documents to show variations of a design. That’s why the layer comps panel is a must in the ultimate web design workspace setup.

Actions Panel

The actions panel is great to add to your workspace. If you find you’re doing a lot of redundant steps that you want to automate, use the actions panel. With this panel, you can record and save an action, like drawing a rectangle, and then play (or repeat) the action to whatever you want, as many times as you want. If you’re using a grid framework, such as the 960 grid, this is also where you would play the ‘960 grid’ action to have your document automatically setup so you can design using the 960 grid.

Color / Swatches Panels

This panel has two windows; the color panel and the swatches panel. This panel is important since it makes it easy for you to choose colors or create pallets as needed.

Libraries Panel

If you’re using Photoshop CC, you now have access to the awesome Libraries panel. With the libraries panel, you can save various colors and graphics (e.g. jpegs, logos, vectors etc.) that are specific to your website mockup. You can also have multiple libraries for all your different design projects. Instead of looking for graphics in a folder on your drive, you can have them all saved to your CC library and access them through any Adobe CC application.

Styles Panel

The styles panel is great to have in the ultimate web designer workspace. The styles panel allows you to save time by saving styles that you’ve applied to elements. For element styles that are repeated multiple times throughout your mockup, this panel will be very useful. I find myself using this panel if I have a certain style that I want to apply to all the buttons in my mockup.

Character / Paragraph / Glyphs Panel

This panel has three windows; character, paragraph, and glyphs. It’s important to have access to these text panels as you’re designing your mockup.  The text on a website is a vital part of the website’s overall design. Without including this panel in your workspace setup, you might miss some important styling features that you can apply to your text.

Paragraph Styles / Character Styles Panel

Just like the panel above, this panel has two windows; paragraph styles and character styles.  Once you’ve created a specific text style, using the character, paragraph, and glyphs panel above, you can save that style using the paragraph styles or character styles panel. Then, you can use the style as needed.


All of the workspace panels mentioned above are used together to create the ultimate web designer workspace setup in Photoshop. Each panel helps the web designer to have a more productive design workflow.

To save your workspace, go to Window > Workspace > New Workspace > Save. Now, you can spend more time on designing and less time looking for where certain tools and panels are in Photoshop.

Let’s Chat Below!

Do you have your own customized workspace setup when you’re designing a website in Photoshop? If so, share it with us below! Leave a comment below if you have a favorite workspace panel that wasn’t mentioned in this post.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.