Button with lights

admin · #1 (**permalink**) 02-22-2007, 09:32 PM

Hello

In this tutorial i will show you how to create a nice button

This is the Tutorial Number 90 from our 100 Tutorial Marathon
Soon this marathon will end, and i will start another one. I will not tell you how many tutorials i will create in my future marathon

Open a new document in photoshop
Size should be 300 x 300 pixels
Background color: #151515

Select Rounded rectangle Tool ( set the radius to 3 pixels ), and make a small shape

Then Rasterize this layer ( to rasterize the layer go to Layer > Rasterize > Shape

The next step is to create another rounded rectangle
This time set the radius to 10 pixels. We don't need this layer, and i will delete after a few steps

Now hold down the CTRL key and with the left mouse button press on the Red thumbnail from the layer palette. You can notice that a selection will be visible around the red button. this is what we need - the selection

Now delete the red shape.
You can notice that the selection is still in that place

Now press Delete Key from your keyboard > this is the result

Press CTRL+D to deselect. the selection will disappear.

Then add the following layer styles

This is the result

Now we will add details
Zoom the document to 300 %

Select Line Tool. Set the weight to 1 pixel and make 4 small lines like in the following image

Now change the layer opacity for the lines like in the following image

Now select the blue shape and load the selection ( To load the selection go to Select > Load selection

Select Elliptical Marquee Tool and use the following settings

Then make the following selection

When you release the mouse button you will have the following selection

Create a new layer ( press CTRL+ALT+SHIFT+N ) , be sure you have this layer above the blue shape layer

Grab Paint Bucket Tool and fill the selection with white

Press CTRL+D to deselect , then press on the "add Layer mask" button from the bottom of the layer palette

Select Gradient Tool , and draw a line from the left to the right ( follow my green arrow )

Now change the opacity layer to 30 %
This is the result

Now create a small rectangle with Rectangle Tool

Then add the following layer styles

This is the result

Now drag the layer under above the background layer

Now press one more time on " Add layer mask button "
Select Gradient Tool, and use the following settings

Then make a line from the middle of the rectangle to the exterior ( follow the red arrow )

Now add some text and you are ready
this is my final result

I hope you will find this tutorial useful