Use Photoshop to design a simple and beautiful pricing table

In this user interface design tutorial, I'll show you how to design a stylish pricing table interface with Photoshop. Pricing tables are common in some Web-application based Web sites. We will use the horizontal type tool and rounded Rectangle tool to complete this task. I'm going to show you how to cater to the modern web development mainstream to create such a table interface.

First preview the final effect of the tutorial:

First step: Create a new file

Select File-New, the specific parameter settings shown in the following figure, and then click OK. Note the background is set to transparent, so the default is to create a new layer of transparency in the layers panel called layer One

Layer.

Step two: Background decoration.

We will create a smooth background, choose a color you like and use the Paint bucket tool (G) to fill the new "layer One" in the first step.

Then double-click the layer in the layers panel to open the Layer Style Settings window and add a smooth dark gray path with a lighter gray gradient overlay effect. The specific parameters are as shown in the figure:

The bottom is the final effect of the background:

Step three: Create the middle Price column

The middle column is slightly larger than the other two columns in order to recommend the best choice for the user. This is a very popular design idea.

Select the Rounded Rectangle tool (U) to make sure you have selected the Shape layer mode, set the radius to 1px, and then draw a 200*330px rectangle.

Double-click the layer on which the rectangle is located to open the Layer Style Settings window, setting the inner shadow, gradient overlay, and stroke effects, as follows:

The final effect is shown below:

Now we'll create a small rounded rectangle to show the name of the pricing plan. At the top of this column, set the rounded Rectangle tool radius to 5px, creating a 130*40px rounded rectangle.

Sets the shadow and gradient overlay for the rectangle, with the following parameters:

Use the Pen tool to draw a small beveled angle (shown below) at both ends of the rounded rectangle, which renders the effect around the price column.

Select the Horizontal Type tool, set the font size to 20px, font color white, font optional, and then write the name of the plan on top of the rectangle (named "Standard" in this tutorial).

Sets a smooth shadow and a gray color overlay effect on the type layer, as follows:

Next, add the itemized portion of the price below the plan name, as shown below. Adds a gray color overlay and shadow effect to the text layer.

Now, below the schedule, we will design a list in the "Standard" schedule column. In each list item, draw two lines with a width of 1px, so that the first line is brighter than the background.

The other line has a lighter brightness than the background, which creates a shadow effect.

Next, let's create a stylish page button, select the Rounded Rectangle tool, set the radius to 5px, and draw a 100*38px rectangle at the bottom of the column.

Add a shadow, gradient overlay, and stroke effect to the button layer, with the following parameters:

To make the button more shiny, I'll add a light reflection at the top of the button, and I'll teach you an easy way, and it can also be used in other designs.

First, hold down the CTRL key and click the thumbnail of the button layer in the Layers panel to select the button's selection.

Select the rectangular marquee tool, and in the Options bar, select a selection that intersects the selection, and then draws a section in the top half of the current selection, so that only the top half of the button selection is selected.

Create a new layer, select the Paint Bucket tool, and fill the selection with white. Sets the opacity of the new layer to 10%.

Next we want to add a stroke effect to the Web button, create a new layer, enlarge the picture size, and draw a light gray line in the style shown below.

Select the Horizontal Type tool and add the words "sigh up" or "Join us" above the button, and I set the font style to uppercase and add a darker shadow effect.

Now we have finished our first pricing column.

Step Fourth: Create the remaining price columns

First, in the Layers panel, select all the layer except the background layer, ctrl+g the layers in the same layer group.

Then copy the layer groups two times and follow the example shown below to arrange them shoulder by side and modify some of the details of the new column to make them look slightly different.

Fifth step: Enlarge the Price column in the middle

Activate the layer group that contains the middle column in the Layers panel, and then click the Ctrl+t command to adjust the middle tier. Make sure that the layer is above the other layers.

In order to make the middle pricing column appear more prominent, modify the button and price gradient overlay effect, color can be optional, I choose Blue.

Step Sixth: Finishing

I'll show you some ways to add shadows, select the Ellipse tool (U), and draw a black oval shape, as shown in the following illustration.

To make the effect look better, I choose Filter-blur-Gaussian blur, radius selection 4px.

Place the shadow layer above the background layer, copy it two times, and now have three shadow layers, place each layer below each price column, and adjust the position.

All right, all tutorials are over.

Category:

• PS Getting Started Tutorial