3D Bubble Button
- Open or create the image that you want to use as a bubble button. If you
are creating a button to use on a colored background, use that color when you create
your image. If you are going to use an existing image on a color or pattern different
from what it has now, we'll take care of that in step 10.
Click on the background color swatch, when the window opens, use the dropper to
select the same color as the background of your image.
- Image/canvas size - Make your canvas size large enough that you have room to
work. Add about 150 pixels in width and height while centering your image. You'll delete
the excess background when we're finished.
- Create a new layer and call it bubble. Make it your active layer.
- Choose the selection tool - Settings:
Feather = 0
Antialias = checked
Starting in the center of what you want to include in your final image, click and drag
until you have selected what you like.
- Just in case you lose your selection do this now:
Selections/Save to Alpha Channel, click OK.
When "New Channel" window pops up, click OK again.
- Image/Effects/Cutout - Settings:
Fill interior with color = UNchecked
Interior color = doesn't matter
Shadow color = Black
Opacity = 80-100 depending on your preference
Blur = 45 (adjust blur if your image is very much smaller or larger than
Offsets: V = 3 & H = 3
- Activate background layer by clicking on it in the Layer control palette.
- If you're using a solid color background on your web page, be sure that your
background color swatch is still the same color as the background
color in your image. Choose the eraser tool, and erase any of the image that falls
outside your bubble. As long as you have the background layer activated, you won't
be erasing anything that is inside the bubble.
If you want to use this button on a pattern background then simply flood fill the background
layer of your button with the pattern.
- Selections/Invert or Selections/Load from Alpha Channel.
- Make your bubble layer the active layer by clicking on it in the Layer control
- Image/Effects/Drop shadow - Settings:
Color = Black
Opacity = 100
Blur = 7
Offsets: V = 2 & H = 2
- Selections/Select None
- Crop any excess background from your image but sure not to crop any of your
- Save your bubble button as a .jpg