Hello and welcome back to trendyTUTS.com. For today I will create, another web layout tutorial, this time I will create a web layout for a restaurant. If you are a restaurant manager and you need to redesign your website I think this tutorial it will come in handy and it will help you to make a picture about what you will need in order to create a nice layout for your restaurant.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this template in Photoshop, but I will not cover the PSD to CSS/HTML conversion. If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our web layouts (PSD and CSS/HTML version for each tutorial), all premium files and unlimited access to our PSD to CSS/XHTML tutorials.

Click Here To See The Live Preview (CSS/HTML)

Here is my final result

To create this restaurant layout, I have used:

• From our Premium Files available to our Premium Members I have used Restaurant Vector Icons
• A stock image showing a waiter with a bottle of wine and 2 glasses. I can’t share with you this image because I don’t have the right to do it. Anyway, you can find some nice images (even better that the one I have used) on stock websites, such as Shutterstock, Istockphoto, etc. Also if you’re looking for low-quality, but free images, you can try sxc.hu

Let’s start the tutorial

To create this tutorial, I will use a frame work called 960 grid system. You can download this framework from 960.gs. Once you have downloaded it, extract the files , open the folder ” nathansmith-960-Grid-System-b443729 ” , go to templates, here open the photoshop folder choose 960_grid_24_col.psd and open it in Photoshop.
Once you have open it, you will have something like this:

As you can see this file it will came with 24 red bars and with the guides turned on. Usually I turn off the guides (Ctr+;), if you want to turn off the red bars, please see the screenshot bellow.

Now I set the foreground color to # 4d3217, than I will select Paint Bucket Tool and I will click one time on my document.

Step1 – Creating the logo

Creating the logo is a simple job if you have some nice fonts. With type tool I will write “MyRestaurant” and as a slogan I will write “a design by trendyTUTS.com”

Step2 – Creating the navigation.

To create the navigation, I will turn on the 24 col Grid, then I will select Rounded Rectangle Tool with a radius of 5px and I will create this shape.

Then apply this layer styles for the navigation:

Next select Ellipse Tool and create a similar shape over the navigation

Than make sure that you have the white shape selected on layer palette and apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of approx 30px.

Select Rectangular Marque Tool, make a similar selection

Hit Delete on your keyboard to delete the selection and Ctrl+D to unload the selection. With Type Tool I will add the links for navigation
Here’s my result

For the links on the navigation I have used Tahoma font, 16px in size.
The navigation is almost finished. The final step would be to add some separators. Each of this separator has been created with line tool (weight 1px)

The navigation is finished now, you should have something like this:

Step3 -Creating the featured area

To create featured area I will select first an image from my stock images, showing an waiter with a bottle of wine and 2 glasses and I will place it on my document (File>Place ).

As you can see the image does not fit too well on my document. To integrate it perfectly, on the layer palette click on this small thumbnail (please see the screenshot below), to add a layer mask. Make sure that the image layer is selected.

Once you have added a layer mask, press D on your keyboard to load the default color palette (black & white) select gradient tool, and drag a similar line on the image, from the right to the left

My result:

I will proceed in the same way for the top, right and bottom.
Here’s my result

Next I will change the Blending Options to Luminosity

On the right side using type tool and rectangle tool, I will create an Online Reservation area. Please see the screenshot below to see what fonts I have used. The “Reserve a Table now ” button has been created using the same method used for navigation.

Here is my final result for this area:

Step3 – Creating the Footer

To create the footer, I will select first Pen Tool and I will make this shape:

Then I will apply this layer styles:

Next using the same method used for the image from Featured Area, I will apply a layer mask and with Gradient Tool I will drag a line. First on the left side, than on the right side. Here is my result:

With Type Tool I will add some text, with line tool I will create some separators (using the same method used for navigation) and I will add some icons from our Restaurant Vector Icons available to our Premium Members.
Here is my result:

At the bottom with type tool I will add a quote. To make it as an arch, first of all you will need to type your desired text, than make sure that the text is selected on your layer palette, and the Type Tool as well.

When I will click on that bottom from the top, a window will pop up. Here I will choose arch and I will increase the band with 5%.

Here is my result for footer

And here is my result for the entire area:

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.
Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.