Photoshop Tips & Tricks: Smart Objects in Web

It’s amazing to think that Photoshop, originally conceived as a solely image-editing application, has over the years evolved to be regarded as the go-to for web layout. Today there are seemingly endless tools in Photoshop for web designers to achieve their goals. Knowing how to use Smart Objects is one of the more useful tricks for creating layouts.

Smart Objects, which made their first appearance in CS2, are defined by Adobe as layers that contain image data from raster or vector images. They allow designers to perform many edits to the layer without damaging its original characteristics. A Smart Object is essentially a file within a file.

First things first: How to create Smart Objects

  • To convert an individual layer (or multiple layers) in Photoshop, right click on the layer and “Convert to Smart Object” (alternately, Layer > Smart Objects > Convert to Smart Object)
  • Open images, vector graphics, or entire PSDs as Smart Objects by maneuvering in Photoshop to File > Open as Smart Object
  • Copy vector graphics straight from Illustrator and paste as a Smart Object into Photoshop
  • Place images as Smart Objects directly into your Photoshop document: File > Place*
SmartObject_Photoshop

Once a Smart Object has been created, it can be edited by double clicking the layer thumbnail. A new window will open in whatever program the object originated from. From here you can edit the file and save it when finished. When you return to the first Photoshop window, the Smart Object will automatically update.

Besides being easy to update, there are many other benefits to using Smart Objects.

Apply Non-Destructive Filters: In the layers panel you will notice an fx next to the Smart Object layer name and the listing of filters that have been applied below. New filters can be added, unwanted ones deleted or hidden, and the order changed all while keeping the original image intact.

Cleaner Layers Panel: We all know how messy the layers panel can get when there are 200+ layers to sort through. Combining several related layers into one single layer is a useful way to declutter. Select the layers you wish to combine and convert them to a Smart Object. Simply double clicking the now converted layer will open another tab in Photoshop with all the original layers listed. I like to use this option when creating buttons that are repeated multiple times in a design.

Transform without loosing quality: A Smart Object layer can be resized, warped, distorted and transformed in any way without destroying the original image. For example, you’ve scaled an image down too small in a design. If it is rasterized, scaling it back up will result in a blurred image. But If the image was a Smart Object before any scaling, it can be scaled up again without loosing any data. Below shows the difference between a Smart Object and a rasterized image that have been scaled down and up again. So long as the image is not transformed beyond it’s original dimensions, it can be transformed over and over again (if the element was originally a vector, it can be scaled as large as you want).

SMARTvsRASTER

Update Multiple Layers in one click: One of the more magical features to Smart Objects is the ability to update multiple instances of a duplicated element at once. Using the buttons as an example again, pretend you’ve decided to change all the buttons to another color. Just double click one of the buttons and edit it (don’t forget to command+s to save!). When you return to your document, all the buttons will be updated. (Note: Smart Object layers must be duplicated or dragged to the New Layer icon. Creating a “Smart Object via Copy” will not update all versions).

Smart Objects can save a lot of time when designing websites, but don’t go too Smart Object crazy! Too many can add significantly to file size. Don’t convert text layers to Smart Objects. This can cause problems for developers, as they’ll have to take the extra steps to determine the text styles. Finally once satisfied with the edits you’ve made to a Smart Object layer, it can be rasterized if necessary. This is needed if you want to use the burn tool, the paintbrush or other such tools.

*Note: Photoshop CC allows you to Place Embedded or Place Linked. Both options place the file as a smart object, however, placing linked files allows you to update all of the same links across multiple PSD files by editing the original file. When placing embedded files you can only update that one instance of the object in a single PSD file.