Website Design Tutorial for Shopping Cart with Source PSD

Adobe Photoshop, Tutorials

e-commerce-website-source

Today we’re offering (Inspiration from HV-DESIGNS)  a complete website design of Shopping Cart with source of Adobe Photoshop PSD file, using very much professional color themes which everyone need in own e-Commerce based websites, hope you like and leave your comments for more professional work.

To start were going to need a rather 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.

step1

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

step2

step3

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

step4

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

step5

Once created add these layer styles.

step6

step7

You should have impressive like this.

step8

With the rectangular marquee tool once again produce another rectangle beneath 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 superimpose.

step9

You should have something like this.

step10

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

step11

Replacement your rectangle, then hide the layer, we’ll use this auxiliary 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 assortment on the same layer.

step12

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

step13

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

step14

Do the same with the other side, hopefully if done properly 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.

step15

step16

step17

Place the tabbed button onto the latest rectangle you created.

step18

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

step19

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

step20

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

step21

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

step22

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

step23

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

step24

In the space I’ve left on the right side of the tabbed navigation I’ve added a uncomplicated search field, which looks like this.

step25

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

step26

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

step27

step28

step29

step30

The title now looks like this.

step31

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

step32

step33

You should have something like this.

step34

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.

step35

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.

step36

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

step37

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

step38

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

step39

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

step40

As mentioned above the space in the middle is for out featured items. Long-lasting with the theme, I’m going to use a greenish colored rounded rectangle. Comparable colors to our website title. Inside the box add some uncomplicated featured items.

step41\

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

step42

Your final product should look something like this.

finished

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author

Comments and Discussions

  1. Website Design, 1 July 2009

    I really liked your blog! I have bookmarked it! Keep up the good work!

  2. Hanna, 19 July 2009

    Good point! Thanks!

  3. St. Louis Programmer, 8 November 2009

    Hello, I found your blog in a new directory of blogs. Your blog looks good!

About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News