Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 6/10

Monday, March 14th, 2016 by Servage

photoshopIn this article, you will get an overview of how to add various plans for the services offered on the website.

Box for “Basic Plan”

Start by creating a new group and name the group “Plans”. Click on the rectangle tool and draw a rectangle of 1400 by 321 pixels. Use the Move tool to place the rectangular layer below the previous 4 column layer. Here, the colour #3ac162 has been used for the background of the section.

Create two new groups inside the Plan group and name them Box 1 and Box 2.

Inside box 1, create a rectangle layer by clicking on the rectangle tool. I have kept the dimensions of the rectangle to 300 by 141 pixels and Fill as #f7f8f7. Use the grid lines for placing the box in the centre and align the box with the section horizontally and vertically.

Use the rectangular marquee tool and create a rectangle in the half section.

Click the move tool and align the box horizontally and vertically with the section.

Select the text tool and the write the text ‘Basic Plan’. Here Museo font with 14 px size has been used. Again, select the Text tool and write cost of the plan on the right side of the box.

Check online for free icons. Here, has been used for icons. Download the icon and move it to Photoshop. Create 2 extra copies of the icon. Now select all three layers of the icons and transform them by clicking ctrl + T for small icons. For the text next to the icons, click on the text tool and write in front of the icons. Here Maiandra GD font with font size 11 pixels has been used.

After this, a ‘Start Now’ button will be created. Select the rectangle tool and create a rectangle with the dimensions of 245×18 pixels. We have set he fill of the rectangle to  #5fcf80.

Now add the text on the button by clicking on the text tool. The font and font size is the same as in the rest of the box. Once written, select both the rectangular layer and text layer and align them. For aligning, select the move tool. You will get the options of aligning horizontally and vertically.

With this box 1 is complete and you will see something like the image given below:


Now create more boxes for more plans by repeating the steps above.

Highlight and promote plans

You can consider to highlight one of your plans, to give it special attention. This way you could make users more likely to select your “Best offer” or “Most common plan” or a similar headline. This way you can try to steer users towards a specific purchase.

Web design with Photoshop part 6/10, 3.1 out of 5 based on 8 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.