Create An eCommerce Landing Page In Adobe Photoshop

In this week’s tutorial we are going to create an eCommerce landing page using Adobe Photoshop. This tutorial is intended for new designers who are planning on designing an eCommerce template. So what are we waiting for? Ready your workspace and let’s get started.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1900px document in Photoshop.

Ruler Tool is very useful for this tutorial. Make sure that rulers and guides are turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

One thing important in using Ruler Tool is the Information Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panel at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide, but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background

As you can see in the full preview above, the template was divided into three backgrounds, first on the top which holds the logo, navigation and slider. Second a noise background that holds the products, and third on the footer area.

First Background: Using Rectangle Tool(U) color #b6c9c9 create a 100% by 600px. Download the pattern provided in the resource because we will be applying a pattern overlay to the shape we have just created.

Apply this Blending Option

  • Pattern Overlay

Second background: using the same tool create a 100% by 1010px shape.

Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #fff, #f2e9e9

  • Stroke: #c7c3c3

Let’s add a noise to this shape by going to Filter – Convert For smart filters. Again, go to Filter – Noise – Add Noise.

Third background: using the same tool fill the remaining area with #007573.

Apply this Blending Option

  • Inner Shadow: #000

  • Pattern Overlay

Result!

Step 3: Working on the Header

The header for this template will contain the logo, navigation links, buttons, search and shopping cart.

Logo

I used a font called Oswald which can be found in Google Fonts. Using Text Tool(T) 36pt place our logo in a separate word Phone & Shop. The distance will be 100px below starting from the top of the canvas and 20px from the left starting guide.

Phone: Apply this Blending Option

  • Gradient Overlay: #383e44, #5c636a

Shop: Apply this Blending Option

  • Drop Shadow: #000

  • Gradient Overlay: #f6f3f3, #fff

Result

Main Navigation

Notice our navigation has rounded corners on the upper left and right corners. First thing to do is select Rounded Rectangle Tool(U) and set the Radius to 10px. Create a 960px by 75px shape, place it 40px below the logo. Now that it is properly placed create another layer above it and fill the rounded corners in the bottom part. Once you have done it merge this two layers.

Apply this Blending Option

  • Gradient Overlay: #007472, #008e8b

  • Stroke: #007472

Result

Open up the Iconsweets icon set and grab the home logo and place it as shown in the screenshot below.

Apply this Blending Option

  • Drop Shadow: #000

  • Gradient Overlay: 0% #fff, 20% #dbdada, 40% #fff, 60% #dbdada, 80% #fff, 100% #dbdada

Result

Next we will add our Dividers. Select Line Tool(U) and create 2 1px lines. First line color will be #007472 and #009c9a for the second line. Place it 20px from the right of the logo.

Next is adding our navigation links. For this tutorial the links are BLACKBERRY, HTC, SAMSUNG, SONY ERICSSON, IPHONE. Font will be Oswald 15pt color #fff. The distance of each link will be 20px left and right from the Separators/ Dividers. I will leave it up to you to measure it using Ruler Tool(I). Also, add the same Drop Shadow as we did in our home logo.

Last thing we need to make is the hover state. We will just make an small arrow head facing the navigation links, to do this create a shape as shown in the screenshot below using Pecil Tool(B) in a separate layer.

Search

Select Rounded Rectangle Tool, set the Radius to 20px and also make the fill color to #fff. Once it is set create a 180px by 25px shape as shown in the screenshot below.

Apply this Blending Option

  • Inner Shadow: #007472

Label the search bar with text search phones using Text Tool. The text format will be Arial 12pt color #009c9a. Then lastly open up the search icon, resize it and place it as shown in the screenshot below. Search icon color will be #007472.

Top Navigation (Register & Login buttons)

For the text links I used Helvetica 12pt color #007472. Add it using Text Tool. Next select Rounded Rectangle Tool(U) set the Radius to 20px create a two 80px by 25px shape and label it with text Helvetica 12pt color #fff.

