Categories
design education technology

Create Social Networking Chicklets in Photoshop

Part Three: Gloss and Text

  1. Create a new layer above the “surface” layer. Name it “gloss”.
  2. Select the Elliptical marquee tool and draw an oval that drops about half-way down into the image window.
Ellipse selection
Ellipse selection
  1. Fill the selection with white on the “gloss” layer: Edit > Fill, Use: White; click OK.
Fill selection with white
Fill selection with white
  1. Press Ctrl+D (Mac: Cmd+D) to deselect.
  2. Ctrl+click on the layer mask thumbnail for the “surface” layer to load the smaller square shape as a selection.
  3. Add a layer mask to the “gloss” layer.
Add a layer mask
Add a layer mask
  1. Set the opacity for the “gloss” layer to 20%.
20% layer opacity
20% layer opacity
  1. 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
Add white Facebook text
  1. 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
Reveal Bevel and Emboss layer effect
  1. 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
Copy the layer effect
  1. 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
Save for Web

You’re finished! Here is the final image:
Final chicklet
Final chicklet

 

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

 

Done

16 replies on “Create Social Networking Chicklets in Photoshop”

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.

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

This tutorial is just what i need! Thank you! I really want to learn how to do this! I got stuck at the rounded corner though, my PS version is probably too old so I was unable to follow your guide through. Oh well, I still learned a lot by reading the guide 🙂 Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.