Today, I’m psyched to share with you a WAY simple Photoshop tutorial on how to match the colors of your social media icons to your website.

Social media icons are a MUST on websites, especially to give a brand the look and feel of being “in the know” and up with the times.  It’s a little badge of credibility that whomever interacts with your website can trust that you are real and reachable.  HUGE.

However, if your icons aren’t using the same color scheme as the rest of your website, it can really be problematic, making your entire website look less appealing and – dare I say? – tacky.

However, after this simple tutorial on how to change and match the colors of your social media icons using Photoshop, your website will immediately have the fabulous-factor back.  Yay!

To start off, you’ll want to be sure you have a .png version of the icon you’re wanting to change.  You’ll also want to be sure that the background of the icon is transparent.  The example I’m using today works best using an icon with a solid, single color.

For a good selection of AWESOME free social media icons to choose from, I love going to SocialIconStudio.com.  They have a wide variety of different styles of icons and you can generally find many that are in .png format with a transparent background.

However, what if you can’t find the social media icon that you need that has a transparent background?!!  Step one: don’t panic.  Step two: find the largest, most clear and simple version of that icon that you can using a Google image search.  Then, bring the icon into Photoshop and use the Magic Wand tool to select the white background (or whatever background color it has) and delete all of the background.

The reason why you want to find the biggest version of the icon possible is because it that when you re-size the icon to a smaller size to use on your website it will hide any awkward editing that can sometimes happen when deleting backgrounds.  If the icon is a solid color, you could simply use the Magic Wand tool to select the icon & then choose “Select” and then “Inverse” to have the background selected.  Then you can just delete all that is selected and it should leave the icon with a clean, transparent background.

I’ll use one of my favorite sets, “Sketch Social Icons” from SocialIconStudio.com, for an example today:

As you can see, the gray and white checkered background underneath this Facebook icon denotes that the background is transparent.

First, select the color you want to use by using the eyedropper tool to select the exact color from your website.  This example is shown using one of my client’s websites where the designer used other methods to try to match the color of the icons without being able to get the color exactly right.  The method used in this tutorial ensures that the colors match, so if you follow these simple steps your icons can match, too!

After you’ve selected the exact color you want to change your icon to, create a new layer above the icon layer in the Layers Palette.  Then, fill that layer with your selected color (can simply use the Paint Bucket tool to accomplish this).

Now, with the color layer selected, create a clipping mask with that layer by selecting “Layer” and then “Group With Previous” for Photoshop Elements or “Create Clipping Mask” in the full version of Photoshop (can also use the keyboard short code of “command-G” for Macs or “control-G” for PCs – not sure if this is true in all versions, but it is an option worth investigating).

This will snap the color layer to the shape of the icon layer directly underneath it, making your social media icon be the exact color you’re wanting it to be!  Yay!!

Now, simply save this new, GORGEOUS, matching version of your icon in .png format so you can install it to your website.  This will preserve the transparent background so the icon can look well on top of whatever background your website already has.

SWEET.  Easy-peesy, right?

Let me know if you have any questions by leaving a comment below.  Woot!