Layer Effects in ImageReady and Photoshop
Excerpted from Chapter 6 of Photoshop 5.5/ImageReady 2.0 Hands-On Training (HOT), by Lynda Weinman
MAKING ARTWORK CONVEY that an object is clickable can be a challenge. There are certain button-artwork conventions that are seen all over the Web: bevels, drop shadows, and/or inset type. Layer Effects, which were first introduced in Photoshop 5.0, can help you make button artwork, because they offer many of the effects found under the Filter menu, such as Blur or Offset. Layer Effects actually combine multiple Filter effects at once and offer the added convenience of being editable. A Layer Effect for a drop shadow, for example, can be altered at any time, meaning that the angle of the shadow, the intensity, or the amount of blur is always adjustable. Layer Effects werent in ImageReady 1.0, but theyve made their way into ImageReady 2.0 in a big way. Once you add a Layer Effect, you can always change your mind about its appearance, which is not true of filters.
If you have never worked with these critters before, youre bound to be quite enthralled. While ImageReady and Photoshop both offer Layer Effects, each application handles them a little differently. The next series of exercises will reveal the power and differences of Layer Effects in each program. Ill begin with ImageReady, which is where I do most of my Layer Effects work because I prefer the way they work here versus in Photoshop.
You should be in ImageReady. With the button layer selected in button.psd, which youll find on the CD that comes with Photoshop 5.5/ImageReady 2.0 HOT, click on the f-shaped Layer Effect icon at the bottom of the Layers palette. This will access the pop-up menu, from which you should select Inner Shadow. This will cause the Layer Effect to appear on its own sub-layer beneath the button layer.
Choosing Inner Shadow, or any other Layer Effect, ought to bring forward the Layer Effect Options palette for that Layer Effect. If it doesnt, there are two other ways to bring it up: Double-click on the Inner Shadow icon below the S Effects area on the button layer (S Effects stands for Style Effects), or choose Window > Show Layer Options/Effects.
In the Inner Shadow Options palette, try changing the Color, Blur, Intensity, and Distance settings. Youre sure to be impressed by this flexibility, and you can change your mind at any time.
Select the ellipse shape layer and click on the f-shaped Layer Effect icon at the bottom of the Layers palette. Choose Bevel and Emboss. The Bevel and Emboss Options palette should be active now, and you can try some different settings for this effect as well.
You can add two or more Layer Effects to each layer in ImageReady. With the same layer selected, click again on the f-shaped Layer Effect icon at the bottom of the Layers palette and select Inner Glow from the pop-up menu. Ive changed the settings so this effect is much more obvious than it is with its default settings.
You can selectively turn on and off Layer Effects. On the Layers palette, click the eye icon to the left of the Bevel and Emboss setting to turn it off. You can try different combinations this way.
What about deleting a Layer Effect? Select the Layer Effect you want to delete and click on the Trash Can icon at the bottom of the Layers palette. Select the Bevel and Emboss Layer Effect on the ellipse shape layer, and delete it this way. Note: On Windows you will have a Yes/No option on this dialog box. Click Yes to delete the Layer Effect.
You could alternately delete in one step, by dragging the layer onto the Trash Can icon.
You can also copy and paste Layer Effects for consistency. Select the Inner Shadow Layer Effect thats on the button layer. Choose Layer > Effects > Copy Effects.
Select the ellipse shape layer and choose Layer > Effects > Paste Effects.
Both layers now have the exact same Layer Effect. This technique of copying and pasting effects can be great for creating consistent appearances between elements of your interface.
Save the file and leave it open for the next exercise.
Layer Effects are supported a little differently in Photoshop. As I already said, I actually prefer the way they work in ImageReady, so thats where I do most of my Layer Effects work. Still, sometimes you find yourself making type in Photoshop and its great that this same feature is there as well.
You should be in ImageReady, but you are about to switch to Photoshop. Click on the Jump To button at the bottom of the ImageReady toolbar. This should pop you over to Photoshop and open the same button.psd file there.
Notice that there is no Layer Effect icon at the bottom of the Layers palette in Photoshop. The circles with the f shape in them are visible on each layer they were used on, but without a twirl-down arrow or a name of the effect showing. The appearance is different, but the Layer Effects are still visible and working here.
In the Layers palette, double-click on the Layer Effect icon in the ellipse shape layer to bring up the Effects dialog box. Change a couple of settings and you will see the artwork change. Make sure that Preview is checked. Do not click OK. You can add multiple Layer Effects in Photoshop as well. Click on Inner Shadow and youll access a pop-up menu.
Choose Color Fill and check on Apply. Make sure Preview is checked. Click inside the red color swatch to pick another color. Bingo, the layer changes color! Click OK.
If you draw on this layer, the Layer Effect will apply to your brush strokes. This is true in ImageReady as well. In order to draw on the ellipse shape layer, however, you will have to uncheck Preserve Transparency. As I mentioned earlier, I use Preserve Transparency all the time, but it wont let you edit the layer in its transparent areas. Being able to turn Preserve Transparency on and off when you need to is part of its power.
Click on the Paintbrush tool in the Photoshop toolbar (the shortcut is the letter B on your keyboard) and grab yourself a brush from the Brushes palette (Window > Show Brushes). Paint a stroke on the artwork.
Whoa! Its the same color with the same effect. Told you so!
Select the background layer and choose Layer > Effects > Inner Shadow... . I changed the settings so this effect shows up well on the background layer. Change your settings to match mine or choose your own settings. When youre finished, click OK.
You can copy and paste Layer Effects in Photoshop, just like you could in ImageReady. You can even selectively turn them on and off if you have multiple effects by checking or unchecking the Apply box inside the Effects dialog box. Deleting Layer Effects is a little different, however. Make sure the background layer is still selected and choose Layer > Effects > Clear Effects.
Save your work and click on the Jump To button again to return to ImageReady.