Total Followers 132,503
In this tutorial I will show you how to create Tasty social Icons in Photoshop. We will be covering what’s new in the Shape Tools options panel which is the new Stroke. Using this new feature we can now easily make stitches and we can adjust it whatever we want.
For those who don’t have Adobe Photoshop CS6 yet you can download the beta on their official website. But if you’re excited to do this and you don’t have time to download Photoshop CS6, you can still accomplish this tutorial by following the simple instructions.
So what we are waiting for? Let’s get started.
Things you will need for this tutorial:
Here is what we will be making:
For our workspace create a new Document in Photoshop 570px by 470px and set the background color to #333236.
While selecting the background layer go to Filter – Noise – Add Noise.
Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.
Change the layer mode to Soft Light and change the opacity to 50%.
Here is the base shape as you can see in the image below. Basically it’s just an 80px by 120px, #3b5997 Rounded Rectangle Shape with a 5px Radius. Then I modified it using the Direct Selection Tool(A) and Pen Tool by making the top straight and adding an anchor point in the bottom middle and then I dragged it downwards using Direct Selection Tool(U). If you followed my previous tutorial you will know how to properly modify the shape: Recreate Google+ Pages Using Adobe Photoshop.
Apply this Blending Option:
Here is the result.
Create a new Document in Photoshop make it 5px by 5px and make sure the background is Transparent.
Fully zoom our canvas by using the Zoom Tool(Z) or by just pressing Ctrl + + on the keyboard. Now that it is fully zoomed use the Pencil Tool(B) and make a pattern as shown in the screenshot below.
Save this document as a pattern by pressing Edit – Define Pattern. Name it whatever you want. Now that we have the pattern apply it to our base shape
We need to add some flavor to our shape by adding some highlights. First thing you need to do is create a layer above the shape and Link it to the base shape by pressing the middle line between them.
Using a Soft Brush Tool(B) brush on the bottom part of the shape and set the layer mode to Soft Light and decrease the Opacity to 80%.
Add another layer, select the Gradient Tool(G) Reflected Gradient, #fff and add it near the top of the shape. Set the layer mode to Soft Light and decrease the Opacity to 50%.
Add another layer again. This time we will create a darker shade. Use Reflected Gradient, #000 and add it at the top part of the shape. set the layer mode to Multiply and decrease the Opacity to 50%.
Adding Stitches (Dash Stroke) in Photoshop CS6 is very easy. They improved how Shape Tools work and they added an additional option panel for strokes and shape. Don’t worry if you don’t have Photoshop CS6 yet, you can still follow this tutorial. But with Photoshop CS6 I will show you how handy it is. Here is the preview of the options panel of the Shape Tools
To create the stitches first create a shape, the same process we did on the base shape but this time change the width to 70px.
You need to adjust the stroke by clicking the More Options and set the Dash to 5 and Gap to 6. Change the stroke color to #a4b1cf and when you’re done shut the fill color, so that the only thing will show is the stroke.
For CS5 and below, you can do this manually by using the Line Tool(U) 5px each line and 6px gap.
We need to delete the top part stitches. You need to Rasterize the layer and erase the top part stitches.
You probably have the icons provided in the resource. Place the icon in the center of our base shape.
Apply this Blending Option:
Add the icon name using Text Tool(T).
Duplicate the text layer, change the color to #2b406a and move it up once, using the up arrow key.
Duplicate the base shape layer and make the fill color to #000000. Place this below the base shape. Now go to Filter – Blur – Gaussian Blur.
Mask the layer and mask the portion that we don’t need. Refer to the screenshot below.
Using Linear Gradient, #000000 add a shadow as shown in the screenshot below.
Add this 1px #515055 line using the Line Tool(U) and place it above the shadow.
Now finish this by masking both ends of the line and the shadow.
And finally we’re done. I hope you learned something from this tutorial. Also, I added 4 more social icons. You can grab the PSD file by clicking the download link below. Until next time. :)
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
Thursday, July 12th, 2012 00:54
Thanks for a well explained tutorial for producing great results.
Friday, July 13th, 2012 02:46
Thank you Vern, for kind comment. Did you understand every step, any questions?
Friday, July 13th, 2012 15:06
It was very well explained so no questions from me
Wednesday, July 11th, 2012 14:36
Sincerely appreciate the tutorial. Quite straight forward and beneficial to learning core fundamentals of iconography design.
Wednesday, July 11th, 2012 11:26
Hi,
love your tutorials, tried several of them and they were very helpful and they taught me a few new things.
But in this one i am stucked on step 4 (adding gradient overlays). Thing is, when i use it i use it all over the shape, but as i can see in ur shape, your gradient ends, in about the middle of the shape (in second gradient its just in the top). I think its just some stupid mistake that i am still doing, but i think i tried almost everything.
If you could reply, i would be very grateful, because i would love to use these icons for my future website.
Wednesday, July 11th, 2012 03:58
Great tutorial mate. Step by step. Will surely try this.. ;)
Thanks for sharing!
Saturday, June 23rd, 2012 11:25
Thankyou! you are really talented.
Im having problem in creating the ribbon shape…there’s no black line showing nor the direct selection tool working. i created a vector mask but nothing’s happening :( please help. Im getting ready for a contest and practising techniques. Using photoshop CS5 extended.
Would really appreciate your help! :)
Regards.
Thursday, June 21st, 2012 05:27
Hi Michael,
Thanks for this tutorial on Photoshop. The icons looks great!!
Saturday, June 16th, 2012 06:06
Thank you Alicia, did you understand all the steps? Nothing confusing?
Tuesday, May 22nd, 2012 08:56
hi. i think you have one error in this point:
“Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.”
Correction would be:
“Now that we have the background, let’s add a NEW LAYER AND A light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.”
The correction is because when you say:
“Change the layer mode to Soft Light and change the opacity to 50%.”
this correction is that if you add a layer to the light and choose 50% opacity, the background also changes and is not.
GOOG TUTORIAL! thanks
Monday, May 21st, 2012 23:35
Great tutorial, I like the image used in this article and will use it in my blog :) (by giving credits to source)
Monday, May 21st, 2012 04:01
Thought this was a great tutorial and one that has showed me some useful techniques. I love articles like this because they show me new tips, tricks and how I can approach areas like social icon design in a different manner. I really like the designs of these icons and they stand out for me because they are different to the look of these icons that you see on a lot of sites at the moment. Thought there was great detail and this is a tutorial I will be a resource for me going forward so I can experiment and see what I can create.
Sunday, May 20th, 2012 10:41
Nice tutorial Michael. even beginners of photoshop like me can understand the instructions clearly.
Thanks
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Rakhitha Nimesh
Sunday, May 20th, 2012 10:41
Nice tutorial Michael. even beginners of photoshop like me can understand the instructions clearly.
Thanks
denzdii
Monday, June 4th, 2012 10:43
Waw… great tutorial and nice your blog design…
Alicia
Saturday, June 16th, 2012 06:04
Cool tutorial, thanks!
Dainis Graveris
Saturday, June 16th, 2012 06:06
Thank you Alicia, did you understand all the steps? Nothing confusing?
farameo
Tuesday, May 22nd, 2012 08:56
hi. i think you have one error in this point:
“Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.”
Correction would be:
“Now that we have the background, let’s add a NEW LAYER AND A light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.”
The correction is because when you say:
“Change the layer mode to Soft Light and change the opacity to 50%.”
this correction is that if you add a layer to the light and choose 50% opacity, the background also changes and is not.
GOOG TUTORIAL! thanks
Goran
Sunday, May 20th, 2012 18:57
Great looking icons and great tutorial.
Thanks for sharing!
Paul Weston
Monday, May 21st, 2012 04:01
Thought this was a great tutorial and one that has showed me some useful techniques. I love articles like this because they show me new tips, tricks and how I can approach areas like social icon design in a different manner. I really like the designs of these icons and they stand out for me because they are different to the look of these icons that you see on a lot of sites at the moment. Thought there was great detail and this is a tutorial I will be a resource for me going forward so I can experiment and see what I can create.
Bharat Chowdary
Monday, May 21st, 2012 23:35
Great tutorial, I like the image used in this article and will use it in my blog :) (by giving credits to source)
Dainis Graveris
Sunday, May 27th, 2012 05:46
heh, thanks, show off once it’s live :)
Smita
Thursday, June 21st, 2012 05:27
Hi Michael,
Thanks for this tutorial on Photoshop. The icons looks great!!
Vern
Thursday, July 12th, 2012 00:54
Thanks for a well explained tutorial for producing great results.
Dainis Graveris
Friday, July 13th, 2012 02:46
Thank you Vern, for kind comment. Did you understand every step, any questions?
Vern
Friday, July 13th, 2012 15:06
It was very well explained so no questions from me
Matt
Wednesday, July 11th, 2012 14:36
Sincerely appreciate the tutorial. Quite straight forward and beneficial to learning core fundamentals of iconography design.
Asna
Saturday, June 23rd, 2012 11:25
Thankyou! you are really talented.
Im having problem in creating the ribbon shape…there’s no black line showing nor the direct selection tool working. i created a vector mask but nothing’s happening :( please help. Im getting ready for a contest and practising techniques. Using photoshop CS5 extended.
Would really appreciate your help! :)
Regards.
Ammar Ali
Wednesday, July 11th, 2012 03:58
Great tutorial mate. Step by step. Will surely try this.. ;)
Thanks for sharing!
Petr Šťavík
Wednesday, July 11th, 2012 11:26
Hi,
love your tutorials, tried several of them and they were very helpful and they taught me a few new things.
But in this one i am stucked on step 4 (adding gradient overlays). Thing is, when i use it i use it all over the shape, but as i can see in ur shape, your gradient ends, in about the middle of the shape (in second gradient its just in the top). I think its just some stupid mistake that i am still doing, but i think i tried almost everything.
If you could reply, i would be very grateful, because i would love to use these icons for my future website.