Create a Recipe Web Layout

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

Hi there! Most recipe sites tend to be unique in their set up. Like other user-submitted content sites, they thrive on the right content management system. Unlike most other user-submitted content sites, visitors to these sites aren’t often treated to personal insights about the recipes they seek. Personality and individuality are portrayed solely through the recipes themselves along with the pictures that accompany them. This site is designed to complement the recipes and let them shine through in all their glory.

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

Lets Get Started

To begin, I set my background color to #E0C3B1 and then created a new file in Photoshop:

step1-create-new-document

Then I added some noise to give the background a little bit of a grainy look:

step2-add-noise

step3-noise-settings

My next step was to set vertical guides to make sure that the layout stayed within the right margins:

step4-new-guides

step5-first-guide

step6-second-guide

With the guides set, you should see something like this:

step7-view-of-guides

Next, I used the Rectangle Tool to create the shapes for the Navigation bar and the banner:

step8-create-shapes

I created these first so I had a good reference for placing my ribbon – which also serves as the right sidebar. Now I started with the ribbon. On a new layer, I used the Rectangular Marque tool to make a long selection:

step9-select-area-for-ribbon

Then I set my foreground color to #22467A and my background color to #0B1F44. Using the Gradient Tool, I filled in my selection:

step10-gradient-settings

step11-apply-gradient

step12-finished-gradient

Next, I cleared my selection (CTRL D) and used the Polygonal Lasso Tool to select a new area at the bottom of my ribbon:

step13-select-triangle

And then deleted the selected area by pressing the delete key on my keyboard:

step14-delete-selection

Next, I applied these layer styles to the ribbon:

step15-ribbon-drop-shadow

step16-ribbon-inner-glow

For a little more added depth, I used the Burn Tool:

step17-burn-tool

step18-burn-tool-settings

And brushed on just a few lowlights:

step19-brush-on-burn

Then I switched over to the Color Dodge Tool:

step20-color-dodge-settings

And filled in some highlights:

step21-brush-on-color-dodge

Next, I created a new layer over my ribbon and set my foreground color to white and my background color to black. Then I rendered some clouds by going to Filter > Render > Clouds:

step22-render-clouds

Once the clouds covered my layout, I applied the chrome effect:

step23-chrome-clouds

step24-chrome-settings

With the clouds layer still selected in my layer palate, I selected my ribbon’s pixels by holding down the CTRL key and left-clicking on the ribbon’s thumbnail:

step25-select-ribbon-area

Then I inverted this selection:

step26-inverse-selection

And hit the delete key on my keyboard so that my chromed clouds only cover my ribbon at this point:

step27-delete-selection

Then I set the blending options for this layer:

step28-clouds-blending-options

Here is how my ribbon looks so far:

step29-ribbon-so-far

Now that the ribbon is almost complete, we’re going to warp it to add a slight wave:

step30-filter-wave

step31-wave-settings

Take a moment to use the Move Tool to re-position the ribbon into a good spot, since the wave will seem to adjust the margins a bit. Then use the Polygonal Lasso Tool to make a small selection at the top left corner of the ribbon:

step32-select-top-corner

Once I made my selection, I hit the delete key on my keyboard to get rid of it. Then, I moved onto the top right corner. Again, using the Polygonal Lasso Tool, I made a small rectangular selection:

step33-select-top-right

This selection I filled in with black, leaving the top of my ribbon looking like this:

step34-finished-ribbon-top

Finally, I added a drop shadow to my finished ribbon:

step35-ribbon-drop-shadow

Here is how my layout looks so far with my completed ribbon:

step36-layout-so-far

Now that the ribbon is complete, I can start adding in the other elements around it. This is a little backwards for me, since I usually like to start at the top of a layout and then work my way down. But because the ribbon on this site helps to serve as such a focal point and because of the wave effect, I wanted to make sure that it was set up first so I could fit everything else around it. So, back to the top for the login and register links. First, I used color #0B1F44 and the Rectangle Tool to create this shape along the top of my layout:

step37-login-bar-shape

Next, I switched to the Ellipse Tool and created this shape:

step38-ellipse-shape

Then I used the Move Tool to place the Ellipse exactly where I wanted it to line up with the bar and merged the two layers together:

step39-merge-login-bar-shapes

Finally, I applied these layer styles to my login bar:

step40-login-bar-drop-shadow

step41-login-bar-bevel

step42-login-bar-gradient

step43-login-bar-gradient-settings

Once my layer styles were applied, I used the Type Tool with color # E0C3B1 and Tahoma Font to fill in my login links and then applied this drop shadow to those links:

step44-login-links-drop-shadow

Here is how my login bar looks once it’s finished:

step45-finished-login-bar

Next, I used Cooper Black Font to type in my Site Name:

step46-site-name

Now, I’ve actually typed the site name using two different layers:

step47-site-name-layers

So you’ll need to be careful to space the words “Blue” and “Recipes” correctly to fit in “Ribbon” on the new layer. It may help to use your grid to line up the words exactly.

