Shopping Cart Design Mockup

Welcome to another tutorial at hv-designs, today we’ll be mocking up a shopping cart design called shop smart.

To start were going to need a fairly big canvas, create a new document 950 x 1100 fill your background layer with the color #f8f8f8. Select the rectangular marquee tool then create a rectangle at the top of your canvas. The rectangle should be the width of your canvas and about 120pixels in height.

Step 1

Add these layer styles to the rectangle to complete the effect.

Step 2

Step 3

Underneath the stroke on the rectangle create a 1 pixel line all the way across the canvas.

Step 4

Underneath the white line create another rectangle but on a much smaller scale. Fill the rectangle with any color.

Step 5

Once created add these layer styles.

Step 6

Step 7

You should have something like this.

Step 8

With the rectangular marquee tool once again create another rectangle underneath the one you just created, the rectangle should be the width of your canvas and about 65pixels in height. Fill the rectangle with any color then add this gradient overlay.

Step 9

You should have something like this.

Step 10

Now select the rounded rectangle tool and create a rectangle any where on your canvas. Ive used a radius of 15pixels for my rectangle, this will give the rectangle some nice rounded corners.

Step 11

Duplicate your rectangle, then hide the layer, we’ll use this spare rectangle in a minute to make our tab’s. Select the rectangular marquee tool and create a rectangle over the top of the bottom of the rounded rectangle. Fill the selection on the same layer.

Step 12

Unhide your duplicated rectangle then add a color overlay in any color, place the duplicated rectangle next to its orginal.

Step 13

Select your duplicated layer whilst holding down the CTRL key on the keyboard. Make sure the orginal layer is still selected in the layers window. Hit the delete key then hide your duplicated rectangle. Should have something like this.

Step 14

Do the same with the other side, hopefully if done correctly you should have a tab shaped rectangle. You can resize to how ever big you want using “CTRL + T”. Add these layers to your tab shape.

Step 15

Step 16

Step 17

Place the tabbed button onto the latest rectangle you created.

Step 18

Duplicate your tab as many as needed, change the color of the duplicated ones to something darker and remove the drop shadow from the layer styles.

Step 19

Underneath the tabs add a white rectangle, overlap the tab’s by 1 pixel, which should hide the stroke at the bottom of the tabs.

Step 20

At the bottom of the white rectangle add two 1 pixel lines on top of each.

Step 21

Using the rectangular marquee tool create a black rectangle over the darkest tab’s but underneath the first tab.

Step 22

Make sure the black rectangle spans the whole width of the canvas. Set the black rectangles opacity to about 2%.

Step 23

You can now label your tabbed area, in the white area underneath add a second navigation.

Step 24

In the space ive left on the right side of the tabbed navigation ive added a simple search field, which looks like this.

Step 25

In the header part of the layout add your website title and slogan.

Step 26

On the website title ive got two words, shop and smart. To the first word im going to add some layer styles.

Step 27

Step 28

Step 29

Step 30

The title now looks like this.

Step 31

To the second word “shop” im going to add exactly the same styles part from the gradient overlay and stroke will change.

Step 32

Step 33

You should have something like this.

Step 34

On the right side of the website title, add a simple shopping basket area. Ive used the rounded rectangle tool and an icon from dryicons.

Step 35

were now going to create our shopping content boxes. Using the rounded rectangle tool draw out a rectangle on the left. Add a dark grey stroke to the rectangle.

Step 36

Over the top of the rectangle add a dark area for our content box title. Using a subtle gradient.

Step 37

Where the bottom of the dark area ends add a 1 pixel line same color as your stroke.

Step 38

Inside your rectangle add a list of items with some nice bullet points, divide each item in the list with a seperator.

Step 39

Using the methods mentioned above create more content boxes and product items, here is what ive came up with. Ive left a space at the top in the middle for some featured items.

Step 40

As mentioned above the space in the middle is for out featured items. Continuing with the theme, im going to use a greenish colored rounded rectangle. Similar colors to our website title. Inside the box add some simple featured items.

Step 41

Finally for the footer i duplicated our header, resized it in height, then added some simple footer information.

Step 42

Your final product should look something like this.


All done hope you enjoyed this tutorial, dont forget to subscribe via RSS and twitter, your help and support is much appreciated.