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
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.
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.
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.
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.
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.
Yahoo! We get the very elegant and Beautiful Hotel Template.