Create a Wooden Social Media Icon Quickly with Photoshop

Preview

Preview

Step 1: Set Up the Photoshop Canvas

I like working with a canvas that is larger than the final product, so I created the canvas at about 510x510px.

I set up Photoshop guides (View > New Guide) for the outer border of the icon. In addition, I also placed a horizontal guide and a vertical guide at the center of the canvas in order to have an idea of where the center is (and conveniently, let items snap to them in place).

I also threw in a simple black-to-gray gradient background to make it easier to see my work.

Set Up the Photoshop Canvas

Step 2: Getting Ready for Icon Building

Time to get started! Create a layer group for your icon by choosing Layer > New > Group or clicking the "folder" icon at the bottom of the Layers Panel. This will create a folder in the Layers Panel that can hold multiple layers; by default, this first layer group will automatically be named "Group 1." I’ve renamed this group to "DERELICT ICON."

Create a new layer within that group for the icon’s base shape. Use the Rounded Rectangle Tool (U), with the Radius option set to 40px and the Fill pixels option chosen so that it draws the shape in the new layer, to draw a rounded rectangle within the outer guides. In our example, the size of the rounded rectangle shape is 370x370px. The color doesn’t matter, so I’ve just used the default white color.

We now need to use the rounded rectangle shape to create a mask on the layer group. First, use the Magic Wand Tool (W) to create a selection around the rectangle. From there, select the folder in the Layers Panel and then click on the Add layer mask button (it looks like a white circle inside of a gray rectangle) located at the bottom of the Layers Panel.

Getting Ready for Icon Building

This will ensure that all layers within the folder is kept nicely within the rounded rectangle you made. And better yet, if you want to change that rectangle later on, you’ll be able to do so easily. You can turn off the white rectangle layer for now, as you’ll need it later.

Step 3: Finding a Nice Wooden Texture

Find an image of a good tree stump; some image where the cracks (the technical term of these cracks are "scars") originate from the center and flow outwards. Don’t settle on the first image that you cross; make sure you find one you’re willing to spend a bit of time on.

Here are some options (from Six Revisions):

Once you have that image, paste it right into your canvas, making sure it goes inside the layer group we created so that it is affected by our layer group’s mask. Resize the image using Free Transform (Ctrl/Cmd + T) to fit your needs. The layer mask you created before will conveniently keep everything nice and tidy within the rectangle.

I’ve gone ahead and added a Gradient Overlay layer effect, whereby the Blend Mode option is set to Soft Light.

Finding a Nice Wooden Texture

Step 4: Adding Your Social Media Logo

This step is quite straightforward. All you want to do is find a nice high-resolution outline of your logo (maybe try a Google Image search). It doesn’t matter if the inside is textured as long as the outline is not soft, but rather, hard and crisp. If not, then try seeing if you can correct the sharpness of the edges by using the Sharpen filters (Filter > Sharpen) or experimenting with the layer’s Blend Mode.

Paste your social media logo as a new layer into our work and resize it to fit the rectangle. I used Twitter for this tutorial.

Adding Your Social Media Logo

Step 5: Styling Your Social Media Logo

We’re slowly getting to the meat of the design, good job getting to this point! Before giving the logo all the various style bits, first change the Fill of its layer to 0% (you’ll see the Fill slider right below the Opacity slider at the top of the Layers Panel).

Next, you’ll want to customize the layer style. Double-click on the layer to access the Layer Styles dialog window. Then apply the following layer effects:

Inner Shadow

Outer Glow

Inner Glow

Inner Glow

Color Overlay

Color Overlay

Step 6: Paint on the Scars

This is the part of the tutorial where you’ll need to get creative with your design. Staying on your Social Media Logo layer, take a small circular or rectangular brush of your choosing (Size: 8-16px) and set it to have some good Hardness value (90%+ is good). Although it doesn’t matter what color you use, I’ve used white just so you can see my brush strokes.

Start painting by following the scars in the wood. You’ll see in the following image at the bottom-left how I’ve done this with one of the scars, keeping it smooth and always a little larger than the scar itself.

Paint on the Scars

If you’re still not following along, here is the exact same layer, but having changed the Fill back to a 100% for the sake of illustration.

Paint on the Scars

Now continue expanding on the icon until you’ve got an icon that you feel looks like it’s been "cut out" of the wood and then further degraded — that is the feeling you are looking for. Here’s what I ended up with:

Paint on the Scars

Step 7: Add Depth to the Logo

To further persuade the viewer of the connection between the logo and the scars, we’ll want to add some more depth to the piece. We do this by first duplicating the Social Media Logo layer (Ctrl/Cmd + J) and then removing its current layer style (right-click on the layer and choose Clear Layer Style).

Add Depth to the Logo

With this blank slate, we’ll then give the duplicated layer a new style, only this time, we will be using the Gradient Overlay layer effect in an inverted manner to the one we did last. This gives our work a nice contrasting effect and depth.

