How to Design an Elegant Hotel Website in Photoshop


Today I’m sharing a tutorial to design a Hotel/Motel business web layout in Photoshop. This is an easy tutorial and even beginners should be able to follow it.

As usual, this is the first of Hotel Web Template series, next Friday we’ll publish PSD download of this template and the Friday after that, we’ll publish its HTML tutorial.

I should also tell everybody that next Friday we’ll publish two web design related posts. First would be the PSD download of this template and the second is gonna be HTML tutorial of How to Easily Design an Attractive Portfolio Web Template. It was a Photoshop tutorial I created a long time ago but never got to make an HTML one. One of our readers has requested its HTML tutorial in the comments section so next week, you’ll see two posts from me. If you ever have such a request, don’t hesitate in commenting :)

Final Result


Basic Work

A blank document, size of your choice, resolution 72. We do this every time :)


Let’s start from background. Go for Pattern Overlay in layer styles, choose the Pattern and apply.


Now I apply Color Overlay with solid white color with 70% Opacity. Now we made ourselves a gray pattern.


Navigation Bar

Take a blank layer. Choose Rectangle tool and draw a horizontal full length marquee.


Fill the marquee with this Pattern. This will be the background of our Navigation Bar.


Apply a little Drop Shadow on navigation bar layer.


And with some text, we have an elegant Navigation Bar.



As I always say, I usually just make a platform for the logo, a place where any logo could fit ideally, and that’s what we are designing right now. Choose Pen Tool and draw this shape, and fill with gray color.


Apply the same pattern here which we applied on the navigation background, and then apply Color Overlay with gray color (#e4e4e4) with 61% opacity.


And now some Drop Shadow.


Now let’s draw a placeholder logo also, otherwise design would seem incomplete.
I draw a small  Star Shape using.


And header is done! I thought I should keep it brief. :)


Featured Slider

Now we are creating that big image slider/slideshow we see on almost every website. We select Rounded Rectangle Tool and drew a full length shape.


Add a picture into the featured area and the use Clipping Mask to hide the unnecessary parts. You just right click on the image layer and click Create Clipping Mask.


Let’s draw the Next and Previous buttons. Choose Ellipse Tool, draw the circles and fill them with Black color.


Apply layer style of Gradient on this shape.


Draw any arrow shape and you have your next previous buttons. You can also use a site like IconArchive to get better designed buttons.


Choose Rectangle Tool, draw the shape on the bottom of the image, fill it with solid black Color and with 48% Opacity. Then right click on layer and click Create Clipping Mask so that doesn’t has its edges slumping outside the edges of the slideshow.


And with some text, we have a beautiful slider.




Content Area

Since this is a business website, we are making a grid based multi-columned layout.
Choose the Rounded Rectangle Tool and the shape shown in the picture.


Apply a little Drop Shadow that gives it a nicer look.


Now choose Rounded Rectangle Tool and draw the shape shown in the image and fill it with #483e37 color.


Some text and a stock image, we got this.


Time for the ‘read more’ button. Choose Rounded Rectangle Tool and draw the a shape.  Fill that with #483e37 color.
I filled this shame with the same pattern which we used on the navigation bar and then applied Color Overlay.


And a 2px Stroke outline to highlight the edges.


Content Area Result Picture 1, Picture 2, Picture3




Latest Articles

Now let’s create another style for content. That can be used to show the latest articles from the blog of the hotel, this can also be used for to display many things… it’s your choice.

Choose Rounded Rectangle Tool draw a shape, fill it with solid white color.


Add Drop Shadow on this shape.


Add a picture as the thumbnail on this area. You can fit it in a shape using Clipping Mask.


Long story short, we made this! :)



Theoretically business websites don’t need to have a sidebar. But since we do have to display some stuff which should be visible on all pages, a sidebar is always a good idea.

I’m making a panel to display the latest hotel rates. Choose Rounded Rectangle Tool draw the shape and fill it with solid white color.


We followed the same steps which we did while creating Content Area.


And after a bit of work, we’ll get this.


And this is the Result.



Select the Rectangle Tool, draw a full-length shape and fill it with #2a2a2a color, 80% Opacity.


After adding Navigation elements, Contact Information and Social Media icons, we get a descent Footer Area.


Final Result

Yahoo! We get the very elegant and Beautiful Hotel Template.



Further Related Readings

  1. Sam Anderson February 22, 2012 at 2:08 am

    Impressive tutorial! good to learn to create a website with these easy to understandable steps. Nice post.

  2. livsewalker February 24, 2012 at 9:20 pm

    Nice man , keep that on !!!

    1. Jawad February 26, 2012 at 11:42 am

      You got it… I will keep on with it.

  3. maajid321 March 4, 2012 at 1:43 pm

    classic work
    really awesome

    1. Jawad March 8, 2012 at 4:35 am

      Thanks a lot :)

  4. Hotel Marketing July 18, 2012 at 5:28 am

    There are many factors to consider when designing an excellent hotel website. The website of a hotel needs to attract customers visually, but also ensure that it is not a hassle to get the basic information they seek while deciding which hotel to make a reservation with. You have shared great and useful ideas. Thanks!

  5. meenu s September 5, 2012 at 4:21 am

    nice work…

    1. Jawad September 5, 2012 at 11:57 pm

      Thanks Meenu :)

  6. Koonlay April 21, 2013 at 3:34 pm

    Thanks Jawad, but how can one use .psd file that is website designed in photoshop into Dreamweaver?

    1. Jawad April 22, 2013 at 5:52 am

      Hi Koonlay,
      Here’s the tutorial for converting it into a live HTML document:

      Good Luck :)

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved