Hello everybody, welcome to a new tutorial from HV-Designs. In this intermediate tutorial from one of our new Authors, Naomi Nakashima will be walking you through the steps to create an e-commerce web layout. This tutorial is very easy to follow and not too complicated for those of you just getting into web design.
Please give Naomi a warm welcome when you have a chance.
What We’ll Be Creating
Click image for full view.
Resources Used In This Tutorial
Lets Get Started
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:
Creating The Seperators
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:
Creating The Content Area
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:
Creating The Footer
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:
That’s it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.