Creating Clouds with Transparency

For most Photoshop users Blending Modes is the answer for a realistic cloud or lens flare overlay. You can render clouds on a layer above your image and play with the Blending Modes until the clouds look the way you want them to.

Click image above to view larger image.

In game development and interactivity the images created often need to be used in applications that don’t have the sophistication and power of Photoshop. We don’t have access to blending modes and the image must come into the application with transparency already in place. As a result I have developed a quick way of creating a lens flare or clouds on a transparent layer. I will step you through the process using clouds, but this can be applied to Lens Flares as well.

Step one:

Open Photoshop and create a canvas of any size. Keep in mind that due to the way that the Clouds Filter works the larger the canvas the finer the clouds will be. I used a 512x512 image size. For standard clouds select white as the foreground color and black as the background.

You might think that a sky blue would be the better choice for a background color, but that will leave a bluish cast in the image. You can see that on the left I used an image created using this tutorial using blue as the background color and on the right I used black. This blue tint is not desirable as it limits the flexibility of the image and makes accurate color work harder.

Step two:

Create a new layer by clicking on the Create a New Layer Icon and name this new layer Clouds.

Now: Filter > Render > Clouds on this new layer.

Note: You can hold down the Alt Key while running this filter to make your clouds pop more. The default clouds are on the left and the clouds with more contrast are on the right. These images were originally 512x512. For this exercise I used the softer clouds on the left.

Click image above to view larger image.

Step three:

To create the alpha, or transparency, image for the clouds simply duplicate the Clouds layer by dragging it onto the Create New Layer Icon and rename it Alpha. Using a separate image to dictate transparency is how many applications function.

Apply Auto Levels to the image. Image >Adjustments > Auto Levels. This alters the pixels in the image so they function as an alpha map better for games. You can also skip this step. The results are still good, just different.

You can see how an alpha map works here. The source image is to the left and the alpha mask in the middle. The resulting image has a delicate transparency that makes the clouds look real and soft. The second example below uses a figure with a more distinct outline. This makes it easier to see how the alpha mask works.

Click image above to view larger image.

Step four:

To actually remove the pixels from the layer in Photoshop, creating a layer with transparency and not just a separate alpha image, follow these steps.

Select the entire Alpha layer and copy it;

Ctrl + A selects all and Ctrl + C copies it.

Go to your Channels Tab and create a new alpha channel.

Paste the copied Alpha layer (Ctrl + V) into the new alpha channel.

From the Menu: Select > Load Selection and check the Invert box. Make sure you have the Alpha Channel selected.

Go back to your original Clouds layer and press delete. You can play with brightness a little if you like, but it shouldn’t need much at all. Here I changed my background color to a sky blue so you can see the clouds.

Click image above to view larger image.

To thin out your clouds press delete a time or two more before deselecting.

Click image above to view larger image.

Here is the cloud image in a 3D application using the alpha mask we created. Notice the clouds tile automatically using this method. Also notice that I used two layers of clouds (using the same image), making one layer display the clouds larger and move slower to add depth.

Single Clouds

If you don’t want a tiling sky full of clouds, but only want one cloud, use the Lasso Tool with a very large feather. I used a 512x512 image and a 45 pixels feather. Simply draw an organic curvy shape and render clouds. You can use a large, very soft, eraser to gently sculpt the clouds a bit if you need to.

Here is a giant single cloud I created for this 3D scene.

Click image above to view larger image.