Bubble Tutorial >

Bubble example

This is a tutorial is on how to make bubble icons. There are probably better/easier ways to do it, but I'm no expert. This is the way I've done it.

To make the icon you'll need:
Adobe Photoshop or Paint Shop Pro & GIF Movie Gear or IconBuilder XP 1.0
(I'd recommend Photoshop & GIF Movie Gear. Make sure you download the GIF Movie Gear 'for icons' version).

 

First make a new file in Photoshop, 128x128 with transparent background.
Select the Elliptical Marquee Tool, hold down the SHIFT key (to make it a perfect circle) & draw a circle not quite as big as the whole image, (to allow room for the drop shadow).

Bubble Tutorial 1

 

Select the Gradient Fill Tool & set it to Foreground to Background & the shape as Radial Gradient. Select your foreground colour as the lighter one & your background colour as the darker one. Then drag the cursor from bottom to the top & fill.

Bubble Tutorial 2

 

Then tick the Inner Glow box, make the colour the same as the darker colour of you circle (mine's black) & set the Blend Mode to Multiply & it should be looking something like the pic below (unless you've chosen different colours).

Bubble Tutorial 3

Bubble Tutorial 4

 

For the drop shadow duplicate the circle layer, select the bottom circle layer & set the Fill to 0% (in the the layers palette) so that it's transparent. Double click on the bottom circle layer to select the Layer Style. Tick the Drop Shadow box & enter details similar to the pic below. Then move the shadow up so you can see it.

Bubble Tutorial 5

 

To make the shadow the correct shape go to  Edit & select Free Transform. In the properties boxes at the top of the screen enter 70% for the width & 35% for the height. Then position the shadow so that it's similar to below.

Bubble Tutorial 6

 

Create a new layer, select the Elliptical Marquee Tool & make an oval about a third of the width of the circle. Select the Gradient Fill Tool, set it to Foreground to Transparent & Linear Gradient as the shape & select the colour as white. Drag the cursor from top to bottom to about three quarters of the way down & fill. Then alter the opacity to what you think looks best.

Bubble Tutorial 7

 

All you have to do now is insert your picture or icon. If you want to insert an icon open it up in GIF Movie Gear & select File, Save As, Photoshop PSD... (name your file).

Open up the icon file you've just exported to .PSD format in Photoshop & copy the size you want (CTRL & A, then CTRL & C). Switch to the bubble picture & paste it (CTRL & V).

Bubble Tutorial 8

It may be too big for the bubble. If so go to Edit, Transform, Scale. & reduce the size. Alter the opacity of the image you've inserted to about 85%.

Repeat the steps with the other icon sizes you want to make, (e.g. 48x48, 32x32, 16x16) until you have all the Photoshop icon sizes you want. Save each icon size as a separate flattened file then close Photoshop.

 

Now you're going to import the Photoshop files into GIF Movie Gear.

You can go to File, Open & browse to your Photoshop icon images, but I prefer to have the Photoshop icon images on the desktop & drag & drop them into GIF Movie Gear.

When you get the "Handling of PSD Layers" message just click on OK.

Bubble Tutorial 9

 

Click on File, Save Icon As... & select Windows icon (.ico) as the file type. Name your file & that's it. You can open up your icon in Microangelo Librarian or IconWorkshop just to check it if you like.

(You can download the bubble templates from here & then just insert your own icon).