Streamlining Web Design with Smart Objects in Photoshop

Photoshop is the primary software our web designers use for interface design and our production schedules can be tight, requiring us to turn art mockups around quickly. Our team spent some time refining efficient web design workflows in Photoshop and would like to share some of our useful tricks with likeminded designers. These workflows integrate well with our Atomic Design process, increasing the productivity of our design team and increasing confidence in the consistency of our work by the time it reaches developers.

Photoshop was originally designed for manipulating photographs and raster images. Therefore it doesn't offer a full set of tools for managing layout consistency without some creativity — especially when compared to software such as Adobe's InDesign, or even Bohemian Coding's Sketch. A notable example is Photoshop's color swatches, which don't work like swatches do in InDesign — you can't update a color swatch and have that same color update everywhere it was used in a Photoshop document.

Ordinarily, in order to change every instance of a single color in a document, you would need to select every layer with that color and make changes to them one-by-one. When managing a large layout project, this process becomes tedious, creating an opportunity for details to slip through the cracks — resulting in inconsistencies to be uncovered by our developers when it comes time for them to execute our vision.

Smart Objects to the rescue! To define a color for reuse in our document, we start by creating a new document and drawing a rectangle the size of our canvas using the rectangle tool in Photoshop. We then apply a color to it and save that document. To use it as a Smart Object we open whatever document we're working on, choose "Place Linked" from the file menu and add it to our document, where it appears in the Layer panel as a Linked Smart Object. Whenever there's an element that uses that color, we place the Linked Smart Object one layer above it and create a clipping mask. Anytime you update the color in the original document — which you can get to quickly by double-clicking it in the Layers panel — the Linked Smart Object will automatically update everywhere. In addition to ensuring consistency throughout our project, this process allows us to rapidly experiment with different color palettes.

Most websites reuse chunks of content across different pages of the site — whether it's a header, footer, or just a group of objects like a sidebar, set of recommended articles, or news feed that appears on many pages of the site. These repeated elements are the foundation of a consistent product. Each of these objects can be saved as its own document and linked to in the same manner we used to manage color consistency.

Embedded Smart Objects: Some elements are mostly reused within a single page or document — in which case creating an external file to link to feels like an unnecessary complication. Any layer or layer group can be converted to a Smart object by right-clicking it in the Layers panel and choosing "Convert to Smart Object." This allows you to duplicate the object as many times as you want throughout your document, including resizing or skewing individual instances of the object, without losing your ability to edit and update the original from a single place — just double-click any instance of the object in the Layers panel to access the original layer or layer group for editing. This works well with our Icon Suite creation process and allows us to manage multiple views of a single object (we preview each icon at different sizes) within a document — you can read more about the Icon Suite here.

When pasting an object imported from Adobe Illustrator, Photoshop offers the ability to place the object as a Smart Object — preserving all its vector information. If you wish to make future changes to the object, double-clicking it in the Layers panel will take you back to Illustrator to do any editing. We've found this to be extraordinarily useful for managing icons to be built for various responsive and desktop breakpoints — keeping them as vectors is necessary so they can be built as fonts or SVG files when the site enters development.

Because we're in the business of making websites, we're often called upon to mock up our layouts on a phone, tablet, or larger screen. In order to make this more tangible, we sometimes present a tableau with the website in use — a computer on someone's desk, a phone in someone's hand, and so on. To present this concept effectively, we may skew the layout to match a camera angle and simulate reflections or depth of field. By embedding our original layout as a Smart Object, we can rotate, skew and apply these other effects to the Smart Object while still saving the ability to update our mockup later when the design inevitably changes.

Smart Objects have utility in almost every website we build, from simpler presence websites to larger web app projects, and fit in well with the concept of Atomic Design. Colors and iconography are two of the most basic elements — the atoms — of Atomic Design and defining them early on as Smart Objects helps to set a strong foundation for the rest of the project. Creating a central repository that we can update allows the molecules and organisms to derive directly from the atoms, rather than a designer merely attempting to apply the atoms consistently.

It takes a bit of setup to create the Smart Objects and clip them to every object throughout a document, so it can feel slow in the beginning. Once they are applied, however, our process is much more efficient. This work is especially useful for projects where you're going to be building a large set of documents using the same design system — if you're only using a handful, the setup time for color consistency may be greater than the amount that's saved. Embedding or linking icons and reusable content chunks as Smart Objects, however, is probably always worth it for the drastic reduction in potential for inconsistency.

When you're updating colors and replacing icons manually, there's always the possibility that you miss an instance that needs to be updated, which might cause some confusion or result in obsolete styles being used in the final website. Utilizing Smart Objects in Photoshop builds confidence in the consistency of the work our designers deliver — and allows them to collaborate better with each other. For the team as a whole, these Photoshop tools are just another way to improve the efficiency of our workflow.