3,741 views

You have seen a lot of online shopping store websites with cart widget counter template on each of them, now, you are going to create one for your self. In this Photoshop Tutorial, using some basic shape tools and color gradients, you will learn how to create a Cart Widget Counter Template.

By shzad1, on August 10, 2012, under Photoshop Tutorials

Final Result Preview

 

Step 1

Let’s start. You have to start a new file in Photoshop having 1280x1024 pixel resolution with a white background. (Go to File tab in Menu bar > New and then enter width, height, resolution, color mode,and background contents) Now pick the Rounded Rectangle Tool (U) from the tool window and make a proper shape with radius to 20 pixels and fill it with #232323 color like what was shown below.

 

Step 2

Select the layer from layer pallete and make a duplicate of it and fill with #404040 color.

 

Step 3

But it is still not like a Cart widget Counter so you have to work on it. Now select the layer at top and pick the Rectangular Marquee tTool (M) and make a selection as shown in the sample picture. Delete this particular selection of the layer so that the dark color of the backward layer comes out.

 

Step 4

Select the front layer again and go to Layer > Layer Style > Drop Shadow. Drop shadow makes your layer more realistic. Now click on the new layer icon at the bottom of the layer palette and create a new layer. Then pick the Rounded Rectangular Marquee Tool (M) and make a selection as shown in the sample picture. Fill it with white color.

 

Step 5

Now to make the above layer as a button, open layer style by double clicking on the layer in layer palette and click the check box and choose Gradient Overlay. Then set the Gradient Overlay as it is shown below.

 

Step 6

In the next step to create check out pannel create a new layer and again pick the Rounded RectangularMarquee Tool (M) then make a selection as shown in the sample picture, be careful about its height that should be same as the previous one so that it looks good.

 

Step 7

To make the checkout pannel as a button do the same like as previous one. Open layer style by double clicking on the layer in layer palette and click the check box and choose Gradient Overlay. Then set the Gradient Overlay as it is shown below. You can fill it with any suitable color you want.

 

Step 8

Now to create the triangular part of Cart Widget Counter pick the Pen Tool (P) and make a triangularshape and fill it with color #404040 which is same as the layer two. For the second one make a duplicate of this layer and place it at the proper place as shown below. You should be careful, there is no gap in between the second retangular layer and these two layer. Now merge these two layer with the second layer. Now to make the horizontal partition at the middle use Rectangular Marquee Tool (M) then make a selection and fill with black color as shown in the sample picture.

 

Step 9

Now to give a complete look select Text Type Tool (T) and type require text as shown below.

 

Final Result

You now have the design completed, you can use this for your ecommerce website, or on any website that has a shopping cart.