Hướng dẫn tạo 1 giao diện website nhà hàng bằng 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.

To view in full size click on the demo button.

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.

Step2:
Fill the background layer with color# ffeac7.

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.

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

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.

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.

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.

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.

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.

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.

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”.

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.

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.

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”.

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).

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

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”.

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.

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

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.

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.

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).

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).

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.

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

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

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

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.

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.

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.

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.

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.

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.

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

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.