How to create a travel/booking template in Photoshop
Hello and welcome to another tutorial, here on trendyTUTS.com. For today I will create a travel/booking website template in Photoshop. If you are a travel agent and you are looking to change the design of your agency, this tutorial it will be really useful for you. In the same time, if you are an freelancer and you have to create a booking/travel website for your client, this tutorial it will definitely help you.
Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this template in Photoshop, but I will not cover the PSD to CSS/HTML conversion. If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.
Here is my final result for this tutorial:
To create this tutorial I have used:
- From our Premium Files available to our Premium Members I have used “Transportation Vector Icons” and “Summer Vector Icons“
- A stock image showing a beach with some palms. Unfortunately I can’t share with you this image because I don’t have the right to do it. Anyway, you can find some nice images (even better that the one I have used) on stock websites, such as Shutterstock, Istockphoto, etc. Also if you’re looking for low-quality, but free images, you can try sxc.hu
Once you have all of this, let’s start the tutorial. Open Photoshop and create a new document:
Next set the Foreground Color to #85c4d1 and Background Color to #f8f8f8, than select Gradient Tool and Drag a similar line:
Next I will add a stock image on my document. You can add your image by going to File>Place
As you can see the image is quite large compared with my document. To integrate this image with your document, you will need to follow this steps:
First select the layer which contains the image in the Layer Palette, then click on “Create Clipping Mask”
Hit D on your keyboard, to set the default colors than select Gradient Tool and Drag a similar line on your image (from the middle of the image to the left)
Once you have something that you like, right click on the mask and choose Apply Layer Mask
Proceed in the same way for the top, right and bottom of the image. Here is my result:
As you can see the image is integrated perfectly with our layout.
Step 1 - Creating the logo
To create the logo is quite easy, with Type Tool I will write “TravelWebsite” and as a tagline I will write “a design be trendyTUTS.com”
Step2- Creating the navigation
To create the navigation, select Rectangle Tool, and create a similar shape: 950x50px, and to make it a little bit transparent, lower the opacity to 54%.
With Type Tool add the links for navigation and with Rectangle Tool, create a orange shape. This will serve as a rollover.
Step3 – Creating the search area
First select Rectangle Tool and create this shapes:
On the right side, select Rectangle Tool and create a white shape, lower the opacity to 29% and apply this layer styles:
With Rectangle Tool, using the same color, create a tab on the top of the shape, than with Pen Tool, create a small rectangle on the top right corner of the tab. Right click on the shape, choose “Make Selection”
Than go to Select>Inverse (Ctrl+Shift+I) to inverse the selection (so that we can have only that triangle selected), hit Delete on your keyboard to delete the selection and Ctrl+D to unload the selection.
In the same way I will create another 2 tabs. With Type Tool and Rectangle Tool I will add the forms.
Next I will create a button. With Rectangle Tool I will create a shape, than I will apply this layer styles:
Here is my result:
Step4 – Creating the Featured Area
Featured area is just below the Search Area
First select Rounded Rectangle Tool with a radius of 5px and create this shape:
Then apply this layer styles:
With Rectangle Tool, create a white shape (please see the screenshot below)
Then select Gradient Tool and draw this line
Step5- Creating the Content Area
To create the content area I will select first Rectangle Tool and I will create this shape
I will select Pen Tool and on the top left corner of the shape I will create this triangle
Then I will go to Filter>Blur>Gaussian Blur and for radius I will choose 8px. In the same way I will proceed for the right side
With Rectangle Tool I will create a blue shape and over it I will add the title
Under the blue shape, with Rectangle Tool I will create another shape and I will apply this layer styles:
Then I will add an image, some text and a button (created with rectangle tool)
I will go ahead and I will create 2 more similar posts, than on the right side with Ellipse Tool I will create this shape:
I will apply a Gaussian Blur with a radius of 8px, with Rectangular Marque Tool, I will make this selection
I will hit Delete on my keyboard to delete the selection and Ctrl +D to unload it. Here is my result
In the same manner I will add another row of posts
At the bottom I will add some images with the agency partners and I will add a small portion of the shape created on header.
Here is my final result
Want to Download the Source File including CSS/HTML version?
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.
Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.