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 5/10 – Service icons

Sunday, February 21st, 2016 by Servage

Part5-1In this section, you will learn how to add icons and buttons to the 4 columns. There are different sites available where you can find different types of icons that you may need for your website. In this case the icons are taken from On this website, you can find different kinds of icons and these are often free to download. We searched for laptop, notepad, iPhone and bulb keywords on the website. Download the PNG format of the icons. Once downloaded, select all four icons and open them in Photoshop. Select all 4 layers of icons in Photoshop and transform them by pressing ctrl and T to a size where they can fit inside the inner circle. Select all icons one by one and place them in their respective column.

Make sure all the items are centred. Select the rectangular marquee tool and create a rectangle within the grid line. Then select the “move” tool which will give the option of aligning them horizontally and vertically.


Now select the all four layers simultaneously and place them just below the upper section. Press shift and the down key 5 times to set a distance of 50 pixels.

After this, 4 buttons below the sections will be created. For doing so, select the text tool and write ‘Get started’. Here Museo with 14 pixels font size is used. The color of the font is black. Now select the rectangular layer and draw a rectangle over the text so it appears like a button. You might have to shift the text of the button over the rectangular layer if your text disappears behind the rectangular layer.


Now select both text layer and rectangular layer and align them with the help of the “move” tool.
Select these two layers again and copy them. Paste the selected layers to the rest of the three columns. Now select all four buttons and align them horizontally. You will get a structure like in the following image for each column of the section. Select all the layers of one section at a time and align them vertically with the help of the “move” tool. Repeat the same process for rest of the 3 sections.

At the end a background will be assigned to this section. For this, select the “rectangle” tool to create a rectangle of 1400 by 565 pixels. Shift this layer below all the layers of all the four columns like in the picture given below. Set the fill of this layer to white and stroke to no color. And with this you have successfully added icons and buttons to the four columns.


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