Professional Photoshop Shortcuts for Web Designers

Most designers prefer the Adobe suite because it’s popular and easy to learn with sufficient practice. The software is initially complicated but with time and patience you can develop a professional workflow.

One such area of professionalism stems from understanding keyboard shortcuts. Every application uses shortcuts but Adobe’s programs are much more complicated and versatile than others. Keyboard shortcuts are worth learning, but you’ll need to make the time to study and put them to good use.

In this post I want to cover 10 lesser-known Photoshop shortcuts that can aid in the web design process. These shortcuts are useful to web or UI designers and they’re applicable in almost every version of Photoshop. If you want to try some of these shortcuts follow along with me using the DigiMag freebie PSD released by DesignM.ag.

1. CTRL+Shift+Click Items (Select Multiple Layers)

The common way that most people select layers is through the layers palette. But you can get around this using the keyboard shortcut CTRL+SHIFT and clicking on the layer items themselves.

This way you can select various items belonging to different layer groups without scrolling through the layers palette. As long as you can see the layer on the document you’re able to select it.

Web designers can especially benefit from this method when designing huge compositions. There will be many times where you need to select a couple different elements and move them in unison without locking the layers together.

2. ALT/OPT+Drag (Duplicate Layer Contents)

Here’s another layers palette shortcut without using the layers palette. Most Photoshop users know about CTRL+J to duplicate a layer. But instead of selecting the layer you can instead find it on the document and drag out a copy.

Windows users should hold ALT+click, Mac users hold Option+click for the same result. You’ll get a brand new layer placed directly above the old one in the layers palette. It’s basically the same as CTRL+J except you can duplicate multiple layers at the same time and you have direct control to move the element(s) anywhere.

3. CTRL+H (Show/Hide Extras)

Document extras are those little guides, grids, rulers, path outlines, and smart guides which appear constantly while designing. These are obviously helpful while working but they get in the way when you’re trying to see how the final product looks.

You’ll find this command in View > Extras with a checkmark beside it. You’ll notice that CTRL+H is listed as the keyboard shortcut which saves a whole heap of time in the long run.

4. Space+Drag (Draw & Move Shapes/Selections)

Most interface mockups need to be pixel perfect before moving onto development. So when building buttons/boxes or other shapes it helps to position them accurately. Unfortunately this is tough even with snap to pixel grids aligned.

Instead try drawing your shape first and then holding the spacebar to drag it around the screen. This way you can resize and reposition the shape before letting go of the mouse. Web designers use shape tools a good majority of the time so this is one shortcut worth remembering.

5. CTRL+Enter (Submit Text Box Edits)

Every website or mobile app requires some form of text. Text for headers, paragraphs, links, you name it. All of these areas require text layers which are very flexible and easy to use. The trouble comes when you’ve finished making edits and you want to finalize changes.

Most Photoshop users resign to clicking the small checkbox icon in the top-right corner. Instead try hitting CTRL+Enter to save yourself a lot of back-and-forth motion. Just remember that hitting only Enter will add a new line into the textbox so you need to hold CTRL first.

6. CMD/CTRL+Backspace (Fill any Selection or Shape)

After creating a selection you can do any number of things. Selections can be used for masks, deleting pixels, and of course filling with colors. CMD/CTRL+Backspace fills any selection with the current background color.

What many designers don’t know is that you can also hit CTRL+SHIFT+Backspace to fill a shape with the current BG color. Shape layers can work with CTRL+Backspace but they do behave differently than selections because they’re vector-based objects.

7. Click+Drag Layer Visibility (Hide Multiple Layers)

I just recently learned about this shortcut and although it’s not exactly a “keyboard” shortcut, it will save you a lot of time. Even a novice in Photoshop knows about the little eye icons located beside each layer. These toggle visibility on/off when clicked.

You can actually click+drag your cursor up and down to hide multiple layers at once. The other popular shortcut is ALT+click on an eye icon to hide everything but that layer. Incorporate both of these techniques whenever you’re restyling or rearranging layers in your document.

8. CTRL+ +/- OR ALT/OPT+Scrollwheel (Quick Zoom)

The zoom tool is perfectly acceptable for most people but there’s no doubt that keyboard shortcuts are quicker. From any view with (almost) any tool you can hold CTRL and the +/- keys to zoom in or out of the document.

If your mouse has a scroll wheel you can actually hold the ALT/Option key and scroll with your scroll wheel. This has the same effect but is performed with the mouse and keyboard together. CTRL+mouse wheel lets you move around the document depending on where your mouse cursor is located.

9. Alt+Click Between Layers (Create Clipping Mask)

Clipping masks are perfect for web designers who need a color, texture, or photograph to display in a certain shape. The traditional way to do this would be right-clicking on the top layer and selecting “create clipping mask” from the context menu. It’ll automatically snap to the layer beneath and clip itself to that shape.

However if you move your cursor between the two layers and hold ALT you’ll notice the cursor icon changes. This is a quick and easy way to add/remove clipping masks in less than a second.

10. CTRL+OPT+SHIFT+E (Merge All Layers on a New Layer)

Here’s one doozy of a shortcut that comes in handy at very opportune moments. There are times where you’ll want to combine all layers together into one layer and create a flattened image of your document.

The the best way to do this would be using CTRL+ALT+SHIFT+E to create a flattened image on a new layer. This way you still have all your working layers plus a flattened preview image to do with as you please.

Over the course of my Photoshop experience I’ve learned a lot of shortcuts. Some get used more than others but these 10 are definitely the most obscure(yet useful) I’ve ever found. Whether you’re a new designer or have many years under your belt, I hope there’s at least one shortcut in this list worth remembering.

The post Professional Photoshop Shortcuts for Web Designers appeared first on DesignM.ag.

Source: http://ift.tt/1HpVFIc