In the following tutorial we are going to browse through the making of a web layout for a hotel website which offers deals related to trips and hotel discounts. Be sure to follow each step and if you are a bit confused, take a look at the final result to better solve your problem.

Editor’s note: DiscountHotels exists in real life and is one of the top services in finding the best deals for flights and hotels. We respect their trademark in every way.

Resources:

• FamFamFam Silk Icons

Final Result:

Step 1

To start our template create a new document with the sizes indicated in the image below.

Step 2

Fill the whole document with a simple gray color for beginning.

Step 3

Fill 80% of that simple gray color with a big rectangle and fill with white.

Step 4

Add this drop shadow effect for the white rectangle we have created in the previous step.

Step 5

Now we’re adding some contact information in the right side of our header. Get the icons from the resources list located at the beginning of the tutorial.

Step 6

Type in “Discount Hotels” with Nevis Font – this will be the text of our logotype, then add these drop shadow details.

Step 7

Now add a gradient overlay effect with the colors indicated in the screenshot.

Step 8

Now we are creating a blue bar where all our navigation links will be placed.

Step 9

Add the following Gradient Overlay effect for the bar we’ve recently created.

Step 10

With the preset Arial font, we are adding nav links which we will add some drop shadow to. Then we must create a 1 px black line, which will work as dividers for the nav links.

Step 11

Add a darker blue shape which fits the home section. It will be a part of our hover effect for nav links.

Step 12

Add gradient overlay style for that blue shape we created in the previous step with the colors stated in the image.

Step 13

As a last element for the hover effect, add some drop shadow style with the details as shown in the image.

Step 14

Get a beautiful landscape image (free or stock one), and place it under our nav links. It should be bright, colorful and high-quality.

Step 15

Create a white, rounded rectangle, where we’ll place some more information and input forms. For beginning add some dummy text “Book Your Hotel”

Step 16

Create a “long” grey rectangle and give it a 1px stroke as stated above. With a darker grey color add some text in that box.

Step 17

Now create a simple grey-colored circle, and add the following gradient overlay details to it. Then add a dark 1px stroke to it.

Step 18

This is our result so far, be sure you followed all steps listed.

Step 19

Now it’s time to create a simple input form for our shape. To do this, just make a white rectangle in the specific zone, and add a 1px grey stroke, and you will achieve such result.

Step 20

Now add 5 more as seen below. For those forms where a drop-down is present, use the Custom Shape (U) and add a simple arrow as seen below.

Step 21

Now it’s time to create another shape, with the following gradient overlay details. It may be rectangle or square.

Step 22

Add some important text in that box, with a simple white and the following style details.

Step 23

Now it’s time to place some text on that stock image we’ve put under the nav links. Use whatever font you’d like, and add the style details indicated on the image.

Step 24

Now as we’ve finished with that image, it’s time to finish with that white box, which keeps those forms and shapes in it. Add a rounded rectangle with this drop shadow effect.

Step 25

Add some Gradient Overlay details with the following colors.

Step 26

Add text for our big 3D button, and then style it with the drop shadow effect.

Step 27

Now we are creating another small gray 3D shape with the following details as stated on the image.

Step 28

Place some gradient overlay styling for that box, by following the colors shown on the image.

Step 29

After we finish the rectangle, it’s time to add some text which will ask your visitors to subscribe to your newsletter. Also, create a simple input box which is identical to the one from step 19.

Step 30

Now we place some simple text and create another drop-down form like in step 20.

Step 31

Under the “hotel deals” text, you should add another big, blue rectangle with hex code #3f8ac1 which is also shown on the image. The color is not so important because it will be changed with a color overlay effect in the next step.

Step 32

Now we must change the color of our rectangle by adding a color overlay effect, you have to add also a 1 pixel simple grey stroke to the rectangle.

Step 33

In the grey rectangle we have recently created, we must add some content. Add a simple square image which will show the location you are featuring. Also a title and some featuring text should be added.

Step 34

To increase the beauty and brightness of that rectangle, we must add a button and a price which will show the price of the “special deal” the website offers. The effect of the text and the button creation techniques are the same as in past steps.

Step 35

Copy that rectangle with special deals, and paste it many times because you won’t have only one deal, but about 6.

Step 36

We are almost done with our content section, and now moving to the sidebar. Take another stock image and add some white text and the following styling.

Step 37

Now we create a new shape under that stock image. The shape is identical to the one we have created in step 2-3 (our background).

Step 38

In the white shape we have created in the previous step, you add a simple rectangle with the following “Gradient Overlay” styling effect.

Step 39

For the same blue rectangle, add a drop shadow effect with the details stated in the image below.

Step 40

With the Arial font, start adding city names. For the font, add the styling shown on the image below.

Step 41

Now add a shape (of any color) which covers one of the locations you have written, then apply the Gradient Overlay styling.

Step 42

Now it’s time to add some simple text, which will define the special deals you are promoting and show in the sidebar of your web layout.

Step 43

Add a facebook fan page screenshot under the last shape we have created in the last steps, then make a box like you did in step #37.

Step 44

Now for the latest rectangle shape, create another also rectangle shape which will be located inside of it. Then set its drop shadow effect by following the image.

Step 45

For the same rectangle shape, add the following gradient overlay styling, with the colors shown in the image.

Step 46

Add a prominent and relevant title, then place some dummy/random text in the shape created.

Step 47

Add one more stock image with text under the section of all “Special Deals”. It will be first element for our footer section

Step 48

This is the last element for our footer. Add all kinds of text, links, also copyright information and you may try adding a big blue 3-d like buttonlike we made earlier in this tutorial.