hand-stitched-icons-header-image
Thursday, June 7th 2012
Photoshop
8 comments

Hand-Stitched Social Media Icons – Photoshop CS6


In this tutorial we’re going to take a look at how to create some very cool little hand-stitched icons for Facebook, Twitter, and Google Plus. Even if you’re brand new to Photoshop you will be able to follow along with this tutorial and create some great little graphics for your next web or design project.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Video

Step 1:

I am starting with a document sized 1280 pixels by 720 pixels. I’ve dropped in a background and am ready to start creating these icons.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 2:

Grab your Ellipse Tool (U) and set it to draw a Shape. Check out the screenshot to see what the Tool Control bar looks like. NOTE: If you are using an older version of Photoshop you will want to use the icon on the far left of this bar to create a Shape Layer.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 3:

Hold down your Shift key and drag out a small circle into the center of your document like I have.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 4:

Look to your Layers panel and double click the thumbnail of our new Shape Layer and fill it with the color: #81bee9

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 5:

It’s now time to add a few Layer Styles. Let’s start with a nice Drop Shadow by going Layer>Layer Style>Drop Shadow. Use the settings I have in the screenshot below.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 6:

The next thing we’ll do is add an Inner Shadow and change the expected black to a white so this “shadow” will act more like a nice highlight across the top of our icon. Go ahead and use the settings that I have in the screenshot below.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 7:

To add a little more shape to our icon we’re going to use a Bevel and Emboss Layer Style. Check out the screenshot below and carefully follow the settings that I have.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 8:

We also need to add some texture to this icon to really start to give it a fabric feel; something that would definitely be stitched. To do this, we first need to create a pattern. Go File>New and create a 4×4 document.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 9:

Hit Cmd/Ctrl + 0 (zero) to zoom that document all the way in to the maximum size for easy viewing. Create a new Layer, Layer>New>Layer, and drag the “Background” Layer and drop it on the trash can at the bottom of the Layers panel to get rid of it. You will be left with the transparent background.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 10:

Grab the Pencil Tool (B) and set the size to 1px. Set the foreground and background colors to their default black and white by hitting the letter “D”. Place tow black squares as I have by clicking with the Pencil Tool in those two spots. NOTE: Remember the document is only 4×4 and we’re drawing with a 1×1 pixel Pencil Tool. It will be easy to drop a mark on the pixel spots shown in the screenshot.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 11:

Hit the letter “X” to move white into the foreground color and place two white squares right below the black squares as I have in the screenshot.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 12:

Go Edit>Define Pattern. Give your pattern a name and hit “OK”. We can now close out this pattern file, no need to save it, we’re completely finished with it.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 13:

Now go Layer>Layer Style>Pattern Overlay. You are going to want to click on the pattern thumbnail to bring up all the patterns we have.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 14:

Simply select the pattern we just created to apply it to our icon.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 15:

Set the Blend Mode to Soft Light and reduce the opacity to 45%. Hit “OK”.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 16:

The next step is to add the stitching. This is actually pretty simple due to a feature I don’t use much in Photoshop –Type on a path. Select the Shape Layer we’ve just applied all of our Layer Styles to and notice that the path appears in the Photoshop document.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 17:

Grab your Text Tool and choose a simple sans-serif typeface, I chose Arial, and set the size to 8 pt. It is also important to choose the “Strong” Anti-Aliasing. Hover your cursor over the path and you will see the “Type-on-a-Path” cursor appear…

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 18:

Click and create a circle of black colored dashes (-) around the path just like I have. TIP: Don’t worry if the dashes don’t seem to be perfectly centered around the path, we’ve still got some adjustments to make.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 19:

Go Edit>Transform>Scale and set the width and height (W and H) to 75% each.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 20:

Go Layer>Layer Style>Drop Shadow to drop a shadow underneath this stitching. Use the settings that I have below.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 21:

Reduce the Fill Opacity to 35% for the finished stitching.

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 22:

All we have left to do is add our social media icon. Let’s drop in the Twitter bird and add a simple Drop Shadow to polish off this icon!

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

Step 23:

Shift select both Layers that make up this icon and go Layer>Duplicate Layers and hit OK. Use the Move Tool (V) to move the new icon either right or left and double click the thumbnail for our Shape Layer to change the color. I’m going with a Facebook blue: #685f9d, add the logo and you’ve created another icon in seconds! TIP: The Google Plus color I used is: #c04737

Hand Stitched Social Media Icons - Photoshop CS6 Tutorial

 

Follow Me On Twitter!

Like Tutvid on Facebook!

  • http://twitter.com/nguyenbk Khoi Nguyen

    Great Tut Nathaniel! I’ve been following you for years now, and your tutorials have gotten better and better. Definitely quality work, and it’s great that you’re so willing to help out the graphic/web design community. Keep up the great work!

    • http://www.tutvid.com/ Nathaniel Dodson

      Thanks, Khoi! Glad you enjoy the tutorials!

  • http://www.tutvid.com/ Nathaniel Dodson

    Thanks, Khoi! Glad you enjoy the tutorials! 

  • Niklas Bergvall

    Great tutorial, thank you! Im new to al this and was wondering how I should get just the icons out of PS and send them to my web designer? 

    Thanks again 

  • Jonathan Martin

    Nathaniel, i’m your fan for years. I say, you ARE the BEST!!! All videos you make gets better and better.!

  • vipin Sharma

    Nath , EAst or West YOU ARE BEST
    I have learnt alot from your tutorials.
    thanx man .

  • aaron
  • LFan

    Whoa, whoa! Hang on a sec. You are a very good instructor, you’re fast and you get right to the point and are very thorough, but are you really saying it’s okay to re-design someone else’s logos and icons? I’m certain that what you are teaching in this tutorial is totally against the rule of usage of Twitter, Facebook and Google. Twitter especially has strict guidelines for using their logo. These icons are the trademarked, intellectual property of huge corporations. Do you think their lawyers would just casually give you a thumbs-up on your redesign of their company logos? By putting this tutorial out, you are implying that it’s just fine to take someone’s trademarked property and change it to your liking. People get in trouble for that every day! Your tutorial is excellent, but did you seriously get permission from Google, Twitter and Facebook to stylize their ID’s? This is the FIRST rule of graphic design and everybody in print and media business knows this: you don’t mess with someone’s logo.

    So has no one else said anything to you about this infringement? I know there are a lot of modified versions of these logos out there. ( and they’re usually better than the originals), but I’m sure you know it’s a big ‘no-no’ to change company identifiers. As a designer who is passing along his knowledge to others, it’s a bad practice to teach.

    In spite of my little rant here, you made a very good tutorial. I hope you don’t get shut down by any of the big boys.