[Photoshop Tutorial III: Layers]
By
This tutorial is for Photoshop 7 and CS users, since I only have a Windows OS, I can’t be sure if it is the same for a Mac or Linux.
In this tutorial, I will show you the basic use of layers using example images that I use
on Millennial Fair. Layers were also briefly explained in the first tutorial,
Resizing & Canvas Work. Photoshop is a registered trademark of
Adobe Inc. You may link to this tutorial, but its intellectual copyright belongs only to me, Jonathan Wu.
All of the features mentioned in the program itself are copyrighted by Adobe.
The Layers Pallet:
The main source of Layer information for your image can be found in one window: the
Layers Pallet. By default, it is set on the right hand side of the screen. If you do not see it, go
to Windows in the top menu, and make sure that Layers is checked. If you want to use the same PSD
image as used in this tutorial, download the zip file
now. (Unzip the file and open it by double-clicking or opening it from Photoshop)
The example image has four layers: The thin one pixel black border, the portrait, the dark
blue wide border and the background. The order of the layers determines which layer is shown
at the front of the image. In this example, the thin border is first, followed by the portrait,
with the wide border just behind it, and all the way in the back in the last layer, the background.
In order to see a layer that is under one layer, there has to be transparent space, or the opacity is
less than 100%. Opacity will be discussed in later on. The layer pallet has all the things you
need to manage your layers. Let’s try to drag the bottom background layer all the way to the
top above the border layer. Just click the layer and then drag it just above the top layer, then let
the mouse button go. You will now see that the background image now fills the image screen and the
other layers can’t be seen. This is because the background layer is solid, it has no transparency
and its opacity is 100%.
Now you can press either Crtl + Z to cancel your last action, or return the layer to the
right order by dragging it back down to the last position. Now, we will explain all the buttons on the
layer pallet.
Layer Options:
Add new layer style: Layers can get additional styles that can add textures, shadows, lights,
gradients, and other styles that you can manually configure.
Add a layer mask: Layers can have masks that cover the layer. The layer mask can be selected
by holding down the Alt button and clicking the mask.
Create a new set: If you have a lot of layers, you can create sets that allow you to organize
those layers. When creating a set, you can move layers into the set by dragging the layer into it.
Create new fill or adjustment later: You can fill up a layer with patterns or solid colors, or you
can adjust the layer with thins like Hue/Saturation and color levels.
Create a new layer: Press this button to create a new blank layer or drag a layer onto this
button to create a copy of the layer.
Delete layer: Select a layer and press this button to delete it, or drag a layer onto this
button to delete it. You will be asked to confirm the removal.
Lock options: These options can be found just above the layers. You can use these buttons to lock
either the transparent pixels, the image pixels, or lock the position. The last option locks all these
features. When you lock a feature, it cannot be altered by any tool or filter. When you are open an
existing image, check whether or not any features are locked. When you open a PNG or GIF file, all
features are locked by default. If you want to remove this lock, you have to change the mode
to RGB, copy the layer and delete the original layer.
Opacity, fill and mode: The drop down menu on the left determined how the top layer
blends with the layer underneath. Experiementing with various effects can drastically change
your image. This will be discussed further in later tutorials. Opacity determines how much light
is being allowed through this layer, which makes them transparent. If you lower opacity when there is
a layer beneath, the layer that is beneath will be seen through. The difference between fill and
opacity percentage will be explained in later tutorials.
Layer visibility and linking: Next to the layers are two icons that you can click on or off.
The eye icon determines whether or not the selected layer is visible or not. Invisible layers
will not show up in the image, nor will they be affected by style or blending changes. Next
to that, the brush symbol indicates that you are editing the image pixels, when you select the
layer mask, this will change to a different icon. This way you can tell what you are editing when
working with masks, and you can use it to switch between modes. The bottom right icon in this
example is a link icon. You can activate links when selecting a layer and then pressing the
empty right icon space of a layer beneath it to link it to the currently selected layer (this
cannot be done when the layer is locked). Normally when working with layers you edit only the
layer you have selected. But when linked, you can edit multiple layers at the same time! This
includes actions such as styling and tool actions. This way you can edit multiple layers in
one go.
Let’s make a banner!
To demonstrate how we use layers for the Millennial Fair banners, this exercise
shows you exactly how to make one with a few very easy steps. To do this, you first need to
download and install the A.C.M.E Secret Agent Font here.
Save the file on your computer, unzip it and then read the notes on how to install a font
if you do not know how. Once you have installed it, download the main exercise PSD file
here. Here is what your banner will look like:
When you have opened the PSD file for this exercise, you will see that it
currently consists of only three normal pixel layers, one type layer and one layer fill. The picture
looks far from finished at this point, but it only takes a few easy steps to get the effects you see
above. Let’s start with adding a little flavor to the background.
The background:
Create a new layer (Crtl + Shift + N) and drag it just above the background layer.
It should currently be transparent. Fill the layer with a nice
purple color of your choice, but not too dark. You can do this with the paint bucket tool, or you can set the purple
as the background color and press Crtl + Backspace to fill the layer. Now turn off the visibility
of all the other layers by clicking on the Eye icons next to them. Now we’re going to give
our layer some style. Before you do that, make sure your foreground color is pure white!
Go to Filter on the top menu, select Render and choose Clouds. Now to alter the fluffy clouds, we use
another Filter. Go back up to Filter and now choose Brush Strokes, Dark Strokes. A menu will appear.
This menu lets you configure the settings for the filter before applying it to the layer. Since we
do not want it to be too dark, we set the Black Intensity to 1 and the White Intesity to 5. Keep the
balance at 5 as well. When configuring filters, you should play around with the settings to discover
new possibilities and effects. The filters are very versatile, so experiment with them when you can.
However, now that we have added a new layer, the background layer cannot be seen anymore. Activate
all the Eye icons again to make the whole picture visible. Now click on your newly created layer and
change the Master Opacity to 80%. This way, the original background will shine through. It will still
not look like the picture I showed you. To change that, we need to reduce the opacity of the Layer Fill
just above the newly created layer. Click on it, change its mode to Overlay and reduce the Master Opacity
to 60%.
The finishing touch:
The banner is still not quite completed. The letters do not blend too well with the
background, so we need to make them stand out more. How? By adding a Layer Style. Click on the Add
Layer Style button on your layers pallet after selecting the type layer, or go to the top menu and Select Layers, Layer Style,
Drop Shadow. A layer style window will appear to let you configure the style.
This menu has a lot of possibilities, but let’s just stick with drop shadow for now.
All you need to change to get the effect that I showed, is to change the Contour. Just under the Quality
header is a contour icon that you can press. It will expand and give you a lot of choices. For now,
pick the Rolling Slope - Descending contour. You will see that the drop shadow in your picture changes its
form. Click on OK to close the menu. Now all we need to do is add the 1 pixel black border. Select the
Bottom Bar layer, then create a new layer. Reset the fore and background colors to default black and white.
Now press Crtl + Backspace to fill the layer with white color. Now go to Edit in the top menu and
select Stroke. Make sure it is set to 1 pixel and center. Now press OK. A very thin black border will
appear around the white. Now we have to remove the white. Select the Magic Wand tool from the left
hand Tools menu.
 This tool is very
