How to Design an Elegant Hotel Website in Photoshop

AD

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

Stylish-Hotel-template-design-in-Photoshop-tutorial

Basic Work

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

Photoshop-tutorial

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

Web-design-tutorial-in-photoshop

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

tutorial-in-Photoshop

Navigation Bar

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

Web-design-tutorial-in-photoshop

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

Hotel-layout-tutorial-of-Photoshop

Apply a little Drop Shadow on navigation bar layer.

Hotel-layout-tutorial

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

Hotel-layout-tutorial-of-Photoshop

Logo

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.

Hotel-layout-tutorial-of-Photoshop

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

Hotel-layout-tutorial

And now some Drop Shadow.

tutorial-of-Photoshop

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

Hotel-layout-tutorial-of-Photoshop

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

Photoshop-tutorial-in-photoshop

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.

Hotel-layout-tutorial-of-Photoshop

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.

Hotel-layout-tutorial-of-Photoshop

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

Hotel-layout-tutorial-of-Photoshop

Apply layer style of Gradient on this shape.

Hotel-layout-tutorial-of-Photoshop

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

Hotel-layout-tutorial

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.

Hotel-layout-tutorial

And with some text, we have a beautiful slider.

Hotel-layout-tutorial-of-Photoshop

Result

Hotel-web-design-tutorial-of-Photoshop

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.

Hotel-layout-tutorial-of-Photoshop

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

Tutorial-of-Photoshop

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

Hotel-layout-tutorial-of-Photoshop

Some text and a stock image, we got this.

Web-design-tutorial-of-photoshop

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.

Hotel-layout-tutorial-of-Photoshop

And a 2px Stroke outline to highlight the edges.

Hotel-layout-tutorial

Content Area Result Picture 1, Picture 2, Picture3

Hotel-layout-tutorial-of-Photoshop

Result

Hotel-layout-tutorial

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.

Hotel-layout-tutorial-in-Photoshop

Add Drop Shadow on this shape.

Hotel-layout-tutorial-in-Photoshop

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

Hotel-template-design-tutorial-in-photoshop

Long story short, we made this! :)

template-design-tutorial-in-Photoshop

Sidebar

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.

Hotel-template-design-tutorial-in-photoshop

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

Elegant-template-design-tutorial-in-photoshop

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

Elegant-template-design-tutorial

And this is the Result.

Stylish-template-design

Footer

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

design-in-Photoshop-tutorial

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

Stylish-template-design-in-Photoshop-tutorial

Final Result

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

Stylish-Hotel-template-design-in-Photoshop-tutorial

 

Advertisement

Related Stuff!

Published on: February 18, 2012,

This post is in: Free Photoshop Tutorials, Tutorials

Author

Jawad

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, Carunch.com; You can follow me on Twitter
All Articles by

Leave a Response