Chipotle Chill
Right about the time we began living a low-fat lifestyle, my husband bought me a cookbook “Chipotle Chile Cookbook” by Jacqueline Higuera McMahan (see cookbook recommendations) as…
Paint Shop Pro 5 now has layers. Look out Photoshop! This page will demonstrate how to use layers and paint brush 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.
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:
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:
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.
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:
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:
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.