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 is a new version of our crystal ladybug webbie. It is just as sleek, but rounder and cuter.
| 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 #fd403a and your background color to #6d0200. |
 | |
| 3 | Draw a Circle Select your ellipse (circle) SHAPE tool and draw it out on your canvas. DO NOT use the marquee tool. 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 circle. After you draw the circle, right-click its layer and choose "Rasterize Layer". This is how you get those super-smooth, crisp lines. |
 | |
| 4 | Gradient Overlay Go to your layer styles (Layer - Layer Styles OR the small "f" icon in the lower left-hand corner of your layers palette). Choose "Gradient Overlay and apply the bright-to-dark red gradient. Leave all other settings at their default. Click OK. |
 | |
| 5 | The Head Change your foreground color to black. Then, use your rectangle SHAPE tool to draw across the top third of your red circle. Right-click and rasterize this shape. After you've rasterized, click once on the red circle layer to select it. Then, use your magic wand tool to select the area around the circle. Click back on your black square layer and hit the backspace key on your keyboard. This will delete everything outside the circle shape. |
 | |
| 6 | Black Dots Using black, grab your elliptical (circle) shape tool and draw 4-5 ovals on the back of your ladybug. Make sure you rasterize each circle after you draw it. |
 | |
| 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 red circle 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 (Layer, Layer Styles OR the little "f" icon in the lower left-hand corner of your layers palette) 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 circle. 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 | Two Lines Now, we want to make the look of "wings". This is totally easy. First, draw a black line up the center of the red in your circle - behind the shine layer - and rasterize it. Second, draw a white line across the ladybug, just under the head. Rasterize this. |
 | |
| 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 ladybugs, just change the colors of your gradient overlay. |
 |
