LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Creating Clouds with Transparency

CreativeCOW presents Creating Clouds with Transparency -- Adobe Photoshop Tutorial


lukeahearn.com
Monterey California USA
CreativeCOW.net. All rights reserved.


In this article, noted author and game developer, Luke Ahearn demonstrates Creating Clouds, Lens Flares, and other effects with transparency and/or transparent pixels using Adobe Photoshop.








It has always bothered me that I couldn’t render clouds or a lens flare on a transparent layer. In Photoshop when you create clouds or a lens flare you must have a background color. In other words, clouds must be rendered with two colors and can’t fade into transparent like a gradient can.

 

Gradient image

 

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.

 

Blending Modes
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.

 

Foreground/Background button

 

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.

 

Background color

 

Step two:

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

 

Create new layer icon

 

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.

 

Render Clouds
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.

 

Create new layer

 

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.

 

Auto levels

 

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.

 

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.

 

Create a new alpha channel

 

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

 

Paste the copied Alpha layer

 

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

 

Load selection

 

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.

 

creating cloud layers
Click image above to view larger image.

 

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

 

Delete 3 times
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.

 

Here we have layers of clouds

 

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.

 

How to isolate a single cloud

 

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

 

Luke Ahearn creates a 3D image to demonstrate his technique
Click image above to view larger image.

 

 




If you found this page from a direct link, please visit our forums or read other articles at CreativeCOW.net






Comments

Re: Creating Clouds with Transparency
by Udo Citi
very useful for Game developing
Re: Creating Clouds with Transparency
by David Hilowitz
Thanks for this tutorial. Very helpful.
Re: Creating Clouds with Transparency
by Nikita Tomkevich
This is a great introduction to Alpha channels and transparency. Thanks!

All the best.
Re: Creating Clouds with Transparency
by Addison Tallman
I love all these tutorials. They are wonderful. It would help me, a non-expert, to see the final outcome and a short description of the problem before the tutorial starts. Then I'd understand where it's all going: how steps A, B, and C get to step D.
Keep up the great work.


Related Articles / Tutorials:
Adobe Photoshop
Going from Aperture to Lightroom? Put it in the Cloud!

Going from Aperture to Lightroom? Put it in the Cloud!

Why Wait for Apple Photos? Adventurer and editor Jigs Gaton takes us through some easy steps for migrating your photo library from Apple's Aperture and iPhoto into Adobe Lightroom.

Tutorial, Feature
Jiggy Gaton
Adobe Photoshop
THE BLUR LAB

THE BLUR LAB
  Play Video
Adobe Photoshop CS6 includes three new blurring filters. Rich Harrington will show you new ways to blur specific areas in a photo, as well as achieve tilt sheet and vignette effects.

Tutorial, Video Tutorial
Richard Harrington
Adobe Photoshop
THE ADAPTIVE WIDE ANGLE COMMAND

THE ADAPTIVE WIDE ANGLE COMMAND
  Play Video
Adobe Photoshop CS6 adds to an existing feature that you may not have even been using called Photomerge. Rich Harrington will show you the new Adaptive Wide Angle command to remove all of the lens and perspective distortion in merged photos. You will also learn how to use these exact techniques with video footage, too.

Tutorial, Video Tutorial
Richard Harrington
Adobe Photoshop
COACM: Plug In, Tune Out

COACM: Plug In, Tune Out

Adobe created quite a stir when it recently announced a public beta for the next major update to Photoshop. Is this the result of some very smart marketing, or perhaps an act of desperation, due to the harsh economic realities facing most creatives these days? What is the future of this critical production tool?

Editorial
David Biedny
Adobe Photoshop
Lite Bite: 10 Years Younger Using Gaussian Blur and a Mask

Lite Bite: 10 Years Younger Using Gaussian Blur and a Mask
  Play Video
In this "Lite Bite" tutorial Martin Ainsworth quickly demonstrates to ability to give someone a slightly younger appearance using a Gaussian Blur and a Mask to get some very effective and quick results.

Tutorial, Video Tutorial
Martin Ainsworth
Adobe Photoshop
Lite Bite: Using the High Pass Filter to Sharpen Images

Lite Bite: Using the High Pass Filter to Sharpen Images
  Play Video
In this very quick "Lite Bite" tutorial Martin Ainsworth demonstrates the effectiveness of the High Pass Filter to sharpen images and it's a lot quicker and easier that you might expect.

Tutorial, Video Tutorial
Martin Ainsworth
Adobe Photoshop
Lite Bite for Photoshop: Content Aware Fill vs Patch Tool

Lite Bite for Photoshop: Content Aware Fill vs Patch Tool
  Play Video
In this "Lite Bite" tutorial Martin Ainsworth gives a quick overview of when and why to use the Patch & Content Aware tool to aid Photographic editing.

Tutorial, Video Tutorial
Martin Ainsworth
Adobe Photoshop
Lite Bite for Photoshop: Using Droplets in Adobe Photoshop

Lite Bite for Photoshop: Using Droplets in Adobe Photoshop
  Play Video
This "Lite Bite Tutorial" will help you speed up and automate your work flow by using droplets created from actions in Photoshop. In a matter of minutes you will be up and running. The process is the same for both Mac & PC users.

Tutorial, Video Tutorial
Martin Ainsworth
Adobe Photoshop
Lite Bite for Photoshop: Using Masks on Groups

Lite Bite for Photoshop: Using Masks on Groups
  Play Video
Using masks to speed up web design can help you show multiple graphic ideas with the least amount of effort for best effect. In this tutorial, Martin Ainsworth willl show you how to add a mask to a folder and add content to it.

Tutorial, Video Tutorial
Martin Ainsworth
Adobe Photoshop
Lite Bite for Photoshop: Creating Custom Actions

Lite Bite for Photoshop: Creating Custom Actions
  Play Video
In this "Lite Bite" tutorial, quickly setup custom actions to speed up your photography workflow in Adobe Photoshop to rotate and add adjustment layers for 'Cross Processing' and 'Black & White.' This is a valuable time saving tutorial.

Tutorial, Video Tutorial
Martin Ainsworth
MORE
© 2016 CreativeCOW.net All Rights Reserved
[TOP]