Create a Pricing Table using Photoshop in about 20 Minutes

Posted in Quick Tips, Tutorials, Web Interface • Posted on 17 Comments

We are used to presenting data using different graphics, modules and tables so that the information is easier to understand. Pricing tables have been, and still are, used by a lot of companies and individuals to display their available plans. It’s pointless to use a pricing table if you only have one plan to offer. But if you have more, then it is a very useful and attractive way of displaying information about each of your plans. We’ll be using Adobe Photoshop to create a pricing table which will only take about 20-30 minutes.

Are you ready?

Pricing Table

Step 1

Create a new 1200x600px document. Our pricing list itself will be 1000x340px but we need some work space that’s why our main document is larger.

Step 2

By using the Rounded Rectangle Tool (U), create a shape of 1000x340px. Apply a barely visible outer glow effect as well as a 1px stroke. Set the stroke color a little bit darker than the color of our shape.

Step 3

We’ll divide our pricing table into 3 sections. The “header”, the “content” and the “CTA” zone.  Our “header” section will only contain the name of the plan. By using the Rectangle Tool (U), create a shape that is 1000pixels wide and 70px high. Give it a dark gray color (#e0e3e3) and apply some Drop Shadow to achieve the effect we would get by applying “Outer Glow”, the only exception is that we can set a direction (by changing the angle).

Step 4

Our Pricing Table will contain 4 plans which you can sign up for. It is a common thing to highlight one of the plans, and mark it as the “Best Deal” or something similar. Use the Rounded Rectangle Tool (U) and create a shape of 250x290px. Your shape must have the same effects applied as our base layer.

Step 5

Repeat the third step, the only exception would be the header. Give it a darker gray color (#d1d1d1).

Step 6

In our pricing plan, we will be using 2 fonts, “Open Sans” and “Helvetica”. Use the Semibold weight of “Open Sans” for the plan names in the “header” section of our table.

Step 7

Use “Helvetica” for the price of each plan. As we want to highlight our “Advanced” plan, we will make the price tag a brighter red.

Step 8

We move on to the “content” section. It will consist of 3 features that you are going to provide your customers. It has a pretty simple structure. We’ll be using “Open Sans” as our font. The numbers are 24pt Bold. The text is 14pt Regular. Each feature is divided by a “dotted line”, but can be easily changed with a simple line.

Step 9

Each plan must have a CTA Button which would allow customers to take an action. Whether it will allow them to find out more, or proceed to pay, the button must be there. By using the Rounded Rectangle Tool (U), create a gray shape and apply a dark gray Drop Shadow effect.

Step 10

Apply the Gradient Overlay effect with the Blend Mode set as Soft Light, and the Opacity: 40%.

Step 11

Finish the button by adding a Gradient type of Stroke.

Step 12

By using “Open Sans Bold”, 24pt, input some text on the button. “Choose Plan” looks good to me. Now duplicate the “content” and “CTA”  sections twice that we have just created and place them accordingly. Refer to the final version if you feel a little bit confused.

Step 13

The “Advanced” plan does not differ much except the brighter price tag and the CTA button. The red button is pretty similar to the gray one, the only exceptions are its base color which is: #ed161c and the stroke colors which you can see below.

Step 14

Change the stroke colors from the gray ones to the following red ones and finish the button.

Final Result


Want To Check Details Yourself? – Download PSD


What do you think about this tutorial? Share your thoughts!

20 Written Articles

17 Comments Best Comments First
  • steff

    Wednesday, July 18th, 2012 15:51

    1

    looks nice… maybe with a bluish color that would look more convincing

    0
    • Dainis Graveris

      Thursday, July 19th, 2012 05:55

      5

      colors depend from website design colors, feel free to change and suggest different colors! :)

      0
      • steff

        Thursday, July 19th, 2012 06:07

        6

        Dainis, i sent you an email a while back but didn’t got a reply… can you check? i know you’re busy but i’d really appreciate it.

        0
        • Dainis Graveris

          Friday, July 20th, 2012 16:21

          9

          Steff, can you resend it? To what email you sent it? I am checking my inbox each day!

          0
  • Tanveer

    Friday, July 20th, 2012 01:01

    7

    wowww.. so easy… thanks Mr. Dainis Graveris

    0
  • Felipe Mendoza

    Friday, July 20th, 2012 14:16

    8

    Thanks! Great tutorial, very easy and useful.

    0
  • Ricardo Diaz

    Wednesday, July 18th, 2012 20:14

    2

    I thought you did a great job with it! Full of info and I learned how to do this for my website. Thank you!

    0
  • saha

    Thursday, July 19th, 2012 03:42

    3

    I’ve used pricing table in my project. But never tried to create it in Photoshop. I’ll try to create it by following these steps. Thanks for this tutorial :)

    0
    • Dainis Graveris

      Thursday, July 19th, 2012 05:39

      4

      Enjoy Saha, and let me know if you can finish this tutorial with ease! :)

      0
  • Stan

    Tuesday, July 24th, 2012 18:59

    16

    Wow! I really learn from this tutorial. Thanks Stelian Subotin for sharing this one.

    0
  • Aaron

    Tuesday, July 24th, 2012 18:08

    15

    This is great. As it’s been mentioned before it would be great to show how to implement this in HTML and PHP.
    I might even write a tutorial for this!

    I’ve seen various types of pricing charts, and they all seem to have icons to depict the quality too. This would make a nice addition :)

    Aaron

    0
    • Dainis Graveris

      Wednesday, July 25th, 2012 04:33

      17

      Hm, i could talk with my programmer, but actually if you’re interested to do tutorial on this design, I only encourage that, Aaron! :) You can connect with me on skype – dainixy and we can talk some details!

      0
  • Nizam

    Tuesday, July 24th, 2012 10:26

    14

    Awesome and excellent work. Really impressive and easy to follow steps. Thanks for sharing :)

    0
  • Alexander R. B

    Saturday, July 21st, 2012 18:11

    12

    The tutorial is good.
    The next step could be how to implement it in some sort of CMS. like wordpress or joomla :) That could be great.

    0
    • Dainis Graveris

      Sunday, July 22nd, 2012 01:34

      13

      Wait for it, soon you’ll get a lot of coding tutorials for CMS, not joomla, but WordPress :) Thanks for support though, Alexander!

      0
  • Stan

    Tuesday, July 24th, 2012 18:59

    16

    Wow! I really learn from this tutorial. Thanks Stelian Subotin for sharing this one.

    0
  • Aaron

    Tuesday, July 24th, 2012 18:08

    15

    This is great. As it’s been mentioned before it would be great to show how to implement this in HTML and PHP.
    I might even write a tutorial for this!

    I’ve seen various types of pricing charts, and they all seem to have icons to depict the quality too. This would make a nice addition :)

    Aaron

    0
    • Dainis Graveris

      Wednesday, July 25th, 2012 04:33

      17

      Hm, i could talk with my programmer, but actually if you’re interested to do tutorial on this design, I only encourage that, Aaron! :) You can connect with me on skype – dainixy and we can talk some details!

      0
  • Nizam

    Tuesday, July 24th, 2012 10:26

    14

    Awesome and excellent work. Really impressive and easy to follow steps. Thanks for sharing :)

    0
  • Alexander R. B

    Saturday, July 21st, 2012 18:11

    12

    The tutorial is good.
    The next step could be how to implement it in some sort of CMS. like wordpress or joomla :) That could be great.

    0
    • Dainis Graveris

      Sunday, July 22nd, 2012 01:34

      13

      Wait for it, soon you’ll get a lot of coding tutorials for CMS, not joomla, but WordPress :) Thanks for support though, Alexander!

      0
  • Felipe Mendoza

    Friday, July 20th, 2012 14:16

    8

    Thanks! Great tutorial, very easy and useful.

    0
  • Tanveer

    Friday, July 20th, 2012 01:01

    7

    wowww.. so easy… thanks Mr. Dainis Graveris

    0
  • saha

    Thursday, July 19th, 2012 03:42

    3

    I’ve used pricing table in my project. But never tried to create it in Photoshop. I’ll try to create it by following these steps. Thanks for this tutorial :)

    0
    • Dainis Graveris

      Thursday, July 19th, 2012 05:39

      4

      Enjoy Saha, and let me know if you can finish this tutorial with ease! :)

      0
  • Ricardo Diaz

    Wednesday, July 18th, 2012 20:14

    2

    I thought you did a great job with it! Full of info and I learned how to do this for my website. Thank you!

    0
  • steff

    Wednesday, July 18th, 2012 15:51

    1

    looks nice… maybe with a bluish color that would look more convincing

    0
    • Dainis Graveris

      Thursday, July 19th, 2012 05:55

      5

      colors depend from website design colors, feel free to change and suggest different colors! :)

      0
      • steff

        Thursday, July 19th, 2012 06:07

        6

        Dainis, i sent you an email a while back but didn’t got a reply… can you check? i know you’re busy but i’d really appreciate it.

        0
        • Dainis Graveris

          Friday, July 20th, 2012 16:21

          9

          Steff, can you resend it? To what email you sent it? I am checking my inbox each day!

          0

Comments are closed.

54.198.94.76 - unknown - unknown - US