Layers

Paint Shop Pro 5 now has layers. Look out Photoshop! This page will demonstrate how to use layers and their practicality.

Understanding layers can be a bit daunting. But, once you understand the concept, they open a whole new world for designing web graphics. Now you can create graphic templates that you can reuse, create special effects of one image superimposed over another, all very easily.

The first thing you need to do is to get familiar with the Layer Palette:

When you create a new graphic, you have a layer. If you open up the Layer Palette (hit the Toggle Layer Palette button on the top menu bar), you will see that there is already one layer (named by default “Background”). This layer is identical to opening a new graphic in previous versions of Paint Shop Pro.

As you can see in the layers graphic above, there are currently two layers. I have added a layer called “Fill”. Since I work a lot creating buttons, headers, bars, etc., I found out quickly that having the fill layer is very important. With this fill layer, you can change your background in a flash. I leave the white “Background” layer (the layer that is created when you create a new white graphic) in place, because if you use this layer as a fill layer, you can’t adjust the opacity. If you promote it to a layer (this will be addressed later), you can adjust the opacity, but when you do, you will see the “transparency grid” showing through and you won’t be able to judge your opacity setting. With the Background white and the fill layer on top, you can adjust the opacity of the fill layer and see what you are doing. The above example is how I create all my new graphics. As a matter of fact, I have a “.psp” (that’s how you need to save your graphic to preserve the layers) file called “template.psp” that is 100×100 pixels with the two above layers. I just open it and resize any time I want to create layered graphics. The following examples show the important parts of the layers palette:

Layer Visibility Toggle – This button turns on and off the visibility of that particular layer. It is very useful. There are times when you will want to turn off a layer so that it does not want to interfer with what you are working on. Also, when you choose “Save a Copy As”, PSP will compress your graphic and save it with only the layers you have turned on showing….another useful feature!

Layer Opacity – I call this the “Opacity Slider”. This one is really useful. What happens when you start sliding down is that the layer you are on starts reducing in opacity. It is useful for adjusting coloring, superimposing one graphic over another, etc.

Add a New Layer – This is where you add a new layer to your image. You can either click on the icon and name your graphic (get in the habit of naming each layer or you will get really confused!), or you can drag a current layer over the icon to make a copy of the layer you dragged as a new layer. To quickly add new layers, shift click on the new layer icon. This bypasses the naming process and just adds a new layer.

Delete Layer – Click on this icon with a layer selected, and you can delete the layer. You can also drag a layer into the trash can to delete.

Right click is my friend! – When you right click anywhere on the layers palette, this menu will pop up. I find it is easier to use than clicking on the icons. It all depends on how you are oriented to using the mouse and your computer. This is especially useful when you have duplicated a layer and you need to name it. Just right click on the layers plaette and choose “Properties”.

Some other important things to know about layers:

If you right click on the “Background” button on the Layers Palette of a new graphic you have opened (such as a photo), you can choose “Promote to Layer”. This will make it a layer and enable the opacity slider. But, you now have nothing under your photo (like a white background). To correct this, just add a new layer, name it Background and drag it under the new layer.

Always name your layers. If you don’t, you will probably get really confused.

You can view what is in a layer by placing the cursor over the layer name in the Layers Palette. This will pop up a box with a rendering of the layer.

The dark and light grey grid you see behind graphics on layers means that part of the graphic is transparent. When you create a new layer, it is automatically transparent.

Learn to “Paste as a New Layer”. If you make a selection in one graphic and paste it into another graphic “as a new layer”, the background is automatically transparent.

When you have something on a layer, it is automatically selected. Say you add text to a layer and you deselect it. You can add a drop shadow or bevel the text without selecting it. By its nature, a layer is selected unless you make a specific selection of parts of the layer.

For my first layers tutorials, I will start with a very practical purpose for layers. The first will create a button template you can use to make buttons with different textures, colors, and backgrounds. The second is a tutorial for creating a “cutout” graphic effect.

Button Template

Wouldn’t it be nice to have one button template with the button, drop shadow (if you want it) and background all separate so that you can change the background color, change the button color or texture then save the whole thing as a new button? Your template will always be there for you to use again. To create a button template using layers:

1. Create a new graphic the size you want your button to be plus about ten pixels for a room for the drop shadow.
2. Open the Layers Palette (click on the button on the toolbar).
3. Add a new layer and call it “Fill”.
4. Add another new layer and call it “Button”.
5. On your button layer, select your button shape with the selection tool.
   
6. Save this selection to an Alpha Channel (Selections|Save to Alpha Channel).
7. Fill the selection on the button layer with a color (black works well for a template).
   
8. Create another new layer and call this one “Shadow”.
9. Click on the Shadow layer. If your selection is not still there, just load it from the Alpha Channel (Selections|Load from Alpha Channel).
10. Add a drop shadow. Contract your selection by 1 (Selectons|Modify|Contract) before you add your drop shadow to ensure that you don’t end up with white pixels on the edge of the shadow. I add a heavy opacity drop shadow since you can change the opacity level with the slider to the right. If you start with a heavy drop shadow, you can adjust it to whatever opacity you want.
    
