Monday 18 July 2011

Buttons

We're going to create buttons for our website now. We're going to have 5 buttons on the same row.

Home - Homepage of the website.

Destinations - Places where you can visit.

Accommodation - Hotels and resorts located near the destination you wish to visit.

Transportation- Means of transportation to get there.

Activities- The activities that can be conducted in the destination that you've chosen.

I used the "text" tool in photoshop and create the words I want in my buttons.
I used  Impact, Regular, 120pt.


Next , I'm going to create a new layer and use the rectangular marquee tool to make a selection on the buttons.
After that, I will use the gradient tool and choose my fore color and my background colour and drag it across my selected area.


I will do the same to all the words and after that, I will drag the "Text layer" and put it above my second layer. This way, I will be able to see my words on the gradient background that I have created.


Next, I'm going to add some effects to the words. I'm going to drop shadow + inner shadow + outer glow + inner shadow + satin.

This is the end result.


Next, I will create a new layer and use single column marquee tool and create the borders for my buttons.



After that, I'm going to use the selection tool and click on my rectangular buttons, click on inverse selection and then delete the outer layer with lines of the buttons. After that, I unclick the eye on the background later and merge down.
There we go.



So now there 2 layers, Layer 1 which is our buttons and the background layer which is not used also, 
there's a fine line of separation of the buttons together in black. 

Thank you!

No comments:

Post a Comment