Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Let's Create a Cool Travel Agency Layout

Let's Create a Cool Travel Agency Layout

grafpedia Web Layout Mar 11, 2011

Alright, we have everything we need to create our layout so let's start.

Step 1:-

First let's create a new file with 1000px width and 1200px height. Name it "Travel Agency" and keep the background transparent.

Step 2:-

Now I'm going to select my "Paint Bucket Tool" and color the background with #111111.

Step 3:-

I'll add some gradient to our background, but first I'll create a new layer. Simply click on Layer - New - New Layer. Now I'm going to use one blue gradient from our 27,000 gradient set.

Step 4:-

Now as you know I'm a big fan of graining backgrounds so I'm going to use some noise, for this click on Filter - Noise - Add Noise. Make sure the Noise amount should be 18.92%.

Step 5:-

Now reduce the opacity of the gradient layer to 70%. So we can have a bit dark color.

Step 6:-

I'll create a globe on the upper left corner. For this I'm using Globe brush set. First create a new layer. Now I'm going to use the globe brush so make sure our foreground color #ffffff.

Step 7:-

Now I'm going to add some Noise to our globe, for this click on Filter - Noise - Add Noise. I'll keep the noise amount 134.18%.

Step 8:-

Now let's add some Outer glow to our globe. For this click on Layer - Layer Style - Outer grow. Our outer glow color should be #ddf6ff. With 100% opacity, blending mode should be Linear Dodge (Add) and 250 px size.

Step 9:-

As we know we are designing a traveling site. So for that I'll add some famous things around the word. Randomly add these on our globe.

Step 10:-

Now I'll add some clouds by using our very own cloud brush set.

Step 11:-

Let's add some planes randomly around our globe. I've used a simple plane picture, and changed the color using Color Overlay. Simply click Layer - Layer Style - Color Overlay.

Step 12:-

Now I'll create a path around our planes. I'll use Line Tool. Make sure its color is #fd843b, with weight 7px. Now let's create small lines to create a path. And now our globe is done.

Step 13:-

Now I'll select the "Rounded Rectangle Tool" and create a rectangle in the middle covering lower half of our globe. And fill it with #ffffff.

Step 14:-

Now it's time to create some buttons and for that select "Rounded Rectangle Tool" and create a small rectangle. Now I'll add gradient to our rectangle. For this simply click on Layer - Layer Style - Gradient Overlay. I'll select a nice light blue gradient.

Step 15:-

Now let's add the pages using "Text Tool". And for the hover effect, once more select the "Rounded Rectangle Tool" and create a small rectangle. This time we'll use a darker blue gradient.

Step 16:-

Now we'll create two lines using our "Line Tool", with 1px weight and color # d1d1d1.

Step 17:-

Now Select "Rounded Rectangle Tool" and create a rectangle and fill it with # 061c26.

Step 18:-

Let's add some small images on the right side of our rectangle. And then add some text using "Text Tool" on the left side. Now I'll create a "read more" button using "Rounded Rectangle Tool". Fill it with #00a2ff then add the text using "Text Tool". Make sure that our text color is #ffffff.

Step 19:-

Now I'll create a search box on the right. For this once again select the "Rounded Rectangle Tool" and create a rectangle. And one more small rectangle and place it on the upper left side of the rectangle to get a file or folder look. Then click on Layer - Layer Style - Gradient Overlay and add a light blue color gradient to the rectangle.

Step 20:-

Now it's time to add the search options. Select "Rectangle Tool" and create a few small rectangles. Fill it with #000000. And place small arrows facing downwards. Then add text using our "Text Tool".

Step 21:-

Now let's create the search button. For this I'll use "Rounded Rectangle Tool". And then click on Layer - Layer Style - Gradient Overlay. Use a darker gradient. Then add text using "Text Tool" with color #ffffff. And our search box is almost done.

Step 22:-

Now to fill up the space on the right, I'll use the same plane and some path lines we have used in our globe.

Step 23:-

Now let's add some points under the search box. Add the heading text using "Text Tool" with color # 333333. Then add some points with text color # 878888. Now I'll add bullets using "Ellipse Tool" and create a small bullet, fill it with #ff9600. Now duplicate the layer to create more bullets. You can do that by "Right Clicking" the later and then select "Duplicate layer" or you can do the same by pressing CMD/Ctrl +J. Then add the same "Read more" button by duplicating it.

Step 24:-

Now let's design our content area. First we'll add a heading using "Text Tool" with color # 32b4fd. Then create a rectangle using "Rectangle Tool". We'll add some gradient and inner glow to our rectangle, for this click on Layer - Layer Style - Gradient Overlay. And add a light blue gradient.

Now it's time for the Inner Glow. Click on Layer, Layer style - Inner Glow. Make sure that our inner glow color is # fbf0a3 and size should be 8 px.

Step 25:-

Now, to finish off our content box, I'll add some images on the left side and add text heading with color fbad3b, and remaining text with the color # 878888. I've divided each with dots and then added the "Read more" button by simply duplicating the layer using CMD/Ctrl +J or you can right click on the layer and select Duplicate layer. And now our content box is done.

Step 26:-

It's time to add the copyright text at the bottom, for this select the famous "Text tool" and add the text using color # 878888. And add the logo on the upper right corner, and we are done. Our beautiful travel agency layout is ready.

Below is the finishing result of our cool Travel Agency layout. Click on it to view the full size image. Like always I wish you enjoyed this tutorial and will try and share your results with us.

Final Result:-

subscribe to newsletter