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.



Share the Love:


Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings


I am a professional web designer, working as a tutorial writer here at Designzzz. I also have a crazy for Cars and Automobiles, that's why I have blog about them,; You can follow me on Twitter
All Articles by
10 Comments on “How to Design an Elegant Hotel Website in Photoshop” Join The Discussion!
  1. Sam Anderson says:

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

  2. livsewalker says:

    Nice man , keep that on !!!

    1. Jawad says:

      You got it… I will keep on with it.

  3. maajid321 says:

    classic work
    really awesome

    1. Jawad says:

      Thanks a lot :)

  4. Hotel Marketing says:

    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 says:

    nice work…

    1. Jawad says:

      Thanks Meenu :)

  6. Koonlay says:

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

    1. Jawad says:

      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