Layer effects
When you have elements on your page that have layer effects applied to them, be sure to keep them all consistent by copying the layer style and pasting it to subsequent new layers. You can do this quickly by Ctrl-clicking on the layer and choosing the appropriate commands.
Layer effects can be extremely useful for making page elements such as buttons, because you can quickly apply or remove shadows and glows, which comes in handy for rollovers. The colour overlay effect is one I use a lot. It's really useful for making different coloured versions of an icon or logo without creating a brand new smart object. It simply coats the smart object with the hue of your choice. I also use this filter for rollovers.
Layer comps
I'm always surprised how many designers (even experienced ones) aren't using the Layer comps feature of Photoshop. It's so incredibly useful. When you're designing a site you need to show different states or different versions of a page. Using the Layer comps palette you can do this all in the same document and share various assets, cutting down on work.
Layer comps are basically a snapshot of the state of the Layers palette. There are three settings you can use: Layer visibility, Layer position and Layer appearance.
I use Layer visibility mostly, as the other two settings can get complicated. For example, let's say I have a homepage and I want to show three versions to the client, each one with a different background image.
I can create three different background layers and then make one of them visible in the Layers palette. With this first background layer option visible, in the Layer comp palette I click the Create a new layer comp button and name it home_background_01.
This has created my first layer comp with the first background option. To create the remaining two options, I turn the visibility of the first background off, then turn on background two and create a layer comp, and the same for background three. I now have three layer comps; when I click each one I'm presented with my homepage with the different background designs.
You can do this by turning the layers on and off and ignore the layer comps, but when you start to make versions of your design with different content areas, variations of navigations and so on, layer comps are invaluable.
And this is the best bit: you can export your layer comps as files super-fast. In the File menu, under Scripts, there is a command Layer comps to files. Run this, choose your file type and sit back while Photoshop does the work.
The filenames will be the same as the name of your layer comps, hence the correct naming. The other two layer comp options, as I mentioned earlier, can be tricky. Layer position enables you to take a snapshot of a layer or layer group's position, and then you can move it and take a snapshot for another layer comp.
The problem I've found with this is mainly when sharing files with other designers. If you move an element and forget to update all the layer comps, you can have stuff in different locations on your canvas and it turns into a nightmare.
The Layer appearance option enables you to record blending modes, so for example you can set the opacity of a layer and create a layer comp for that opacity. You can also add a glow to a layer and record that. This is useful for rollovers. Try it out, but I prefer not to use it for the same reason as I tend
not to use the Layer position option. It can be tricky when sharing the file amongst other designers if they aren't familiar with all the layers.