First Shape: Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #e5a61f, #fbb829

  • Stroke: #d69d23

For the label text add a 1px Drop Shadow 30%.

Result!

Second Shape: Apply this Blending Option

  • Inner Shadow: #fff

  • Gradient Overlay: #2792c3, #34abe1

  • Stroke: #2792c3

For the label text add a 1px Drop Shadow 30%.

Result!

Next add the Cart icon, so go ahead and place it as shown in the screenshot below. For the text I used Oswald 14pt color #383e44, #fff and I added a Drop Shadow 30% to the #fff text.

Step 4: Working on Slider

This slider will contain a slideshow image for a specific post with title, description, price, and a button to link to that specific post. This slideshow will have 3 tabs for the purpose of navigating and switching specific posts. So let’s get started!

Slider Preview

Start by creating a 660px by 355px shape using Rectangle Tool(U).

Set the Foreground color to #c2e7e7. Next using Rectangular Marquee Tool(M) create a 460px by 130px selection. Next, select Gradient Tool(G) and set the gradient to foreground to transparent. Once it is set, fill the slection.

We will be adding title and description to the highlighted part using Text Tool(T). I used Helvetica Condensed 48pt color #383e44 for the Title and Helvetica Light 14pt color #50565c for the description.

For the price text I used Helvetica Ultra Light 48pt color #fbb829. For the view details button create a 140px by 45px shape using Rectangle Tool(U) and apply the same blending option as we did in the sign in button. The label text size will be 16pt.

Lastly you will need to add a sample image preview.

Tabs

Using Rectangle Tool(U) create a 3 300px by 122px shape as shown in the screenshot below. For the first shape make it #fff and for the two remaining shape make it #e9e7e7.

Now we will be adding lines using Line Tool(U) to make the tabs looks solid and cool. So using Line Tool(U) create a lines as shown in the screenshot below. Line color I used is #d9d2d2 and #f5f5f5.

Notice in the preview of the slideshow in the first tab there is an arrow head indicating it is the active state. To do that select Pencil Tool(B) set the color to #d9d2d2. Refer to the screenshot below for you to know how I did it.

Next we will fill the tabs with text and the phone Icon. Download phone icons from the resource I provided and place it as shown in the screen below.

For the active state text I used Helvetica Bold 16pt color #383e44 for the title and Helvetica Thin 13pt color #009c9a for the description.

For the non active tabs I used the same size and color but for the description text color will be #50565c.

Text: Apply this Blending Option

  • Drop Shadow: #fff

Result!

Shadows & Highlights

Create a selection as shown in the screenshot below and fill it with Linear Gradient foreground to transparent.

Mask the layer by clicking the mask icon from the layers panel. Now using Brush Tool paint the top area to make the shadow fades. Then lastly you will need to set the Opacity to 20%.

Duplicate the shadow layer and place it on the other side. Next thing, make a selection as shown in the screenshot below and use Radial Gradient to fill it with #fff gradient. Then, change the Blend mode to Soft Light.

Step 5: Working on Featured Product

We are going to divide 960px into 4 columns with 20px distance with each column from the right. Refer to the screenshot below for the guide lines measurements.

The first column will be for our sidebar and the rest will be the width of the featured products. The 45px measurement will be the height of the tabs. Using Rounded Rectangle Tool(U) set the radius to 10px and create a shape as shown in the screenshot below.

For the first tab you will need to duplicate the layer and cut out the not including area. Refer to the screenshot below.

Apply this Blending Option

  • Inner Shadow: #000

For the base layer apply the same blending option as we did in our main navigation. Also, font style and dividers are the same.

Lastly add a 3px border on the bottom color #fbb829.

Next we will create the base layer to hold the featured products. Select Rectangle Tool(U) create a 715px by 300px shape.

Apply this Blending Option

  • Stroke: #d9d2d2

  • Gradient Overlay: 0% #e9e7e7, 40% #e9e7e7, 50% #fff, 60% #f3f3f3, 100% #ffffff

Result!

