Creating tables

Trevin is the Sr. Director of Business Development at ahtq.vn. He has worked on over 450 marketing campaigns and has been building websites for over 20 years. His work has been featured by Search Engine Lvà, USA Today, Fast Company và Inc.

Preview

Click on the image lớn see it in full scale.

Bạn đang xem: Creating tables

Step 1: Create a New Photoshop Document

Go lớn File > New, phối your options as shown below and hit OK. chú ý that Background Contents option is mix to Transparent, which will automatically create a transparent layer for us that is named "Layer 1" by default.

*

Step 2: Styling the Background

Let us create a slick background that will complement our pricing table. Use the Paint Bucket Tool (G) lớn fill the transparent "Layer 1" layer with any color you want.

Then double-cliông chồng the layer in the Layers Panel lớn open the Layer Style dialog window. Add a smooth dark-gray khổng lồ light-gray vertical gradient overlay.

*

Here is our background now:

*

Step 3: Building the Middle Price Column

We’re going lớn build 3 price columns in total, and the middle one will be a little bit bigger than the other two in order lớn suggest the best plan for the user to piông xã. This is a popular thiết kế pattern for pricing tables where the suggested pricing plan is more distinctive than the other plans.

Select the Rounded Rectangle Tool (U), make sure that you are in Shape Layers mode (look at the Options Bar to double-check) và, with a Radius of 10px, draw a rectangle of form size 200x330px.

Double-cliông chồng the rounded rectangle layer in the Layers Panel to lớn open up the Layer Style dialog window. Give the rounded rectangle an Inner Glow, a Gradient Overlay, and a Stroke.

Inner Glow

*

Gradient Overlay

*

Stroke

*

The result of the layer style is as follows:

*

We’re now going to lớn create a small rounded rectangle for the pricing plan name, which will become a wraparound 3 chiều ribbon (another popular web thiết kế trend).

At the top of the price column, create a small rounded rectangle with Radius at 5px & dimensions of 130x40px using the Rounded Rectangle Tool.

*

Give the small rectangle a Drop Shadow and a Gradient Overlay.

Drop Shadow

*

Gradient Overlay

*

*

Use the Pen Tool (P) to lớn draw small diagonal flaps on both sides of the small rounded rectangle (as shown below). This will make it appear as if it’s wrapping around the price column.

*

Choose the Horizontal Type Tool (T) và — with a fonts kích cỡ of 20px, trắng as the text color, and a fonts of your choosing — write the plan’s name (in this case, the plan is called "Standard"). I used Myriad Pro as the font, but you can use any font you want.

*

Give sầu the text layer a nice, smooth drop shadow and gray color overlay.

Drop Shadow

*

màu sắc Overlay

*

Next, add the price details (as shown below), just under the plan name. It’s a good idea lớn use the same fonts for all the text, just style them differently.

Give the text a gray color overlay and a nice drop shadow.

*

Now, under the price, we’ll kiến thiết a danh mục of features included in the "Standard" plan. Under each danh mục thành tựu, draw 2 lines with the height of 1px. Make the first line darker than the background and the other line lighter than the background, which will create a nice inset effect (a popular technique for borders and dividers).

*

Next, let us create a modern và sleek website button. Use the Rounded Rectangle Tool (U) with Radius at 5px lớn make a rectangle sized at 100x38px at the bottom of the pricing column.

Xem thêm: Đường Dài Mới Biết Ngựa Hay

*

Give the button a Drop Shadow, a Gradient Overlay and a Stroke.

Drop Shadow

*

Gradient Overlay

*

Stroke

*

To make the button glossy, we have to lớn give sầu it a glassy reflection at the top. I’m going to lớn show you a simple technique for this that you can use in many graphic design situations.

First, Ctrl-click/Cmd-cliông xã on the thumbnail of the button layer in the Layers Panel khổng lồ load a selection around it.

Now, select the Rectangular Marquee Tool (M). In the Options Bar, choose the Intersect with Selection mode. Draw a selection at the top half of the current selection, which will reduce your selection so that only the top half of the button is selected.

*

Create a new layer and, with the Paint Bucket Tool (G), fill the selection with white. Reduce the Opathành phố of the new layer to lớn 10%.

*

We will now add a top stroke on the web button. Create a new layer for the top stroke. Zoom in closely khổng lồ see your work easier. Draw a light gray line as shown below.

*

Use the Horizontal Type Tool (T) to add some text like "Sign Up" or "Join Us." I used all caps và styled the text with a dark drop shadow.

We are now finished with one of our price columns.

*

Step 3: Create the Other Price Columns

Now that we’ve created a price column, we can simply duplicate it và make modifications on the duplicates.

First, in the Layers Panel, select all the layers except the background layer & put them inlớn a layer group (Layer > Group Layers).

Then duplicate the layer group 2 times and arrange them side by side (as shown below). Modify the details of the new columns so they are different from each other.

*

Step 4: Enlarge the Middle Price Column

To make the middle column stvà out, clichồng on its layer group in the Layers Panel khổng lồ make it the active layer và then use Free Transform (Ctrl/Cmd + T) to lớn scale it up. Make sure the middle column’s layer group is on top of the other layer groups.

*

To make the box more visible, modify the gradient overlay layer effect of the button và the price with any color you want. I used xanh.

*

Step 5: Final Touches

I’m going to show you how to lớn add some nice drop shadows under the price columns. Select the Ellipse Tool (U) & draw a blachồng, short và wide ellipse shape as shown below:

*

To soften the shape, use Filter > Blur > Gaussian Blur. 4px Radius should be enough.

Place the shadow’s layer just above sầu the background layer. Duplicate the shape twice so that you have sầu 3 drop shadows for each of the price columns. Position the shapes under each column.

Xem thêm: Chuyển Appstore Sang Úc - ‎Uc Berkeley Mobile On The App Store

*

Tutorial Summary

We’ve just reached the over of the tutorial. I hope you enjoyed it and if you have sầu any questions, just drop us a comment below! We covered many easy and popular website design techniques such as creating sliông chồng web buttons, creating wraparound banners (for the title of the price plans), & more.


Chuyên mục: Tin Tức