How to Design an Elegant Hotel Website in Photoshop

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.

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.

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.

Result

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

Result

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! 

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.

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.

Footer

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.