If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
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.
To start our template create a new document with the sizes indicated in the image below.
Fill the whole document with a simple gray color for beginning.
Fill 80% of that simple gray color with a big rectangle and fill with white.
Add this drop shadow effect for the white rectangle we have created in the previous step.
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.
Type in “Discount Hotels” with Nevis Font – this will be the text of our logotype, then add these drop shadow details.
Now add a gradient overlay effect with the colors indicated in the screenshot.
Now we are creating a blue bar where all our navigation links will be placed.
Add the following Gradient Overlay effect for the bar we’ve recently created.
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.
Add a darker blue shape which fits the home section. It will be a part of our hover effect for nav links.
Add gradient overlay style for that blue shape we created in the previous step with the colors stated in the image.
As a last element for the hover effect, add some drop shadow style with the details as shown in the image.
Get a beautiful landscape image (free or stock one), and place it under our nav links. It should be bright, colorful and high-quality.
Create a white, rounded rectangle, where we’ll place some more information and input forms. For beginning add some dummy text “Book Your Hotel”
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.
Now create a simple grey-colored circle, and add the following gradient overlay details to it. Then add a dark 1px stroke to it.
This is our result so far, be sure you followed all steps listed.
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.
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.
Now it’s time to create another shape, with the following gradient overlay details. It may be rectangle or square.
Add some important text in that box, with a simple white and the following style details.
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.
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.
Add some Gradient Overlay details with the following colors.
Add text for our big 3D button, and then style it with the drop shadow effect.
Now we are creating another small gray 3D shape with the following details as stated on the image.
Place some gradient overlay styling for that box, by following the colors shown on the image.
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.
Now we place some simple text and create another drop-down form like in step 20.
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.
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.
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.
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.
Copy that rectangle with special deals, and paste it many times because you won’t have only one deal, but about 6.
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.
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).
In the white shape we have created in the previous step, you add a simple rectangle with the following “Gradient Overlay” styling effect.
For the same blue rectangle, add a drop shadow effect with the details stated in the image below.
With the Arial font, start adding city names. For the font, add the styling shown on the image below.
Now add a shape (of any color) which covers one of the locations you have written, then apply the Gradient Overlay styling.
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.
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.
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.
For the same rectangle shape, add the following gradient overlay styling, with the colors shown in the image.
Add a prominent and relevant title, then place some dummy/random text in the shape created.
Add one more stock image with text under the section of all “Special Deals”. It will be first element for our footer section
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.
Join over 77,235 Subscribers Today.