Your Customers are Mobile, you will be too …

In this tutorial we will show you how to use Photoshop CS5.5 to change the color of social network icons (or any icon for that matter) so that they can more closely fit into the color scheme of a wire-frame or website you are working on.With the popularity of social networking sites increasing on an almost daily basis the success or failure of a website depend more and more on integration of these social networks. However integrating them into a website when all the necessary icons are varying and often clashing colors can sometimes be a nightmare. For that reason it is becoming more and more popular to change the colors of these icons to suit the site under construction.

I will be using Photoshop CS5.5 for this but I do believe the other versions of Photoshop use similar techniques to achieve this effect. You may need to play around a little in other versions but the principle will be the same.

If you need a collection of social networking icons please check out the resource links I have provided at the bottom of this article.

Photoshop CS5.5: Changing the Color of Social Network Icons

If you have a social network icon you wish to change the color of on hand ready to go open it with Photoshop now, if not check out the resource links at the bottom of this page and download a pack then open one to start work with. If you can open the PNG version rather than the PSD. The process will be far quicker to do this way.

Once you have the image open zoom in to 800% so you can see every pixel quite clearly.

To make things easier zoom right in on the image so you can see each pixel quite large

see how all the pixels are pretty much the same color, just varying shades. We need to find pixels around the middle of these tones. Once you have worked out where these pixels are chose >>Image >> Adjustments >> Change Color…. When the pop-up window comes up we need to click on the top color box and with eyedropper that appears we have to select one of these mid-tone pixels. In the second color box we need to do the same except we want to pick the color we are changing to. As pictured in the following picture

icon color change window with the preview visible off to the side

Now we just need to hit OK and we have a new icon color set. A few pixels will retain the old color but that is OK. These help to give the icon a little bit of its previous color without overpowering your design. Save the image for web and devices but do not save over your original image. You want to retain this for next time you need to recolor an icon for another site.

Hope you found this helpful and see you again soon.



Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: