Create Social Networking Chicklets in Photoshop

Posted on 05/17/2009 by Dawn Pedersen — 16 Comments ↓

Final chicklet

A “chicklet” (as opposed to Chiclet, a yummy chewing gum) is a small button used to link to all kinds of things – social networks in particular. Back in the day, they were short and wide rectangles with small text. The new trend is rounded squares with plenty of gloss. Learn how to make one here.

This intermediate tutorial assumes that you already have these skills:

• creating and saving documents
• selecting and using tools
• viewing and using panels (palettes)
• working with gradients
• setting the layer opacity
• creating text

Below is a typical set of old school chicklets.

Old School Chicklets

Now here are some new school chicklets, which can be found at Mashable.

New School Chicklets

I was inspired by Mashable’s chicklets to make my own colorful versions in my BluLob sidebar.

My Chicklets

They take up more room, but boy are they attractive. A few well-placed and well-designed chicklets will have more impact than a giant cluster.

It helps to grab a copy of the original logo for whatever you link to. Let’s make a giant “f” chicklet like Mashable uses for Facebook.

 

Source File

Here’s a large Facebook logo. Click the image below to get the full-size verison:

Facebook Logo - click for a larger version

 

Part One: the Logo

We’re going to work with a nice, big image size so it is easy to work with. Later we’ll reduce its size for the Web. Starting with a large file gives us a lot of options when we want to make it smaller. Enlarging a small image = bad. Ensmalling a large image = good.

1. Open the Facebook logo in Photoshop.
2. Use the Rectangular Marquee tool to draw a rectangle around just the letter “f”.

Copy the letter f

3. Press Ctrl+C (Mac: Cmd+C) to copy the pixels to your computer’s clipboard.
4. Start a new document that is 300px by 300px, 72 pixels/inch with a white background. Save the file.
5. Press Ctrl+V (Mac: Cmd+V) to paste the letter f on its own layer above the background. Name this layer “original f”

Paste the letter f

6. Use the Magic Wand tool to select the white pixels of the letter f.
7. Press Ctrl+J (Mac: Cmd+J) to copy the pixels to a new layer at the top. Name this layer “white f”.

Copy the white f to a new layer

8. Turn off visibility of the “original f” layer by clicking on the eye icon on its left edge.
9. Your white f probably has a blue fringe remaining around it. Make sure the “white f” layer is still active, and go to Layer > Matting > Defringe…
10. Enter a width of 1 pixel and click OK.

Defringe

11. Click on the fx symbol at the bottom of the layers panel and select Bevel and Emboss.
12. Use the following settings and click OK:
    • Style: Emboss
    • Technique: Smooth
    • Depth: 50%
    • Size: 2px
    • Direction: Down

Bevel and Emboss

13. We need to make the letter f bigger. Press Ctrl+T (Mac: Cmd: T) to enter the Transform mode.
14. Make the letter about 200 pixels tall (you can use the Info panel to see the H value). Hold the Shift key down while you drag from any corner of the transform box.
15. Leave space all around it, and room at the bottom for the text that will say “Facebook”. Press Enter (Mac: Return) to complete the transformation.

Transform mode

16. The edges look a tad blurry. Go to Filter > Sharpen > Smart Sharpen…
17. Set the Amount 100%, the Radius to 20px, and click OK.

Sharpen

 

Next: the Chicklet

Related Posts

• 6 Rules for Realistic Reflections in Photoshop
• Yes, You Can Use Spot Colors in Photoshop
• Make a Tiki God in Photoshop
• Saturday Round-Up for May 09 2009
• Delicious Orange Cream Text in Photoshop

Pages: 1 2 3

‹ Saturday Round-Up for May 16 2009

Before and After Design: a Child’s Birthday Invitation ›

Tagged with: gradients, layer effects, paths, Photoshop, web design
Posted in Photoshop, Tutorials

16 comments on “Create Social Networking Chicklets in Photoshop”

1. Jaime says:

   05/19/2009 at 1:49 pm

   Awesome, thanks so much! Here’s to me being able to transfer these skills to other icons!
2. Dawn Pedersen says:

   05/19/2009 at 3:49 pm

   You’re welcome, Jaime! Let me know if you have any questions.
3. Deb says:

   05/22/2009 at 11:10 am

   Thanks much for the various tutorials. I was wondering if you could put options to print and/or download a tutorial since I find it easier for follow a hardcopy when following the tutorials.
4. Dawn Pedersen says:

   05/25/2009 at 9:03 pm

   Thanks for the great suggestion, Deb! I had been wanting to do that but kept forgetting to. You will now see a “Print This” link at the top of each article.
5. T-Law says:

   05/29/2009 at 10:19 pm

   Thanks this was useful for me.
6. Dawn Pedersen says:

   05/30/2009 at 12:27 am

   You’re welcome, T-Law!