Step 8: Giving It the Final Polish

Before we are ready to use our icon, we’ll need to give it one last beauty pass to make sure it’s packing enough "punch." Drag the original white rectangle layer from Step 2 to the top of your layer group’s stack. Create a layer style for it with these effects:

Inner Glow

Bevel and Emboss

This layer effect will give it a button look.

Gradient Overlay

The resulting look is one with strong contrast, good lighting and a well-balanced feel (which is needed for any icon set).

Almost there!

Step 9: Color Boost

The last thing I did was to give the entire design a color boost. It isn’t much, but by adding a Hue/Saturation adjustment layer on top of all the layers, we can easily achieve this. Add an adjustment layer by going to Layer > New Adjustment Layer > Hue/Saturation or clicking on the Create new fill or adjustment layer button at the bottom of the Layers Panel and then choosing Hue/Saturation from the menu. I only pushed the Saturation slider up by +15, leaving the other values untouched.

The final result is a grungy wooden Twitter social media icon that feels older than the Internet itself (which is what I wanted to achieve).

Color Boost

Step 10: Don’t Stop There!

Last but not least, the biggest thing I’d want you to take away from this tutorial is not to stop here, but keep exploring other ideas. I had a look through one of my PSD scrap folders in my computer and found these other ideas that I had also brainstormed at the time. Just design away, and most of all: Have fun!

Don't Stop There!

Tutorial Summary

This tutorial showed you a quick and easy way to design a grungy, wooden social media icon using fundamental design techniques in Photoshop. Thank you for following along with this tutorial. Engage and connect with me on Twitter and leave a comment!

Preview

Download Source Files

  • http://www.colddesign.it Giacomo Colddesign

    Great result…!

  • http://maddencorner.blogspot.com A. Tatum

    Nice. I’ll have to try this in Gimp.

  • http://www.ciaracreative.com ciara

    love the effect, love the texture, really nice work and easy to follow

  • http://www.cabbagetreesolutions.com Gina

    wow great post. I followed it and created some very good icons. Thanks alot..!!

  • http://webdev5.com Mufti

    Hi, Nice tuts, thanks for sahring.

  • http://www.scottcarmichael.co.uk Scott

    Wow! Thanks for that it looks really cool.

  • http://sixrevisions.com Jacob Gube

    Look at Ciara finally rocking a Gravatar. No more “Mystery Man” avatars for you! 🙂

  • http://www.graphicbeacon.com Jermaine

    Love the final outcome. Looks very natural.

  • http://www.ericvasquez.net Eric Vasquez

    Cool icon tut! I like it

  • MarkT

    Awesome! A great idea, really well-explained and with some hints as to where to take it next. Great work, Noel. 🙂

  • http://www.krishnasolanki.co.uk/ Krishna

    looks awesome! defo one to try!

  • http://www.noeltock.com Noel Tock

    Thank you all for the comments, their much appreciated and I’m glad you like the tutorial! Cheers, Noel

  • niko

    This is just brilliant. The result is amazing, yet seems so simple.

    Thank you.

  • http://www.gearexposure.com Ben

    Love it! Organic style design is so fun and paired with the right site work a treat. Will definitely try the wooden icons.

  • http://www.craigpennings.com Craig Pennings

    Love the detail! Great tut.

  • John Yip

    Nice work. Thanks for the tut

  • bob

    i have done this tutorial about 7 times now each for a different icon, no matter how many times i do it i can not find an appropriet tree stump. can anyone send me a link to the stump they used ?

  • Criss

    so interesting,thank you ~

  • Nick

    Genial ! Gruezi from zh.

  • http://pixert.com Kate Mag

    Awesome tutorial. Love the result. Thanks for sharing

  • adriane

    my logo just shows up as a box idk what im doing lol

  • http://www.emworks.com.au/ Claire

    This is great and so simple to use! Thanks so much

  • http://www.bollywoodspace77.blogspot.com Anaxa

    so nice and attractive tutorial contains the site which I expected, well done carry on. Really nice !!

  • http://www.mashdesigning.com Ifham khan

    Awesome tutorial! I m gonna create one with my own concept. Thanks for the tutorial.

  • Avram Oana

    unfortunately I stuck at step # 3,I followed all the steps but do not know why the image with tree textures doesn’t fit into the exact form of the round rectangle.I mean when i drag the image on the canvas and after i use free transform it still doesnt match with that rounded corners.It is just a perfect square.Please help me.Thanks in advance.

  • biten

    thanks a lot for making possible…..

  • kyzoo

    Thanks so much! This is the first thing I’ve ever made on Photoshop and it looks great.

  • Desiggn

    Sweet assortment of icons design, i’m Graphic designer n this stuff will be helpful for me! Thanks for collecting.

    http://desiggn.com/

  • Sakina

    First, great tutorial.
    Second, I adore your switching from banking to design industry. You are so talented.