Follow us

Friday, January 14, 2011

Create eCommerce Web Button by Photoshop



I am Khalilur Rahman from Dhaka, Bangladesh and I am newbie in web elements designing. All of you know that the Photoshop is the best way to design web elements. There are too many methods to design web button but I would like to welcome you to come and join with us and also enjoy – “how it is easy and effective”.

First Step
We will create an image size 450px wide and 200px high.
-         Click on round rectangular tools and draw rectangular like this (you can choose any color as you like).
-         Keep background transparent.
Now we will apply the bending options

Apply Drop Shadow effect
Go to layer style from layer menu and click on Drop Shadow
Set option as follows:
>   Opacity: 50%

>   Angle: 135
>   Distance: 3px
>   Size: 5px
Now set the Gradient Overlay Option just likes:
> Opacity: 30%
> Scale: 80%

2nd Step

In this point you have your blending effect. Now we are ready to create a layer and give the name whatever you like. We will apply the overlay style here. But before that hold the control key and click on our first layer – it become selected.

Go to select menu > Modify > Contract and put the value 4 pixels. Our image will appear like this.

3rd Step

Set foreground white and background gray color and fill it by gradient (foreground to background) from top to bottom; it will like this –

 4th Step

Friends, let’s go to the blending option and put layer mode screen, set opacity 58% (I given) or whatever you like.
You are just one step far from your desired button

Final Step

It is time to add text on our love button created by you and me. It should be like this

This is plain text button – now we are ready to ornament it through applying some blending options.

Set Blending Options

> Click on type layer
> Go to layer menu > Drop Shadow > Opacity – 65% > Angle – 135 with selecting global light.
> Distance – 5
> Spread – 36
> Size - 5
* Type layer should be selected

Set Stoke Option
> Select type layer
> Set size – 4, Opacity – 100, Color - #94DCE3

Here is your web e Commerce button!!!!!!!!


Friends, this is very easiest way to create web eCommerce button and you can create main Navigation bar, Left or Right navigation bar as well.

Please comment on it – no matter whether it is good or not good.

If you need more clarification on this process pls. don’t be hesitate to mail me as or

Thank you


Enhanced by Zemanta


Anonymous said...

this is very nice tutorial but i need some more clarifications

Free link exchange