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.
- Fill the selection with white on the “gloss” layer: Edit > Fill, Use: White; click OK.
- 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.
- Set the opacity for the “gloss” layer to 20%.
- 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.
- 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.
- Copy the “Bevel and Emboss” layer effect from the “white f” layer onto the “Facebook” text layer:
- Press and hold the Alt key (Mac: Opt) first.
- Click+drag the “Bevel and Emboss” layer effect from under the “white f” layer onto the “Facebook” layer.
- Let go of the mouse button, then the Alt (Opt) key.
- Finally, save the chicklet for the Web:
- File > Save for Web & Devices…
- 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.
- Reduce the image size. I used 60px by 60px.
- 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!