Buttons Design

So now we are going to do our buttons design.

First, we took this materials in order to do our designs;

Then we open photoshop and start to crate our button shape;

 

And then we just combine the materials we have into the button;

Since it is a button so we need to put a description on what button it is, do this one is the home buttons;

And then we just put any texture into the buttons' background;

After that, since our design is  all the same for every buttons we have, so we just need to edit the symbols and text from the previous buttons we made as below;

And after this and that touch of the design, we decided to change the texture with another design, and it all turns out like this; 

Finally, we combine our final banner design with the buttons we just made, and more or less it will come out this way which will be our website design later;

Banner design

Now we are going to do our banner design, please read bellow;

First, open a new file size A4 international paper (the size is actually just to make it easy) and since we are going to make a website design, a ruler and grids are important to be shown on ouw layer, so just go to view and click ruler and grid to make it visible;

Next, since I can do illustrator so we made these pictures and symbols so then we can put it on our design. And also we took some good picture from the internet (which related to Pahang) So here are the pictures that we are using to create our design;

After that we just combine every picture that we prepared, first we put the rainbow square right into the grid;

And since banner is long and horizontal so we rotate the canvas;

After that we selecting the "First world hotel building and put it into our design as seen below, first we cut the building by selection too, after that we move the selected building to cut it again the rough edges so than the picture will turnout better with a clean and neat edges;

Again, we combining picture and picture to make our design more interesting, and since we want to make it very neat we are using the STAMP tool to combine the building with the grass picture, see below;

Lastly, we create the welcoming text and another picture for the design, since we are using soft color, we change all the picture opacity to make all the pictures blend to each other, and here is the final design;

Since we thought we need more things to make it more interesting we decided to put these coasters;

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!