-
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/ -
8/6/2019 Design an Effective Pricing Table in Photoshop
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
-
8/6/2019 Design an Effective Pricing Table in Photoshop
3/32
Color Overlay:
Color: #ebebeb
-
8/6/2019 Design an Effective Pricing Table in Photoshop
4/32
Stroke:
Size: 1px
Color: #c9d692
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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.
-
8/6/2019 Design an Effective Pricing Table in Photoshop
6/32
You should have something like this right now:
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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/6/2019 Design an Effective Pricing Table in Photoshop
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
-
8/6/2019 Design an Effective Pricing Table in Photoshop
9/32
Gradient Overlay:
#97b909 to #beec00
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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:
-
8/6/2019 Design an Effective Pricing Table in Photoshop
11/32
Add the following layer styles:
Drop Shadow:
Blend Mode: Normal
Color: #9abc09
Opacity: 95%
Angle: 90Distance: 1px
Size: 0px
-
8/6/2019 Design an Effective Pricing Table in Photoshop
12/32
Also add a Color Overlay:
Color: White
Opacity: 25%
-
8/6/2019 Design an Effective Pricing Table in Photoshop
13/32
And add a Gradient Overlay:
From #9ec208 to #b8e501
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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.
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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
-
8/6/2019 Design an Effective Pricing Table in Photoshop
16/32
Inner Shadow:
Opacity: 48%
Angle: 90 (disable UGL)Distance: 1px
Size: 1px
-
8/6/2019 Design an Effective Pricing Table in Photoshop
17/32
Color Overlay:
Color: #81a000
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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:
-
8/6/2019 Design an Effective Pricing Table in Photoshop
19/32
Lets add some layer styles on this:
Drop Shadow:Opacity: 34%
Angle: 90 (disable UGL)
Distance: 2px
Size: 2px
-
8/6/2019 Design an Effective Pricing Table in Photoshop
20/32
Gradient Overlay:
From #e6e6e6 to #f5f5f5
-
8/6/2019 Design an Effective Pricing Table in Photoshop
21/32
Stroke:
1px
Color White
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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
-
8/6/2019 Design an Effective Pricing Table in Photoshop
23/32
Color Overlay:
Color #efefef
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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.
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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).
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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).
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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
-
8/6/2019 Design an Effective Pricing Table in Photoshop
28/32
Opacity: 60%
Color: # deff5c
Gradient Overlay:From # 96b901 to # beec00
-
8/6/2019 Design an Effective Pricing Table in Photoshop
29/32
-
8/6/2019 Design an Effective Pricing Table in Photoshop
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%
-
8/6/2019 Design an Effective Pricing Table in Photoshop
31/32
Distance: 1px
Size: 0px
Thats it! You will now have something like this table:
-
8/6/2019 Design an Effective Pricing Table in Photoshop
32/32
Feel free to let your creativity flow and add some other things, I came up with this: