Using Layer Comps in Photoshop CS3

Image: 

If you use photoshop to create any designs for interfaces, web or print you probably are either using groups to separate pages or separate photoshop documents, or possible Smart Layers. Using groups or smart layers that are intelligently named is a very good way to separate out different instances or pages within a single design without having multiple files. Taking this a step further, as of the Adobe Creative Suite, Photoshop has introduced Layer Comps.

Haven't heard of it?

-- Not surprised, it's sort of hidden and took me a while of digging through this program and upgrading to CS3 before I really started using this feature.

Using Layer Comps

Layer comps 'remembers' the location of your hidden/visible layers, as well as position and layer style if required. In the layer comps panel (Window -> Layer Comps) you can create a new layer comp, or switch through comps similar to how you hide/view layers in the layers panel.

Keeping Layer Comps Updated

From PSD to Drupal Theme Tutorial - Part III

Part III of III

The last two parts of the tutorial, we went over how to take a finished design using the Photoshop slice tool to html and css.

This part we will take that completed HTML page and make it into a functioning Drupal theme.

What you will need:

  1. Download the latest version of Drupal found here
  2. Read through the requirements for Drupal here
  3. For notes regarding installation of Drupal, please read this article
  4. You will also need a text-editor and web browsers for testing. (I would also suggest downloading the firefox add ons Web Developer Kit and Firebug


From PSD to Drupal Theme Tutorial Part II

SECTION II of III: HTML view part I here..

We left off with finishing the Photoshop slices. These images should be in an images folder inside a folder which will hold your website/theme files.

For this part of the tutorial you wil need a text editor. I will be using the free program TextWrangler If you are using a MAC I would recommend trying out the demo of CODA. But any text editor will suffice.

From PSD to Drupal Theme Tutorial Part I

While at a recent meeting held at Bryght's Office, there was great interest by the audience in seeing how to convert a Photoshop file into a Drupal theme.

This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.

For this example, I will be using Photoshop CS3 on a mac, however older versions of Photoshop and PC users should be able to follow along as the primary tools and menus that we will be using should remain very similar.

Those who prefer Illustrator, the method is almost exactly the same as in Photoshop. But since there was an interest in Photoshop specifically, it is the program I'll be using for this example.