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 4/10 – Service columns

Sunday, February 7th, 2016 by Servage

photoshopIn this section you will learn how to add columns showing the services the sample site company provides. Four columns will be created in the template. For this start with selecting the line tool and add a line below the banner in between the grids. Here a distance of 4 pixels is kept in between the banner and the line. The fill of the line has been kept as #bebbb1 and the shape stroke has been set to 1 pixel width with the stroke being set to no color. Increase the height of the line to 5 pixels so that it is completely visible.

After this, start with the 4 icons of this section. Select the elliptical tool and draw a circle of 110 by 110 pixels in height and width. Name this layer as the outer circle.

Outer circle

Design4-1

Use the path selection tool to correctly align the circle on the line. Press ctrl + C and then ctrl + V 3 times since 4 circles are required for different columns. Now align all the three circles on the horizontal line with proper distance in between the four circles. Since a 12 column grid is being used, the 4 sections can be divided into 3 columns per section.

Design4-2

Now select the elliptical layer again and draw a circle of 99 by 99 pixels. Move it to the center of the outer circle and make sure the circle is aligned well with the line and the outer circle. Name this layer as inner circle.

Inner Circle

Design4-3

Copy the inner circle and paste it 3 times for the rest of the three circles. See the picture given below for better understanding.

Design4-4

Keep the fill of the inner circle white so that the circles are clearly visible, and add content below all the 4 icons. Place a text layer below the first circle. Here the distance between the text layer and the icon has been set to 4 pixels. This will be the heading, using Museo font with a 18 pixels font size. The heading has been kept bold here.
Again select the text layer and add the content 4 pixels below the heading. The font that was used here for the content is Maiandra GD and the size of the font is 18px. Distance between the heading and the content is 3 pixels. Repeat the same steps for the rest of the three circles.

Design4-6

The image above shows the four bubbles with their corresponding text.

Web design with Photoshop part 4/10 - Service columns, 4.8 out of 5 based on 5 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.