Resources Used In This Tutorial
Lets Get Started
To begin, start Photoshop and set your background color to #525252.
Then create a new file (File >> New). Set the dimensions to Width
1200 and Height 1200.
Now, because our workspace is larger than our actual layout, set new
vertical guides (View >> New Guide). You'll need to do this for
each guide.
Right now you should be seeing something like this:
Using the Type Tool with Arial Font and color #BB9EB, I typed in my
logo. Then apply the following styles to the word "Template":
Using the same layer style for the slogan, here is my logo so far:
Next, we need to create the top navigation. Use the Type tool (I used Arial Font) to insert your links.
For each link apply this layer style:
For the hover styles over the top navigation links, use the rounded
rectangle tool and add the shape around the "Welcome, Doreen" link. I
used color #403840. Then apply this layer style to that shape:
Here is what I have so far for my page header:
Now for the primary links. Use the Rectangle tool to create this
shape with white:
Now apply these layer styles to your navigation bar:
Now use the Type Tool to add links to the primary navigation bar. Apply a Drop Shadow to each link:
Now for the separators between each link. Using the Line tool with
#403840, draw a short line 1 pixel wide between the first two links and
apply these layer styles:
Repeat the process of drawing lines and applying these styles between
each link on your primary menu bar. Here is what I have after finishing
this:
Next, we need to create the content area. Use the rectangle tool to
create a rectangle and apply these layer styles:
You should now have something that looks like this:
Now to add content. Choose a stock image to serve as the featured product. After placing your stock photo into the content area, create a clipping mask to ensure that it's framed well. Then hide the layer mask (Layer >> Layer Mask >> Hide All). Click on the Layer mask thumbnail in your layer palate and choose the gradient tool, selecting the Black and White gradient. Place the gradient:
Now your featured photo has a nice faded effect on the side:
Use the type tool and add some smaller pictures to create the content. Here is how my content looks:
Use the rectangle tool with color #646464 to create the background for the footer area:
Next, use the rectangle tool to create a title area for your footer information. I used color #525252. Set the Blending mode to Overlay and the opacity to 15%:
Use the type tool to fill in titles and text links within the footer area. Use this drop shadow on the titles:
Use the rectangle tool to place the shapes for the newsletter sign up. Then apply this layer style to each rectangle:
Finish everything off by placing your social media icons. Here is how the finished template looks:
