A Designer’s Guide to Dev Handoff – Preparing Files


Preparing Files

Use layer comps

Essentially, Layer Comps allow you to set a bookmark to preserve what your document looks like at various points. This makes it easier for the development team to determine at-a-glance what assets are available for each portion of the project within the PSD. Layer Comps will also make it easier for you in the longrun.

Layer Comps remember which layers were hidden and which were visible at the moment you created the Layer Comp. They give you a way of showing multiple states or layouts without needing to build and maintain another PSD.

Returning the document to that state is called “applying” the Layer Comp, and is done using the Layer Comps palette. Layer Comps save with your Photoshop document, so they’ll be there after you close your document and open it again later.

handoff_so_sm

  • Visibility: Whether a layer is showing or hidden in the comp.
  • Position: Where the object is placed. Use on EVERY layer.
  • Appearance: Whether a layer style is applied to the layer and it’s blending mode.

Naming conventions for the Layer Comps should follow the project architecture hierarchy — alphanumeric numbering system, per the project Architecture provided by IxD/UX. Different portions of websites can be renamed throughout the life of the project. However, the architecture alphanumeric system should remain intact. This will make it much easier for anyone viewing the files to know which Layer Comp relates to which page/section of the project.

When dealing with different states of a page/slide and its layer comp, begin the name of the layer comp with the same alphanumeric system followed by the specific state. For instance: E10 – ISI Expanded. UX has been trying to address these as well in newer architectures and may be referenced as E10.5 or some similar variety.

Export layer comps

Over time, it has become more evident that PSD file size has been growing along with the interactivity or custom design required by the project being designed. Traditionally, these files would end up at a manageable file size. However, some websites and IVAs have had the entire presentation saved into a single PSD. While this may make it easier at design time, use of these larger files can negatively impact development because the development computers struggle to process them.

To decrease file size across your project, if your files are setup using layer comps, you can export those layer comps – and related assets – to individual PSD files. You can use this feature by running a simple script. Use the menu option File > (1) Scripts > (2) Layer Comps to Files. A window will launch allowing for a few very simple options (3)

  • Select the destination location
  • Set the prefix for the file names (one file will be created for each comp)
  • Select the file type/format

If you don’t want to export all layer comps, you can limit the export to only those that you need. In order to only export a subset of comps, make sure that you have selected the only comps in the Layer Comps palette and check the Selected Layer Comps Only box. After choosing all options, click the Run button.

handoff_export_sm

Layer Comps and any resultant exported PSDs should be named according to architecture documents.

Flatten Artwork

The act of flattening artwork is a way to preserve a historical state of a design file. When layers have been approved and will not need to be modified further, it may be more advantageous to merge layers and flatten your file. Another option is to include content that will be repetitive across files as Smart Objects.

Merging layers

Merge layers and layer groups that won’t require further editing by the developer. This not only reduces the visual impact of the Layers panel, providing a clearer road map for the developer, but also removes the chance of design elements getting accidentally altered during image slicing. In most cases, text will remain live and should not be a part of the flattened images.

Smart objects

Smart objects are invaluable during the design process. The Smart Objects allow for resizing and styling with Smart Filters while remaining completely editable. They preserve the image’s source content with all it’s original characteristics, enabling you to perform nondestructive editing to the layer.

If a smart object contains charts that are to be disseminated by the developer in order to accommodate animations, etc., the smart object should be sized at a 1:1 ratio. That way the developer can turn off the layers that they do not need within the smart object in order to create the separate images for the animation. When possible, if an Illustrator file is used as a smart object, follow the same grouping rules for that file as you would the PSD file (outlined above).

If the smart object is of a chart that is not expected to change and it’s only intended use will be static in the developed piece, then these layer types should be rasterized or merged with other layers to reduce the overall file size as smart objects can often contain images that have a higher resolution (e.g. 300dpi) than is required for the final output of 72dpi.

Include a Color Palette

Create a layer group with its visibility turned off at the top of the Layers panel named “Palette.” Populate this group with layers using Layer > New Fill Layer > Solid Color… that are named to correspond to elements that will be colored using CSS, such as: font treatments (headings, links, etc.), background colors, horizontal rules, borders, etc. This allows developers to simply double-click the layer thumbnail to get the color values they need from the Color Picker while coding.

For even greater communication, include the Hex color and RGB color codes for each of the color blocks. This will also save the developer time and avoid erroneous color picker selections.