FanExtra Network

ecommercelayoutthumb200

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (960X1200px).

Copy in this great free wood texture courtesy of BittBox.

Call this layer ‘wood texture background’.

Step 2

The background is a little distracting at the moment, so to make it a little less obvious I go to blending options for my wood texture layer and apply a color overlay (522908) at 75%, blend mode: normal.

Step 3

Now I want to begin setting out my layout. I start by setting out guides for my header section. I set out vertical guides at 50px and 900px (50px in from each edge), and a horizontal guide 150px down from the top of my canvas.

Then I create a new folder within my layers panel called ‘header’.

I create a new text layer and type out my logo in the left area of my header. I used the font DejaWeb.

Step 4

Now apply a drop shadow to your logo text layer. Opacity: 25%, distance 1, size: 3.

Then create a layer behind your logo text layer called ‘header highlight’. Select the radial gradient tool and create a white-transparent radial gradient behind your logo. Then reduce this layer’s opacity to 60% and change it’s blend mode to ‘overlay’. This should provide a subtle lighting effect behind your logo.

Step 5

Now add some contact details and shopping cart text & icons to the top right of your header. I found this great shopping cart icon.

Step 6

Now create a new folder in your layers palette called ‘menu’.

Create a rounded rectangle using your shape tool (radius 10px) and make sure that it’s approx 850px wide, and 80px high.

Then apply an inner shadow, gradient overlay and stroke blending option (settings below).

Finally, reduce the opacity of this layer to 90% to allow some of the background texture show through.

Inner Shadow: 75% opacity, distance: 5, size: 5, color: 8e550c

Gradient Overlay: Linear, ranging from 33210e to 57330e

Stroke: Size: 1px, Position: Inside, Color: 231303.

Step 7

Duplicate your menu layer, and then using your marquee tool to select and delete the top half of your duplicate menu. Then in blending options remove the inner shadow effect, and change your gradient overlay layers to light gray and white:

Then reduce this layer’s opacity to 60%.

Step 8

Now use your rounded rectangle tool to create a selected menu tab, by making sure that it’s the same color as the bottom half of your menu. Then put some text over the top and bottom half of your menu, to form a primary menu and sub-menu.

Finally, use a white rounded rectangle and magnifying glass icon to create a simple search form in the upper half of your menu:

Step 9

Now create a new folder in your layer’s palette called ‘featured product area’. Create a new layer and then create a large rectangular area, filled with a blue to light blue gradient:

Then apply an outer glow and inner glow:

Outer Glow: Black, 20% opacity, spread: 11, size: 10.

Inner Glow: White, 20% opacity, choke: 0, size: 79.

Step 10

Now I paste in this image of a television:

HD Television

I position it nicely over my featured product area and add some relevant text.

Step 11

I want to jazz up my featured product area so I apply a pattern overlay (30% opacity, blend mode: hard light).

I choose a pattern from the fantastic free pattern set: 108 Free SquidFingers Patterns.

Then add a simple tag icon to your product to add a little more detail and color.

Step 12

Create a new folder in your layers palette called ‘side area’.

Set some vertical guides at 50px and 270px. Then create a black rounded rectangle within the guides.

Step 13

Now reduce the opacity of your side area layer to around 50%.

Apply an outer glow and stroke effect:

Outer Glow: Blend mode: overlay, opacity: 30%, white, spread: 5%, size: 10px.

Stroke: Size: 1, Position: Inside, Opacity: 30%.

Step 14

Now add some text, links and headings to your side area.

Step 15

Duplicate your side area folder in the layers palette, and move the folder and all it’s duplicated contents down, below the top side area.

Then change the content of this box to become a newsletter sign up form. For the email input simply use a white rounded rectangle at 15% opacity. For the submit button use a rounded rectangle (5px radius) and then copy the layer styles of your original menu layer. Paste the layer styles onto your button layer and it should stand out nicely!

Step 16

Create a new folder within your layers palette called ‘featured products’.

Create a rounded rectangle beneath your blue sales area, and then paste the layer styles of your original menu onto this new shape.

Then repeat the technique that you used with the menu/submenu. Duplicate your main rounded rectangle and then cut off the top 40px or so of the duplicate. Then copy/pasta the layer styles of your sub menu, to make this area much lighter.

Finally, in order to make the header of this content area stand out a bit more, I darkened the gradient overlay copied from the main menu.

Step 17

Add some text and content to this featured product area.

I found a picture of a sample product here:

Laptop Photo

Step 18

Duplicate the folder containing your featured product content and move it below the original:

Step 19

Now beneath your content areas add an area for brand logos. I just typed ‘SampleBrand’ several times using various fonts to represent where different logos would go. Then I reduced this layer’s opacity to 60% to give a watermarked feel.

Step 20

Create a new folder in your layers palette called ‘footer’. Then create a rounded rectangle (radius 10px) going across the bottom of your canvas. Paste in the layer styles of your original menu layer.

Duplicate your logo layer, and move the duplicate down to the left side of your footer. Reduce this layer’s opacity to 30% to create a watermarked logo effect.

Finally, type out your menu links, making sure to include sub links under each primary link.

And We’re Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback! (Click on the image below to view the full-sized image):

VIP Download

Download the original .psd file for this tutorial here:

DOWNLOAD .PSD FILE

Leave a comment

0 Comments:

No comments have been posted yet. Be the first!

Leave a Comment:

Related Posts