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 9/10 – Reference clients

Saturday, April 30th, 2016 by Servage

photoshopIn this article you will learn how to add the company logos of your clients as references to potential new customers. Create a new layer group and name it “Clients”. To add each of the client logos, first select the rectangle tool and draw a rectangle in the dimensions of 1400 by 103 pixels. We have kept the background of this rectangle white.

Example logos

For the example logos we made up four fantasy logos, in your case this should of course reflect your own real clients. Add them to the Photoshop template. Select all the logos and press ctrl and T to transform them. Re-size the logos to a size so they fit very well inside the client layer. Then place them horizontally next to each other.

Use the help of grid lines to align them. Since we are using a 12 column grid, 4 logos can be divided into 3 grid columns per logo. Select the background layer along with the four logos by pressing ctrl and clicking on each layer. Once selected, use the move tool to align the logos horizontally in the center of the client section.


For aligning each logo in the center of 3 columns, use the rectangular marquee tool and create a rectangle around each logo one by one. For better understanding, please see the image below. Select the move tool and use the option of aligning them vertically.


Once you are done with the alignment of all the logos, you will have evenly distributed logos in the section. In case you are using more than 4 logos, you could consider to distribute them over multiple rows for decluttering and a better viewing experience.

Colors and placements

Having very colorful third-party icons may benefit or disturb your overall design, depending on colors, shapes etc. Therefore, you can consider to tone down the icons, or maybe convert them into grayscale images. You can do so with Photoshop by changing their opacity or by adding a gray layer on top.


If you have many reference logos in different shapes, you could align them differently. E.g. use a specific padding for each icon, but otherwise let them float freely in a large group, sort of like a tag wall know from blogs.

Web design with Photoshop part 9/10 - Reference clients, 4.2 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.