EN | FI

Photoshop Tutorial

Second Picture is devoted to original tutorials about 3D graphics, Photoshop, Photography and Web Design.

Glass Bead in Photoshop

web 2.0 style round glass button

Picture 1. Web 2.0 style glass button.

01.11.2007 Category: Photoshop
Next i'll show you how to create different kind of glass button. It's going to be round bead and it has some color in it. I use same kind of ideas and methods as on the previous page. You can still use the same picture and create the glass bead next to the black glass button.

Create a Black Bead on a New Layer

Black round button

Picture 2. Create basic round button on the new layer.

Create a new empty layer and use Elliptical Marquee Tool to select round 80 x 80 pixels area. Select black color and fill (Menu: Edit > Fill...) the circular area on the new layer with black color. Now the button should look like in picture 2.

Gradient Overlay

Round button with Gradient Overlay Effect

Picture 3. Gradient Overlay settings.

Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn Gradient Overlay on. Select #baff9c as color for the left Color Stop and drag it to 25% location. Select #0e2f00 as color for the right Color Stop and drag it to 75% location. The button should now look like in picture 3.

Inner Shadow

Round button with Inner Shadow effect

Picture 4. Inner Shadow settings in Photoshop.

Turn Inner Shadow on. Change the Opacity to 100%. Change Distance to 0 pixels. Change Size to 30 pixels. Change the Contour to Gaussian preset. Now the button should look like in picture 4.

Drop Shadow

Drop shadow settings in Adobe Photoshop Blending Options

Picture 5. Drop Shadow settings in Adobe Photoshop.

Turn Drop Shadow on. Change the color of the shadow to #3a6228. Change the Distance to 0 pixels. Change the Size to 8 pixels. Now the button should look like in picture 5.

Highlight / Glare

Glass bead highlight

Picture 6. Gradient for the highlight.

Glass bead made in Adobe Photoshop CS3

Picture 7. Complete glass bead in Adobe Photoshop.

Create a new empty layer. Use Elliptical Marquee Tool and select 40 x 20 pixel area. Use Gradient Tool to fill the selected area on the new layer with black and white gradient according to picture 6.

Change the Blending Mode of the layer to Screen and change the opacity of the layer to 90%. Now the glass bead is complete and it should look like in picture 7. Buttons created with Photoshop's layer effects are very easy to modify. I recommend you to save the PSD file so you can modify the button later.

Part I: Glass Button in Photoshop