Design an effective Pricing Table in photoshop

4 March 2011 by Twistereli GUI, photoshop, templates, web layout Many designers, webmasters and other people creating websites dont 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 were going to teach you how to create such table, with these techniques youll be able to create tons of your own combination and modifications.

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 its 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

Color Overlay: Color: #ebebeb

Stroke: Size: 1px Color: #c9d692

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%

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.

You should have something like this right now:

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:

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
Were 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

Gradient Overlay: #97b909 to #beec00

Result of the styles:

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 doesnt meet the middle of the big rectangle. Its really important it goes a little beneath the top bar. Something like this should work:

Add the following layer styles: Drop Shadow: Blend Mode: Normal Color: #9abc09 Opacity: 95% Angle: 90 Distance: 1px Size: 0px

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

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

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%:

Step10
The frames are ready now, we just need to add the content and a signup button. Lets 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 its moveable. Now from the rulers at the side, (View>Rulers) drag one to the middle nob.

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

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

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

Color Overlay: Color: #81a000

Result so far:

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

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

Lets add some layer styles on this: Drop Shadow: Opacity: 34% Angle: 90 (disable UGL) Distance: 2px Size: 2px

Gradient Overlay: From #e6e6e6 to #f5f5f5

Stroke: 1px Color White

Result of it:

Step12
Were going to add a price too and do that with the following text settings:

Type some price and apply these Layer Styles: Drop Shadow: Opacity: 43% Distance: 1px Size: 1px

Color Overlay: Color #efefef

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

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

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.

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).

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.

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).

Now add these styles to it: Inner Shadow: Blend Mode: Normal Color: White Opacity: 75% Angle: 90 (disable UGL) Distance: 2px Size: 1px

Inner Glow: Blend Mode: Normal

Opacity: 60% Color: # deff5c

Gradient Overlay: From # 96b901 to # beec00

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

Result:

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

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

Thats it! You will now have something like this table:

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