Design an effective Pricing Table in photoshop

Many designers, webmasters and other people creating websites don’t see the importance of a well designed Pricing Table for their products.

Admit it, if you come across a service on the internet with a sleek web layout and sexy pricing tables you want to buy their service at least twice as fast compared to a boring pricing table that just is text and some lines.

So here we’re going to teach you how to create such table, with these techniques you’ll be able to create tons of your own combination and modifications.

Pricing-table-tutorial

Step1

Create a new document of 272px by 257px or something close to it.

Step2

Take the Rounded Rectangle Tool and set its radius to to 5 px.
Now draw a rectangle as big as the document, it should hit all edges (most Photoshop versions will make the edges snap to the right place).

Step3

Create another document of any size, as long as it’s bigger. I used 930px by 490px.
With both documents open, drag the rectangle layer of the first document to the second one.

The rectangle should be on both documents now.
We will stop using the first document and start stylizing the menu on the bigger document.

Step4

Add the following Layer Styles:

Drop Shadow:
Blend Mode: Multiply
Color: Black
Opacity: 75%
Distance: 0px
Size: 16px

1

Color Overlay:
Color: #ebebeb

3

Stroke:
Size: 1px
Color: #c9d692

4

Step5

Create a new layer on top of the rectangle and pick the Brush Tool.
Set the color to white, size to 350px and hardness to 32%

5

Now draw a big white dot in the area of the red line below. Just make one click if the bursh is positioned so it would hit this red circle.

6

You should have something like this right now:

7

Step6

Duplicate the rectangle layer and drag it to the top.
With the Rectangular Marquee Tool select the whole bottom part, so we only keep a part like this selection:

8

Now take the Eraser Tool and click on the document so it comes up with a warning window, just click ok. Now erase all the selection (the bottom part). This is faster if you make the eraser brush bigger (right click).

Step7

We’re going to add some layerstyles to this top bar that remains.

Inner Shadow:
Blend Mode: Normal
Color: White
Opacity: 66%
Angle: 90° (deselect Use Global Light)
Distance: 2px
Size: 1px

9

Gradient Overlay:
#97b909 to #beec00

10

Result of the styles:

11

Step8

Create a new layer BELOW the top bar layer we just edited.
Take the Rectangle Tool and draw a box that just overlaps the top bar (you wont see it overlap, but the edge indications will show you) and so it doesn’t meet the middle of the big rectangle. It’s really important it goes a little beneath the top bar.
Something like this should work:

13

Add the following layer styles:

Drop Shadow:
Blend Mode: Normal
Color: #9abc09
Opacity: 95%
Angle: 90°
Distance: 1px
Size: 0px

14

Also add a Color Overlay:
Color: White
Opacity: 25%

15

And add a Gradient Overlay:
From #9ec208 to #b8e501

16

Step9

Duplicate the layer with the big white and soft dot we made, make sure the layer is on top of this new rectangle and lower it a little. Also make the Opacity 25%:

17

Step10

The frames are ready now, we just need to add the content and a signup button.
Let’s start with the text at the top bar.

It might come in handy to have a Guide right now, click on the first layer (the rounded rectangle) and press V so it’s moveable. Now from the rulers at the side, (View>Rulers) drag one to the middle nob.

18

Now pick the Text Tool and create a type field in the middle of the top bar and type something with the following settings:

19

Also add the following Layer Styles:

Drop Shadow:
Blend Mode: Normal
Color: White
Opacity: 75%
Angle: 90° (disable Use Global Light)
Distance: 1px
Size: 0px

20

Inner Shadow:
Opacity: 48%
Angle: 90° (disable UGL)
Distance: 1px
Size: 1px

21

Color Overlay:
Color: #81a000

23

Result so far:

24

Step11

Create new layer all the way on the top and pick the Text Tool.
Get some text on it with the following settings:

26

Make it positioned at the left top of the rectangle. It should be placed like this:

25

Let’s add some layer styles on this:

Drop Shadow:
Opacity: 34%
Angle: 90° (disable UGL)
Distance: 2px
Size: 2px

27

Gradient Overlay:
From #e6e6e6 to #f5f5f5

28

Stroke:
1px
Color White

29

Result of it:

30

Step12

We’re going to add a price too and do that with the following text settings:

31

Type some price and apply these Layer Styles:

Drop Shadow:
Opacity: 43%
Distance: 1px
Size: 1px

32

Color Overlay:
Color #efefef

33
34

Step13

Now in the White/Grey area you can add 3 features of your product.
Use next settings:

35

Type 1 feature and place it just a little bit the right, so not exactly the middle.

36

Now Duplicate the layer and with your document zoomed at 100% press shift+down arrow 4 times.
Repeat this proces for the 3rd feature line.

37

Step14

Pick the Custom Shape Tool and make sure all shapes are visible (use the small triangle in the pick menu).
Take the rounded triangle shape. (second last one on the image below).

38

Draw such small triangle on a new layer and use the color #c3c3c3 for it.
Turn it 90° so it points to the right and I also recommend making it less wide (just drag the side nob).

Place that triangle next to the text and move it 4 shift times down again, like in the previous step.

39

Step15

The last thing we need to do is creating a Sign Up button.
Pick the Rounded Rectangle Tool and draw a small rectangle, the size will be adjusted later on. Place it in the middle (horizontally) and at the bottom (vertically).

40

Now add these styles to it:

Inner Shadow:
Blend Mode: Normal
Color: White
Opacity: 75%
Angle: 90° (disable UGL)
Distance: 2px
Size: 1px

41

Inner Glow:
Blend Mode: Normal
Opacity: 60%
Color: # deff5c

42

Gradient Overlay:
From # 96b901 to # beec00

43

Stroke:
Size: 1px
Opacity: 50%
Color: #8ca905

44

Result:

45

Step16

Now just add the “Sign Up” text on top of it with the following settings:

46

Make the color be # 5f7600

Adjust the button size accordingly.

Also add a Drop Shadow one more time:
Blend Mode: Normal
Color: White
Opacity: 85%
Distance: 1px
Size: 0px

47

That’s it! You will now have something like this table:

49

Feel free to let your creativity flow and add some other things, I came up with this:

1,017 Downloads