How to create a travel/booking template in Photoshop

Aug 18th, 2010View Comments

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.

As a premium member you will be able to download all our web layouts (PSD and CSS/HTML version for each tutorial), all premium files and unlimited access  to our PSD to CSS/XHTML tutorials.

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Here is my final result for this tutorial:

Travel Booking Website Template Tutorial In Photoshop

To create this tutorial I have used:

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:


On the top of this shape, using Rectangle Tool, create another shape, this time I have used this color: #ffb506

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 line tool add 2 separators (1px width)

With Rectangle Tool, create a white shape (please see the screenshot below)

Then select Gradient Tool and draw this line

With a soft brush tool, create a white spot on the top left corner, than with Type Tool I will add some text and an icon from Transportation Vector Icons available to our Premium Members


For the price text I have used this layer styles:



In the same manner I will fill up the Featured Area. Here is my final result:

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

Travel Booking Website Template Tutorial In Photoshop

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.

  • Sheree

    Hi,

    I just joined as a premium member. Love your site. However, I’ve found one problem. When I went to download the Travel/Booking template, I get the following error message:

    404: Sorry, file download not found. Please contact Support for assistance.

    I wanted to pass on this information.

    Thank you,
    Sheree Knapp

  • Sheree

    Hi,

    I just joined as a premium member. Love your site. However, I’ve found one problem. When I went to download the Travel/Booking template, I get the following error message:

    404: Sorry, file download not found. Please contact Support for assistance.

    I wanted to pass on this information.

    Thank you,
    Sheree Knapp

  • admin

    @Sheree

    Thank you for becoming a Premium Member and for letting me know about this issue. The link has been fixed now :)

  • admin

    @Sheree

    Thank you for becoming a Premium Member and for letting me know about this issue. The link has been fixed now :)

  • Carlos

    Every day I’m more happy of being a Premium Member.

    Hey admin I have one request, could you design a Layout using the 960 grid and then code that layout using again the 960 grid system?

    Thanks for all

    Carlos

  • Carlos

    Every day I’m more happy of being a Premium Member.

    Hey admin I have one request, could you design a Layout using the 960 grid and then code that layout using again the 960 grid system?

    Thanks for all

    Carlos

  • admin

    @Carlos, using the 960.gs, it’s really easy.

    I promise you that next week I will post a photoshop tutorial made with 960.gs and after that it will be coded using 960.gs as well.

  • admin

    @Carlos, using the 960.gs, it’s really easy.

    I promise you that next week I will post a photoshop tutorial made with 960.gs and after that it will be coded using 960.gs as well.

  • Tirath

    Awesome tutorial with nice detail step by step explanation and screen shot
    which makes very easy to understand
    end result is really amazing
    you are genus with good admin who alway support the members
    your all tutorials are Excellent
    keep up good work
    god bless you :-D

  • Tirath

    Awesome tutorial with nice detail step by step explanation and screen shot
    which makes very easy to understand
    end result is really amazing
    you are genus with good admin who alway support the members
    your all tutorials are Excellent
    keep up good work
    god bless you :-D

  • admin

    @Tirath

    Thank you :)

  • admin

    @Tirath

    Thank you :)

  • http://www.crearedesign.co.uk Rob Creare

    I think that you have really captured the essence of what a travel website “SHOULD” look like. If I came across this website online myself I would defiantly be drawn in by the brightly and highly contrasted coloured containers . The letter pressed price titles also work very well adding a level of depth to the site which balances well with the depth added by the background image. The drop shadow has been used tastefully adding it to the top of the bottom boxes which an effect I think works well through- out the design. Thanks for the tutorial.

  • http://www.crearedesign.co.uk Rob Creare

    I think that you have really captured the essence of what a travel website “SHOULD” look like. If I came across this website online myself I would defiantly be drawn in by the brightly and highly contrasted coloured containers . The letter pressed price titles also work very well adding a level of depth to the site which balances well with the depth added by the background image. The drop shadow has been used tastefully adding it to the top of the bottom boxes which an effect I think works well through- out the design. Thanks for the tutorial.

  • http://radmehr.info Radmehr

    great design,
    thanks a lot!

  • http://radmehr.info Radmehr

    great design,
    thanks a lot!

  • http://www.hurghada-community.com Atef

    Thank you

    could you code that layout using php ?

  • http://www.hurghada-community.com Atef

    Thank you

    could you code that layout using php ?

blog comments powered by Disqus