Create a cafe & bar web template in Photoshop

Hi friends, Tutsfriend is a Graphic and Web design blog. So, we concentrate more into web designing. Though people are technically good still they lack somewhere in the designing part. They mainly lack in the layout and in content placement. That’s why we put more emphasize in web template designing. Today’s post we are going to see how to create a cafe & bar web template in Photoshop.






Step 1: Open a new document of size 800 px x 900 px with resolution 72 ppi and black background.
Step 2: Create a new layer. Choose the rounded rectangle tool with corner radius as 10 px and shape layers option chosen and draw a rounded recangle like this.

Step 3: Press Ctrl + T open the transform controls and right click and choose warp option. Next go to the properties bar and choose the bulge option and then give the following settings.




Step 4: Select that particular layer in the layers palette and right click and choose rasterize layer option in the menu that appears and move it up a little bit like this.


Step 5: Choose the rectangular marquee tool and make a selection like this and then right click and choose layer via cut.


Step 6: Select the other layer other than the newly segregated layer and delete that layer.
Step 7: Apply the following layer styles to that layer

Step 8: Create one more new layer and again draw one more rounded rectangle like this.

Step 9 : Repeat Step 3
Step 10: Rasterize that layer also by right clicking in the layers palette
Step 11: Choose the rectangle marquee tool and select this particular area and again right click and choose layer via cut in that.

Step 12: Apply the same layer styles to the newly segregated layer.

Step 13: Again select the remaining layer and make a selection like this and delete that particular area.

Step 14: Place the logo, company name and caption in this area

Step 15: Place an image inside the document and place it one step above the white rectangle.

Step 16: Select that particular image layer right click and choose create clipping mask option.


Step 17: Next take the text tool and type some text like this.

Download free psd here

 tutsfriend.com