7. João Cerca says:

   06/15/2009 at 6:56 am

   Hi, you got a nice & cool tutorial
   I have a small problem, everything is correct until step 15. In my photoshop (CS4) the modify is inactive. How can I solve this problem?
   Cheers
   Keep up the good work
8. Dawn Pedersen says:

   06/15/2009 at 10:03 am

   Hi João!
   Are you sure you did step #14 to create a selection again? Modify will only appear if you have an active selection (marching ants).
9. gavin says:

   07/21/2009 at 7:54 am

   awesome tut! i’ve always wanted to learn how to create these
10. Dawn Pedersen says:

    07/22/2009 at 1:53 pm

    Thanks, Gavin!
11. Andrew Mooers says:

    09/02/2009 at 1:54 pm

    Thanks for the post and help! Superb!
12. Caspar Green says:

    11/18/2011 at 2:46 pm

    This was great! Worked perfectly.
    Thanks so much.
13. Anoniem says:

    05/19/2012 at 7:24 am

    Awsome tut. you realy helped me!!! thx allot
14. Andrew Mooers says:

    11/14/2012 at 1:34 pm

    Great resource to make the social media look stand out.
15. ficfiric says:

    01/20/2013 at 3:00 pm

    great tutorial, just one question, why did you apply layer mask on rim layer, what is its purpose??
16. Conveyancing lawyers in Nottingham says:

    01/27/2013 at 4:45 pm

    Stunning story there. What occurred after?

    Good luck!

    my web-site … Conveyancing lawyers in Nottingham

17 Pings/Trackbacks for "Create Social Networking Chicklets in Photoshop"

1. 30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazine says:

   08/11/2009 at 7:18 am

   [...] Social Networking Chicklets in Photoshop [...]
2. 30 Faydali Photoshop Dugmeler ve Rozetler Tutorials says:

   08/29/2009 at 8:05 pm

   [...] Social Networking Chicklets in Photoshop [...]
3. How to create your own wordpress social buttons withouth the use of plugins | Design strike says:

   08/31/2009 at 12:12 pm

   [...] manage, create and even download your social buttons. If you like to Photoshop your buttons then this article might help you out to create the perfect social [...]
4. 30 Photoshop Buttons and Badges Tutorials | oOrch Blog says:

   10/02/2009 at 6:07 am

   [...] Social Networking Chicklets in Photoshop [...]
5. Excellent Buttons and Badges Tutorials in Photoshop | Earning Ways says:

   04/01/2012 at 8:39 pm

   [...] 4. Facebook Button Tutorial [...]
6. Tutorial on how to make chiclet buttons | 8BitRobot says:

   04/08/2012 at 9:20 am

   [...] ran across a good tutorial for making chiclet buttons by spelling the word incorrectly as chicklet.  I know the buttons are [...]
7. 18 Amazing Photoshop Button Tutorials - Design Freebies says:

   04/09/2012 at 11:21 pm

   [...] 16. Social Networking Chicklets in Photoshop [...]
8. 30+ Excellent Photoshop Tutorials for Buttons & Badges - Tutorials-Share.com says:

   08/14/2012 at 4:23 am

   [...] Social Networking Chicklets in Photoshop [...]
9. » 30 ottimi tutorials photoshop buttons - PYG Design Studio Blog says:

   08/24/2012 at 4:28 am

   [...] Social Networking Chicklets in Photoshop [...]
10. Create your social buttons without the use of plugins | I Online Sharing - Share to be shared says:

    11/10/2012 at 10:32 am

    [...] manage, create and even download your social buttons. If you like to Photoshop your buttons then this article might help you out to create the perfect social [...]
11. Graphic Design and iDiversity, pt. 2: Social Networking Chicklets | Library, Baby! says:

    01/10/2013 at 12:50 pm

    [...] this would be a good way of creating buttons that look nice and are tried and true. I began with several tutorials and came up with these [...]
12. 25 Photoshop Tutorials For Creating Buttons and Badges says:

    04/01/2013 at 1:08 pm

    [...] Social Networking Chicklets in Photoshop [...]
13. 45 Creative Buttons And Badges Tutorials - Blogs-design.com says:

    04/06/2013 at 6:14 am

    [...] Social Networking Chicklets in Photoshop [...]
14. 45 Creative Buttons And Badges Tutorials | iDevie says:

    04/12/2013 at 5:41 am

    [...] Social Networking Chicklets in Photoshop [...]
15. 50 Tutorials of Creating Buttons And Badges says:

    05/31/2013 at 4:38 am

    [...] Social Networking Chicklets Facebook Photoshop [...]
16. Design Magazine | Inspirational Resources For Web Designers & Developers says:

    06/01/2013 at 12:14 am

    [...] Social Networking Chicklets Facebook Photoshop [...]
17. 50 Tutorials to Help You Create Buttons And Badges | Resources For Developers, Designers And Photographers says:

    06/08/2013 at 9:46 am

    [...] Social Networking Chicklets Facebook Photoshop [...]