Web Design Efficiency & Productivity Pro Tips

We all have enough hindrances, internal and external, barricading us from creating inspiring experiences. Don’t let your tools be one more brick in that creative block. Remember that design is all about time. Why? Because you will never have enough. So start with some healthy design habits to give yourself the opportunity for a rich social life or time to work on that side project you’ve been dying to bring into fruition. Whatever the reason, don’t let present you disappoint future you. These off-the-clock experiences are essential to keeping you sane and continually creative.

Let’s dig in to the tools.

Why Use Photoshop?

I did it too. In my early days, I designed for the web in Illustrator. And after a painful and taunt-filled transitional period, I finally saw the light: it’s all about the pixels. Using a raster program over a vector program allows you to create a pixel perfect design, making the transition into dev much less stressful. Then, layer comps happened.
After that? Smart objects.

Boom. Sold.

As designers, our attention to detail is what sets us apart from the amateurs. This is where pixel perfection comes into play. I learned the hard way that feathered-free designs are much more difficult to achieve in a vector program. Here’s what your basic workflow would look like when using Illustrator:

• Set up your workspace so that all elements automatically lock into the pixel grid via multiple panel options
• Consistently (and often manually) position elements with whole values, and give them whole dimensions
• Manually adjust object strokes to Outline and Inside stroke as the default option, instead of the Center stroke.

After all that consistent finagling, pixel perfection is still not guaranteed. How upsetting. Do yourself a favor and give Photoshop a chance. If you take the time to love it, it will love you back and save you time while doing it. Here’s where your relationship should start…

Optimize Your Workspace

Begin by setting up your panels and palettes to suit your workflow using the ‘Essentials’ workspace as a foundation (you have a list of default workspace options to choose from in the top right of the Application Bar (Window > Application Frame)). Be sure to save this workspace for the future. It’s great to have a web design and print design workspace set up so you can quickly get your hands dirty with minimum transitional setup. It’ll happen over time, but try to force your self to learn the keyboard shortcuts for tools and panel options to cut down the time spent in panels and palettes.

If you have a dual monitor setup, you can maximize your available workspace by anchoring your palettes to your secondary screen. If you’re still learning those hotkeys for tools, save time by keeping your toolbar and palettes on the same side to minimize the distance your mouse has to travel across the screen. This takes more time than you’d expect. For instance, when you have your palettes flanking your doc, switching layers and tools means moving your mouse completely across the screen. It’s the combination of little things that become a time suck.

Don’t forget to maximize your viewport to suit your needs, also. Simply hit “F” to shuffle through viewport options or “Tab” to hide/show panel menus. (It’s also a great way to recognize that it’s time for a break when you when you find yourself hitting “F” or “Tab” compulsively).

Color Inside the Lines

First off, turn on Smart Guides (View > Show > Smart Guides) and never turn them off. They’ll become your best friend before you know it.

In CS6, Snap to Pixels was a godsend to the digital world. To enable it, go to your Preferences (Cmd + k) and activate the last checklist item “Snap Vector Tools and Transforms to Pixel Grid.” If you’re not using CS6 you’ll have to set up a simple workaround. Set up and enable the grid (View > Show > Grid) in combination with Snap to Grid (View > Snap To > Grid) to keep your vector-based shapes from having blurry edges caused by dimensions with decimal values. Set up your grid (Preferences > Guides, Grids and Slices) to use ‘Gridline Every 10 pixels’ and ‘Subdivision 10’ for true pixel snapping. You can easily switch it on and off at any time (Cmd + ’). Also, double check that Snap to Pixels is enabled to ensure that your Shape Layers are perfectly aligned to the pixel grid when you draw them. Toggle this option on and off in the Application bar in the Geometry options dropdown menu when you select one of the shape tools from the toolbox in CS5.

Flexible, Non-Destructive Editing

One thing you pick up quickly when working with clients is that they always have feedback. That means that you need to strategize your design workflow and optimize for ultimate flexibility. This is where Photoshop takes the cake over Illustrator.

Scalable Shape Layers

Take advantage of Shape Layers wherever you can as they are infinitely resizable, which is especially advantageous for retina display. All icons, buttons, backgrounds, and illustrations should either be Smart Objects placed from Illustrator, or Shape Layers.

Speaking of Smart Objects, they are super clutch. Smart Objects give you a lot of flexibility for experimentation and save you a lot of time in the long run. Essentially, they preserve your source content and all original characteristics, allowing for non-destructive editing to the layer (such as transforms and effects) and are great for scalability, exporting elements, and building templates. Just think of them as nested files. This makes Smart Objects ideal for creating templates. I would recommend downloading and picking apart some free print mockup templates to explore some basic uses for Smart Objects. The “monkey see, monkey do” approach works every time.

One-click editing for repeated elements

Additionally, Smart Objects are huge time savers whenever you have to edit duplicate elements. Say you have a layout that features a list of profile photos with a badge next to each and a client asks you to revise the badge. Rather than tweaking each badge individually and then copy/paste and realigning it, simply edit the Smart Object and all copies are automatically updated. See, miracles do happen.

Flexible photo editing

Turning photos into Smart Objects at their original size has become invaluable – you never know when you’ll need that photo sized just a little bigger after having shrunk it. Extend your flexibility even further with Smart Filters, which allow you to add effects and then edit or remove them easily. They basically act like an additional layer style. You’ll also find that Smart Objects help you keep your layers tidy (and people will undoubtedly thank you for that).

Clipping Masks

Layer masks require you to first add a mask to the layer and then paint with black and white to hide and reveal areas, respectively. Clipping masks, on the other hand, use the contents and transparency of a separate layer to determine which areas remain visible. This is great for making text out of photos and such. For instance, create a text layer, and above it, a photo. Then select the photo layer and hit (Cmd+Shift+G). Magic.

Fewer Files, More States

Layer Comps are essential for web design. They’re great for showing different element states, quickly sifting through page designs, and consolidating files. Since Photoshop doesn’t have any default hotkeys set for navigating through Layer Comps, create your own through the Preferences pane (Cmd + k). I use (Cmd + Opt + <) and (Cmd + Opt + >) to flip through Comps and (Cmd + Opt + ?) to update changes.

Guaranteed Consistency

Paragraph and Character Styles

In the past, there was no simple solution for making global changes to text. Fortunately, this was changed with the release of Photoshop CS6 when they carried over paragraph and character styles from InDesign. The great thing about this addition is that it translates to dev very smoothly. When labeling your character styles, you can label them h1, h2, h3, etc, so you have a guaranteed consistent typography when coding up your site (Do you hear that? That’s the sweet sound of developers rejoicing). Paragraph and Character Style panes are both available through the Window menu in Photoshop. They are pretty simple to use, but if you get stuck, Adobe has a thorough article that covers the how-tos.

I think that’s it! Disagree? Which of these time saving shortcuts are your favorites and which did I forget to mention?