Emily Kay shows you how to optimize your workspace in Photoshop for web-based work.
- [Instructor] When performing a web-based design, it's important to set up your workspace so that all of the palettes and panes are easily accessible to you. Currently, I'm in the Essential workspace, so if I go to Window, Workspace, you can see that I'm in Essentials, which is the default. Photoshop does come with a preset workspace that's set up for Graphic and Web, let's go ahead and take a look at that. I'm going to select this and you can see that my workspace has changed, and it's gone ahead and placed various panels and panes within the Photoshop workspace.
This is pretty close to what I want, but I'm going to alter this slightly. I want to be able to customize the workspace for what I find to be most useful. Setting up your workspace is going to be a personal preference. You're going to go ahead and set up the panes and panels in a manner that you find to be most productive. You want to utilize your space in a way that will allow you to easily create what you want. Let's go ahead and modify this. Some of the palettes that I want to have easily accessible are going to be my Layers palette.
I actually prefer to have my Layer palette on top of the stack, so I'm going to grab the tab for Layers and drag this up until I see the blue bar. I've simply moved the Layer panel so that it's on top of these other palettes. The Layer panel is something that I'm going to use often, so I want to have it easily accessible. Some of the other panes that I want to use are going to be my Layer Comps. Again, my Layer Comps and my Library pane are something that I want to have above the Typography pane, so I'm going to just drag them up.
Layer Comps allow me to save a specific document state. This can be really helpful when you're doing web work. For instance, if you were creating button states, you might want to save separate layer comps for the buttons in the various states, and then, within just one single click, you can easily turn off multiple layers. This is really helpful when you're designing websites. I also tend to use my Library panel a lot. The Library panel is a really great asset in Photoshop.
It allows you to store all of the elements that you're using within your document. Once you have these elements inside your library, you can quickly assemble your document by simply dragging them from your library. You can store all sorts of things in the library, photographs, typography, styles, text, graphics, pretty much anything that you want to use. We'll be looking at the library more in-depth in a separate movie, but I definitely want to have this panel accessible. The other panels that are down here are my Character, my Paragraph, and my Glyphs panel.
Again, these are panels that I use quite often because when I'm making a website, I do want to incorporate typography, so I want to have these panels accessible. I prefer to have these panels docked in this vertical pane, so I'm just going to drag the whole set into the vertical pane so that these are accessible here. I'm going to also go ahead and get my Fontea extension, and I'm going to place this in the left-hand column underneath the other Typography panels. I like to have the Fontea extension readily available when I'm working on web comps since this gives me access to over 800 of those Google Fonts.
If you want to find out how to install Fontea, please refer to the What You Should Know video that was made earlier in this course. I also want to have my History panel, which is currently located right here, and the History panel is bundled with Color and Swatches. So, the History panel will allow me to go back if I make an error, the Color panel is going to allow me to easily select colors, and a Swatch panel is going to store specific colors, so I'll leave these as is.
The next panel that's located here is the Property panel. This is a very important panel in my workspace. The Property panel acts as a chamaeleon, so it's going to change depending on what you have selected within your document and it'll allow you to make adjustments to that particular item. I use the Property panel a lot, so I definitely want to have this accessible. I also like to use the Info palette. The Info palette gives me information about specific things that are in my document. It'll give me information on color, the position, and the width and height of the element, so this is, again, something that I find very helpful to use.
I already have my Adjustment, Channel, and Style panels open. These panels will help you a lot when you're editing images. Often, when I'm designing a website, I'll find that I need to tweak an image or adjust the colors. I like to have my Adjustment panel easily accessible so that I can make changes to the images. The Channel panel can also be helpful when you're working with images, so I'll leave this open as well. And finally, my Style panel will store any preset styles. I might want to create a style and be able to reuse this, so, again, I'll leave this in this vertical column.
If you want to find any of these panels and they're not currently open, you can go to Window and you can find the panels located in the Window pull-down menu. So, if you didn't see a panel and you wanted to have it accessible, you could simply click on the panel, it would open, and then you could position it where you want. I don't want my Histogram panel, so I'm going to pull this out and close it. If you wanted to modify any of the panels that are currently here, all you have to do is simply select them and then pull them out, and then you could close them or position them in a new location.
In addition to setting up these panels in this particular way, I also want to turn on my rulers. So, I'm going to go to View and I'm going to turn on my rulers. Now, when you first turn on your rulers in Photoshop, more than likely, the ruler unit of measurement is going to be inches. Since we're working with web-based elements, we are going to want to work with pixels. In order to change this, I'm going to right-click and I'm going to select Pixels from the pull-down menu. Now my rulers have changed to pixels.
In addition to changing the rulers, what you've done is that any time you draw an object within your document, it's going to display the units of measurement as pixels instead of inches or something else. I find this to be very important. Another element that I want to check is, if I go to the View pull-down menu, I want to make sure that Snapping is on and if you go to Snap To, you can actually customize the various elements that objects are going to snap to. I tend to leave these all on and the reason why is, if we leave Snapping on, it's going to ensure that our art is going to snap to guides or grids and it also is going to ensure that when we resize elements within our document, they're going to snap to the pixel which will keep the elements crisp and clear as you work with them.
Once you have your workspace all set up, you might want to save your workspace so that you can easily return to it. If you go to Window and you go to Workspace, you can go ahead and you can create a new workspace. I'm going to select New Workspace and I'm going to give this workspace a name, so I'm going to call this Emily web2 because I already have an Emily One Web. I also like to check Keyboard Shortcuts, Menus, and Toolbars. We haven't made any modifications to any of these things, but if you do utilize the Keyboard Shortcuts, Menus, or Toolbars and customize these, these will become part of your workspace, which is definitely handy to save.
I'm going to click Save and now my workspace is saved. If somebody else works on my computer or if I change the Workspace setting to something other than the Emily Web setting, I can easily go back by going to Workspace, selecting my workspace, and then all of the panes and settings and panels are going to revert to that last saved state.
- Setting up workspaces and artboards
- Using libraries
- Responsive design tips and tricks
- Setting breakpoints
- Creating navigation elements
- Creating textures and backgrounds
- Embedding or linking smart objects
- Making custom templates
- Creating reusable UI elements
- Saving and exporting for the web
- Using Generator