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.
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.
- Open the Facebook logo in Photoshop.
- Use the Rectangular Marquee tool to draw a rectangle around just the letter “f”.
- Press Ctrl+C (Mac: Cmd+C) to copy the pixels to your computer’s clipboard.
- Start a new document that is 300px by 300px, 72 pixels/inch with a white background. Save the file.
- Press Ctrl+V (Mac: Cmd+V) to paste the letter f on its own layer above the background. Name this layer “original f”
- Use the Magic Wand tool to select the white pixels of the letter f.
- Press Ctrl+J (Mac: Cmd+J) to copy the pixels to a new layer at the top. Name this layer “white f”.
- Turn off visibility of the “original f” layer by clicking on the eye icon on its left edge.
- 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…
- Enter a width of 1 pixel and click OK.
- Click on the fx symbol at the bottom of the layers panel and select Bevel and Emboss.
- Use the following settings and click OK:
- Style: Emboss
- Technique: Smooth
- Depth: 50%
- Size: 2px
- Direction: Down
- We need to make the letter f bigger. Press Ctrl+T (Mac: Cmd: T) to enter the Transform mode.
- 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.
- 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.
- The edges look a tad blurry. Go to Filter > Sharpen > Smart Sharpen…
- Set the Amount 100%, the Radius to 20px, and click OK.
Next: the Chicklet