Next, I applied the same gradient as I used on the ribbon before to the word “Ribbon”:

step48-word-ribbon-gradient

step49-word-ribbon-gradient-settings

I then created a new layer and, using black and white, rendered clouds, chromed them, and clipped them down to the word ribbon:

step50-word-ribbon-chromed-clouded

And set the chromy clouds to “Soft Light”:

step51-ribbon-soft-light

Next, take some time to use the move tool and make sure that the words in the site name are exactly positioned just the way you want, then merge those layers together and apply these layer styles:

step52-site-name-drop-shadow

step53-site-name-outer-glow

Here is how my site name turned out:

step54-finished-site-name

Onto the Navigation Bar. First, I applied these layer styles to my navigation bar:

step55-navigation-drop-shadow

step56-navigation-gradient

step57-navigation-gradient-settings

I then used Tahoma Font with color #0B1F44 and filled in the primary links with my Type Tool. Once those were filled in, I applied these layer styles to my links:

step58-links-drop-shadow

step59-links-outer-glow

For the separators, I found a silverware icon at iconspedia and downloaded the 32 pixel size; then I placed one between each link. Here is my completed navigation:

step60-completed-navigation

Moving onto the banner, I copied the layer styles from the Navigation bar and pasted the same layer styles to the banner shape, giving me something that looks like this:

step61-banner-area-with-styles

For the featured recipe picture, I used a photo of one of my all-time favorite recipes, Cinnamon Raisin Pull-Apart Muffins from Annie’s Eats. I’ve made this recipe dozens of times, and my husband has as well – they never last long in our house. Anyway – must concentrate… I sized the photo and set it into my banner:

step62-add-recipe-photo

Then I used Tahoma Font with color #0B1F44 to type in the title of the banner area. I applied the same layer styles to this title as I had to the links in the navigation bar:

step63-added-title-to-banner

Using the line tool set to 3 pixels wide, I created this shape beneath the banner title:

step64-add-line-shape

Then I rasterized the line layer and chose “Hide All” for the layer masks:

step65-hide-layer-mask

Once you hide the layer mask, you should see the line disappear from your layout and in your layer palate you’ll see a new layer mask thumbnail linked to your title bar:

step66-view-of-layer-mask

Make sure you click on the Layer mask thumbnail and then choose the gradient tool set to the default settings for black and white. Then drag your mouse across to apply a faded effect for the line:

step67-apply-gradient

This makes the line fade out nicely:

step68-finished-faded-line

I continued to fill in more information using the type tool with color #0B1F44 and the Tahoma font. For the star ratings, I used the Polygon Tool set to create a five-point star with no fill and 1 pixel stroke:

step69-star-shape

I then duplicated this layer 4 times, giving me 5 stars all together and applied this gradient to each star:

step70-stars-gradient

step71-stars-gradient-settings

For the caption on the photo, I added these layer styles to the text:

step72-photo-caption-drop-shadow

step73-photo-caption-outer-glow

I also duplicated the line that we placed under the banner title and used it as a separator between the recipe teaser and the star ratings. Finally, here is how my completed banner area looks:

step74-finished-banner-area

For the left sidebar, I used the Rectangular Marquee tool to select an area about the size of the ribbon (at least the ribbon’s width before we applied the wave):

step75-select-left-sidebar-area

I then filled in this selection with white. It’s not going to stay as this, but I wanted to use this as a guide for my block titles that go along the left side bar:

step76-fill-selection-white

Next, I created these shapes along the left sidebar using the Rectangle Tool:

step77-sidebar-title-shapes

Finally, I copied the layer styles from the navigation bar and pasted those layer styles onto each of these shapes, leaving me with this look:

step78-sidebar-title-layer-styles

I then filled in the rest of my information along the left sidebar using the type tool set with Tahoma Font and color #0B1F44. I also applied these layer styles to my titles along the sidebar:

step79-sidebar-title-drop-shadow

step80-sidebar-title-outer-glow

Once my text was laid out correctly, I was able to delete that white layer that I had used as a guide for spacing, leaving my left sidebar looking like this:

step81-finished-left-sidebar

The main content area was done very similarly to the left sidebar, but I added the search area near the top so that my content titles could be slightly off-line:

step82-search-bar

I finished out the main content area using the same techniques as I used for the left side bar and using the same separators as I had used for the banner area between the search bar and the content:

step83-finished-main-content

And now we can finally get back to filling out that ribbon. I used the Type Tool with color #CDADA2 to fill in the text along the length of the ribbon:

step84-content-on-ribbon

But of course, this looks really bad right now, right? Because the ribbon has that nice wave to it and the text doesn’t. So, we are going to select the layer with the text on it and apply the same wave as we did on the ribbon:

step85-filter-distort-wave

step86-wave-settings

You may need to use the move tool on your text to make sure that the wave effect lines up nicely with the wave of the ribbon. Here is my result:

step87-finished-ribbon-content

Last but not least, I used the Type Tool to add in the secondary links and copyright information along the bottom of the site. And here is the finished layout:

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.