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.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%.Figure 2

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.Figure 3

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 4Figure 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. Figure 5

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.
Web 2.0 Look

Like this article? Digg it

Share

Comments

  1. Phil O'Halloran Says:

    That blue sphere is slick. Will give our programmers a buzz and see if we can’t slip one in somewhere on the site!

  2. .think » A Well Branded Lesson from Persephone Books Says:

    [...] 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. [...]

  3. Travis Says:

    Outstanding graphic: just the right colors and shades. Perfect for use as bullets in PowerPoint

Leave a Reply

Comments

Alas, yes we moderate comments. Please endeavor to add value.
Thank you.

Subscribe

Subscribe to .think
just enter your email address

ThinkABOUT IT

Ed Illig to present

on user-friendly websites at Linking Indiana event
February 2011

BThoughtful10.com

Brainstorm's 2010 holiday site offering personalized gift boxes for friends and family.
December 2010

Brainstorm to develop website presence

for Elwood Community Development Corporation
April 2010

Caylor to speak on
social networking at the

2009 Lugar Excellence in Public Service Session December 9

Brainstorm Cool or Tool drawing winner

on Facebook: Melissa Krisanda Hennessy Congrats, Melissa!

Brainstorm: Fan up!

Drop by Brainstorm's fan page to keep up with our going-ons, find useful info, and win prizes.

Brainstorm and the Heartland Film Festival

Brainstorm is proud to be a 2009 Premier Level sponsor of Truly Moving Pictures, Heartland Film Festival.

International W3 Web Award

Brainstorm Named Best of Show in International W3 Web Awards

Iconic Site Launch

Developed by Brainstorm for Anderson University and Warner Press WarnerSallman.com features, among other iconic images, “The Head of Christ,"? from The Warner Sallman Collection - an image so famous it's been reproduced more than 500 million times worldwide. More from the Herald Bulletin article about the site.

The International Academy of the Visual Arts

awarded Brainstorm a IAVA 2008 Silver Davey for it's work on the Lumina Camino a la Universidad site.

Official Webby Honoree

Brainstorm's Camino de la Universidad: The Road to College site named a 12th Annual Webby Awards Official Honoree

Brainstorm Featured

in Step Inside Design’s recently released, 2008 Best of Web Annual for the design and development of Lumina Foundation for Education’s Camino a la Universidad site.

.think now listed on Alltop.com

under Branding. Grouped by topic, Alltop aggregates stories from “all the top"? sites across the web (that’s their story and we’re sticking to it). View our .think listing, here: branding.alltop.

BCause08.com

Our 2008 Multiple Sclerosis holiday project. Every run of Brainstorm's holiday, "Memory Machine," generated ¢.25 for the Multiple Sclerosis Society - up to $5000. It went viral fast - the $5k was just a memory by the time our holiday dinner started.

NorthPole, Inc.

Brainstorm's 2007 holiday blog parody. A new post everyday featured the ongoing drama of an entirely fictitious corporation replete with fictitious products. Items like the "iPlanet," NPI’s personal cosmos transport. Like Ray Bradbury’s Dandelion Wine Happiness Machine, the iPlanet promises a “thoroughly self-absorbed social media experience."? Our content was tongue-in-cheek, but the chocolate and gifts we sent to commenters were quite real.

CSS Developments

If you’re a developer or just interested in CSS, check out this article entitled, #IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet,"? over on the PIE site. Penned by one of our very own Brainstorm developers.

.think Flickr

Objects of interest, engaging designs, diagrams, downloadable visuals and any other imagery we felt worth sharing.