Create Social Networking Chicklets in Photoshop

By Dawn Pedersen · 05/17/2009 ·

Print This Article

Page 1 Page 2 Page 3

Part Three: Gloss and Text

Create a new layer above the “surface” layer. Name it “gloss”.
Select the Elliptical marquee tool and draw an oval that drops about half-way down into the image window.

Ellipse selection

Fill the selection with white on the “gloss” layer: Edit > Fill, Use: White; click OK.

Fill selection with white

Press Ctrl+D (Mac: Cmd+D) to deselect.
Ctrl+click on the layer mask thumbnail for the “surface” layer to load the smaller square shape as a selection.
Add a layer mask to the “gloss” layer.

Add a layer mask

Set the opacity for the “gloss” layer to 20%.

20% layer opacity

Add some white text to identify the link, just in case people don’t recognize what the “f” is for. I used Univers Extended at 40pt.

Add white Facebook text

In the Layers panel, check if you can see the “Bevel and Emboss” layer effect showing underneath the “white f” layer. If not, click the “Reveals layer effects in the panel” triangle to the right of the “white f” layer.

Reveal Bevel and Emboss layer effect

Copy the “Bevel and Emboss” layer effect from the “white f” layer onto the “Facebook” text layer:
1. Press and hold the Alt key (Mac: Opt) first.
2. Click+drag the “Bevel and Emboss” layer effect from under the “white f” layer onto the “Facebook” layer.
3. Let go of the mouse button, then the Alt (Opt) key.

Copy the layer effect

Finally, save the chicklet for the Web:
1. File > Save for Web & Devices…
2. Choose the GIF 128 Dithered preset for the best image quality for this particular image. For even better image quality, increase the Colors to 256.
3. Reduce the image size. I used 60px by 60px.
4. Click Save and save your file in your Web site’s image folder.

Save for Web

You’re finished! Here is the final image:

Final chicklet

Have any questions? Did I leave something out? Please leave a comment below! Thanks!

Done

Page 1 Page 2 Page 3

Share this Article

You can share this article almost anywhere but on your car's back bumper.
Hover over this bar to access the menu.

Category: Photoshop, Tutorials

Tags: gradients, layer effects, paths, Photoshop, web design

Comments

16 Comments

By Jaime, 05/19/2009 @ 1:49 pm

Awesome, thanks so much! Here’s to me being able to transfer these skills to other icons!
By Dawn Pedersen, 05/19/2009 @ 3:49 pm

You’re welcome, Jaime! Let me know if you have any questions.
By Deb, 05/22/2009 @ 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.
By Dawn Pedersen, 05/25/2009 @ 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.
By T-Law, 05/29/2009 @ 10:19 pm

Thanks this was useful for me.
By Dawn Pedersen, 05/30/2009 @ 12:27 am

You’re welcome, T-Law!
By João Cerca, 06/15/2009 @ 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
By Dawn Pedersen, 06/15/2009 @ 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).
By gavin, 07/21/2009 @ 7:54 am

awesome tut! i’ve always wanted to learn how to create these
By Dawn Pedersen, 07/22/2009 @ 1:53 pm

Thanks, Gavin!
By Andrew Mooers, 09/02/2009 @ 1:54 pm

Thanks for the post and help! Superb!
By Caspar Green, 11/18/2011 @ 2:46 pm

This was great! Worked perfectly.
Thanks so much.