 |
|
Site Search: |
|
|
| |
|
Crystal Bee Webbie Tutorial

Webbies are, simply, any of the little graphics we use in web design. They might be a button, an icon, or a logo-type graphic.
This tutorial requires a layer style download available here for the wings - but what you end up with is just as shiney and brilliant. And being able to do something not-as-easy always makes ya feel cool, right?
| Difficulty Level: |
Intermediate |
Time Needed: |
30-40 Minutes |
| |
|
PDF Version: |
Download |
| 1 |
New Canvas
Open a new canvas in Photoshop (File, New) that is sized about 400x400 pixels with a white background in RGB mode. |
| |
|
| 2 |
Set Colors
Set your foreground color to #fff831 and your background color to #959a1a |
| |
|
| 3 |
Draw a Rain Drop
In Photoshop's default custom shapes is a rain drop. The shape tool will create a new layer for you. Hold the shift key down on your keyboard while you draw to make a perfect rain drop.
After you draw the shape, right-click its layer and choose "Rasterize Layer". This is how you get those super-smooth, crisp lines.
Finally, choose "Edit", "Transform", "Flip Vertical". |
| |
|
| 4 |
Color Overlay
We're going to make the stripes super-easy. First, duplicate the yellow rain-drop layer (right-click it and choose "Duplicate Layer").
Next, go to your layer styles (Layer, Layer Styles OR click the little "f" icon in the lower left-hand corner of your layers palette) and choose "Color Overlay". Set the color to black.
Finally, grab your rectangle marquee tool and use this to cut out lines down the length of the shape. |
| |
|
| 5 |
The Head
Change your foreground color to black. Then, use your ellipse (circle) SHAPE tool to draw a circle behind all the other layers, creating a head. Right-click and rasterize this shape. |
| |
|
| 6 |
Bevel & Emboss
Go to your layer styles, choosing "Bevel & Emboss" this time. Apply the settings in Illustration 06 and click OK. |
| |
|
| 7 |
Merge & Shadow
Make sure that you like the basic elements so far, because we're about to set them in stone.
First, make your background layer invisible by clicking the "eye" icon beside it. Then, right-click your yellow rain drop layer and choose "Merge Visible". This places all your layers - except your background - on one single layer. Make the background visible again by clicking the eye beside it once more.
Now, go to your layer styles and choose "Inner Shadow". Apply the following settings but DO NOT click OK yet. |
| |
|
| 8 |
Inner Glow
While you're in the layer styles dialogue, go to "Inner Glow" and apply the settings below. Click OK when you're done. |
| |
|
| 9 |
Shine Part One
We're ready to start our shine. Set your foreground color to white, and grab your ellipse tool again. Holding the shift key down, go ahead and draw a perfect circle on the upper two-thirds of the rain drop. Right-click and rasterize the layer. |
| |
|
| 10 |
Shine Part Two
This is cool, but it doesn't really "shine". To make it do that, we're going to add a layer mask.
Click "Layer", choose "Layer Mask", and click "Reveal All". This will change your foreground and background colors to black & white.
The trick here is that black will "hide" parts of your white circle, and white will keep it visible.
Use your gradient tool to make the white circle fade smoothly away. |
| |
|
| 11 |
The Wings
Now, we want to make the look of "wings". This is totally easy.
First, draw two white "rounded rectangle" shapes on either side of the body. Make sure you rasterize each shape.
Second, click "Edit" and choose "Free Transform". Tilt each of the wings down slightly. Then, merge the second wing down (Right-click, Merge Down).
Finally, download & install the wings style and apply it to the wings layer. |
| |
|
| 12 |
Antennae
Our last step - antennae. Basically, the antennae consist of 3 circles.
First, draw a long oval that will be both antennae, so size it accordingly. Rasterize the oval, then click "Select" and choose "Load Selection". Go back to "Select" and choose "Modify", then click "Contract". Enter 6. Click the backspace key on your keyboard to remove the center. Then, use your eraser tool to remove excess.
Finally, make two circles on the tip of each antennae.
Beautiful!
To make other colors of bees, just change the colors of your original rain drop. |
| |
|
|