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.

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

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

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:

 

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”.

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”

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”.

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.

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

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.

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.

1. Create a new layer above the Background layer. Name it “rim”.

2. Select the Rectangle Tool. Up in the Control panel, click the radio button for Paths.
3. Set the Radius for the corners to 40px.

4. Draw a round-corner square just inside the edges of your document. Hold the Shift key to get a perfect square.

5. In the Paths panel, double-click the words “Work Path” and rename the path as “chicklet”.

6. Load the rounded square as a selection: with the “chicklet” path selected in the Paths panel, click on the “Load path as selection icon” at the bottom of the panel.

7. Add a layer mask to the “rim” layer: in the Layers panel, click on the “Add vector mask” icon at the bottom.

8. Select the Gradient tool, set it to Linear Gradient and open the Gradient Editor from the Control panel (Options bar).

9. Set the first color stop as the same blue as Facebook logo: R-59, G-89, B-151. Click OK to return to the Gradient Editor.

10. Set the second color stop to a lighter blue like: R-120, G-150, B-212. Click OK twice to leave the Gradient Editor.

11. Click on the thumbnail for the “rim” layer. Make sure you are not on the layer mask.
12. Drag a gradient from the top to the bottom of the image window.

13. Add a new layer above the “rim” layer and name it “surface”.
14. Load the “chicklet” path as a selection again (repeat step 6).
15. Select > Modify > Contract
16. Enter 7 pixels and click OK.
17. Add a layer mask to the “surface” layer (repeat step 7).

18. Click on the thumbnail for the “surface” layer.
19. Drag the blue-light blue gradient from bottom to the top of the “surface” layer.

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.

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

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

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

8. 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.

8. 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.

9. 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.

10. 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.

You’re finished! Here is the final image:

 

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

discuss this topic to forum