Since we’re focusing on e-commerce websites this week, I thought it would be good to do a tutorial for designing a layout for an online shop in Photoshop. At the end of the post you will be able to download the original PSD file in case it would be helpful. Throughout the post, the screenshots of the design in progress can be seen in full size by clicking on the image.
Here’s what we will be designing (click to see in full size):
Step 1: Create the document
In Photoshop, create a new document (File – New) that is 1000 pixels wide and 1030 pixels in height.
Step 2: Create the navigation menu
Before starting with the title/branding area, I’m going to work on the navigation menu first, because it will help to see the space that is available for other items in the header.
To create the navigation menu, use the rectangular marquee tool to select an area that is 40 pixels in height and covers the width of the page. The top of the navigation menu will be 100 pixels from the top of the page. Use the paint bucket to fill the selection with #1e4a93.
Because our document is 1000 pixels wide and we will be designing a layout that is 960 pixels wide, there will be an extra 20 pixels on each side. In addition, we’ll be adding 20 pixels of padding, so the text of the first link in the navigation menu should start 40 pixels from the left of the document. I set a vertical guide at 40 pixels to help line up the text. I’m using 16pt white Arial text.
In a new layer, use the pencil tool to add 1 pixel borders (#2b5dae) to the links.
Step 3: Design the header
Now that the navigation menu is compete, it will be a little bit easier to space things in the header. For the title of the site I’m using the Trajan Pro font in 30pt.
Create a new layer. In the top right of the header we will be adding a search box. The search field and the button will both be 20 pixels in height, and 10 pixels from the top of the page. The right side of the button is lined up with a vertical guide at 980 pixels.
Use the rectangular marquee tool to create a button and fill the area with #eeb929. Then give the button a 1-pixel border using the color #d59d05, a darker orange. The search field is using a 1-pixel outline in #dfdddd.
We’ll then add the text “search” on the search button with 12 pt Arial in white (#ffffff). And we’ll add the text “keyword or item #” to the search filed in 12 pt Arial, #626262.
Lining up with the search field, we’ll add two links for “my account” and “customer service.” I’m using 12pt Arial in black (#000000).
Create a new layer. Next, we will be adding an area to show what is in the visitor’s shopping cart. We’ll create a text box and line up the text with the right edge of the search box and in the middle of the area between the search field and the navigation menu.
The word “Shopping Cart” is in 14pt Arial in the color #0f2e62. The second line is 12pt Arial in black.
Next, we will be adding a shopping cart icon. The icon is a free one that is designed and distributed by Bartelme Design.
To finish off the header area, we will be creating a horizontal bar that can be used to promote specials or things that may change from time-to-time. We will be using it to promote an email list that visitors can sign up to if they want to get notification of promotions.
To create the bar, first add a new layer, the use the rectangular marquee tool and select an area that is 40 pixels in height and covers the full width of the page. Then use the paint bucket tool to fill it with #d6d5d5.
Then use 14pt black Arial text to enter a message to encourage visitors to subscribe to the email list. The text I’m using is “Get sales and promotional information sent straight to you by email. Enter your email address to subscribe.”
Next to the text, use the rectangular marquee tool to create a field to enter the email address and the sign up button. Both are 20 pixels in height, which leaves 10 pixels from the top of the gray bar and 10 pixels from the bottom of the gray bar. The email field is white with a 1-pixel border in #bdbcbc. The “sign up” button is #eeb929 with a 1-pixel border in #d59d05. The “sign up” text is 12pt Arial in white. I’ve also created a 1-pixel bottom border on the gray bar in #bdbcbc.
Step 4: Add the sidebar
We’re going to use a width of 250 pixels for the sidebar that will contain some links for shopping by brand. To create the sidebar, I have used vertical guides at 20 pixels and 270 pixels. Then, in a new layer, use the rectangular marquee tool to select the area between the guides for the sidebar, and fill the selection with #f1f1f1 using the paint bucket tool.
Next, we will create a text box with 20 pixels of space from the edges of the sidebar, and enter the text for the sidebar. I’m using 14pt Arial for all of the sidebar text. “Shop by Brand” is in bold black, and the links are in regular (no bold) #0f2e62.
I’ve set the leading to 30 pixels for the text box.
Then add one-pixel borders to the left and right of the sidebar using the pencil tool and the color #dfdddd (I prefer to do the borders in a new layer in case anything gets messed up). Between each link in the sidebar we’ll create a two-pixel border to give a slight beveled look. The top pixel border will be using the color #dfdddd, and the bottom pixel will be using #f9f9f9, a light gray that is almost white. I’ve also used the pencil tool for these borders.
That completes the sidebar.
Step 5: Create the featured content area
The homepage of many e-commerce sites include an area for a slider that can be used to display the most current merchandise, or whatever they want to get the most attention. So we will be designing an area that can be used for this purpose. We will be including a photo, some text, and links that the visitor could click to move to the another item.
Start by setting vertical guides at 290 pixels and 980 pixels. Then set horizontal guides at 200 pixels and 620 pixels.
Create a new layer and use the rectangular marquee tool to select the area between the guides. Fill this selection with #f1f1f1.
Set additional vertical guides at 625 and 645 pixels, and then set new horizontal guides at 640 and 903 pixels. This will create a row of two rectangles below the big featured area. Select each area with the rectangular marquee tool and fill with #f1f1f1.
After you’ve filled all three rectangles with color, clear the guides and use the pencil tool to give a one-pixel border to each rectangle with the color #dfdddd, the same color that was used for the borders on the sidebar.
Now we will be adding some photos for these areas. In the large rectangle I will be using a photo that I purchased from iStockphoto. You can get it here if you like, of just use a different photo. I’ve cropped and sized the photo so that it is 670 pixels wide and and 400 pixels high. Once you have an image in these dimensions, paste it in the middle of the featured content area that we created with the gray color.
Next, we will be adding some text on top of the photo to promote the new season’s items. I’m using the Century font with the first line being in 30pt and the bottom two lines in 18pt. The orange color for the first line is #eeb929, and the other two lines are white (#ffffff). You can give the text a drop shadow by double clicking on the layer in the layers palette and selecting “drop shadow.” I’ve changed the settings for distance and size to 2 pixels each.
To create the links for the other items in the featured area, use a circle brush (I set it at 30 pixels in diameter) and create three circles. The first one is #eeb929 (for the active item) and the other two are white. Then double click on the layer in the layers palette and select drop shadow. I’ve also used 2 pixels for the distance and size of this drop shadow. Then put text on top of the circles for the numbers 1, 2, and 3.
Below the featured area we will be adding an image for men’s clothing and an image for women’s clothing. Again, I am using images that I purchased at iStockphoto (here and here). I’ve re-sized and cropped each of these pictures to be 315 pixels wide and 243 pixels high to fit in the area that we already created for them. Paste the images in their spots and lay text on top of each photo, I’m using 20pt Century in black (#000000).
Below each of these photos we will be adding a few links. I’m using 14pt Arial in #0f2e62.
Step 6: Create the footer
The last part of the design will be the footer. In a new layer, use the rectangular marquee tool to select the area for the footer and fill it with #1e4a93. Then add some basic text links. I’m using 14pt Arial in white for the links.
The End Result:
Here is the final design (click to see in full-size)
If you’d like to get the original PSD file (minus the stock images, which I cannot re-distribute) to help follow along in the tutorial, it can be downloaded in a zip file here.
Other Posts from E-Commerce Week:
- E-Commerce Week Giveaway! 6 Prizes for Online Shops
- E-Commerce Web Design Toolbox
- 40+ Magento Themes for E-Commerce Websites
- 15 Resources for Setting Up an E-Commerce Site with WordPress
- 30+ CRE Loaded Templates
- “Add to Cart” Button Showcase – Vandelay Design
- 20 Inspirational, Clean E-Commerce Website Designs – Vandelay Design
- 9 Characteristics of Well-Designed E-Commerce Websites – Vandelay Design