Tutorial #5 : shading an outline

This tutorial will give you a basic way of shading in any pixel outline image : you can adapt it to suit yourself.

Step 1 : Open your pixel outline image in Paint Shop Pro. Zoom in to a magnification that allows you to see the image clearly - I usually need to use 500%! If your outline is black or grey you may want to change the colours of the outline to match the colours you want your image to be : this is the point you need to do that. (See the second image above.) You will need to do it pixel by pixel; it is fiddly but well worth the effort! If you are using mostly one colour (as in the teddy bear above) there is a way to speed up the process: go to Image - Decrease colour depth - 2 colours, then Image - palette - edit palette; click on the black square in the palette then select the colour you want from the colour palette which appears, then click OK. The outline will change to the colour you have chosen. Go back to Image - Increase colour depth - RGB 8 (or 16) bits. You then only have to individually colour the bits of the outline you want to be a different colour.

Step 2 : The next bit is the easy bit : just flood-fill the image with the basic colours you would like - note that you should choose colours a shade or two paler than you want in your finished image. Make sure you haven't left any part of the design uncoloured - paint the individual pixels if necessary.

Step 3 : Now it's time to start shading. Using the Magic Wand tool click once anywhere inside the area you want to start to shade.- it will be bordered by a moving dotted line to show that it is selected. Leaving it selected, open a new layer above the layer with the original image and select it by clicking on it in the layer palette.

Step 4 : Go to "Effects / 3D effects/ Cutout" and set offset to zero, both vertical and horizontal. Select a colour for the shading a little darker than the coloured outline (if you have a coloured outline, otherwise choose a colour several shades darker than the fill colour.) Leave the opacity at 100% for now and start to experiment with the amount of blur you need - it all depends on the size of the area you want to shade. Small areas will need low blur numbers and larger areas, higher fill numbers. To preview the results on your image without committing yourself, make sure that both of the "eye" icons on the cutout palette are clicked. When you get an effect you like, click "OK."

Repeat steps 3 and 4 for each area of the same colour, experimenting with the amount of blur needed each time - you can do all the cutout shading on the same layer if you want to. (Shading the colours one at a time saves you having to change the colour on the cutout palette until you have finished with that colour completely.)

Step 5 : Continue shading all the different areas of colour, choosing a darker shade of the original colour for the shading and making sure the shading is on a different layer from the original image.

Step 6 : When you have shaded all the colours to your satisfaction, select "Layers / Merge / Merge Visible."

Step 7 : To save your new image with a transparent background, flood-fill all areas outside the image in a colour which does NOT appear in the image itself. It doesn't matter what colour you choose as it will not be seen in the finished image. Select Image - Palette - set palette transparency - OK. On the "Set Palette Transparency" palette, select the bottom radio button "set transparency value to palette entry..." and click anywhere on the image background : the colour sample on the transparency palette will change colour to that of the image background. Click OK. Click on Image - Palette - View transparency. The background colour will vanish and be replaced by the grey-and-white checkerboard which denotes a transparent background. Save your image as a gif file.