Crystal Spider 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.
In this tutorial, we’re going to create a cute little crystal spider. This spider could be an icon or a logo graphic – what’s important is that it’s too-cute and teaches you how to create the look of glass or crystal in Photoshop.
Final Image Preview
New Canvas
Open a new canvas in Photoshop (File, New) that is sized about 400×400 pixels with a white background in RGB mode.
Set Colors
Set your foreground color to #fd403a and your background color to #6d0200.
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.
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.
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 red circle. Right-click and rasterize the layer.
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.
Face It
Every spider needs a face. Click once on your red circle layer to select it. Then, set your foreground color to black.
Grab your ellipse tool and draw an oval on the lower third of your spider’s body. DO NOT rasterize yet!
Before you rasterize, use your magic wand to select the space outside the red circle. Then, click back on your black face layer. Hit the backspace key on your keyboard to delete everything outside the body’s border.
Now, rasterize.
Show Some Leg
What would a spider be without eight legs? We’re going to make them easy.
Using black and your ellipse tool, draw an oval beneath all the other layers. It will become two legs, so size it appropriately near the head.
When your oval is drawn, right-click and rasterize it. Then, click “Select” and choose “Load Selection”. Click “Select” again, and choose “Modify”, “Contract”. Enter 6 in the amount.
Hit the backspace key on your keyboard to erase the inside of the oval, leaving you with two curving legs.
Repeat this process to create 8 legs total.
A Little Web
We’re at our very last step! Just need a bit of web to really finish off the spider look.
Use black and your rectangle (square) shape tool to draw a thin line behind all your other layers. Rasterize when you’re finished.
Then, add a layer mask (the same way we did in step 6). This time, make the gradient work so that the web starts to disappear near the top of your canvas.
Beautiful!
To create other colors of spider, just change the colors of your gradient overlay.
Hi, I like your site! I shall be back again.
Hello from Russia!
Can I quote a post in your blog with the link to you?
as long as it’s a quote and it’s credited to here, post away