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 Adobe PhotoShop 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 CSS3 animation.
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 CSS. 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 × 250px. 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:
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.)
We 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 JavaScript required.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
