Watercolor Social Networking Icons

Posted on 08. May, 2009
by Tutorials Etc in Icons

Today's Etc Tutorial is a watercolor effect. We will be applying the watercolor effect to a set of custom hand drawn social networking Photoshop shape.

In this tutorial, you will learn how to create the Watercolor Social Bookmarking Icons found on WebTreats ETC.

Watercolor Rss Icon Watercolor Social Networking Icons

STEP #1

Download and install the following free Photoshop brushes:

Bittbox Watercolor Brushes Watercolor Social Networking IconsFree High-Res Grungy Watercolor Photoshop Brushes from Bittbox.com.
Bittbox Spatter Brushes 0 Watercolor Social Networking IconsFree High-Res Splatter Photoshop Brushes from Bittbox.com.
Watercolor Sociables Preview Watercolor Social Networking IconsFree Grungy Watercolor Social Media Photoshop Brushes from our own WebTreats ETC.

STEP #2

Create a new document 600px by 600px with a white background, and then create a new layer by going to “LAYER >> NEW >> LAYER.” Activate the brush tool by typing “B,” and then open up the brush presets by pressing F5. If you’ve installed the brushes from step #1 in the order listed in that step, your brush presets should look something like this:

Watercolor Socials Step21 Watercolor Social Networking Icons

STEP #3

Choose the fifth brush from the grungy watercolor brushes, set your foreground color to #7046de, the brush size to 660px, and then click once in the center of your canvas to place the watercolor splash. When you’re finished, set the opacity of your layer to 60%. Your image should look something like the one below:

Watercolor Socials Step31 Watercolor Social Networking Icons

STEP #4

To add some watercolor splatter, create another new layer by going to “LAYER >> NEW >> LAYER.” Select the sixth paint splatter brush, set the size to 1333px, and then click somewhere in the upper right hand corner of your canvas as shown below. When you’re finished, set the layer opacity to 60% and the blend mode to multiply. You should see something like the pic below:

Watercolor Socials Step41 Watercolor Social Networking Icons

STEP #5

Type “E” to activate the eraser tool. Then select the watercolor brush that you used in step #1. This time shrink it down to 300px and erase the upper right hand corner of the splatter layer so that it fades out nicely as shown below:

Step 51 Watercolor Social Networking Icons

STEP #6

To add the RSS shape, create another new layer by going to “LAYER >> NEW >> LAYER.” Change your foreground color to #489c9b, select the watercolor RSS brush, and then place it somewhere in the middle of your canvas. When you’re finished, you should see something like the image below:

Step 6 Rss Brush1 Watercolor Social Networking Icons

STEP #7

You will now need to add some layer styles to the RSS layer. Double click on the layer to bring up the layer styles pallet, and then add the layer styles shown below:

Watercolor Layerstyle 11 Watercolor Social Networking Icons Watercolor Layerstyle 21 Watercolor Social Networking Icons Watercolor Layerstyle 31 Watercolor Social Networking Icons Watercolor Layerstyle 41 Watercolor Social Networking Icons Watercolor Layerstyle 51 Watercolor Social Networking Icons Watercolor Layerstyle 61 Watercolor Social Networking Icons Watercolor Layerstyle 71 Watercolor Social Networking Icons

STEP #8

The final step is to punch up the colors by creating a levels adjustment layer. Go to “LAYER >> NEW ADJUSTMENT LAYER >> LEVELS” to create the adjustment layer, and enter the following settings:

Rgb Levels Watercolor Social Networking Icons Red Levels Watercolor Social Networking Icons

Thats it!

This is what you should end up with.
Watercolor Rss Icon Watercolor Social Networking Icons

Didn’t get the exact same results? Want to save some time? Download the source files below.

Learn More
Free Download
Watercolor Social Networking Icons Premium PSD’s

What’s Included in the Download:

• Fully layered source PSD
• 50 .PNG social media icons in this style as seen in the preview.

View Shopping Cart
Like this Tutorial? Somebody else might too. Consider sharing it on one of these social bookmarking sites.
  • Digg
  • del.icio.us
  • Technorati
  • Design Bump
  • Facebook
  • Reddit
  • StumbleUpon
  • Twitter

Tags:

15 Responses to “Watercolor Social Networking Icons”

  1. Tutorials Room

    12. May, 2009

    Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com

    Waiting for your next tutorial :)

    Reply to this comment
  2. huwaw69

    13. May, 2009

    thanks for the free brushes, and you did a great job doing brushes as effects on this…

    Reply to this comment
  3. sri

    13. May, 2009

    Good tutorials, keep it up . It is useful for bigginers. Thanks alot.

    Reply to this comment
  4. Pamela

    15. May, 2009

    @Tutorials Room ~ Thanks for featuring our tutorial!

    @huwaw69 ~ Thank you. Glad you like the brushes!

    @sri ~ You’re welcome, thanks for the positive feedback!

    Reply to this comment
  5. LeraJenkins

    23. Jun, 2009

    Likely yes

    Reply to this comment
  6. Lita

    24. Jun, 2009

    @LeraJenkins ~ Thank you! :)

    Reply to this comment
  7. Susan

    07. Sep, 2009

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    Susan

    http://sketchingdrawing.com

    Reply to this comment
  8. Samantha Evans

    14. Sep, 2009

    Amazing! A nice stuff for anyone who wishes to personalize his interface or anything. I may also offer fatcow in case you like the style of these pix. I’m pleasantly surprised by the details and style. Thank you!

    Reply to this comment
  9. Watercolor Art

    24. Jan, 2011

    I love this digital watercolor art!! I am going to download these and use them to create a banner for my site – http://maryirwinwatercolors.com/
    Thanks for the idea!!!

    Reply to this comment
    • Lita

      24. Jan, 2011

      You’re most welcome. We’re glad that our watercolor icons will be of use to your site.

      Reply to this comment
  10. Trackbacks

    23. May, 2013

    Reply to this comment

Leave a Reply