good for selecting large portions of similar shaded pixels. For it to work properly you need to set the
amount of shades that it will tolerate in the new tool bar that appears under the top menu.
If you want to select only one shade of one color, you can set the tolerance to 0. Do that now, and click anywhere
on the white canvas of the layer you just created. Make sure though, that the “Use All Layers”
option in the top menu is not checked! When you click on the white, you will see it selects all the white
on the picture. Now go to Edit in the top menu and select Clear, or press Delete on your keyboard. The selected
pixels will dissappear and reveal your other layers. If you have this layer between the Bottom Bar layer and
the portrait layer, you will see that the border we just made envelops everything except the portrait, which
is what we want. If we wanted it to be around the whole banner, we would have to drag and drop it above the
text layer.
Make sure all the layers have their Eye icon activated so that everything is visible. Your
layers pallet should look like the one here, except that the layers you created are called Layer 1, Layer
2 and so on, and my layers are colored. To change the name of a layer, right click on it and select Layer Properties. You will
get a small menu where you can set the name of the layer and the color. You can change the layer’s
display color if you want to color code your layers. This can make managing your layers a bit easier
when working with a lot of layers. You can download the completed PSD file for this exercise
here.
Note: Because filters like Clouds and Dark Strokes will always produce different results your
banner will not be exactly the same as mine, and that is fine, it is not a problem with the software.
Lessons:
Copyright © 2002 - 2005
[Design by rot3k.com & ] [Hosting by Dreamhost]
All content is Copyright © by respective creators.
|
