Creating template for a coffee bar or restaurant. Free PSD included!

Hello everyone. Today I’m going to show You how to create a nice and easy to do template great for coffee bar or other restaurant. Template, as always, is based on 960 grid system.

Download

Download

What will be needed in this tutorial?

• 960 grid system for photoshop
• Coffee and Desserts
• Coffee – Expresso 1
• Coffee Bean Texture
• Coffee…
• Coffee Stain 1
• Manchas de café 3
• Newspaper with Cuppacino 1
• inside café
• coffee beans 8
• Twitter icon
• Facebook icon
• Rss icon
• Coffee icon
• Another coffee icon

Step 1. Using 960 grid and background

As I said earlier this template is based on 960 grid system. Just download the whole package and import an action file into photoshop. Then go to actions panel and play the 12 column grid action.

New document should create itself. Then go to Edit->Canvas size and change the height to about 1500px for more working space. When we have our markup done we should start to make a template. Create a new layer called bg and fill it with #e4d9c5.

Step 2. Header section

To give our background some details add some coffee stains photos. They have white backgrounds. To solve that problem just change the blend mode to darken.

Add the stains in somewhere in the header.

Step 3. Logo and social icons

For logo I used Tempus Sans ITC font with color of #4f432e. Between the words I place a coffee cup icon with a little bit of drop shadow.

My logo looks like this.

On the right side I add some social icons like twitter, facebook and rss.

Step 4. Navigation

First of all add two new horizontal guides (View->New guide) on 120px and 170px. That 50px between will be our navigation. Now choose rounded rectangle tool with radius of 10px and draw our nav bg. Go to blending options and then to gradient.

Then add some text to the navigation. I used a color of #4f432e and Myriad Pro Condensed as a font.

Now create some separators. I used for this Rectangular Marquee Tool with fixed size of 2px width and 40px height. Then go to blending options -> gradient.

Place the separators between the menu text.

And that is it for our header section.

Step 5. Slogan

For slogan I used Palace Script MT font with color #4f432e. Under that I added a separator. To create a similar separator just go to Rectangular Marquee Tool, set the fixed size to 820px width and 2px height and paste the shape to another layer. Go to blending options->gradient.

After that You should have something similar to this.

Step 6. Images

Create new guides on 300px and 500px horizontally. Photos that I used have 300x200px. Just place them in the boxes between the 960gs guides. Add a 3px stroke to them.

You should have something similar to this.

Step 7. Content

Now lets add some content. I split a template for two columns here. I added two icons and dome random text.

Step 8. Footer

Now create a new grid 800px horizontally. Set the bg color for the footer to #c9bba1.

Now just add some random photos on the left with 3px inside stroke and color #ad9d80.

Add useful links section with some random links and a coffee bean as a li bullet.

For the last section (newsletter) add some photo with 3px inside stroke and color #ad9d80. Under that place Your input field for email address. Get the rounded rectangle tool with 10px radius and draw a shape. Go to blending options.

Add some copyright text below and that’s it.

Finished

You just build nice, brown template for the coffee bar or restaurant. You can now try to code it into html/css. Maybe in the future there will another tutorial for coding this and more templates.

I created a couple of new templates but I didn’t have time to write the tutorials. Hope there will be a new tutorial in next week. After I make about 10 templates I maybe write some coding tutorials, just to do something new

Thank You for reading and I hope You like it.