Learn To Make A Restaurant Website Layout in Photoshop

In this tutorial we will create a beautiful and elegant restaurant website layout in Photoshop.

Details:-

Program:  Photoshop CS 5

Approximate time:  25 – 30 Minutes

Resources: Images, Icons and vector UI kit.

Before we go ahead with the tutorial, let’s have a look at the final result.

website layout tutorial

To view in full size click on the demo button.

website layout tutorial

Okay now that’s everything we need so now let’s get started.

Step1:

Start your Photoshop CS5 and open a new document of 1000x1300px.

website layout tutorial

Step2:

Fill the background layer with color# ffeac7.

website layout tutorial

Step3:

I’ve divided the layout in 3 main sections and now we’ll start with the header section. You can see the ruler lines and measurements shown in the image below for the placements. Select a rectangle tool and make a long rectangle across the background layer at the top. Fill it with color# 897151.

website layout tutorial

Step4:

Now open up the UI kit and place the navigation bar and slider strip according to the image shown below.

website layout tutorial

Step5:

Open your image folder and copy the cake image and paste it between the 2 bars. Place the image layer below the navigation and slider bar layers. Adjust the size by pressing ctrl+t.

website layout tutorial

Step6:

Now we’re going to make a search bar and for that make a new layer, name it search bar and again select the rectangle tool and make a narrow small rectangle strip and fill it with color# 414042.

website layout tutorial

Step7:

Now right click on the search-bar layer and go to Blending options->Inner shadow. Make the settings according to the image given below.

website layout tutorial

Step8:

Open up the round icon folder and copy the search icon, paste it at the right side of the search bar as shown below. Now select the type tool and with the color# bc9854, select the Charlemagne Std font-> Bold->18pt and then type the word “SEARCH”. Place it in the search-bar as shown below.

website layout tutorial

Step8a:

Now we’ll add a stroke to the SEARCH. Right click on the text layer go to Blending options->Stroke. Select the color# 493612 for stroke and make the size 1px.

website layout tutorial

Step8b:

Now we’ll add a drop shadow to the search text. For that Right click on the text layer, go to Blending options -> Drop shadow. Make the settings as shown below. Add the other round Icons just above the Title banner on the navigation-bar.

website layout tutorial

Step9:

It’s time to add the text on the navigation-bar. Select the typing tool; use the same color we used for “search” text. Select the Charlemagne Std font-> Bold->36pt of size and type “HOME”.

website layout tutorial

Step10:

Right click on the “HOME” layer and go to Blending options and then select Bevel and Emboss. Make the settings as shown in the given image below. Give it a drop shadow and Stroke as well, keep the settings for drop shadow we used for “SEARCH” text.

website layout tutorial

Step11:

Now rest of the text including Menu, Services, Contact, About text. We’ll use same font we used before for the “HOME”, same size with stroke and drop shadow but without Bevel and Emboss.

website layout tutorial

Step12:

It’s time to add the Main Name or title on the banner. Make new layer. Select type tool with color# bc9854 -> Charlemagne Std font-> Bold->60pt size and type “Delicious”.

website layout tutorial

P12a

Right click on the Delicious layer, go to Blending options and select Inner shadow (make the setting same as shown below in the image).

website layout tutorial

P12b

Again right click->Blending options-> Inner Glow (make the setting same as shown below in the image).

website layout tutorial

P12c

Now we’ll add a banner line below the title and for that select the type tool again with color# 1e160b -> Charlemagne Std font-> Bold->24pt size and type “Celebration of taste”.

website layout tutorial

P12d

Type “Reservations” using same font, color, drop shadow, stroke as we used for SEARCH text. Place the reservation text on the red ribbon in the navigation-bar.

website layout tutorial

Step13:

Now make another rectangle using rectangle tool on the main slider image with white color #ffffff and reduce its opacity to 22%.

website layout tutorial

Step14:

Now we’ll add the text to out white box. Right click on the DELICIOUS layer and select Duplicate. Place the duplicate text layer on our white box as shown below. We’ll add a stroke with black color# 000000 of 1px size to this text.

website layout tutorial

Step15:

Duplicate the title tagline “Celebration of taste and place the duplicate layer as shown below. For the rest of the text go to the Lorum Ipsum site and copy a line or two, select the Charlemagne Std font-> Bold->24pt size and paste the copied lines as shown below. I’ve added a few maroon color# 570202 squares for pointers there, which you can easily make using rectangle tool.

website layout tutorial

Step16:

Okay so now we are done with our header area including main slider. Now come down to the middle part. Copy the 2nd banner from the UI kit and place it below the slider.  I’m going to give a bit of Drop shadow to it, for that right click on the banner -> Drop Shadow (make the settings according to the image given below).

website layout tutorial

Step17:

I’m going to give a bit of Texture to it, for that right click on the banner -> Pattern Overlay (make the settings according to the image given below).

website layout tutorial

Step18:

Duplicate the DELICIOUS and CELEBRATION text layer and place the duplicate layers on the banner (see the image for reference). And for the Today’s special text I’ve used White color# ffffff with Monotype Corsiva font ->Regular-> 36pt size-> Smooth.

website layout tutorial

Step19:

Add the rest of the word also in white but use Charlemagne Std font-> Bold->24pt size.

website layout tutorial

Step20:

Place 2 more images as shown below, align them with the banner.

website layout tutorial

Add two more titles “Free home delivery items and Contact us” with color# 570202. Use Charlemagne Std font-> Bold->30pt size.

website layout tutorial

Step21:

Add text paragraphs from ipsum lorum in black color# 000000 using Charlemagne Std font-> Bold->24pt size. Now add 2 buttons (1 for home delivery with a truck icon on it and 1 email with a letter icon on it from the UI kit). Add text on the buttons using same process we used earlier for SEARCH text.

website layout tutorial

Step22:

Now we are going to add a 2nd slider with 4 to 5 images of food items. Make a long rectangle using rectangle tool with color# 897151. Place this rectangle below our middle stuff (banner, images, text, and buttons) as shown below. You can measure the width shown in the given image for reference.

website layout tutorial

Step23:

Add the other 4 images to this 2nd slider. You can adjust the sizes by pressing ctrl + t. After that copy the arrow buttons from UI kit and place them each on the either side of the slider as shown below.

website layout tutorial

Step24:

Add another ribbon copied from UI kit to close the 2nd slider (see the picture for reference). Add a small rectangle strip with color# 63523a for the bottom.

website layout tutorial

Step25:

For the footer make another large rectangle with color# 897151. Now we’ll add titles on the footer using Charlemagne Std font-> Bold->30pt size with color # f6e1ba.

website layout tutorial

Step26:

Now we’ll add text from lorum ipsum under each title using Charlemagne Std font-> Bold->14pt size with color # 130e07. At the end add the copyright text at the very bottom strip.

website layout tutorial

We are done with this delicious restaurant website layout. Have a look.

website layout tutorial

Hope you enjoy making this layout yourself. Do share your thoughts and suggestions about this tutorial in our comment box below. Until next time be good.

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes