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.
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.
Nice work here! A coding tutorial would be very helpful whenever you can post one, i need to start learning that stuff. Thanks for sharing this tut and resources.
Thanks. Soon there will be tutorial about coding Zen garden template. Template is coded but I have to write a tutorial. Next I will code this
I really look forward to it. Thanks to you I’ve found 960.gs and really like the way it works – although still dunno how to do it in Photoshop. Anyway, your templates look perfect.
Hello. First of all download 960gs. Then, after download, unpack it. Go into a folder app_plugins -> photoshop. There You have a file called 960_GRIDS.atn. Open Your photoshop. If You haven’t Your actions panel on the right (mine is with history) just go to window -> actions. Then go to actions panel on the right and click on the drop-down list. Then choose load actions. Then find Your ATN file on Your hard drive and click Load. And that’s it. You should have Your 3 new actions: 12, 16 and 24 column grids. If You still have a problem with this I will describe it more detailed in the next tut. But I hope this help You
Hi There!
Just wanted to let you know that we at Stenigma have tried out and showcased your tutorial on our website!
Keep up the great work!
Thank You very much
More tuts like this one. Really appreciate your hard work.
Very fast and nice tutorial. Just a quick question. I am not able to create the separator using the Rectangular Marquee Tool. I create a fixed line using the dimension given but i do not get anything apply on the screen. Can you details it thanks in advanced.
Try to create another layer with this separator. Try to fill it with black color or other which will stand out. If You can’t see the line then make sure the layer is on top. If You see it then go to blending options and try gradient. Make sure You have good angle on the gradient. Otherwise there is a chance You want see it. You can do it also other way. Try to create a line with 1px of width and 40px of height and make it #d6cab4 and another 1px line with #c9bba1. Hope that helps
Thank you very much your help. It’s okay now. However, creating the separator on step 5 under the slogan is a bit tricky. When I select Rectangular marquee tool and i create 820px width and 2px height. Then i create the selection on the document. After applying gradient it just remain a normal line like the header separator for example. it do not have the effect like yours under slogan.Any ideas
Again, do it on other layer and remember to choose style: reflected and right angle, that’s the key. If You have normal line than probably angle is bad or style of the gradient. You can also use a mask if You know how it works, but in this case, I wanted to use something different
Hope this helps too
thanks once again. I got it well now.
Tkank you for this tutorial.Wery well done
You’re welcome. Thank You. Soon there will be coding tutorial. Template is already coded, but I have to write the tutorial.
wow that’s a fantastic work! well done
Woah! I’m really enjoying the template/theme of this blog. It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability and visual appearance. I must say that you’ve done a amazing job with this. Also, the blog loads extremely fast for me on Chrome. Superb Blog!
Thanks for your personal marvelous posting! I truly enjoyed reading it, you could be a great author.I will make certain to bookmark your blog and may come back at some point. I want to encourage you continue your great job, have a nice afternoon!
[...] View Tutorial [...]