mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-02-03 23:40:14 +08:00
Translated
This commit is contained in:
郑
GitHub
parent
0e95d1256d
commit
83a9c7e576
@ -1,151 +0,0 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (robsean)
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (Easily set image transparency using GIMP)
|
||||
[#]: via: (https://opensource.com/article/20/9/chroma-key-gimp)
|
||||
[#]: author: (Seth Kenlon https://opensource.com/users/seth)
|
||||
|
||||
Easily set image transparency using GIMP
|
||||
======
|
||||
Use chroma key or "green screen" techniques to set transparencies on
|
||||
your video-game graphics.
|
||||
![Gaming with penguin pawns][1]
|
||||
|
||||
Whether you're programming a game or an app with [Python][2] or [Lua][3], you're probably using PNG graphics for your game assets. An advantage of the PNG format, which is not available in a JPEG, is the ability to store an **alpha channel**. Alpha is, essentially, the "color" of invisibility or transparency. Alpha is the part of an image you _don't_ see. For example, if you were to draw a doughnut, the doughnut hole would be filled with alpha, and you could see whatever was behind it.
|
||||
|
||||
A common problem is how to find the alpha part of an image. Sometimes, your programming framework, whether it's [Python Arcade][4], [Pygame][5], LÖVE, or anything else, detects the alpha channel and treats it (after the appropriate function calls) as transparency. That means it renders no new pixels where there's alpha, leaving that doughnut hole empty. It's 100% transparent or 0% opaque and functionally "invisible."
|
||||
|
||||
Other times, your framework and your graphic asset don't agree on where the alpha channel is located (or that an alpha channel exists at all), and you get pixels where you wanted transparency.
|
||||
|
||||
This article describes the most sure-fire way I know to work around that.
|
||||
|
||||
### Chroma key
|
||||
|
||||
In computer graphics, there are a few values that contribute to how a pixel is rendered. **Chrominance**, or **chroma**, describes the saturation or intensity of a pixel. The **chroma key** technique (also known as **green screening**) was originally developed as a chemical process, in which a specific color (blue at first and later green) was deliberately obscured by a **matte** during the copying of a film negative, allowing another image to be substituted where there once was a blue or green screen. That's a simplified explanation, but it demonstrates the origins of what is known as the alpha channel in computer graphics.
|
||||
|
||||
An alpha channel is information saved in a graphic to identify pixels that are meant to be transparent. RGB graphics, for example, have red, green, and blue channels. RGBA graphics contain red, green, blue, and alpha. The value of alpha can range from 0 to 1, with decimal points being valid entries.
|
||||
|
||||
Because an alpha channel can be expressed in several different ways, relying on an embedded alpha channel can be problematic. Instead, you can pick a color and turn it into an alpha value of 0 in your game framework. For that to work, you must know the colors in your graphic.
|
||||
|
||||
### Prepare your graphic
|
||||
|
||||
To prepare a graphic with an explicit color reserved exclusively for a chroma key, open the graphic in your favorite graphic editor. I recommend [GIMP][6] or [Glimpse][7], but [mtPaint][8] or [Pinta][9] or even [Inkscape][10] can work just as well, depending on the nature of your graphics and your ability to translate these instructions to a different tool.
|
||||
|
||||
Start by opening this graphic of Tux the penguin:
|
||||
|
||||
![Tux the penguin][11]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
### Select the graphic
|
||||
|
||||
Once the graphic is open, go to the **Windows** menu and select **Dockable Dialogs** and then **Layers**. Right-click on Tux's layer in the **Layer** palette. From the pop-up menu, select **Alpha to Selection**. If your image does not have a built-in alpha channel, then you must create your own selection manually.
|
||||
|
||||
![Alpha to selection][13]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
To create a selection manually, click the **Paths** tool from the toolbox.
|
||||
|
||||
![GIMP Paths tool][14]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
Using the **Paths** tool, move your mouse around the graphic, clicking and releasing (do not drag) at each major intersection of its outline. Don't worry about following curves; just find the major intersections and corners. This creates a node at each point, with a straight line drawn between them. You don't need to close your path, so when you reach the final intersection before the one where you started, you're done.
|
||||
|
||||
![Create a path in GIMP][15]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
Once you've created your outline path, go to the **Windows** menu and select **Dockable Dialogs** and then **Tool Options**. In the **Tool Options** panel, select **Edit (Ctrl)**. With this activated, you can edit the paths you've just drawn by clicking the lines or nodes and adjusting them to fit your graphic better. You can even give the lines curves.
|
||||
|
||||
![Edit path][16]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
Now select the **Paths** panel from the **Windows > Dockable Dialogs** menu. In the **Paths** panel, click the **Path to Selection** button. Your graphic is now selected.
|
||||
|
||||
### Grow the selection
|
||||
|
||||
If you feel your selection is too tight, you can give yourself a little slack by growing the selection. I sometimes do this when I want to impose or thicken a border around a graphic.
|
||||
|
||||
To grow a selection, click the **Select** menu and choose **Grow**. Enter a pixel value and click **OK**.
|
||||
|
||||
### Invert the selection
|
||||
|
||||
You have your graphic selected, but what you actually want to select is everything _except_ your graphic. That's because you're creating an alpha matte to define what in your graphic will be replaced by something else. In other words, you need to mark the pixels that will be turned invisible.
|
||||
|
||||
To invert the selection, click on the **Select** menu and choose **Invert**. Now everything except your graphic is selected.
|
||||
|
||||
### Fill with alpha
|
||||
|
||||
With everything except your graphic selected, choose the color you want to use to designate your alpha matte. The most common color is green (as you might guess from the term "green screen"). There's nothing magical about the color green or even a particular shade of green. It's used because humans, frequent subjects of graphic manipulation, contain no green pigment, so it's easy to key out green without accidentally keying out part of the central subject. Of course, if your graphic is a green alien or an emerald or something that _does_ contain green, you should use a different color. You can use any color you want, as long as it's solid and consistent. If you're doing this to many graphics, your choice should be consistent across all graphics.
|
||||
|
||||
![Foreground color in toolbox][17]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
Set your foreground color with the color value you've chosen. To ensure that your choice is exact, use the [HTML][18] or [HSV][19] representation of the color. For example, if you're using pure green, it can be expressed in GIMP (and most open source graphic applications) as `00ff00` (that's 00 red, FF green, and 00 blue, with F being the maximum amount).
|
||||
|
||||
![Setting color values][20]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
Whatever color you choose, make sure you take note of the HTML or HSV values so you use the exact same color for every graphic.
|
||||
|
||||
To fill in your alpha matte, click the **Edit** menu and choose **Fill with FG Color**.
|
||||
|
||||
### Flatten and export
|
||||
|
||||
If you've left a border around your graphic, set your background color to the color you want to use as the border stroke. This is usually either black or white, but it can be anything that suits your game's aesthetic.
|
||||
|
||||
Once you have set the background color, click on the **Image** menu and select **Flatten Image**. It's safe to do this whether or not you added a border. This process removes the alpha channel from your image, filling in any "transparent" pixels with the background color.
|
||||
|
||||
![Flattening image][21]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
You now have an image ready for your game engine. Export the image to whatever format your game engine prefers, and then import it into your game using whatever function calls it requires. In your code, set the alpha value to `00ff00` (or whatever color you used), and then use the game engine's graphic transforms to treat that color as an alpha channel.
|
||||
|
||||
### Other methods
|
||||
|
||||
This isn't the only way to get transparency in your game graphics. Check your game engine's documentation to find out how it tries to process alpha channels by default, and when you're not certain, try letting your game engine auto-detect transparency in your graphic before you go about editing it. Sometimes, your game engine's expectations and your graphic's preset values happen to match, and you get transparency without having to do any extra work.
|
||||
|
||||
When that fails, though, try a little chroma key. It's worked for the film industry for nearly 100 years, and it can work for you too.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/9/chroma-key-gimp
|
||||
|
||||
作者：[Seth Kenlon][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/seth
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/gaming_grid_penguin.png?itok=7Fv83mHR (Gaming with penguin pawns)
|
||||
[2]: https://opensource.com/article/17/10/python-101
|
||||
[3]: https://opensource.com/article/17/4/how-program-games-raspberry-pi
|
||||
[4]: https://opensource.com/article/18/4/easy-2d-game-creation-python-and-arcade
|
||||
[5]: https://opensource.com/article/17/12/game-framework-python
|
||||
[6]: http://gimp.org
|
||||
[7]: https://glimpse-editor.github.io
|
||||
[8]: https://opensource.com/article/17/2/mtpaint-pixel-art-animated-gifs
|
||||
[9]: https://www.pinta-project.com/
|
||||
[10]: http://inkscape.org
|
||||
[11]: https://opensource.com/sites/default/files/uploads/tux.png (Tux the penguin)
|
||||
[12]: https://creativecommons.org/licenses/by-sa/4.0/
|
||||
[13]: https://opensource.com/sites/default/files/uploads/gimp_alpha-to-selection.jpg (Alpha to selection)
|
||||
[14]: https://opensource.com/sites/default/files/uploads/gimp_path-tool.jpg (GIMP Paths tool)
|
||||
[15]: https://opensource.com/sites/default/files/uploads/gimp_path-create.jpg (Create a path in GIMP)
|
||||
[16]: https://opensource.com/sites/default/files/uploads/gimp_path-edit.jpg (Edit path)
|
||||
[17]: https://opensource.com/sites/default/files/uploads/gimp_foreground-colour.jpg (Foreground color in toolbox)
|
||||
[18]: https://www.w3schools.com/colors/colors_picker.asp
|
||||
[19]: https://en.wikipedia.org/wiki/HSL_and_HSV
|
||||
[20]: https://opensource.com/sites/default/files/uploads/gimp_colour.jpg (Setting color values)
|
||||
[21]: https://opensource.com/sites/default/files/uploads/gimp_matte.jpg (Flattening image)
|
||||
@ -0,0 +1,150 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (robsean)
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (Easily set image transparency using GIMP)
|
||||
[#]: via: (https://opensource.com/article/20/9/chroma-key-gimp)
|
||||
[#]: author: (Seth Kenlon https://opensource.com/users/seth)
|
||||
|
||||
使用 GIMP 轻松地设置图片透明度
|
||||
======
|
||||
使用 chroma 按键或 "绿屏" 技巧来设置你电脑游戏中图片的透明度。
|
||||
![企鹅兵游戏][1]
|
||||
|
||||
不管你是否正在使用 [Python][2] 或 [Lua][3] 编程一个游戏或一个 APP，你都有可能在你的游戏资产中使用 PNG 图像。PNG 格式图像的一个优点是能够存储一个 **alpha 通道**，这在一个 JPEG 格式的图像中是不可能获得的。Alpha 在本质上是不可见的或透明的 "颜色" 。Alpha 是你图像 _不可见_ 的一部分。例如，你要绘制一个甜甜圈，甜甜圈的空洞将使用 alpha 填充，你就可以看到它后面的任何东西。
|
||||
|
||||
一个常见的问题是如何找到一幅图像的 alpha 部分。有时你的编程框架，不管它是 [Python Arcade][4]，[Pygame][5]，LÖVE，或者其它的任何东西，侦察出 alpha 通道，(在适当地调用函数后) 将其作为透明处理。这意味着它将不会在 alpha 部分来渲染新的像素，而留下甜甜圈的空洞。100% 是透明的，0% 是不透明的，在功能上起 "不可见" 的作用。
|
||||
|
||||
有些时候，你的框架与你的图像资源在 alpha 通道的位置上是不一致的 (或者说，一个 alpha 通道根本就不存在)，你可以在你想要透明度的地方得到像素。
|
||||
|
||||
这篇文章描述了我所知道的最可靠的方法来解决透明度的问题。
|
||||
|
||||
### Chroma key
|
||||
|
||||
在计算机图形学中，有一些有助于确定每一个像素是如何渲染的值。**Chrominance** ，或者 **chroma** ，描述一个像素的饱和度或强度。**chroma key** 技术 (也称为 **绿屏**) 最初是作为一种化学工艺而开发的，在复印一张底片时，使用一种特定的 **无光泽** 的颜色 (最初是蓝色，后来的绿色) 来故意遮掩，以允许使用另一幅图像来取代曾经有蓝色或绿色屏幕的地方。这是一种简化的解释，但是它说明了计算机图形学中被称为 alpha 通道的起源。
|
||||
|
||||
alpha 通道是保存在一幅图像中的信息，用以标识意欲透明的像素。例如，RGB 图像有红，绿，蓝通道。RGBA 图像包含红，绿，蓝通道，以及 alpha 通道。alpha 值的范围可以从 0 到 1 ，使用小数是也有效的。
|
||||
|
||||
因为一个 alpha 通道可以用几种不同的方法表达，依赖于一个嵌入的 alpha 通道可能是有问题的。作为替代方案，你可以在你的游戏框架中选择一种颜色并将其转化为一个 alpha 值。要做到这一点，你必需知道在你图像中的颜色值。
|
||||
|
||||
### 准备你的图片
|
||||
|
||||
为一次绿屏操作来准备一张清晰的使用独占保留颜色的图片，在你最喜欢的图片编辑器中打开图片。我建议使用 [GIMP][6] 或 [Glimpse][7]，但是 [mtPaint][8] 或 [Pinta][9]，甚至 [Inkscape][10] 也能很好地工作，这取决于你的图像的性质，以及你将这些操作指南转换到一种不同图片编辑器工具的能力。
|
||||
|
||||
首先打开这幅 Tux 企鹅的图像:
|
||||
|
||||
![Tux 企鹅][11]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
### 选择图片
|
||||
|
||||
在图片打开后，转到 **窗口** 菜单，选择 **可停靠对话框** ，接下来选择 **图层**。在 **图层** 面板中 Tux 图层上右击。从弹出菜单中，选择 **Alpha 到选区** 。如果你的图像没有内置的 alpha 通道，那么你必需手动创建你自己的选区。
|
||||
|
||||
![Alpha 到选区][13]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
为手动创建一个选区，单击来自工具箱的 **路径** 工具。
|
||||
|
||||
![GIMP 的路径工具][14]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
使用 **路径** 工具，在图像周围移动鼠标，在其轮廓的每个主要交叉点处都单击和释放 (不要拖动) 。 不要担心下面的曲线；只需要找到主要的交叉点和拐角。这将在每个点处创建一个节点，并在节点中间绘制一条条线段。你不需要关闭你的路径，因此当你最后到达你开始时的交叉点时，你就完成了。
|
||||
|
||||
![在 GIMP 中创建一个路径][15]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
在你创建你的轮廓路径后，转到 **窗口** 菜单，选择 **可停靠对话框** ，接下来选择 **工具选项** 。在 **工具选项** 面板中，选择 **编辑 (Ctrl)** 。随着这项操作的激活，你可以编辑你刚刚通过单击线或单击节点绘制的路径，并通过调整它们来更好地适应你的图像。你甚至能够将直线弯曲。
|
||||
|
||||
![编辑路径][16]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
现在从 **窗口 > 可停靠对话框** 菜单中选择 **路径** 面板。在 **路径** 面板中，单击 **路径到选区** 按钮。你的绘图现在已经被选中了。
|
||||
|
||||
### 扩大选区
|
||||
|
||||
如果你觉得你的选区太紧贴了，你可以通过扩大来给予你自己的选区一些富余。当我想在一张图像周围采用或加厚一个边框时，我有时会这么扩大选区。
|
||||
|
||||
为扩大一个选区，单击 **选择** 菜单，选择 **扩大** 。输入一个像素值并单击 **确定** 。
|
||||
|
||||
### 反转选区
|
||||
|
||||
你已经选择了你的图形，但是你真正想选择的东西却 _不包括_ 你所选择的图像。这是因为你正在创建的在你图像中定义的一些东西的一个 alpha 蒙版来将被其它的一些东西所替换。换句话说，你需要标记将被转变为不可视的像素。
|
||||
|
||||
为了反转选择区，单击 **选择** 菜单，选择 **反转** 。现在除你的图像以外的一切东西都是被选择的。
|
||||
|
||||
### 使用 alpha 填充
|
||||
|
||||
随着除你的图像以外的一切东西被选择，选择你想使用的颜色来指定你的 alpha 蒙版。最常用的颜色的绿色(正如你可能从 术语 "绿屏" 中所猜到的一样)。绿色或者绿色的特殊阴影并没有什么神奇的。使用 "绿屏" 是因为人们经常处理不包含绿色色素的图像，这样人们能够很容易分离出绿色，而不会意外地分离出图像中重要的部分。当然，如果你的图像是一位绿色的外星人或一枚绿宝石或一些 _确实_ 包含绿色的东西，那么你应该使用一种不同的颜色。只要你所选择的颜色是始终如一的单色，那么你就可以使用你所希望的任意颜色。如果你正在处理很多图像，那么你选择颜色时应该考虑所有的图像颜色。
|
||||
|
||||
![在工具箱中的前景色][17]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
使用你选择的颜色值来设置你的前景色。为确保你的选择是精确是，使用 [HTML][18] 或 [HSV][19] 描述的颜色。例如，如果你正在使用纯绿色，它可以在 GIMP ( 以及大多数的开放源码图像应用程序 ) 中表示为 `00ff00` ( 00 是红色，FF 是绿色，00 是蓝色，F 是最大值 ) 。
|
||||
|
||||
![设置颜色值][20]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
不管你选择什么颜色，务必记录下 HTML 或 HSV 的值，以便你可以为每一张图像使用完全相同的颜色。
|
||||
|
||||
为填充你的 alpha 蒙版，单击 **编辑** 菜单，选择 **使用前景色填充** 。
|
||||
|
||||
### 平整和导出
|
||||
|
||||
如果你在你的图像周围留下边框，设置背景颜色来着色你想使用的边界笔刷。这通常是黑色或白色，但是它也可以是任何适宜你游戏审美观的颜色。
|
||||
|
||||
在你设置背景颜色后，单击 **图像** 菜单，选择 **平整图像**。不管你是否添加了边界，这样做都是安全的。这个过程将从图像中移除 alpha 通道，并使用背景色填充任何 "透明的" 像素。
|
||||
|
||||
![平整图像][21]
|
||||
|
||||
(Seth Kenlon, [CC BY-SA 4.0][12])
|
||||
|
||||
你现在已经为你的游戏引擎准备好了一张图像。导出图像到你的游戏引擎喜欢的任何格式，接下来使用游戏引擎所需要的每一个函数来将图像导入的你的游戏中。在的代码中，设置 alpha 值为 `00ff00` ( 或你使用的任何颜色 )，接下来使用游戏引擎的图像转换器来讲该颜色作为 alpha 通道处理。
|
||||
|
||||
### 其它的方法
|
||||
|
||||
这不是唯一能在你游戏图像中获取透明度的方法。查看你游戏引擎的文档来找出它是如何默认尝试处理 alpha 通道的，在你不确定的时候，在你开始编辑图像前，尝试让你的游戏引擎来自动侦测图像中透明度。有时，你游戏引擎的预期值和你图像的预设值恰巧匹配，那么你就可以直接获取透明度，而不需要做任何额外的工作。
|
||||
|
||||
不过，当这些尝试都失败时，尝试一下 chroma key。它为电影业工作了将近 100 年，它也可以为你工作。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/9/chroma-key-gimp
|
||||
|
||||
作者：[Seth Kenlon][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[robsean](https://github.com/robsean)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/seth
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/gaming_grid_penguin.png?itok=7Fv83mHR (Gaming with penguin pawns)
|
||||
[2]: https://opensource.com/article/17/10/python-101
|
||||
[3]: https://opensource.com/article/17/4/how-program-games-raspberry-pi
|
||||
[4]: https://opensource.com/article/18/4/easy-2d-game-creation-python-and-arcade
|
||||
[5]: https://opensource.com/article/17/12/game-framework-python
|
||||
[6]: http://gimp.org
|
||||
[7]: https://glimpse-editor.github.io
|
||||
[8]: https://opensource.com/article/17/2/mtpaint-pixel-art-animated-gifs
|
||||
[9]: https://www.pinta-project.com/
|
||||
[10]: http://inkscape.org
|
||||
[11]: https://opensource.com/sites/default/files/uploads/tux.png (Tux the penguin)
|
||||
[12]: https://creativecommons.org/licenses/by-sa/4.0/
|
||||
[13]: https://opensource.com/sites/default/files/uploads/gimp_alpha-to-selection.jpg (Alpha to selection)
|
||||
[14]: https://opensource.com/sites/default/files/uploads/gimp_path-tool.jpg (GIMP Paths tool)
|
||||
[15]: https://opensource.com/sites/default/files/uploads/gimp_path-create.jpg (Create a path in GIMP)
|
||||
[16]: https://opensource.com/sites/default/files/uploads/gimp_path-edit.jpg (Edit path)
|
||||
[17]: https://opensource.com/sites/default/files/uploads/gimp_foreground-colour.jpg (Foreground color in toolbox)
|
||||
[18]: https://www.w3schools.com/colors/colors_picker.asp
|
||||
[19]: https://en.wikipedia.org/wiki/HSL_and_HSV
|
||||
[20]: https://opensource.com/sites/default/files/uploads/gimp_colour.jpg (Setting color values)
|
||||
[21]: https://opensource.com/sites/default/files/uploads/gimp_matte.jpg (Flattening image)
|
||||
Loading…
Reference in New Issue
Block a user