Photoshop Shortcuts for Web Designers… and Other Rad People
Time to nerd out, improve your productivity, and maybe even feel like a 4-key-combo-bad-ass.
I use these every day, all day.
Sure, everyone knows your standard save, quit, open, that’s not what this post is about. These are my not-so-common Photoshop-specific shortcuts that help me be productive, efficient, and only use my mouse (well Magic Trackpad for this guy) when absolutely necessary. Remember kids, shortcuts are cool, using the taskbar menus and multiple clicks is for suckas.
You may already know many of these, but if you find just one new gem, then it’s a win in my book!
Who this post is for: people who design in Photoshop, for web or print.
Who this post is not for: people who want to learn how to edit photos or have never used Photoshop.
The Key, Key
⌘ = Apple or Command, ALT on a PC
⇪ = Shift
⌥ = Option
↵ = Enter/Return
Note: These keys will have this background color when they appear below.
#1: Selecting Tools
The easiest way to become more productive is to change tools on the fly without using your mouse to select them from the toolbox palette. You’ll be amazed how much of a difference it makes not going over to the top left every 3 seconds to change from the pointer to the text tool. Start with these most common ones.
v = Pointer (Move) Tool
m = Marquee
e = Eraser
t = Text
h = Hand
TIP: Spacebar will give you the hand tool while most other tools are selected, besides the text tool, of course. The hand tool via the spacebar is really useful for moving your document around on the fly.
#2: Exiting a Text Box
⌘ + ↵ : This changed my life.
Okay, that’s a bit much, but I was equal parts excited and angry that I had never known this once I figured it out. I’m also amazed at how many other people do not know this and click the pointer tool in the toolbox every time they want to get out of typing inside of a text box. This shortcut becomes really effective when you use it in conjunction with the selecting tool shortcuts.
EX: switch from the pointer to the type tool by tapping T, draw your text box, type your text, ⌘+Enter to exit, V to switch back to the pointer.
TIP: You can also press the ESC key to exit a text box.
#3: Copying Layers
There are multiple ways to do so, and I use all of them depending on the circumstance. While trying these, keep in mind they all work with one layer or multiple selected.
⌘ + j : The easiest way to duplicate a layer.
⌥⇪ + ↑ : Any of the arrow keys will work. Select the layer(s) your want, hold down shift and option and click a direction to create a new layer moved 10 pixels in that direction. The shift key is not necessary, if you don’t use it the copied layer will move 1 pixel not 10, but I find it’s easier to see what I’m doing if I move 10.
⌥ + drag a layer : Hold down option and drag a layer (with the mouse) to duplicate.
TIP: The first two of these can be used in rapid fire to create a bunch of duplicates quickly. ⌥⇪ + ↑ + ↑ + ↑ + ↑ + ↑ + ↑ + ↑ + etc. can tile a single pixel rule in no time.
#4: Moving and Selecting Layers
Using your mouse is easiest way to select layers, but sometimes it can be nice to toggle and select layers with your keyboard too.
⌘ + ] : Move a layer up one in the layer palette.
⌘ + [ : Move a layer down one.
⌘⇪ + ] : Move a layer all the way to the top of the layers palette or the top of the folder it’s inside.
⌘⇪ + ] : Again, same thing, other direction.
Bonus Command: I manually added in the next shortcut, and encourage you to do the same! I use it constantly, every day.
⌘⇪ + d : Deselect all, because sometimes there’s not an empty area to click the pointer tool with.
TIP: As always, these work with multiple layers at once. If you move multiple items at once, they will then be stacked up together in the layers palette. This can be nice if you select a group of items in your document with your mouse, and then move them up a layer, thereby stacking them all right on top of one another in the palette.
#5: Pasting and Saving, More Keys, More Fun
Many shortcuts build upon each other by adding in another key. These are the two I use the most.
⌘ + s : Save, nothing new here.
⌘⇪ + s : Save As, you probably already knew this one too.
⌘⇪⌥ + s : Save for Web!
What? Four keys with one hand? Yeeeeah, buddy, look at you go! Now lets do the same for pasting.
⌘ + v : Paste.
⌘⇪ + v : Paste on top and in the same position. This is an alternate way to copy a layer, but you will lose any layer effects.
⌘⇪⌥ + v : Paste into! This is basically a fancy way to create a mask on the fly. You will need to have selected an area with the marquee in order to do this one. I use this all the time when I want to put a photo into a selected area, like a slideshow, and I don’t want to crop it first. It’s super easy to open a photo (⌘+o), select all (⌘+a), copy (⌘+c), close (⌘+w), marquee an area, and then paste into (⌘⇪⌥+v). If you have the marquee on before you open the photo, the whole thing only takes about 3 seconds.
TIP: To activate the marquee in the shape of a given layer, hold down ⌥ and hover over the layer in layer palette and click (you should see a tiny marquee appear over your mouse cursor when you’re in position). I’d use this in the above example to paste a new photo into the shape of the slideshow box I’ve already created.
Sharing is Caring
I decided to write this post after realizing how much some of these little tips helped my fellow designers here at OMS when I shared a few. It’s crazy how many things you do all the time, that you might not realize everyone else doesn’t know. Feel free to add your favorites in the comments section. And if you found this post useful, let me know and maybe we’ll do a few more.
Ah, what the heck…
BONUS TIP: Not so much a keyboard shortcut, but this one has saved me lots of time. Did you know you can paste a layer style onto multiple layers at once? Right click a layer with a bunch of effects on it, click copy style, then select multiple layers, right click, and paste the styles onto all of them at once.