Simple Photoshop settings, tips, and tricks to ease the creation of your next UI design

January 16th, 2013

One of the industry standards for raster(pixel)-based graphic work, Photoshop is an incredibly popular and powerful tool, for helping you build the graphic assets you need for modern web projects. It’s immense arsenal of tools and settings allow for an absolute level of control over the application that creates a very customizable and personal usage experience. However, with this myriad of settings, some of them may fall by the wayside, or remain unnoticed, due to the large variety and complexity of the tools available. The following is a short list of little settings and features that over the years, we’ve become accustomed to when building web assets for our various projects and design composites. While many of these are fairly basic, they can simplify and streamline your production process to a surprising extent, if you aren’t already using them.


1. Snap to pixels:


Found under the Shape tool in the toolbar, you can apply this parameter to Rectangle and Rounded Rectangle shapes, making it significantly easier to make more precise web image assets or pixel-perfect layout designs.


2. Capslock cursor toggling:



Capslock for most practical purposes, may often seem like more of an annoyance than anything else, however in Photoshop, you can use it as a toggle to switch between your selected default (usually Outline) and Precise cursors. This can prove quite handy when switching between, say, a stamp brush of which you need to see the whole outline, and a crosshair cursor for taking a precise sample of a color on a 1-pixel line.


3. Use Shift+arrow keys to move objects:

When you select a layer you want to move, you are probably familiar with using the arrow keys to nudge it a pixel or two, to get that perfect adjustment. By holding down shift while nudging a layer with the arrow keys, you cause Photoshop to use precise 10-pixel increments. This can be extremely useful when trying to keep UI elements evenly spaced in your design.


4. Enable OpenGL Drawing:


Enabling this feature will not only open several GPU-enhanced features such as view rotation, and smooth panning and zooming, it will also enable you to see the pixel grid at high levels of zoom on your current project, as well as enhancing performance when switching between lots of project windows (handy when combining lots of image assets together!).


5. Set up your Units and Rulers:


When working on building web assets, it helps to ensure that Photoshops basic unit of measurement on the ruler guidelines is in pixels. Not a particularly game-breaking setting overall, but can be very useful when placing guides to help you in your layout construction efforts.


6. Avoid using blend modes.


When building your layer styles in Photoshop, there are a variety of blending modes (Multiply, Screen, Overlay, etc) that allow you to control, with great precision, the look and feel of layered objects. However, as web-ready images only deal with basic transparency attributes, these effects do not carry over to a web-ready .JPG, .GIF, or .PNG, or if they do, will usually have undesired color or composition results. Try to stick to using layer opacity only to achieve the transparencies/colors you need for the web.