Create a Pricing Table using Photoshop in about 20 Minutes

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!