Create a Food Blog Layout in Photoshop

In this tutorial I will show you how to use one of the latest vectors pack from Grafpedia to create a clean and appetizing food blog layout in Photoshop. I’ll show you how to create a kitchen tablecloth pattern in Photoshop, how to create an image slider and how to use vectors in a web layout.

For this web layout I used the Food Vectors Pack. If you are a VIP member you can download it and continue reading the tutorial. If you are not, you can easily become a VIP member and have access to thousands of design resources and one year of free updates for just $49. That’s right. You pay only $49 and during the next 12 months you will be able to download and use every design resource that is released here on Grafpedia.

Final Image Preview

This is the web layout that we are going to create. Click on the image below to see the full-size version.

Introduction

In this tutorial we will use the 960 Grid System. Go ahead, download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder).
After you open the .psd file in Photoshop you will see 12 red bars. That is the grid system that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” group.
During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height. This .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.
Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1

We’ll start by increasing the size of our document to give us enough space to work with. Go to Image > Canvas Size and use the settings from the following image.
Go to Layer > New Fill Layer > Solid Color and use the color #fbe0b1. Then right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below.

Step 2 – Creating a pattern for the background

Create a new document (Ctrl/Cmd + N) with the size 80px by 80px. Select the Rectangle Tool (U) and create a rectangle with the size 80px by 40px and the color #b52a51 at the top of your document. Name this layer “horizontal” and set its opacity to 20%.
Create another rectangle with the size 40px by 80px in the left side of your document. Name this layer “vertical” and set its opacity to 30%.
Select these two layers and hit Ctrl/Cmd + G to put them inside a group. Name the group “pattern” and set its opacity to 30%.
Click on the eye icon of the “Background” layer to hide it. Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document and go back to the first one.

Step 3 – Applying the pattern to the background

Create a new layer and fill it with white using the Paint Bucket Tool (G). Name this layer “pattern” and set its Fill to 0%. Then double-click on it to open the Layer Style window and use the settings from the following image for Pattern Overlay.

Step 4

Create a new group and name it “top bar”. Then select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 15px and the color #a95858 at the top of your document. Name this layer “top bar”, double-click on it to open the Layer Style window and use the settings from the following image for Drop Shadow. The shadow color is #473e2f.
Then select the Line Tool (U), set the Weight to 1px, hold down the Shift key and create a horizontal line at the bottom of the top rectangle using the color #8b4747. Name this layer “1px line”.
Hit Ctrl/Cmd + J to duplicate the line layer. Then select the Move Tool (V) and hit the up arrow on your keyboard once to move this layer one pixel up. Change the color of the new line to #ca7373.

Step 5

