Over the past while it has seemed like a lot of the designers that we work with are making use of Smart Objects in Photoshop more and more. This has proven to be both a blessing and a curse. It should always be the developer’s goal to make the live site look as close to the design as possible, there are some things that make that harder and some things that help that along greatly.
Smart Objects are a special type of layer in Photoshop that can hold a mix of vector and raster data in a container so that you can work with the grouped objects in a non-destructive way. You can think of it as a separate file or a bunch of objects grouped into a single layer while the objects maintain their integrity.
Specifically for web design and development, there are some really effective uses, but also some things that can end up causing more work down the road for the development team. Some of the effective uses include:
Loading vector objects into Photoshop while maintaining their vector properties, this can be very useful for designs that are going to make their way to Flash and other vector based application.
Grouping assets for re-use can be very handy. It can keep help keep the PSD nice and ‘clean’ by not bombarding it with layers and groups. This is especially useful on interface items like buttons; you can create a complex button with different state (over, off, etc).
On the other hand, there are a number of not so effective uses of Smart Objects. They include:
High resolution assets that are scaled to fit into the interface can cause a big issue when the developer is going through and cutting up the assets for development. If there are a lot of objects inside the Smart Object, a developer might need to go into the object and export pieces of it. The issue arises because the Smart Object is scaled in the design but when you open it up, the contents is at full resolution. Our recommendation for scaling Smart Objects is to not do it.
Font sizes are also a huge headache to figure out if the copy is contained within the Smart Object and the object is scaled at all, so once again our recommendation is to not scale. As a matter of fact, in our experiences there hasn’t really been a solid reason to actually use text in a Smart Object that is destined for the web. If you are doing interface items like menu buttons and you want to use a Smart Object you would either create a different object for each button with the correct copy, why not just make an object for the button background and then add the copy in the PSD? You will be able to keep the button consistent across the board while making the copy accessible to the developer.
Use Smart Objects smartly. We have found that designers are throwing just about everything into Smart Objects because they make the PSD appear much less cluttered. Overuse of the layers can make it hard to find different part of the design and just add time to overall development.
Blend modes can be a headache when applied to a Smart Object that needs to be cut up. It can take a fair bit of time to have to go into the object, show things to cut, go back to the PSD, export and repeat all because a blend mode was applied to a group of objects. We do understand that one of the strengths of using Smart Objects is that you can do things like apply effects without destroying the original image information, but it makes it a headache because developers then need to deconstruct everything that was done in order to export it.
All-in-all, when used appropriately, Smart Objects are very effective for web design/development. We would recommend that if you are a designer that isn’t sure whether you are doing something that makes things easier or harder for the developer, just ask them. Communication is the key to working well together, and working through little details like this will make everyone happier in the end.