Total Followers 132,503
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.
Get The Only Freelancer crash course you will ever need to read!
Tuesday, August 23rd, 2011 09:44
DO it as you told above,but I found that it’s not detail.can you descirbe it more detail
.for example ,after the step 20,it’s simple.so we don’t know how to do ,the font-size,the font-family,the color.
Saturday, August 6th, 2011 17:14
thanks for your tutorial. can you convert this layout to xhtml and css. i tried my best but was unable to do it.
Monday, June 27th, 2011 12:07
Nice tutorial but i want xhmlt and css files can u give me?
Monday, June 6th, 2011 03:45
This is best web2.0 clean web design tutorial ever i have seen! But where other web designer, they do not enjoy this nice tutorial yet! Why comments is only 11 :( ! Everyone should share this everywhere! +1
Thursday, May 26th, 2011 03:19
these are made directly without a sketch on paper? I hope to get the proper way to design something.
Its great tutorial.
Tuesday, May 24th, 2011 09:39
How about video tutorial? Can be interested to see live design on PS. Great tutorial thanks
Monday, May 23rd, 2011 09:05
nice tutorial keep up the good work.
looking forward to xhmtl and css conversion
Saturday, April 23rd, 2011 07:02
Very nice template and tutorial.Keep it up.
Wednesday, April 20th, 2011 04:53
Nice template, Thank for sharing.
Thursday, April 7th, 2011 16:13
stop selling photo shop! start selling design principles!
Thursday, April 14th, 2011 11:03
You think it’s about selling PS? Not to say, almost every web designer is using just PS? Tutorial is meant to provide readers with step by step guide how to get unique web design layout, not talk about design principles. Look for other articles for that as this one – http://www.1stwebdesigner.com/design/design-details-difference/
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Adrian
Wednesday, April 6th, 2011 21:24
Nice final design. Good tutorial.
Trung
Wednesday, April 20th, 2011 04:53
Nice template, Thank for sharing.
pip010
Thursday, April 7th, 2011 16:13
stop selling photo shop! start selling design principles!
Dainis Graveris
Thursday, April 14th, 2011 11:03
You think it’s about selling PS? Not to say, almost every web designer is using just PS? Tutorial is meant to provide readers with step by step guide how to get unique web design layout, not talk about design principles. Look for other articles for that as this one – http://www.1stwebdesigner.com/design/design-details-difference/
Belmer
Thursday, April 7th, 2011 07:32
Nice Tutorial. Very detailed and well explained.
Emprego
Thursday, April 7th, 2011 13:45
Excelent Tutorial. Photoshop is Amazing.
akeel Malik
Saturday, April 23rd, 2011 07:02
Very nice template and tutorial.Keep it up.
Eddy
Monday, May 23rd, 2011 09:05
nice tutorial keep up the good work.
looking forward to xhmtl and css conversion
irfan
Saturday, August 6th, 2011 17:14
thanks for your tutorial. can you convert this layout to xhtml and css. i tried my best but was unable to do it.
test
Tuesday, August 23rd, 2011 09:44
DO it as you told above,but I found that it’s not detail.can you descirbe it more detail
.for example ,after the step 20,it’s simple.so we don’t know how to do ,the font-size,the font-family,the color.
Garry
Monday, June 27th, 2011 12:07
Nice tutorial but i want xhmlt and css files can u give me?
Tony
Monday, June 6th, 2011 03:45
This is best web2.0 clean web design tutorial ever i have seen! But where other web designer, they do not enjoy this nice tutorial yet! Why comments is only 11 :( ! Everyone should share this everywhere! +1
sebastien
Tuesday, May 24th, 2011 09:39
How about video tutorial? Can be interested to see live design on PS. Great tutorial thanks
Yudha
Thursday, May 26th, 2011 03:19
these are made directly without a sketch on paper? I hope to get the proper way to design something.
Its great tutorial.