Web Design and Development in Boise, Idaho – Unattended Media in beautiful Boise, Idaho. Web design, development, custom web applications, and SEO.

The Introduction.

Lately at Unattended we have started building several large-scale web applications. Our process is to draw things out on paper, then translate that into full pixel-perfect Photoshop mock-ups. This is really great because it allows us to work through every detail of the interface before coding anything. With my solid background in Photoshop this is my preferred method of working.

The Problem.

When designing multiple pages (as all applications have) you have to recreate the header, footer, and sidebar on every Photoshop document. Previously method was to create each as a folder group and then design all additional pages in the same document, placing each page mock-up in its’ own group, then hiding the groups for pages I was not working on. Though this worked, I would create documents that had almost a thousand layers (sure makes your computer work hard!). Also if you choose to make a different document for each page, then when you change your header on one page then you have to update that in every other document, which can be very time consuming.

The Solution.

In web design we use PHP includes all the time. They are a simple way to break up your page and reuse parts throughout and entire web site or application. This way you don’t have to duplicate code, and any changes you make update throughout the site. Interestingly enough, we can do the same thing with Photoshop through the use of Smart Objects.

Smart Objects allow you to save individual PSD files for your Header, Sidebar, Footer, or anything else, and then place them in your Photoshop document.

1. Save an Individual PSD with the layers that you want to include.
2. Open the page you want to place the include file within.
3. Go to File > Place and navigate to the PSD include file.
4. The simply move it to the correct place in your document.
5. If you want to edit the include file then just double click the layer for that smart object. It will open the original PSD to edit, any changes you save will update everywhere that file is used.

There you go! A simple solution, to a pretty simple problem, but if your workflow is similar to ours at Unattended then it should prove quite helpful.