亮度遮罩和alpha遮罩

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.

在之前的文章中，我们研究了如何创建32位PNG以便在网页中使用。 在本练习中，我们将制作一个更复杂的图像，仅在遮罩层中工作。 我将使用Adobe PhotoShop CS5，但是所示的技术应适用于任何版本的PhotoShop，并且可以翻译为其他图像编辑程序，例如GIMP 。 在接下来的几篇文章中，我们将使用本教程的结果，包括PNG Optimization和CSS3 animation 。

步骤1：设定 (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.

通过按键盘上的D ，确保在颜色选择器中选择了默认颜色(黑色前景色，白色背景)。 Ctrl +单击以重命名当前图层。 按OK后 ，通过按SHIFT + F5并选择“ 背景色”作为填充选项，用白色填充图层。 单击图层调板中的“ 添加蒙版”图标，立即为您的图层创建一个蒙版。 遮罩默认为选中状态。 我们将直接在图层蒙版上进行所有工作： 您可以通过“图层”调板中的图层蒙版图标周围的高亮显示小框来判断自己在图层蒙版上。

步骤2：建立云端 (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.)

结果看起来还不是很像云，但是我们会改善它。 选择“ 过滤器/渲染/差异云” 。 连续两次按CMD-F，再次应用“ 差异云”过滤器两次。 (通过转到“ 通道”调板并暂时打开“ Clouds Mask”的可见性，同时单击其他人的眼睛图标将其关闭，您将能够更清楚地看到我们正在创建的Mask 。)

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.

CMD-L调出“ 层”窗口，并将滑块调整到您在右侧屏幕快照中看到的大致位置。

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.

最后，对云蒙版应用一点高斯模糊( 滤镜/模糊/高斯模糊 )，使用1.6值将其分解得更多。

步骤3：汇出PNG-24 (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.

虽然我们可以继续进行改进，但让我们将云保持在当前状态。 同样，所有工作都在遮罩上进行：“云”的印象仅由Alpha遮罩中的透明度信息提供。

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.

继续，并通过File / Save for Web and Devices从PhotoShop将图像另存为PNG-24。 如果您仍然不清楚我们为什么要使用PNG而不是GIF作为导出文件，请在出现的导出屏幕中预览两种格式之间的区别。 将最终文件clouds.png 。 将您的原始图像另存为clouds.psd可能也是明智的选择，因为我们将在下一课中使用它。

步骤4：建立标记和基本CSS (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:

在您选择的文本编辑器中，创建一个HTML。 在<body> ，放置以下内容：

<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:

接下来，应用一些CSS。 我们希望<div>中同时包含了CSS渐变背景和PNG图像。 CSS支持多种背景是可能的 ，但是我们必须小心以正确的顺序指定它们：

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.

如您所见，由于我们在PNG中创建的Alpha蒙版，云层出现在渐变“天空”上，并且相对于它是半透明的。 优势之一是，我们可以分别修改和移动云层和天空背景，也可以使用更多CSS对其进行动画处理，而无需背景视频或JavaScript 。

翻译自: https://thenewcode.com/268/Creating-Alpha-Masked-Clouds-as-PNGs-in-PhotoShop

亮度遮罩和alpha遮罩