demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

And suckas be thinkin' that they can fake this
But I'm gonna drop it at a higher level...

Creating Alpha-Masked Clouds as PNGs in PhotoShop

tools / photoshop

Estimated reading time: 4 minutes

In previous articles we’ve looked at creating 32-bit PNGs for use in web pages. In this exercise we are going to make a more complex image, working solely in the mask layer. I’ll be using CS5, but the techniques illustrated should be applicable to any version of PhotoShop, and translatable to other image editing programs such as GIMP. We’ll use the result of this tutorial in several articles to come, including PNG Optimisation and .

Clouds Image PhotoShop Setup

Step 1: Setup

Our initial goal is to make a banner for some text that is easily adjustable, with the foreknowledge that we will be animating it later with CSS3. First, you’ll want your canvas in PhotoShop to be a little wider and taller than your final banner to allow for animation: I would suggest around 1000px wide by 250px tall. Make sure that you name the document and make its background transparent before you press OK.

Make sure you have default colours (black foreground, white background) selected in the color picker by pressing D on your keyboard. Ctrl+ click to rename the current layer. After pressing OK, fill the layer with white by pressing SHIFT + F5 and choosing Background Color as the fill option. Immediately create a mask for your layer by clicking on the Add Mask icon in the layers palette. The mask is selected by default. We will be doing all of our work directly on the layer mask:Clouds PhotoShop Layers Palette you’ll be able to tell that you are on the layer mask by the small highlighted frame around the layer mask icon in the Layer palette.

Step 2: Create the clouds

From the menu bar, choose Filter / Render / Clouds.

The result doesn’t look terribly cloud-like yet, but we’ll improve that. Choose Filter / Render / Difference Clouds. Re-apply the Difference Clouds filter twice more by pressing CMD-F twice in succession. (You will be able to see the mask we are creating more clearly by going to the Channels palette and temporarily turning on the visibility of the Clouds Mask while turning off the others by clicking on their eye icons.)

Photoshop Clouds Levels SettingsWe want to tighten up the edges of the clouds a little. Press CMD-L to bring up the Layers window and adjust the sliders to the approximate locations you see in the screenshot to the right.

Finally, apply a little Gaussian blur to the cloud mask (Filter / Blur / Gaussian Blur) to break it up a fraction more, using a value of 1.6.

Step 3: Export the PNG-24

While we could continue to make improvements, let’s leave our clouds in their current state. Again, all of the work has been on the mask: the impression of “clouds” is rendered solely by the transparency information in the alpha mask.

Go ahead and save the image as a PNG-24 from PhotoShop via File / Save for Web and Devices. If you are still unclear as to why we are using PNGs and not GIFs as our export, feel free to preview the difference between the two formats in the export screen that appears. Call the final file clouds.png. It might also be wise to save your original image as clouds.psd, as we will be using it in the next lesson.

Step 4: Create the markup and basic CSS

In the text editor of your choice, create an HTML. Inside the <body>, place something like the following:

<div id=clouds><q>And suckas be thinking' that they can fake this<br>
But I'm gonna drop it at a higher level…</q>
</div>

Next, apply some CSS. We want the <div> to contain both a CSS gradient background and the PNG image. This is possible with CSS’s support for multiple backgrounds, but we must be careful to specify them in the correct order:

div#clouds {
background-image: url(clouds.png),
linear-gradient(#3e6caa, #76b6f4);
background-size: cover;
font-family: Highway, Arial, sans-serif;
background-size: cover;
}
div#clouds q { opacity: 0.7; }

As you can see, the clouds appear over our gradient “sky”, and are semi-transparent against it, due to the alpha mask we created in the PNG. One advantage is that we can modify and move the clouds and sky backgrounds separately, or animate it using more CSS, no background video or required.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.