Categories:

Posted on November 28, 2011 by Jennifer Pointer

 

Well, 'tis the season...for a lot of things, including spending a lot of time inside out of the cold, looking outside through the window.  Not all of us are lucky enough to have gorgeous views out those windows.  It's also the season many of us spend a lot of time in church celebrating various aspects of the Christmas season, and churches have traditionally used beautifully decorated stained-glass windows through the years to let the outdoor light in, while hiding views of the outdoors that might be distracting, or just unattractive.

 

That stained-glass motif has carried over into many of our holiday decorations and now, you can include the look on your website or blog, too, in just seven easy steps.  Above, I've shown the before and after taken during a winter snowstorm last year from the original to the "stained-glass" look.  Blow, I've shown the progression, along with a second progression of how to do this on a flatter image such as that which you may be using for your website logo. 

 

First, here are the steps (I'm using Gimp as a photo editor, but this should work in most photo editing software programs.):

 

1) Use the "neon" filter to create a bold outline of your original. The background will be mostly black with a lighter outline.

2) "Invert" the neon, so that you have a white background with darker lines.

3) Select the lightest color white, and make that area transparent (in Gimp this is called "color to alpha"). You'll end up with an outline of your original image on a gray-checkered background.

4) Add a "bevel" to this image using your photo-editor, and repeat once or twice.  This creates texture.

5) Add a drop shadow to that beveled image.  Do NOT allow re-sizing, especially on smaller images! This is all about creating depth.  Now save the image to your hard drive.  Do NOT save the background color, or the color of the transparent pixels, if your editing software gives you those choices.  Notice that you now have a "neon sign," which can be used as-is.

6) Re-open your original photo, and use the "cartoon" filter, to flatten the image and create the black lines between the panes of "glass".  You may need to play around with the mask radius and the percent of black shown to get the affect you like. 

7) Now, open the other image you saved, that was a beveled outline with a drop shadow and merge the two layers.  For the snow scene below, I used the "soft light" mode of merging the layers, and for the logo, I used the "grain merge."  You may want to play around to see which one works best for your photo.  The "dodge" mode works very well for some.  And voila!  Or should we say "Ho ho ho!" 

 

Here are the progression photos on these two transformations.  If you end up using this technique on your websites or elsewhere, I'd love to see your work, so be sure to provide a link in the comment section below!

 

Original Photo

Neon Filter

Inverted Neon

 

Bevel, and Make Backgound Transparent (Color to Alpha)

 

Add a Drop-Shadow and Save.  If you just want a neon sign, you can stop right here.

 

"Cartoon" your original Image

 

Merge your "Cartoon" image (as the background) with the "neon sign" as the layer, using a soft-light, grain-merge, dodge filter, or similar, and you're done!

 

 

 

Original Photo

Neon Filter

Inverted Neon

 

Bevel, and Make Backgound Transparent (Color to Alpha)

 

Add a Drop-Shadow and Save.  If you just want a neon sign, you can stop right here.

 

"Cartoon" your original Image

 

 

Merge your "Cartoon" image (as the background) with the "neon sign" as the layer, using a soft-light, grain-merge, dodge filter, or similar, and you're done!

Share and Enjoy :
FacebookTwitterLinkedIndel.icio.usDiggReddit

Want to work with us?
Get in touch

817.283.3324 Facebook LinkedIn Twitter