Designing websites in Photoshop is something which just got a little bit easier.

If you have used Photoshop recently you might have noticed a raft of new tools which are simplifying the process of designing for mobile devices and web design. Adobe have made some great new changes to the way you can work with files, adding support and simplifying the generation of image assets for multiple device resolutions , such as Android and Apple devices, including retina (@2x). One of the handier and maybe less known changes is the introduction of linking Live layers as smart objects.

As you may already know, smart objects are a type of layer that contains another file, this allows you to break up or structure complex documents in smaller, more managable pieces. Smart objects were quite limited and couldn’t propogate or be linked into multiple documents, until now.

Using linked embedding to simplify your web desing process

Smart objects may have been in Photoshop for a while but it wasn’t until recent CC updates that they became a really useful tool.

Nomally when bringing assets into a Photoshop file, we use the ‘Place’ tool from the File menu. Placing, as opposed to importing, has advantages as the picture or artwork you are placing can be moved and resized without degradation or rasterization into pixels.

With the newer Photoshop CC 14.2 update, there is a new method for placing files called, Place Linked.

Designing just like you would in code.

Just as you would split your files in PHP or Ruby on Rails when templating, to create logical structures for content (Header, Footer, Navigation etc),  then using import or require statements to pull them into a page template, or possibly split your SASS/CSS files into separate case specific documents and import them into a master template – Photoshop Linked embedding now allows you to apply a similar level of organisation to your design files.

An example of live linked objects

Say you were building a new website and needed to mockup a new page that includes a header, main body and footer.

Webpage-design-Photoshop
The example page with embedded header and main body

You could start by creating your main photoshop document or page template to hold the page and all its contents (as shown above).

Then create documents for each page element you want to make a smart object for, I tend to create an includes folder (as I would with SASS) to highlight that the files are designed to be embedded in something else and not moved.

Creating a header.psd live object in the includes folder
Creating a header.psd live object in the includes folder

Once these are made you can then place the files within the page document (File > Place Linked), now any time the page element documents are changed the live embedded version will automatically update which is neat.

Placing-a-web-header-region-in-Photoshop
Placing an element in the page document

Making fast design alterations

You could go on to add widget elements, sidebars, search boxes etc and almost never have to touch the main page document apart from placing the elements in the right location. One of the most powerful aspects this approach is that each linked file can have sub groups within it –  each group could contain variations of the major design elements.

You could have multiple styles of navigation or logo variations and hide the layers to rapidly create varying concepts for clients that automatically propagate to every mockup page on the site, saving many hours of work on large projects.

Next time I’ll be writing about how to do a similar thing using the wonderful Sketch.