[PSP Tutorials]   [LVS Online]   [Home]

3D Bubble Button

1. 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.
   
   

    

2. Click on the background color swatch, when the window opens, use the dropper to select the same color as the background of your image.
   
   
3. 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.
   
   
4. Create a new layer and call it bubble. Make it your active layer.
   
   
5. Choose the selection tool - Settings:
   Ellipse
   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.
   
   
6. 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.
   
   
7. 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 400x400 pixels)
   Offsets: V = 3   &   H = 3
   OK
   
   
8. Selections/Invert
   
   
9. Activate background layer by clicking on it in the Layer control palette.
   
   
10. 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.
    
    
11. Selections/Invert or Selections/Load from Alpha Channel.
    
    
12. Make your bubble layer the active layer by clicking on it in the Layer control palette.
    
    
13. Image/Effects/Drop shadow - Settings:
    Color = Black
    Opacity = 100
    Blur = 7
    Offsets: V = 2   &   H = 2
    
    
14. Selections/Select None
    
    
15. Crop any excess background from your image but sure not to crop any of your drop shadow.
    
    
16. Save your bubble button as a .jpg

       

Copyrighted 2000-2008 ^© Vikki Brooks
Tutorials, files and content of this site cannot
be reproduced and/or published
without the express written consent of the author.

[PSP Tutorials]   [LVS Online]   [Home]