Download the Food Vectors Pack and open the .AI file in Adobe Illustrator. Then select the ice cream cup vector using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop and paste it as a smart object (Ctrl/Cmd + V). Name this layer “ice cream icon” and use Free Transform (Ctrl/Cmd + T) to change its size.
Activate the guides (Ctrl/Cmd + and align your ice cream icon as you see in the image below. Put this layer inside a group (Ctrl/Cmd + G) and name it “logo”.
Now select the Type Tool (T) and write the name of your layout using the color #8d1c39. I used three text layers and the font Myriad Pro Black (for the word “food”) and Myriad Pro Bold (for the other two words). To arrange these layers I used the Move Tool (V).
Double-click on your text layer to open the Layer Style window and use the settings from the following image. If you have more than one text layer, copy the layer style from the first one (right-click on the layer and select Copy Layer Style) and paste it to the others (right-click and select Paste Layer Style).

Step 6 – Adding the social icons

Create a new group and name it “social”. Then select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 260px by 70px and the color #a95858 in the right side of your layout. Name this layer “social bg”, double-click on it to open the Layer Style window and use the settings from the following image. The stroke color is #a95858.
Download this set of icons from Function and open the “rss”, “twitter”, “facebook” and “youtube” icons in Photoshop. Move each of these icons into your first document using the Move Tool (V) and arrange them inside the rounded rectangle you created earlier.

Step 7 – Creating the background for the content

Select the Rounded Rectangle Tool (U), set the Radius to 6px and create a white rounded rectangle with the dimensions 980px by 1080px. Name this layer “content bg”, double-click on it to open the Layer Style window and use the settings from the following image for Outer Glow.

Step 8 – Creating the navigation bar

Create a new group (Layer > New > Group), name it “navigation” and put it underneath the “content bg” group. Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 938px by 70px and the color #a95858. Make sure that the bottom area of this rectangle is underneath the big white rectangle. Name this layer “navigation bar”, double-click on it and use the settings from the image below. The stroke color is #9c5151.

Step 9

Select the Type Tool (T) and write the name for your navigation menu items using the color #ece2e4 and the font Myriad Pro Semibold Italic. Add a shadow to these layers using the color #803a3a and the settings from the following image.

Step 10 – Creating the search bar

Create a new group and name it “search bar”. Then select the Rectangle Tool (U) and create a rectangle with the dimensions 200px by 26px and the color #f4f0e2. Name this layer “search bar”, put it in the right hand side of your navigation bar and add a 1px stroke to it using the color #925050.
Select the Type Tool (T) and write the words “Type and hit enter to search” inside your search bar using the color #917a7a.

Step 11 – Creating an image slider

Create a new group (Layer > New > Group) above the “content bg” layer and name it “image slider”. Then select the Rectangle Tool (U) and create a square with the dimensions 300px by 300px and the color #d6c8af. Name this layer “image_holder”, double-click on it and use the settings from the following image. The inner glow color is #f1eadf and the stroke color is #d6cdbc.
Duplicate this layer two times (Ctrl/Cmd + J) and use the Move Tool (V) to arrange these layers as you see in the following image. Leave a distance of 20px from the bottom of the navigation bar. Activate the guides to help you arrange these layers better.

Step 12

Open a food image in Photoshop and move it into your first document. Put this image above the middle square that you created at the previous step. Name this layer “image”, right-click on it and select Create Clipping Mask to make it visible only inside the middle square.
Add two more images inside the other two “image_holder” layers using the same technique. I used some food images from sxc.hu.

Step 13 – Creating two arrows for the image slider

Create a new group and name it “right arrow”. Then select the Ellipse Tool (U), hold down the Shift key and create a white circle with the dimensions 60px by 60px. Name this layer “circle” and put it in the right hand side of the image slider. Double-click on this layer and use the settings from the image below for Outer Glow.

Step 14

Create a new blank layer (Ctrl/Cmd + Shift + N). Then hold down the Ctrl/Cmd key and select this layer and the “circle” layer. Right-click on one of them and select Convert to Smart Object. This will allow us to mask the left half of the circle without adding the outer glow effect to the left edge.
Use the Rectangular Marquee Tool (U) to create a selection like you see in the following image. Then go to Layer > Layer Mask > Hide Selection.

Step 15

Select the Custom Shape Tool (U), right-click on your image and select an arrow shape. Then create an arrow inside your white circle using the color #c4b08e. Name this layer “arrow”, duplicate it (Ctrl/Cmd + J) and move the new arrow next to the first one.

Step 16

Create another arrow in the left side of the image slider just like you created the right arrow.

Step 17 – Creating a separator underneath the image slider

Create a new group and name it “separator”. Then select the Line Tool (U), set the Weight to 1px and create a horizontal line underneath the image slider using the color #d6cdbc (1). Leave a distance of 30px between this line and the images above.
Use the Rectangular Marquee Tool (U) to create a selection like the one you see in the following image (2). Then go to Layer > New Fill Layer > Gradient and use the settings from the following image (3). I created a #a99470-to-transparent gradient. Note that while the Gradient Fill window is opened, you can click on your image and move the gradient around. Set the opacity of this layer to 20% (4).
Select the Move Tool (V) and leave a distance of 1px between the gradient and the line you created earlier.

Step 18

Add a mask to the “separator” group (Layer > Layer Mask > Reveal All). Then select a black-to-transparent gradient (G), hold down the Shift key and drag a gradient from left to right, starting from the left side of the separator. This will make the separator to gradually fade away. Then drag another gradient from right to left starting from the right side of the separator. Take a look at the following image for reference.

Step 19 – Creating the blog posts

Create a new group and name it “blog”. Create another group inside the previous one and name it “post #1″.
Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 200px by 200px. Move this square in the left side of your layout and 30px underneath the horizontal separator. Activate the guides to help you position this layer.
Name this layer “image_holder”, double-click on it and use the settings from the following image. For the inner glow I used the color #f6eee1 and for the stroke I used #c9c2b6.
Open a food image in Photoshop, move it into your first document and use Free Transform (Ctrl/Cmd + T) to change its size. Name this layer “image” and put it above the “image_holder” layer. Then right-click on it and select Create Clipping Mask.

Step 20

Select the Type Tool (T) and add some content next to the image. For the headline I used the font Myriad Pro Bold Italic with the color #514d47 and for the block of text I used the font Myriad Pro Regular with the color #6a655d.

Step 21 – Creating a “Continue Reading” button

Create a new group and name it “button”. Then select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 140px by 26px and the color #e5d6bb. Name this layer “button”, double-click on it to open the Layer Style window and use the settings from the following image. The stroke color that I used is #aca291.
Select the Type Tool (T) and write the words “Continue Reading »” inside your rounded rectangle using the color #847c70 and the font Myriad Pro Semibold Italic with the size 14pt.

Step 22 – Adding more blog posts

Duplicate the “post #1″ group two times (right-click on it and select Duplicate Group). Then use the Move Tool (V) to move the blog posts one underneath the other. Leave a distance of 30px between them. You can also replace the food photos with two others.

Step 23 – Creating a separator for the sidebar

Create a new group and name it “sidebar”. Then create another group and name it “separator”.
Select the Line Tool (U), set the Weight to 1px and create a vertical line next to the blog posts (1). Name this layer “1px line”.
Use the Rectangular Marquee Tool (M) to create a selection like the one from the following image (2). Then go to Layer > New Fill Layer > Gradient and use the settings from the image below (3). I created a #a99470-to-transparent gradient. Set the opacity of this layer to 20% (4).
Click on the “separator” group to make it active. Then add a mask to this group by going to Layer > Layer Mask > Reveal All. Select the Gradient Tool (G), hold down the Shift key and drag a vertical black-to-transparent gradient at the top of your separator. Then drag another gradient at the bottom of it. Take a look at the image below for reference. (5)

Step 24 – Adding the content for the sidebar

Create a new group and name it “popular”. Then select the Type Tool (T) and write the words “Most popular recipes” using the font Myriad Pro Bold Italic with the color #514d47 and the size 20pt.
Switch to Adobe Illustrator, copy the coffee cup vector from the Food Vectors Pack and paste it into your Photoshop document as a smart object. Name this layer “coffee cup icon” and use Free Transform (Ctrl/Cmd + T) to change its size and move it in front of the headline.
Select the Type Too (T) and add a list of blog post names underneath the headline. Use the font Myriad Pro Regular with the color #6a655d and the size 13pt. Then select the Ellipse Tool (U), hold down the Shift key and create dots with the dimensions 5px by 5px in front of each line of your list. Group these dot layers together (Ctrl/Cmd + G) and name the group “dots”.

Step 25

Add one more list for recent recipes. Use another vector from the vectors pack you downloaded.

Step 26

Create a new group and name it “flickr”. Then copy the ice cream vector from Illustrator and paste it in Photoshop as a smart object. Name this layer “ice cream icon” and change its size using Free Transform (Ctrl/Cmd + T). Select the Type Tool (T) and write the word “Flickr” next to the icon.
Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 65px by 65px and the color #f4ede2. Double-click on this layer to open the Layer Style window and use the settings from the following image. The Inner Glow color is #fdfdfd and the Stroke color is #d7d1c9.
Duplicate this layer 8 times (Ctrl/Cmd + J) and use the Move Tool (V) to arrange all the squares as you see in the image below. Leave a distance of 15px between squares. Put all the square layers inside a group and name it “squares”.

Step 27 – Creating the footer

Create a new group, name it “footer” and put it underneath the “content bg” layer. Then select the Rounded Rectangle Tool (U), set the Radius to 6px and create a rounded rectangle with the dimensions 938px by 70px at the bottom of your layout. Make sure that the upper half of this layer is hidden underneath the big white rectangle. Name this layer “footer”, double-click on it and use the settings from the following image. The stroke color that I used is #a95858.
Select the Type Tool (T) and write a copyright statement in your footer using the font Myriad Pro Regular with the color #ebd5d5 and the size 13pt.

Final Result

Below you can see the final layout. Click on the image to see the full-size version. I hope you enjoyed this tutorial and you learned some new things.
As you can see, vector icons can be easily used in web design. With a Grafpedia VIP Account you can download all the vectors available on Grafpedia and start using them in your designs.