How to create a recipe template in Photoshop

Jan 17th, 2011View Comments

Hello and welcome to another tutorial, here on trendyTUTS.com. For today I will show you how to create a nice recipe psd template using some warm colors.

If it’s the first time when you came on trendyTUTS, I would like to let you know that we have dozens of other cool website layout tutorials on our Website Layout Tutorials section. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

If you’d like to download this photoshop template you will need to sign-up for a Premium Membership. As a premium member you will have unlimited access to the entire collection of PSD Templates (the source file for our tutorials), Premium Files and PSD to HTML Tutorials.

Here is my final result:

Recipe Website/PSD Template

Step 1

Let’s start the tutorial! Open Photoshop and create a new document 1020 by 1550px

Step 2

Select Paint Bucket Tool, set the foreground color to #a0e1db and click one time on your document. My result:

Step 3

For logo I will add with Type Tool: “Recipe Website” and as a Tagline I will use “a design by trendyTUTS”. Please note that to create the logo I have used different fonts. For Recipe I have used “Avant que…” font, for Website, I have used “ariapenciroman” font and for tagline “a design by trendyTUTS” I have used “Agency FB” font.

Step 4

On the right side I will create this shape, using Rectangle Tool. As a color I have used: #5ca499

Having Rectangle Tool selected, I will create another rectangle, but this time I will create a white shape. Color used: #f0ece9. With Type Tool I will add some text. Here is my result for this area:

Step 5

With Rectangle Tool I will create this shape and I will apply this layer styles:

My result:

Step 6

With Rectangle Tool I will create a small shape (rectangle) on the right side of the shape created on step 5, then I will apply this layer styles:

My result:

Step 7

From Free Web Vector Icons, I will use a magnifier and I will place it exactly on the middle of the shape created on step 6, then I will apply this layer styles:

My result:

Step 8

With Rounded Rectangle Tool (radius 10px) I will create this shapes:

For the first shape I will apply this layer styles:

For the rest of the shapes, this layer styles:

With Type Tool, I will add the links for navigation. My result:

Step 8

With Rounded Rectangle Tool (with a radius of 10px) I will create first a white shape then on the top of this white shape I will create an orange shape, using Rounded Rectangle Tool.

Step 9

With Rectangle Tool I will create this rectangle on the left side.

and I will apply this layer styles:

Step 10

I will press Ctrl + T on my keyboard and from the bottom right corner I will flip the shape a little bit to the left. You should have something like this now:

Step 11

Next I will create another shape and I will use all of the above steps with one single exception. When you will need to flip the shape, choose the bottom right corner and flip the shape to the right. To make it looks better I will add also an image. Here is my result:

Step 12

On the right side of the images, created on step 10 & 11 I will add some text. Here is my result:

Using Rounded Rectangle Tool I will create this shape and I will apply this layer styles. With Type Tool I will add some text also.

My result:

Step 13

With Rectangle Tool I will create this shape

and I will apply this layer styles

Step 14

I will select ellipse tool and I will make this shape (black one)

I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radios of 12px

Step 15

Next I will select Rectangular Marquee Tool and I will make this selection

Step 16

I will hit Delete button on my keyboard to delete the selection and then I will push Ctrl + D to deselect my selection. Here is my output (as you can see I have created a really nice shadow). Next with type tool I will add a some text:

Step 17

I will create 2 more columns on the right side, using the same steps

Step 18

Using some icons from our Kitchen/Cooking Vector Icons, I will create some paragraphs, just below the content area

Here is my final result:

Recipe Website/PSD Template

Want to Download the Source File?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

The tutorial is finished now. I hope your result is the same with mine, if not better! If you’d like to know when we post a new tutorial, you can follow trendyTUTS.com on twitter.

blog comments powered by Disqus