11. Turn on all layers and you will see a flat black button with a black drop shadow on a white background.
    
12. Save the button with the “psp” extension (this will preserve the layers). Your layers palette should now look something like this (I moved the button layer to the top): 

OK, we have the template for a button, so how do we use it? I will create a marble textured button on a light blue background out of the template:

1. 1. Open your template.
   2. Duplicate the template (Windows|Duplicate). Close the original template.
   3. Open the Layers Palette if it is not already open.
   4. Select the button (click on the black part with the magic wand tool) or load selection from the Alpha Channel.
   5. Fill with a color or texture (I used dark blue marble).
   6. Buttonize your button using whatever method you choose.
   7. Click on your Fill layer and fill with your chosen background color or pattern.
   8. Turn on all layers (except don’t turn on the shadow layer if you don’t want a drop shadow).
   9. If you leave the shadow on the button, click on the Shadow layer and use the slider to give your drop shadow the opacity that looks best with your background.
   10. Choose File|Save a Copy As and save as a JPG or Gif. This will compress the layers into one. You can then save this new button as a psp file for future use.
       

If you would like a copy of the button template (called button.psp), click here to download a zip file containing the button template. You can then unzip the template and open the it in PSP 5.0 and see how it all works.

Creating a Bevel with Paint Shop Pro

You can create a bevel on this button using Paint Shop Pro’s Cutout filter. I like this bevel better than their “Buttonize” filter. To create this bevel:

1. Open your template. Click on the Button layer. Load Selection and fill with a fairly light color.
2. Create a new layer and drag to the top, name it Bevel 1.
3. If your selection is not loaded, load it. Apply the cutout filter set to: Shadow Color Black
   Blur 4
   Offset -3, -3
   Opacity 100%
4. Add another layer and call this one Bevel 2. Apply the cutout filter the same as above except that the color will be white and the offset will be 3, 3.
5. Adjust the opacity sliders on both bevels until you get the effect you want.
6. As an alternative to the white cutout, you can choose a light color in your pattern or a light version of your button instead (just set your foreground color and when you choose the Shadow Color on the Cutout Filter, choose “Foreground Color”. The following button was beveled with this technique, using a light blue for the top bevel:

Cutout Template

For a tutorial on this effect click here. This tutorial will demonstrate how to make a cutout template you can reuse with the new layers feature. The beauty of templates is that if you one day want to redecorate your page, you can just change the background on all your graphics and save over the old graphic. You don’t even have to write new html as long as you give the graphic the same name you started with. To create this template:

1. Open a new graphic large enough to fit your graphic with about 10 pixels extra around the edge.
2. Create a new layer and name it “Fill”. Fill with a color other than white (not too dark) You will be able to change this color later, so don’t worry about a color choice.
3. Create a new layer and name it “Cutout”.
4. Place your text with floating unchecked and don’t deselect. I used the “G” on the Button Button Font.
5. Apply the cutout filter (give it a heavy opacity setting, because you can then use the slider on the layer to lighten or darken the color of the shadow). Mine was an offset horizontal and vertical of 3, opacity 80, and a blur of 12.
   
6. Save your selection to an alpha channel (Selections|Save to Alpha Channel) and click on OK. Give it a name (I called mine Button).
7. Create a new layer and name it “Shadow”.
8. Load your selection from the Alpha Channel (Selections|Load from Alpha Channel) and add a drop white drop shadow with an offset of 1, opacity 100 and blur of 1.
   
9. Save as a “psp” file (this keeps all the layers and the selection in the alpha channel).Here’s what the final template looks like. It is still four layers and you can change the background color or texture by clicking on the “Fill” button and filling with a color or a pattern. You can then adjust the opacity of this layer if you want.

When you have the button or graphic you want, just choose “File|Save A Copy As” and save it as a JPG or GIF.

Now that you have your cutout template, what can you do with it? Well, you can make it bigger or smaller by using the resize feature (Image|Resize – Use the “Smart Size” setting, it works best for this purpose). You can fill the background with any color or pattern you like, just click on the background tab in the layers and fill. You can adjust the opacity of the shadow in the cutout and the white drop shadow by using the Opacity sliders. Once you have the graphic you want, choose File|Save a Copy As and save as a jpg or gif. The following are some examples of this template:

Filled with a light grained pattern, opacity of cutout lowered.

 

 

Resized to 250×114, filled with wood pattern, opacity of cutout kept dark and opacity of white shadow lowered, Eye Candy inner bevel applied to flattened image.

 

 

Same technique used on text to create a cutout effect. The cutout was only offset by 2 and the blur lowered. I then lowered the opacity of the cutout.