Tutorial – Create water bubbles

April 3rd, 2009 | Comments 4 Comments | 1,196 views

I was seeing wallpapers on Smashingmagazine and this wallpaper got my attention (because of those water bubbles). I went ahead and tried to create those bubbles myself. After playing with some blending options I successfully created them and now I am going to show you how to make them.

Note: I really don’t know how the original designer made them, but I am showing you how I made water bubbles that are looking very similar to original.

We are going to use the same picture so that you can understand easily.

Step 1:
Select Elliptical Marquee Tool and draw a small circle. Fill it with white color #FFFFFF

 Tutorial   Create water bubbles

Step 2:
Go to Layer > Layer Style > Inner Glow (and use these details)

Blending Mode: Normal
Opacity: 75%
Color: #FFFFFF
Choke: 0
Size: 8

Step 3:
Change the layer mode to Multiply. Now you should see like this.

step3 Tutorial   Create water bubbles

Now it needs to have some shiny/glossy effect to look more like a bubble.

Step 4:
With the Elliptical Marquee Tool selected, Ctrl + Click the bubble layer to select it and choose the “Substract From Selection” option.

Now cut the circle in “oval shape” so that it should look like this

step4 Tutorial   Create water bubbles

Step 5
Go to Select > Modify > Contract > Enter value 2 (you can change the value according to the size of your circle – in my case it is 2)

It will reduce the selection up to 2 pixels and now your circle should look like this

step5 Tutorial   Create water bubbles

Now fill the selection with white color #FFFFFF

Step 6
Go to Filter > Blur > Guassian Blur > Enter value 2

step6 Tutorial   Create water bubbles

Step 7(additional formatting)
You can now draw another small circle inside the main circle and apply the same filter on it, it will add another shiny corner on the bubble, as shown here.

step7 Tutorial   Create water bubbles

After applying some other brushes that I have, here is my final water bubble ready.

final Tutorial   Create water bubbles

I hope you find the tutorial easy to follow. Please feel free to ask if you are having any trouble following this tutorial.

Good luck icon smile Tutorial   Create water bubbles





About Site Reviver

SiteReviver is an informative blog, where you can find good resources about web design, development, hosting, seo and more. If you have something to say, feel free to leave your comments or contact me if you enjoy writing for this blog!

  1. Ana Fernandes

    Hello, i use a photoshop brushes to do that!!, but thas ia a great tutorial…

    Kiss

  2. jani

    Thank you Ana for your comment and telling us how you actually did it.

  3. Rubylene

    It’s good to know how you made this bubbles… I’m still learning on how to make a good design.. thanks for sharing this tutorial… ^_^

  4. Jahangir

    Thanks Rubylene, the only advice I can give you is to keep practicing. Keep doing tutorials and see how others are doing the designing, try to understand what tools they use…etc.

    Good luck :)

Trackbacks

Page 1 1