Have you ever wanted the social icons on your site to be unique? Or do you want your social media icons to match the theme of your unique website or blog but just can’t find any that are just right? With so many free and paid for social media icon sets out there, I can normally find one that works, but sometimes you will need to create one from scratch.

In today’s tutorial, I will show you how to create a fabric patch stitching style social media icon set in Photoshop. In addition, I have included the Fabric Patch Stitching Style Social Media Icon Set download for free. So let’s get started.

Well, before we get started, download the Free Vector Social Media Icons Set. There is no sense in reinventing the wheel. What we will be doing today is creating the actual icon buttons. Graphic Design Junction has already created the vector logos for the buttons, so we don’t have to spend time creating them today. These are the vector logos that I use for all of my social media icons. To use these .svg vector files in Photoshop, first open the file in Illustrator and convert to .eps.

Step 1: Set up the Photoshop Canvas

I like to create the icons larger than the final product will be, to have greater detail to work with, and then resize them when I’m done. So, create a new canvas that’s 1000px x 1000px. Set up Photoshop guides (cmd + opt + ‘ /ctrl + opt + ‘) at 50px and 950px, vertically and horizontally for the outer edge of the icon, and 500px vertically and horizontally to help snap to the center of the icon. I also added a black to grey gradient to the background layer, just to make it easier to see my work.

Step 2: Create the Icon Shape

Where as most social media icons that you see have rounded corners, our patch style social media icons will be square. So, choose the rectangle tool (u) and draw a square in our guides.

In this example, I am creating a Google Plus icon, so I will add a red Gradient Overlay layer effect to the shape (Layer>Layer Style>Gradient Overlay) with colors #a5271a & #d84837.

Next convert the layer to a smart object (Layer>Smart Objects>Convert To Smart Object). Now lets apply the cloth texture to the icon (Filter>Texture>Texturizer). For the settings I used:

• Texture: Canvas
• Scaling: 120%
• Relief: 4

Step 3: Create the Outer Stitching on the Icon

Create the outer stitching on the icon by creating a new white square on the same guides that we used for the icon background using the rectangle tool (u). Then resize the square (cmd + T/Ctrl + T) to 90%.

Then duplicate the layer (Cmd/Ctrl + J) and resize to 90% again. Now select the shape of the smaller layer (Cmd/Ctrl + click on layer), select the larger layer, and delete the inner shape. You should be left with a solid outline.

Next, with the Eraser Tool (E), select a square brush about 70px and delete the spaces of the stitching layer. Remember, It doesn’t have to be perfect since the final icon will be relatively small on your website.

Now let’s create the effects on the stitching in the layer blending options (Layer>Layer Style>Blending Options) using the following settings.

Bevel and Emboss:

Texture:

Satin:

Color Overlay:

Step 4: Add Your Social Media Logo

This is where the Free Vector Social Media Icons Set comes in handy. Open the folder were you downloaded the icon set and drag the social media logo into Photoshop and resize to correct size for your icon while holding the Shift key (this will maintain the proportions of your object while you resize it). Now lets create the stitching effect. Select the logo shape (Cmd/Ctrl + click on layer) and create a new layer (Cmd/Ctrl + Shift + N) and hide the logo layer by clicking on the eye icon.

Next, with the brush tool (B) select a round, hard brush about 10px, and color in the stitching on the new layer. Be sure not to color it in completely, leaving spaces to create the stitching effect. Now copy the layer style from the outer stitching by Cmd + clicking/right-clicking on the layer and selecting Copy Layer Style. Then Cmd + click/right-click on the logo layer and select Paste Layer Style. Hide the background layer and you’re done!

Step 5: Save Your Icon For Use On Your Website

Lastly, save your Fabric Patch Stitching Style Social Media Icon in .png format for use on your website by selecting File>Save for Web and Devices (Cmd/Ctrl + Shift + Opt + S) and select PNG-24 format and resize the icon for your website.

Step 6: Lather, Rinse, Repeat

Don’t stop there! Apply the same steps for each of the social media that you want to include in your website. The sky’s the limits.

[gravityform id=“2” name=“Patch Icon Download” title=“false” description=“false”]