PHOTOSHOP 5.5 TUTORIAL

(Creating Stained Glass Images)

 

STEP 1:
Open up your clipart in Photoshop. It may be best at this point to work with a copy of your image, saving your original in case you mess up.

STEP 2:
Turn this image into a layer, if it isn't already. (Do that by selecting all, then copying. Open up a new image, accept the defaults, and paste into that new image. You should now have an exact duplicate of your original, and it should be on a layer.)

Your image must also be in RGB color. If your image is not, increase the color depth (Image, Mode, RGB Color).

STEP 3:
Using your magic wand set up as shown below, click on each area that you wish to be transparent in your finished product.

(You may have to use your pencil tool set at one pixel, hardness 0, and pixel paint all the black lines that are "open" in order for this to work right.)

Hold down the "Shift" key while making the selections with the wand and hit "Delete" after everything is selected.

STEP 4:
At this point, make sure that there are no white areas peeking outside of the black lines of your clipart. If there is one thing that irks a graphics designer, it's those little white lines that weren't quite removed around the edges of the image.

Do this by using your magic wand and holding the "Shift" key down while selecting all the transparent areas.

Now expand your selection by 1 pixel (Selections, Modify, Expand) and then hit the delete key. You can check to make sure that you got all the stray white, by creating another layer under your image and filling it with a darker color. This will make any stray white areas stand out like a sore thumb. If there is white showing, expand your selection by another pixel and "delete" to get rid of it.

Once your clipart is cleaned up, you're ready to proceed with the fun part!

STEP 5:
Figure out what part of the image you want to start to work with. For the example in this tutorial, I will use the chicks shown on the index page.

First, I chose the birds. I selected the body of the birds by using my magic wand and the Shift key. (I also had to pixel paint some of the lines with black to close them off, so my wand wouldn't select all the white outside the birds, too.)

STEP 6:
In the example below, I simply flood-filled the birds with a gradient . (You can also use a solid yellow, then a pool shadow filter for this effect.)

STEP 7:
Continue selecting, filling with color (pixel painting to close off broken lines if necessary), and using effects, on each segment that will have color. It is important to note here, not to use a lot of texture, because glass is supposed to be smooth. A slight roughness is o.k., but in this tutorial, I chose not to use any texture in my glass.

DO NOT SELECT ANY OF THE BLACK AREAS! We will use the black lines and areas as the "solder" that holds the glass pieces together.

Here's where my image stands at present:

STEP 8:
Now it's time to make the loop at the top. This will be the "hook" to hang your stained glass in the window!

Click on the ellipse selection tool and create another layer to make your loop on.

Draw a small circular selection at the very top of your image. Flood fill it with solid black.

Contract the selection by 2 pixels (Selection, Modify, Contract) and hit "Delete". With your mover tool , position the loop so it is just touching the top of the image.

After you're done with your loop and it's positioned correctly, Merge Visible to make everything one layer again.

STEP 10:
With your magic wand selected again, click anywhere on the black outlines. To be sure that you have selected every bit of black possible, go to "Select, Similar".

STEP 11 - For those who need to expand their black lines:
Duplicate that layer, and make the first layer invisible. All you should see now is the duplicated layer.

Invert selection, and "delete".

Invert again, and "delete".

Now you should have just the selection of where you want the black lines to go.

With your top layer and your selection active, flood fill that layer with black.

STEP 12:
Using the Bevel & Emboss feature, bevel all the selected black, with the following setup:

STEP 13:
Make your bottom layer visible again and merge visible.

You're done! Save your file as a transparent .gif or .psd image, and you have a very nice decoration for a "virtual" window!!

Results in Photoshop:

Tutorial by Creator Esther