From the very begging I’ll admit that I’m not a professional web designer. Sometimes I love to draw and sometimes even have to do so. In this article I’m not going to teach you design. We are not a design studio either. Design is usually provided us by client or we interact with third-party agencies. 2 things we have to deal with are: slicing and technical design.

Original design often undergoes changes in the course of its linking with functional part. Besides designers does not always draw every single page and every state/behavior. All these things we have to do ourself and they called technical design.

The ability to do something quickly and save a lot of time using some tricks – this is the first thing I want to talk about. In addition, I would like to give a few examples of best practice/decencies we have noticed working with different designers.

Top shortcuts

The key is efficiency. It’s not just knowing how to do something, but how to do something quickly so that you’re using valuable time executing a function. Below my favorite shortcuts to remember. I’m using Mac, thus all my shortcuts tailored for it.

• Save for Web – [cmd+opt+shift+S]
• Quick transform – [cmd + T]
• Switch between document windows – [ctrl + Tab]
• Duplicate layer
  • duplicate selected layer – [cmd + J] or
  • hold down [cmd + opt + drag] to duplicate the active layer or
  • [cmd + opt + arrow keys] (Up, Down, Left, Right).
• Image Size – [cmd+opt+I]
• Canvas Size – [cmd+opt+C]
• Show / hide in a row. If you need to show / hide more than one layers, instead of clicking one by one, you can click on the visibility icon and drag in a row.

• Collapse or expand all layer groups. You can collapse or expand all root-level layer groups by holding down [cmd + click] on the triangle icon.

• Drag to adjust numeric value. Mouseover the input box, hold down [cmd + drag left or right] to increase / decrease. Hold down [cmd + opt or shift] key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.

• Zoom with the scroll wheel. You can zoom in / out by [cmd + opt + scroll up or down]

• Cycle through Screen Modes – [F, F, F]
• Scale font size

• Navigate the document left or right. Hold down the [cmd + scroll up or down] allows you to navigate the document left or right. For example, hold down Cmd + scroll up will navigate to right.

Wants to learn more? Check the following articles:

• Smashing Magazine – Top 10 killer photoshop combo moves
• Smashing Magazine – Obscure photoshop time savers

Some useful hints

• Use “select layer” or “group“. Using the Move tool (V), you can [cmd + click] on the canvas to select the uppermost layer with pixel data located directly below the mouse. If your layers are grouped within layer sets, this action may have selected the entire folder. You can change this behavior to select the actual layer by using the Auto-select drop-down in the Move tool’s property bar.

• Eyedropper for any window. Need to match a color from a web page or something else while working in Photoshop? Just click with the eyedropper tool somewhere in your Photoshop file, and drag the cursor off to sample colors from anything visible on your screen.

• Move the Selection Marquee Before Committing. Have you ever tried to crop something with the Selection Marquee only to realize that your initial placement of marquee was off by a few pixels? Arghh!!! That can be frustrating, forcing you to redo the entire selection. Instead, while you drag the selection out hold down SPACE with your thumb.

• If you want to disable auto-expanded layer effects option then go to your layer panel options, navigate to “Panel Options…” and uncheck the “Expand New Effects” option at the bottom!

Some Decencies

Whether you’re working as a freelancer or in a team, you’ll often collaborate with other people on a project. Of course most of us usually try our best to keep Photoshop etiquette, time constraints, old habits, intense focus, and sometimes banal laziness prevent our PSDs from being in perfect condition. Even when our PSDs are properly organized, they’re not necessarily optimized for a collaborative workflow. So here are some practices to keep in mind when preparing and sharing PSDs between multiple collaborators.

Interesting web site on this topic – Ps Etiquette

Guides

Make sure all used guides are absolutely relevant. Having too many guides will make your collaboration partners feel overwhelmed, causing them to disregard your guides completely.

Organize your structure

• establish color conventions in your PSD; if you have multiple states in a PSD (such as ready, in progress, optional etc.), indicate this through an easy-to-understand convention that a new collaborator can quickly acknowledge. Below one of possible ways:

• make it a habit to name your layers
• group high-level elements (e.g. Header, Section, Footer etc.) or group related elements (e.g. buttons, graphical treatments etc.) to make navigating through your PSD a breeze.
• whether you order your layers bottom-to-top or top-to-bottom, it’s important to be mindful that there should be some sort of hierarchical ordering of groups and layers within your PSD file

Use smart objects & layer comps

Smart Objects [Layer > Smart Object > Convert to Smart Object] will compile multiple elements into a file that can be edited outside of your PSD. Sometimes you need to preserve the original EPS of an object. Other times, you may want to clump multiple instances of an element into one easily editable .PSB file. There’s nothing worse than going to “make the logo bigger” and realizing you can’t because it’s a rasterised graphic in your PSD, or trying to resize a button only to find that it’s no longer a shape. The solution is to keep these shapes in vector format, and you can do that by importing them as Vector Smart Objects or converting them to Smart Objects before you rasterise them.

Check out Layer Comps [Window > Layer Comps] to make versions of layouts fairly well. Consider using Layer Comps to help viewers out when trying to figure out which layers and groups to show versus the ones that need to be hidden. You can play with Visibility, Position, and Appearance for each layer comp you create; One more bonus to layer comps is that you can easily save out jpg’s (or any other file type, including PSDs) of all your layer comps via File > Scripts > Layer Comps to Files

Nice article to read – The importance of using layer comps

Clipping masks

Often, when creating images in Photoshop, you’ll want one layer to take on the shape of another. For instance, in the example below, a photo has taken on the shape of a small avatar (shape could vary from rounder rectangle to a circle). The ideal way of doing so is to not do any destructive edits at all because this can be achieved easily by using a Clipping Mask

Use adjustment layers

Adjustments like Hue/Saturation, Brightness/Contrast, and Levels are typically applied through the Image >> Adjustments menu. But that’s not best practice. What happens if you later decide to scale back that contrast change? You can’t! Instead, apply adjustments as Adjustment Layers via the button found at the bottom of the Layers Box. Now your Adjustment is fully dynamic.

Well we’ve shared our best, how about you? What killer tips you know?