Tutorials ETC

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

STEP #1

Download and install the following great, free Photoshop shapes and brushes:

	Free Hand Drawn Social Bookmarking Photoshop Shapes from our own WebTreats ETC.
	Free Paper Textures Photoshop Brushes from Susan Libertiny at Brush Portfolio
	Free Coffee Stains and Splashes Brushes from QBrushes.
	Free High-Res Grungy Watercolor Photoshop Brushes from Bittbox.com.

STEP #2

Start by creating a nice coffee stained paper background. Create a new document 1440px by 900px with a white background. Select the brush tool by typing “B,” then go up to the toolbar, and open up your brush presets. If you’ve installed the brushes from step #1 in the order listed in that step, your brush presets should look something like this:

STEP #3

Choose the third brush from the paper textures brushes, set your foreground color to #9c8d48, and then click once in the center of your canvas. Your image should now look something like the image below:

STEP #4

To add some coffee stains, create a new layer by going to “LAYER >> NEW >> LAYER.” Then select one of the coffee stain brushes, set the opacity to 40%, and click somewhere on your canvas. Repeat this with a couple other coffee stains until you have something like the image below:

STEP #5

To add some social bookmarking shapes, activate the shape tool by clicking “U.” Then go up to the toolbar, and open up your shape presets by clicking on the little down arrow. If you have installed the Hand Drawn Social Network Shapes, you will see something like the image below. Select one of the shapes, and make sure you have “Custom Shape Tool” and “Shape Layers” selected as shown below:

STEP #6

Now select another shape, this time with the setting “Add to Shape Area” selected as shown below. This will keep all your shapes in one layer, which will make future steps easier.

STEP #7

Repeat this for several more shapes until you have something that looks like the image below:

STEP #8

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

STEP #9

To make these icons look a little more like a coffee stain, you will need to add some texture. To do this, first select all the shapes in the shape layer by holding down CTRL (or COMMAND) and then clicking on the thumbnail of the shape layer as shown below.

STEP #10

To make your shapes appear to bleed into the paper, you will need to enlarge and feather your selection. To do that, go to “SELECT >> REFINE EDGE” and apply the settings below:

STEP #11

Go to “LAYER >> NEW >> LAYER” to create a new layer. Activate your brushes by typing “B,” and select one of the Bittbox watercolor brushes. Click once anywhere on your canvas to drop the watercolor texture within the selected areas. Then set the layer blend mode to linear burn, the opacity to 58%, and you should have something that looks like this:

That’s it!

You should have something that looks like this.

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

What’s Included in the Download:

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

More PSD’s are available in our shopping cart.

Related Tutorials

Premium

Tags: Icons