Using Line Tool(U) add two 1px lines as shown in the screenshot below. Top line color #d9d2d2, bottom line color #f5f5f5.

Place a phone icon at the center in the second column and behind the phone create a selection at the very bottom as shown in the screenshot below and fill it with #000. Once you have fill it go to Filter – Blur – Gaussian Blur 1px.

Next create a 115px by 30px shape using Rectangle Tool. Apply the same blending option as we did in our register button. Refer to the screenshot below for more info of making the button.

Using Text Tool(T) add the name of the product. Text format will be Helvetica 14pt color #383e44. Place it as shown in the screenshot below and once you have done it group all the layer and duplicate it two times and place it accordingly for the third and fourth columns.

Next we will create a horizontal scroll. Using Rounded Rectangle Tool(U) set the radius to 20px and create a shape as shown in the screenshot below.

Apply this Blending Option

  • Drop Shadow: #fff

  • Gradient Overlay: #dbd8d8, #f5efef

  • Stroke: #d9d2d2

Create another shape using Rounded Rectangle Tool(U) as shown in the screenshot below. Apply the stroke as we did in the first shape.

Result

Step 6: Working on Products List

In this part I will not go on to detail because all styles here are the same on the featured product section. I will just walk on to an overview on how I did it.

Header Part

In here I created 45px of height shape using Rounded Rectangle Tool(U) and applied the same blending option as we did in main navigation & tabs. Text format are the same and styles. Notice at the right side there is an arrow and numbers. For the arrow I created this using Pencil Tool(B) and applied the same drop shadow as we did on every text. For the active number I used color #fbb829. Also for the distance from featured product & product list is 20px.

In this part all styles are copied from the featured product, so I will leave it up to you. height of each product list will be 250px. I moved the button on the right part and added a price on the left part. Distance from the boundary box will be 20px. The text format for the prize is Helvetica 18pt color #fbb829.

Step 7: Working on Sidebar

Sidebar will contain a Category list & What’s Hot list. Again I will not go on to detail in doing this Il just walk you through it.

Categories

In the header part size of the header is 45px, the same text style and format.

The height of the base will be 215px and I apply 1px stroke color #d9d2d2

Next I added a the list of categories using Text Tool(T). Text format will be Helvetica 15pt color #50565c. I also make a divider using Line Tool(U) color ##d9d2d2. The distance will be 15px top and bottom for the text. Just refer to the screenshot below.

Next I added a bullet using Ellipse Tool(U) fill color #d9d2d2.

Apply this Blending Option

  • Inner Shadow: #000

Result!

What’s Hot

In this part it is just a copy of categories section and I added a phone icon and price. So I will leave it up to you. Text, color, distance will be the same.

Step 8: Working on Footer

Footer section will be divided into 5 columns this will contain News letter, Account Info, Shipping Info, Quick Links, and Follow us.

News Letter

Using Text Tool(T) add the following text as shown in the screenshot below.

Using Rectangle Tool(U) create two 205px by 30px shape with a distance of 10px and label it “Name & Email” using Text Tool(T). Text format will be Helvetica 13pt color #009c9a.

Next grab a copy of sign in button and uncheck the stroke from the blending options. Change the label to Register and place it as shown in the screenshot below.

Account Info, Shipping Info, Quick Links

For the header I used the same format as we did in the news letter. The links will be Helvetica 13pt color #fff. Dividers distance for each block is 25px and the dividers color is #009c9a.

Follow Us

In here still the same header format and then you will need to download the social icons and place them accordingly.

Social Icons: Apply this Blending Option

  • Drop Shadow: #000

And finally we’re done. I hope you learned something from this tutorial and may this tutorial help you in your future projects. For beginning designers I hope you followed this and if you have something to ask just drop it below. Thank you for reading and godless everyone. :)

Final Preview

Download PSD file here.

Michael John Burns

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. webo says

    Hi, it can be used for commercial? for example for some clients? Or if I will code it to prestashop, can I sell it as template for prestashop? in my server only…
    thanks for info…