DiscountHotels – Design a Modern Business Website

Posted in Tutorials, Web Interface • Posted on 14 Comments

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:

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.

20 Written Articles

14 Comments Best Comments First
  • pip010

    Thursday, April 7th, 2011 16:13

    4

    stop selling photo shop! start selling design principles!

    +2
    • Dainis Graveris

      Thursday, April 14th, 2011 11:03

      5

      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/

      0
  • Adrian

    Wednesday, April 6th, 2011 21:24

    1

    Nice final design. Good tutorial.

    0
  • Trung

    Wednesday, April 20th, 2011 04:53

    6

    Nice template, Thank for sharing.

    0
  • Emprego

    Thursday, April 7th, 2011 13:45

    3

    Excelent Tutorial. Photoshop is Amazing.

    0
  • Belmer

    Thursday, April 7th, 2011 07:32

    2

    Nice Tutorial. Very detailed and well explained.

    0
  • akeel Malik

    Saturday, April 23rd, 2011 07:02

    7

    Very nice template and tutorial.Keep it up.

    0
  • Eddy

    Monday, May 23rd, 2011 09:05

    8

    nice tutorial keep up the good work.

    looking forward to xhmtl and css conversion

    0
  • irfan

    Saturday, August 6th, 2011 17:14

    13

    thanks for your tutorial. can you convert this layout to xhtml and css. i tried my best but was unable to do it.

    0
  • test

    Tuesday, August 23rd, 2011 09:44

    14

    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.

    0
  • Garry

    Monday, June 27th, 2011 12:07

    12

    Nice tutorial but i want xhmlt and css files can u give me?

    0
  • Tony

    Monday, June 6th, 2011 03:45

    11

    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

    0
  • sebastien

    Tuesday, May 24th, 2011 09:39

    9

    How about video tutorial? Can be interested to see live design on PS. Great tutorial thanks

    0
  • Yudha

    Thursday, May 26th, 2011 03:19

    10

    these are made directly without a sketch on paper? I hope to get the proper way to design something.
    Its great tutorial.

    0
  • test

    Tuesday, August 23rd, 2011 09:44

    14

    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.

    0
  • irfan

    Saturday, August 6th, 2011 17:14

    13

    thanks for your tutorial. can you convert this layout to xhtml and css. i tried my best but was unable to do it.

    0
  • Garry

    Monday, June 27th, 2011 12:07

    12

    Nice tutorial but i want xhmlt and css files can u give me?

    0
  • Tony

    Monday, June 6th, 2011 03:45

    11

    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

    0
  • Yudha

    Thursday, May 26th, 2011 03:19

    10

    these are made directly without a sketch on paper? I hope to get the proper way to design something.
    Its great tutorial.

    0
  • sebastien

    Tuesday, May 24th, 2011 09:39

    9

    How about video tutorial? Can be interested to see live design on PS. Great tutorial thanks

    0
  • Eddy

    Monday, May 23rd, 2011 09:05

    8

    nice tutorial keep up the good work.

    looking forward to xhmtl and css conversion

    0
  • akeel Malik

    Saturday, April 23rd, 2011 07:02

    7

    Very nice template and tutorial.Keep it up.

    0
  • Trung

    Wednesday, April 20th, 2011 04:53

    6

    Nice template, Thank for sharing.

    0
  • pip010

    Thursday, April 7th, 2011 16:13

    4

    stop selling photo shop! start selling design principles!

    +2
    • Dainis Graveris

      Thursday, April 14th, 2011 11:03

      5

      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/

      0
  • Emprego

    Thursday, April 7th, 2011 13:45

    3

    Excelent Tutorial. Photoshop is Amazing.

    0
  • Belmer

    Thursday, April 7th, 2011 07:32

    2

    Nice Tutorial. Very detailed and well explained.

    0
  • Adrian

    Wednesday, April 6th, 2011 21:24

    1

    Nice final design. Good tutorial.

    0

Comments are closed.

54.167.138.53 - unknown - unknown - US