Design an Ecommerce Website in Photoshop

Today we are going to design the homepage layout for an ecommerce site in Photoshop. Our sample site will be an electronics shop, and since we are in the holiday season, our site will include some special promotions, which is typical of ecommerce sites at this time of year.

A Preview of the End Result:

Here is a look at what we will be designing in this tutorial (click the image to see it in full-size).

Create the New File:

Go to File – New and create a new file that is 1400 px wide and 1200 px high.

Step 1: The Background

Our design will be using a very simple background with just a solid gray color. Set the foreground color to #d8d8d7 and use the paint bucket tool to fill the background layer.

Step 2: The Header

To help us as we align items in the header, we’re actually going to start by establishing the space that will be used for the navigation menu and the featured area. We’ll set some guides to make this easier. Set the following guides (View – New Guide): vertical guides at 220 and 1180 pixels, and horizontal guides at 100, 140, and 440 pixels.

We’ll start with the featured area. Add a new layer (Layer – New) and set the foreground color to black (#000000). Using the rectangular marquee tool, select the featured area between the guides (as shown below).

Fill this selected area with black using the paint bucket tool.

Change the foreground to another color (it doesn’t really matter what) and select the rounded rectangle tool. Set the radius to 10 px.

Draw a rounded rectangle using the guides for the navigation menu just above the black area.

Set the foreground color to #8a090b and the background color to #630507. Double click on the shape layer in the layers palette to bring up the layer style options.

Click on “gradient overlay” and select the gradient that fades from the foreground color to the background color and check the “reverse” box so that the lighter shade is at the top.

Then click on “stroke” and set it to 1 px inside with the color #530304. Click Ok.

You should now have something that looks like this.

Now we want to move the shape layer from the rounded rectangle below the layer for the featured area that we filled with black. This will cut off the bottom of the rounded rectangle, so only the top corners are rounded.

Ok, now we’ll move on to the items in the header. For the title/logo we’ll be using the free font Walkway. I’m using 30 pt Walkway Bold in #8a090b and lining it up 20 pixels in from the left edge of the nav menu and featured area.

Over at the right side of the header we’ll create the login form for customers. The right edge of the login button will be 20 pixels from the right edge of the navigation menu and the featured area, and 10 pixels from the top of the canvas.

Add a new layer. Use the rectangular marquee tool to select and area that is 50 px wide and 20 px high. Set the foreground color to #333333 and use the paint bucket tool to fill the selection. Then use 12 pt Arial in #ffffff for the word “login.”

Right next to the login button we’ll create two fields, one for the user name and one for the password. Each field should be 130 px wide and 20 px high. Leave 10 px of space between the password field and the login button. In a new layer, use the rectangular marquee tool to create these boxes and fill them with #ffffff.

Set the foreground color to #959393 and select the pencil tool. Choose a square brush and set the diameter to 1 px. Use the pencil tool to add a one-pixel border around the outside of these form fields.

In that same shade of gray, #959393, add the words “username” and “password” to the two fields. I’m using 12 pt Arial.

Below the login we’ll create an area that shows how many items are in the shopping cart. We’ll be using the cart icon from the ecommerce icon pack by Iconshock that was released here at DesignM.ag a few months ago (designed by IconShock). You can download that icon pack, open the shopping cart icon and resize it to 35 px by 35 px. Select the file (Select – All) and copy it (Edit – Copy), and paste it (Edit – Paste) into our design. Use the free transform (Edit – Free Transform) to move it into place below the login button.

In 14 pt Arial, #000000 add the text “0 items in your cart.” That icon pack also contains a full cart that can be used in situations where the user has something in the cart.

That completes our work for the header.

Step 3: The Navigation Menu

Our navigation menu is going to include 5 items and we’ll be using borders to separate them. Each link will be 150 px wide. Add a new layer, set the foreground color to #530305 and select the pencil tool. Use the pencil tool to add a one-pixel border to the right of each link, every 150 pixels.

Next, change the foreground color to #b91c1e and add another one-pixels border just to the left of each of the dark borders that we just added. Here is a view of how it looks at 600%.

And here is what it looks like at normal size.

Add a new layer and set the foreground color to #530305. Use the pencil tool to add a one-pixel border to the bottom of the navigation menu. Here is a view at 600%.

Add text for the links using 14 pt Arial, #d8d8d7.

That completes the navigation menu, and here is what we have so far.

Step 4: The Featured Area

At the bottom of our featured area we will be creating a small space to promote specials or anything else that needs attention. Add a new layer and set the foreground color to #333333. Use the rectangular marquee tool to select the bottom 40 pixels of the featured area (40 px high, 960 px wide), and use the paint bucket tool to fill the selection.

In that area we’ll add text using 18 pt Arial in #ffffff and we’ll also add a shipping icon that also comes from the ecommerce icon pack. Open that icon and re-size it to 30px by 30px, then paste it in and move it (Edit – Free Transform) to the left of the text.

At the top of the featured area we’ll also create a sub navigation menu. Add a new layer and set the foreground color to #333333. Use the rectangular marquee tool to select an area right below the main navigation that is 960 px wide and 40 px high. Fill the selection with #333333 using the paint bucket tool.

Add some text for links using 14 pt Arial in #b9b8b8. The first link is 20 px from the left edge, which will line up with the content in the sidebar.

To the right of the sub navigation we want to create a site search. The search field and button will line up with the fields and button in the header for the customer login. Add a new layer and use the rectangular marquee tool to select and area that will be used for the search button. It should be 50 px wide and 25 px high. Use the paint bucket tool to fill it with #b9b8b8.

Then use the rectangular marquee tool to select an area that is 270 px wide and 25 px high and fill it with #ffffff. This will be the search field.

Set the foreground color to #959393 and use the pencil tool to give the search field a one-pixel border.

Add the word “search” in #333333 to the button, and add the words “enter the keyword or item # to search” in #959393 in the search field.

Change the foreground color to #555454 and use the pencil tool to apply a one-pixel border at the top and bottom of the sub nav, and also at the top of the “special” area.

I’m going to be using a stock photo from iStock and five icons from the Flavour Extended icon pack from Smashing Magazine. Here is the stock photo.

To start with, we’ll re-size the stock photo to 225 px in height, copy it, and paste it in. Move it all the way to the right edge. It has a black background, so there is no need to do any cropping or work with selections.

For the next section of text I will be using the free font Delicious. If you don’t already have Delicious, you can download it and add two lines of text in 36 pt #ffffff. The word “really” is in #b91c1e and italics.

Below that text I am pasting in five icons from Flavour Extended that represent some of the types of products that are for sale.

That completes our work for the featured area.

Step 5: The Content Area

Add a new layer and set the foreground color to #ffffff. Use the rectangular marquee tool to select the content area below the featured area (between vertical guides at 220 px and 1180 px) and use the paint bucket tool to fill the selection.

Add new vertical guides at 500, 520, 720, 740, 940, 960, and 1160 px. Add new horizontal guides at 460, 495, 535, 685, 795 and 945 px.

We’re going to display some popular products on the homepage. We’ll start by adding the text “Our Top Selling Products” in 18 pt Arial, #8a090b. The top of the text should line up with the horizontal guide at 460 px and the left edge should line up with the vertical guide at 520 px.

At the next horizontal guide we will add text that will allow visitors to choose how they want the products to be sorted, and aligned to the right will be text that allows them to move to another page or to see all of the top selling products on one page. This text is all 14 pt Arial, using #000000 and #8a090b for the colors.

I’ll be using some more stock photos here for the products. You can get the images if you wish from Fotolia and Stockxpert (1, 2, 3, 4, 5).

Each of our image thumbnails will be 200 px wide by 150 px high. So each stock image should be cropped and resized to match those dimensions. Then I will be adding a one-pixel border to each of the stock images with #d3cdb6. The one-pixel border is included in the dimensions, not added to it. So the photo is essentially 198 px by 148 px with a one-pixel border on all sides.

With all of the thumbnails prepared, you will just need to use the guides to help paste them in to the appropriate spot. There will be three columns on products and two rows. The guides form a grid to make it easy.

Use the rectangular marquee tool to select the first block in the grid.

Then copy one of the thumbnails that is 200 px by 150 px and paste it in to the selected area.

Here is what it looks like without the guides.

Now, repeat this process to select all 5 of the other blocks one-at-a-time and paste in the other product images.

Next, we want to add text for the product title, price and category. I’m using 14 pt Arial for all of this text, with the title and price in bold. The colors used are #000000 and #8a090b.

We’re going to use the rounded rectangle tool to create an “add to cart” button. Set the foreground color to #d8d8d7. Create a rounded rectangle (with 10 px radius) that is 150 px wide and 30 px high. Then double click on the layer in the layer’s palette and add a stroke that is 1 px, inside, #bcbcbb. Then add text in 14px Arial bold, #8a090b, and again grab the shopping cart icon that we used earlier. Re-size it to 25 px by 25 px and put it at the left side of the button.

Then add the button to the other 5 products. You can select the button and go to Edit – Copy Merged and the paste it in the other 5 spots.

Below the second row of products we want to repeat the text links for viewing other pages (aligned to the right) and to the left we’ll add the text “Showing Items 1 – 6 of 24.”

Step 6: The Sidebar

The sidebar will include some links to let visitors shop by brand as well as to shop for gifts in certain price ranges. To start with we’ll add the text “Shop by Brand” in 18 pt Arial bold, #8a090b. The links are 14 pt Arial, #000000.

Below that we’ll add “Shop for Gifts by Price” and several links, using the same text size and colors.

Step 7: The Footer

Below the bottom of the content area, allow 40 px of white space and use the rectangular marquee tool to select the area for the footer. Add a new layer and set the foreground color to #d8d8d7, the color of our background. Fill the selection using the paint bucket tool.

The last step is to add some text links in the footer using 14 pt Arial. Here is a look at the finished product (click the image to see in full size)

If you’d like, you can download the Photoshop file used for this tutorial, minus the stock photography. The stock photos cannot be re-distributed, but you can drop in your own photos or buy the ones  used in the post.

UPDATE: FS Web Solutions has created and posted a video tutorial for this design. See Designing an Ecommerce Website in Photoshop.