Design an Effective Pricing Table in Photoshop

8/6/2019 Design an Effective Pricing Table in Photoshop

1/32

Design an effective Pricing Table in

photoshop

4 March 2011by 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 thatjust is text and some lines.

So here were going to teach you how to create such table, with these techniques youll be ableto create tons of your own combination and modifications.

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

Step2
http://www.tutorialstag.com/author/twistereli/http://www.tutorialstag.com/tag/guihttp://www.tutorialstag.com/tag/photoshop-2http://www.tutorialstag.com/tag/photoshop-2http://www.tutorialstag.com/tag/templateshttp://www.tutorialstag.com/tag/templateshttp://www.tutorialstag.com/tag/web-layouthttp://www.tutorialstag.com/tag/web-layouthttp://www.tutorialstag.com/tag/guihttp://www.tutorialstag.com/tag/photoshop-2http://www.tutorialstag.com/tag/templateshttp://www.tutorialstag.com/tag/web-layouthttp://www.tutorialstag.com/author/twistereli/


2/32

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: MultiplyColor: Black

Opacity: 75%

Distance: 0pxSize: 16px


3/32

Color Overlay:

Color: #ebebeb


4/32

Stroke:

Size: 1px

Color: #c9d692


5/32

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.


6/32

You should have something like this right now:


7/32

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/32

Now take the Eraser Tool and click on the document so it comes up with a warning window, justclick 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: WhiteOpacity: 66%

Angle: 90 (deselect Use Global Light)

Distance: 2px

Size: 1px


9/32

Gradient Overlay:

#97b909 to #beec00


10/32

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:


11/32

Add the following layer styles:

Drop Shadow:

Blend Mode: Normal

Color: #9abc09

Opacity: 95%

Angle: 90Distance: 1px

Size: 0px


12/32

Also add a Color Overlay:

Color: White

Opacity: 25%


13/32

And add a Gradient Overlay:

From #9ec208 to #b8e501


14/32

Step9

Duplicate the layer with the big white and soft dot we made, make sure the layer is on top of thisnew 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.


15/32

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: NormalColor: White

Opacity: 75%

Angle: 90 (disable Use Global Light)Distance: 1px

Size: 0px


16/32

Inner Shadow:

Opacity: 48%

Angle: 90 (disable UGL)Distance: 1px

Size: 1px


17/32

Color Overlay:

Color: #81a000


18/32

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:


19/32

Lets add some layer styles on this:

Drop Shadow:Opacity: 34%

Angle: 90 (disable UGL)

Distance: 2px

Size: 2px


20/32

Gradient Overlay:

From #e6e6e6 to #f5f5f5


21/32

Stroke:

1px

Color White


22/32

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


23/32

Color Overlay:

Color #efefef


24/32

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.


25/32

Now Duplicate the layer and with your document zoomed at 100% press shift+down arrow 4times.

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

Take the rounded triangle shape. (second last one on the image below).


26/32

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


27/32

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


28/32

Opacity: 60%

Color: # deff5c

Gradient Overlay:From # 96b901 to # beec00


29/32


30/32

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: NormalColor: White

Opacity: 85%


31/32

Distance: 1px

Size: 0px

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


32/32

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

Design an Effective Pricing Table in Photoshop

Documents

Transcript of Design an Effective Pricing Table in Photoshop