Another Way to Create Web Buttons with Icons

Tutorial in Advanced, Web

I will show you another fantastic way of creating web buttons with icons. You will be able to download them and use them.

Open a new document (400×600px).

Fill it in with #384243.

Create a new layer.

Select ((Rounded Rectangle Tool)) with a 9px ((radio)). Trace a selection using color #405252 as shown in the image below:

Duplicate the layer (Ctrl + J) of the button.

To the duplicated layer, change the fill color to #526262, and drag it a few pixels down.

Duplicate it again and change its color to #304040.

Place this layer in the midle of the other two ones.

Then move the selection a few pixels down and press ((Delete)).

Separate the layers as bit more. Observe how they look in the image above, and now check out the image below.

Select the layer you filled in with color #304040 and make a selection to the left side of the button using ((Rectangular Marquee Tool)). Then press ((Delete)).

Create another ((new layer)) and create a small rectangle in the right bottom area of the button, using ((Rounded Rectangle Tool)). Then fill it in with color #304040.

Duplicate and complete the titles of the buttons. I used “Tahoma” font, 12px.

Let me show you a site where you can download icons from. Click here.

Once I added the icons, this was the result.

Related Tutorials

Deja tu comentario

CaminoCreativo.com & DesignOwners.com is a property of XARUP.