This is an intermediate tutorial. I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

Bubbles are visually interesting because they reflect, can be transparent, have an iridescent sheen, and float. Sometimes this combination of characteristics can be hard to recreate. I’ll try to show you how. I’m starting with a photograph for my bubble to appear on. You can right click to copy it if you want to work with the same photo:

1. Open your photo

2. Using the elliptical marquee tool, draw a circle on your image. (If your rectangular marquee tool is showing in the tool box, hold the mouse over it, click and hold, and a fly-out menu will appear for you to select the elliptical marquee tool.) You can make your ellipse any size you want, and if you hold SHIFT while you draw it will make a perfect circle.

3. Press Cmd/Ctrl+J to copy your elliptical selection to its own layer.

4. Cmd/Ctrl+Click on the thumbnail in the layer palette to load the layer as a selection. You should see the marching ants in a circle as shown.

5. Select Filter from your main menu, then distort>spherize. Select an amount of 100% in the spherize menu that pops up.

6. Reapply the filter. Either Press Ctrl/cmd+F to re-apply the filter or go to Filter>Spherize (your most recent filter is listed at the top of the Filter menu now).

7. Your bubble area should now be distorted, and we will add a reflection to create a shiny surface. Create a new layer and name it ‘highlight’.

8. Make white your foreground color. Choose the gradient tool (on the fly-out menu of your paint bucket tool), and use the linear, foreground to transparent gradient.

Start from the top of the bubble and drag about 1/2 way down as shown.

9. Now right-click on Layer 1 for your blending options and select Bevel.
Style: Inner bevel, Technique: smooth, Depth: 29% (keep the other options at their defaults.)

10. Cmd/Ctrl+Clickon the thumbnail in the layer palette of the Highlight Layer. 

11. Click “Create new layer” to add a 4th layer (It should be Layer 2 on top of all your other layers).

12. Select your gradient tool and from the pre-loaded gradients select Spectrum (the full rainbow). Double click on the gradient to edit it, and remove the 2 darkest reds (the outermost colors) and the dark royal blue. Just click on the arrow by the color and drag it off the window to remove it.

Apply this newly edited gradient to Layer 2, then lower the opacity of the layer to 11%.

Now you have a round, shiny bubble!

If you want to place the bubble on different areas of the photo, reduce the opacity of layer 1 to 10%-40% and then group your top 3 layers and drag them anywhere on the image. Here I have copied the group a few times, changed the sizes and the opacities to place Lucy on the Beach among many Bubbles.

This is a web graphics tutorial for beginner level users of Illustrator. I am using Illustrator CS2.

A common way to give web buttons a little perspective and visual interest is to give them the look of a liquid filled bubble. It is a quick and easy process! For this tutorial, I am going to create matching red and green bubble buttons, which can be used for a number of actions on your web page: indicating a yes or no answer, start and stop audio, or play and pause video.

First, on a CMYK artboard, create two circles - one red and one green.

Next, place two smaller circles in the bottom half of your red and green circles. These shapes will serve as the highlight areas of the buttons, so make the fill color of these new circles a lighter shade of the same or similar color.

Now, select each set of circles individually and create a blend. To do this go to Object> Blend > Make.
(You can also do this using the blend tool from your toolbox.)

Once you have made your blend, your circle should look something like this:

Next, we need to add a reflection to create the illusion of a liquid texture and add some dimension to our buttons. Create an ellipse and place it inside each circle towards the top. Fill the ellipses with a white to black gradient, making sure that the black is true black (C=100%, M=100%, Y=100%, K=100%). (If you need help with creating a gradient, email me at kelly@rdesignonline.com.)

Now, open your transparency palette (Window > Transparency) and change your Transparency Mode to Screen in the pull down menu. Depending on your button colors, you may want to adjust your transparency % as well.

Once you have made the your changes in the Transparency Palette, your finished buttons should look something like this:

Now you can take your bubble buttons and label them for use on your website. Listed below are some sample uses of this pair of buttons. Enjoy!