Saturday, January 3, 2009

Crystal Globe Webbie

First off, before I get any questions... What is a "Webbie"? I use this word for any kind of graphic that just adds something to a website. In this case, the webbie is an icon. But it could be anything from a mascot to bullets - webbies are all those little graphics that you just sort of lump together as being a part of website building.

If I can keep myself going on it, we're going to create a full set of webbies in this collection, all crystal based. Step one, though, is our Globe.

1. Open a new canvas in RGB mode, with a white background, 170 x 150.

2. Set your foreground color to RGB: 13, 129, 240. Grab your elliptical shape tool and hold down the shift key while you drag to draw a perfect circle on your canvas.

3. Immediately go ahead and add a stroke to the circle in the color RGB: 2, 57, 157.

4. Set your background color to RGB: 114, 193, 246. Go ahead and grab your gradient tool. Hold the Ctrl key down while you click your circle layer to load a selection around the circle. Then, drag your gradient so that it is dark at top, light at bottom.



5. Now, set your foreground color to a light gray. Use your elliptical shape tool to draw a circle on the upper half of the existing circle. Lower its opacity to about 40%. Then, use the elliptical marquee tool to "cut" the bottom half off. Do this two more times, to resemble the lighting below (Each circle is a bit tighter than the other, and one step closer to white. The smallest circle is blurred once it has been cut):



6. Now, set your foreground color to full-on white. Create a large circle that nearly touches the edges of our blue circle, rasterize it (right-click the layer, choose "Rasterize"), and then use your elliptical marquee tool to remove all but a thin crescent of this white circle. Use your blur tool on the very tips to smooth the edges:6. Now, set your foreground color to full-on white. Create a large circle that nearly touches the edges of our blue circle, rasterize it (right-click the layer, choose "Rasterize"), and then use your elliptical marquee tool to remove all but a thin crescent of this white circle. Use your blur tool on the very tips to smooth the edges:



7. Shaping right up! OK now, near the left side of your white crescent, you will need to draw a small white circle. Rasterize it and blur the whole thing so that it blends in with the look:



8. Now, set your foreground color to RGB: 138 214 252 and your background color to RGB: 13, 129, 240. Then... you've got it - yet another circle. This time, it should be an oblong circle in the lower half of the blue globe. Rasterize it and drag the layer down, so that it sits right above the original blue globe:8. Now, set your foreground color to RGB: 138 214 252 and your background color to RGB: 13, 129, 240. Then... you've got it - yet another circle. This time, it should be an oblong circle in the lower half of the blue globe. Rasterize it and drag the layer down, so that it sits right above the original blue globe:



9. Now, use Ctrl-Click to load this circle. Grab your gradient tool again, and this time set it to a radial gradient. Drag the gradient so that your light is on the inside, and the dark toward the edges, blending in to the blues already present:



10. Grab your blur tool once more, and smooth the edges of the gradient circle:



11. To go on, you'll need this map. Drag it right into Photoshop, click "Select", "All", and then copy-paste it into your globe image. Drag the layer so that it sits directly above the last circle we created:11. To go on, you'll need this map. Drag it right into Photoshop, click "Select", "All", and then copy-paste it into your globe image. Drag the layer so that it sits directly above the last circle we created:



12. Use your move tool to position the map a bit better on the globe:



13. Without moving off of the map layer, Ctrl-Click the original blue globe layer. Then choose "Select", "Inverse" and hit the backspace key on your keyboard. Deselect, and you should have something like this:



14. Go into your layer styles options and apply a color overlay in RGB: 0, 91, 214 :



15. The only thing left is a shadow, to complete the 3-D look. Use your ellipse tool and a dark gray to draw a thin circle BEHIND the original blue globe, right above the background layer. Rasterize, blur, and you're finished with something like this:15. The only thing left is a shadow, to complete the 3-D look. Use your ellipse tool and a dark gray to draw a thin circle BEHIND the original blue globe, right above the background layer. Rasterize, blur, and you're finished with something like this:

  © Template Blogger designed by Taufik Perdana 2008