Web 2.0 Looks: 20 Steps to
The Apple Aqua Sphere
The Apple Aqua Sphere
Reflections, reflected horizons, etc., are staples of the Web 2.0 look. Many of these techniques were spawned by the old Apple aqua sphere. So, I thought I’d share my recipe for the old glossy ball. Today, the aqua sphere, tomorrow…variations on the aqua sphere.
I’m going to assume anyone interested in learning this already knows their way around Photoshop to some extent and/or is willing to do a little intuitive navigation. That said, here’s a fast track tutorial on how to craft the infamous aqua orb.
The Sphere (Circle)
1. Create a new file. Specify Width=200 and Height=200.
2. Select the Elliptical Marquee Tool (M) and create a 100×100 circular selection in the center of the image.
3. Create a new layer (Shft+Cmd+N). Select that layer, “Layer 1.”
4. Create this color: R=50, G=75, B=200; fill the circular selection.
The Gloss
5. Create a new layer (Shft+Cmd+N). Retain proposed values. Select that layer: “Layer 2″ (be sure the circular shape is still selected).
6. Contract the selection: Select/Modify/Contract. Contract by=3 pixels. Here’s where we are thus far—see Figure 1.
7. Select the Linear Gradient Tool (G), choose Foreground to Transparent gradient type.
8. Drag a white (R=255, G=255, B=255) gradient vertically from the top of the selected circle to 3/4 of the way down. Use “Shift” for a perfect vertical gradient.
9. Select Edit/Transform/Distort (Cmd+T; Ctrl-Distort). Distort to match the white gradient shown in Figure 2. Try to maintain consistent symmetry and spacing. After applying, knock back the layer opacity to 75%.
The Reflection
10. Duplicate layer 1. Let’s call it “Layer 3.” I often adjust this layer back up to 100%. Make sure the new layer is created and selected in the layer list.
11. Select Edit/Transform/Flip Vertical (Cmd+T; Ctrl-Flip Vertical). Select the Move Tool (V). Using Shift+Down Arrow keys, move the selection down near the bottom of the circle, about 10 pixels from the base.
12. De-select.
13. Select Filter/Blur/Gaussian Blur. Enter radius=7.0 Pixels.
14. Select the Image/Adjustments/Hue Saturation (Cmd+U) command. First, click “Colorize” in the lower right region of the dialog box. Then assign values as follows: Hue=180, Saturation=80, Lightness=-35, and apply. Your efforts should look like Figure 3.
The Refraction
15. Select “Layer 1″ in the layer list. Click on the Add New Layer Style button at the bottom of the Layers Palette. In this order: Specify Blend Mode to Normal, set Opacity to 100%, specify the following color: R=65, G=70, B=130. In Elements Group, specify Size=25 px. You’re there.
The Shadow
16. Create a new layer (Shft+Cmd+N). Let’s call this layer “Shadow.” Be sure the new layer is created and placed below the others.
17. Select the Elliptical Marquee Tool (M) and create a 75×30 oval selection as shown in Figure 4
.
18. Using the Paint Bucket Tool (G), fill the oval portion with white (R=255, G=255, B=255) by clicking in the selection. (You can’t see it because it’s behind the sphere.)
19. Click on the Add New Layer Style button at the bottom of the Layers Palette. Select the Drop Shadow command.
20. Specify Blend Mode to Normal, set Angle to 90°, set Distance to 35 px, set Size to 20 px. You’re done! See Figure 5. Now that you have the hang of it, try creating a lime green aqua sphere—a very popular Web 2.0 color. 
Write something pithy and random like I did: “Rapt with the silvery breath of the bog, I edged breathless toward the splintery raft.” People will marvel at your post-modern intellect. Cut and paste it alongside your sphere somewhere.

Like this article? Digg it
Author: 


December 26th, 2006 at 11:34 pm
That blue sphere is slick. Will give our programmers a buzz and see if we can’t slip one in somewhere on the site!
April 22nd, 2007 at 12:12 pm
[...] But beyond an obvious destination for thoughtful gift-givers, Persephone demonstrates how artisans can flourish in a world of advanced technologies, avatars and aqua spheres. Using web technologies to streamline distribution and sales while maintaining, even enhancing, their core brand essence. [...]
May 20th, 2009 at 2:42 pm
Outstanding graphic: just the right colors and shades. Perfect for use as bullets in PowerPoint