Image Effects - Techniques

Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page

Embossed Buttons

Original background: Simple background.
Alpha channel for button shape. Alpha channel.
Start with a simple background which you want to create an embossed button on. Make sure it isn't too light or too dark, because then you won't be able to see the embossing. I created this simple blue background (top left) in Picture Publisher in about a minute.
Next draw a mask on the picture, of the size and shape of the button you want. I chose a rectangle, but you can use a mask of any shape. Switch to the alpha channel - this is a grey-scale representation of the mask. It should look something like the picture at the bottom left.

Gaussian Blur on Mask
Apply a Gaussian blur to your mask. This defines the edges of the buttons for us. The more powerful the blur, the thicker and less well defined the edges of your button. Smaller blurs produce stronger edges. I used a gaussian blur of power 13 for this.
Save your mask at this point.

Embossed mask: Emboss from top-left
White tint applied to image: Single highlight edge of button
Still working on the alpha channel, apply an emboss filter (there are many commercial plug-ins available if you don't have an emboss feature on your image processing software). Set the light source direction to the top left, the brightness to 0% (or close to it), and the power to 100%. You should end up with an image like the one on the top left (I've lightened the picture somewhat so the effect is easy to see, but yours should be much darker).
Now switch back to your picture. Select the fill tool, and apply a white fill to the picture. Because the gaussian blur reduces the intensity of the mask, you may need to apply the fill several times. I had to use the fill four times to get this effect (bottom left). You should have a single highlighted edge of the button.

Second embossed mask: Emboss from bottom-right.
Black tint applied to image: Complete button.
Final button with text: Button with text.
Switch back to the alpha channel again. Undo the emboss filter applied to it, or reload your previously saved mask. Now apply the emboss filter again, with the same settings as before, but this time make the light source come from the bottom-right.
Now switch back to the picture, and fill it with black. You may need to repeat this several times again. You should end up with an embossed button similar to that at the middle left. All that remains is to place some text on it (bottom left).

Button using smaller gaussian blur.

Don't forget different effects can be had by changing some of the parameters along the way. For the button on the top left, I used a gaussian blur of just power 5. See the smaller but much stronger edges it gives the button?
Also, don't be afraid to try applying unusual masks and effects to the buttons. And remember that your embossed shape can be anything - even text!

[ What's New ]	[ Main Index ]	[ Photo Editing ]	[ Techniques ]	[ Gallery ]
[ Email Me ]	[ Links ]	[ About ]	[ Reader Survey ]	[ Frames On ]

This page was created by James Corrin. All pictures and text belongs to him or the appropriate author. Permission to use any pictures or text from these pages must be sought from the work's author. This page was last updated Saturday 22 January 2000. Email: webmaster@imageeffects.8m.com

Original background: Alpha channel for button shape.	Start with a simple background which you want to create an embossed button on. Make sure it isn't too light or too dark, because then you won't be able to see the embossing. I created this simple blue background (top left) in Picture Publisher in about a minute. Next draw a mask on the picture, of the size and shape of the button you want. I chose a rectangle, but you can use a mask of any shape. Switch to the alpha channel - this is a grey-scale representation of the mask. It should look something like the picture at the bottom left.
	Apply a Gaussian blur to your mask. This defines the edges of the buttons for us. The more powerful the blur, the thicker and less well defined the edges of your button. Smaller blurs produce stronger edges. I used a gaussian blur of power 13 for this. Save your mask at this point.
Embossed mask: White tint applied to image:	Still working on the alpha channel, apply an emboss filter (there are many commercial plug-ins available if you don't have an emboss feature on your image processing software). Set the light source direction to the top left, the brightness to 0% (or close to it), and the power to 100%. You should end up with an image like the one on the top left (I've lightened the picture somewhat so the effect is easy to see, but yours should be much darker). Now switch back to your picture. Select the fill tool, and apply a white fill to the picture. Because the gaussian blur reduces the intensity of the mask, you may need to apply the fill several times. I had to use the fill four times to get this effect (bottom left). You should have a single highlighted edge of the button.
Second embossed mask: Black tint applied to image: Final button with text:	Switch back to the alpha channel again. Undo the emboss filter applied to it, or reload your previously saved mask. Now apply the emboss filter again, with the same settings as before, but this time make the light source come from the bottom-right. Now switch back to the picture, and fill it with black. You may need to repeat this several times again. You should end up with an embossed button similar to that at the middle left. All that remains is to place some text on it (bottom left).
	Don't forget different effects can be had by changing some of the parameters along the way. For the button on the top left, I used a gaussian blur of just power 5. See the smaller but much stronger edges it gives the button? Also, don't be afraid to try applying unusual masks and effects to the buttons. And remember that your embossed shape can be anything - even text!