透過png是什么、为什么、哪里、多少、如何、怎么等问题详解

什么是【透過png】？

【透過png】，中文常称为透明PNG，指的是一种支持图像区域透明或半透明特性的PNG（Portable Network Graphics）格式图像文件。
与常见的JPEG格式图像不同，JPEG不支持任何形式的透明度，图像的每个像素都有固定的颜色。而PNG格式在设计之初就考虑了对透明度的支持。

透明PNG之所以能够实现透明效果，是因为它除了存储红（R）、绿（G）、蓝（B）三种颜色通道的信息外，还额外存储了一个称为“Alpha通道”的信息。

• 颜色通道 (RGB): 决定了像素的颜色。
• Alpha通道: 决定了像素的不透明度。Alpha值范围通常是0到255（或0%到100%）。

Alpha值为0（或0%）时，像素完全透明，可以看到其下方的任何内容；Alpha值为255（或100%）时，像素完全不透明，遮挡其下方的内容；介于0和255之间的值则代表不同程度的半透明效果。这种支持多级透明度的能力是透明PNG相较于只支持完全透明或完全不透明（二值透明）的GIF格式的主要优势之一。

为什么需要使用【透過png】？

使用透明PNG的主要目的是为了实现图像与背景的无缝融合，或者让图像的某些部分不显示，从而达到更灵活和专业的视觉效果。以下是一些常见的使用场景：

• 网站和应用界面设计：
  为网站或移动应用添加Logo、图标或装饰性图形时，如果它们是透明PNG格式，就可以直接放置在任何颜色的背景、渐变背景或背景图片上，而不会出现难看的白色或彩色边框。这使得设计更加灵活，不受背景颜色限制。
• 平面设计和排版：
  在创建海报、传单、报告或演示文稿时，可以将抠好的人物、产品或图形保存为透明PNG，然后轻松叠加到不同的背景或照片上，无需再进行额外的图像处理来去除背景。
• 视频编辑和动画：
  透明PNG可以作为素材导入视频编辑软件中，用作Logo水印、图层叠加、文字标题的背景或前景元素。透明区域会直接显示下方视频内容。
• 制作水印：
  创建带有透明背景的Logo或文字作为水印，可以清晰地叠加到照片或视频上，而不会完全遮挡原始内容。
• 游戏开发：
  游戏中的角色、道具或背景元素常使用透明PNG，以便它们能正确地显示在不同的游戏场景背景之上。

总而言之，使用透明PNG能够极大地提升设计效率和最终视觉效果的专业度与灵活性。

透明PNG通常在哪里使用？

透明PNG的应用场景非常广泛，几乎所有需要将图像元素叠加到其他背景上的地方都可以见到它的身影：

• 互联网： 网站的Logo、导航图标、按钮、背景图片中的局部透明区域、在线广告素材等。
• 演示文稿软件： PowerPoint, Keynote, Google Slides等，用于插入透明Logo、图表元素、人物照片等。
• 文档编辑软件： Word, Pages等，用于插入带有透明背景的图片或Logo。
• 专业的图像处理软件： Photoshop, GIMP, Illustrator（导出时）等，作为常用图像格式进行编辑和保存。
• 视频编辑软件： Premiere Pro, Final Cut Pro, DaVinci Resolve等，作为叠加图层使用。
• 三维建模和渲染： 用于纹理贴图中的透明或半透明部分（如树叶、火焰、玻璃等）。
• 应用程序开发： 软件界面中的图标、按钮、皮肤元素等。

透明度有多少级？这会如何影响文件？

透明PNG（具体来说是PNG-24或PNG-32）支持完整的Alpha通道，这意味着每个像素的透明度可以有256个级别（从完全透明到完全不透明）。这种多级透明度使得图像可以有平滑的边缘过渡，实现柔和的阴影、半透明的效果，而不是像GIF那样只能硬生生地透明或不透明。

关于文件大小，透明度会影响文件大小。存储Alpha通道信息需要额外的空间。因此，一个带有透明区域的PNG文件通常会比相同尺寸和视觉内容的完全不透明的PNG文件要大。与没有透明度的JPEG文件相比，透明PNG通常也会大很多，特别是当图像内容复杂或尺寸较大时。这是使用透明PNG需要权衡的一个因素，尤其是在网页上使用时，需要考虑加载速度。不过，现代的PNG优化工具可以在不损失透明度和图像质量的前提下，有效减小文件大小。

如何创建【透過png】？

创建透明PNG通常需要在支持图层和Alpha通道的图像编辑软件中进行。以下是使用常见软件创建透明PNG的基本步骤概述：

使用 Adobe Photoshop 创建

1. 新建或打开文件：
   • 如果从头开始：创建新文件（File > New）。在“New Document”对话框中，确保“Background Contents”选项设置为“Transparent”（透明）。
     这将创建一个带有透明背景的新画布，背景显示为灰白棋盘格图案。
   • 如果处理现有图片：打开图片（File > Open）。如果图片只有一个名为“Background”的图层（通常带有一个小锁图标），双击该图层或右键点击选择“Layer from Background…”将其转换为普通图层。这样原始的背景就不再是锁定且强制不透明的了。
2. 移除不需要透明的部分：
   使用选择工具选中想要保留的区域，然后反选（Select > Inverse），选中需要删除的背景区域。或者直接使用选择工具选中要删除的背景区域。
   常用的选择工具有：
   • 魔棒工具 (Magic Wand Tool)：适合选择纯色或颜色差异明显的区域。
   • 快速选择工具 (Quick Selection Tool)：通过涂抹大致选择区域，软件会自动扩展选择范围。
   • 套索工具 (Lasso Tool) / 多边形套索工具 (Polygonal Lasso Tool) / 磁性套索工具 (Magnetic Lasso Tool)：用于手动绘制选区。
   • 钢笔工具 (Pen Tool)：用于创建精确的路径选区，适合边缘复杂的对象。
   • 对象选择工具 (Object Selection Tool) / 选择主题 (Select Subject)：智能识别图像中的主体并创建选区。
3. 删除选中的区域：
   按下键盘上的 Delete 键，或选择 Edit > Cut 或 Edit > Clear。
   如果操作成功，被删除的区域会显示为灰白棋盘格图案，这代表该区域是透明的。
4. 优化边缘（可选）：
   对于抠图的对象，边缘可能会比较粗糙。可以使用“Select and Mask”（选择并遮住）功能（在选择工具激活时，选项栏会出现此按钮）来平滑边缘、调整羽化、清理选区等，让透明过渡更自然。
5. 检查透明度：
   确保不需要的部分已经变为棋盘格。
6. 保存为PNG格式： (请参考下面关于“如何保存”的详细步骤)

使用 GIMP 创建 (免费软件)

1. 新建或打开文件：
   • 新建文件：File > New。在“Advanced Options”中，展开“Fill with”选项，选择“Transparency”。
   • 处理现有图片：打开图片（File > Open）。如果图层面板中图层名称是粗体的，表示它没有Alpha通道。右键点击图层，选择“Add Alpha Channel”（添加Alpha通道）。
2. 移除不需要透明的部分：
   使用选择工具（如 Fuzzy Select Tool 魔棒工具、Select by Color Tool 按颜色选择工具、Free Select Tool 套索工具等）选中要删除的背景区域。
3. 删除选中的区域：
   按下 Delete 键。被删除的区域会显示为棋盘格。
4. 保存为PNG格式： (请参考下面关于“如何保存”的详细步骤)

使用在线工具创建

有一些在线工具也提供移除背景并导出透明PNG的功能，例如 remove.bg (主要用于移除人物或物体的背景)、Photopea (一个功能强大的在线版Photoshop)。这些工具通常更简单易用，但功能可能不如专业桌面软件强大，尤其是在处理复杂的边缘或半透明区域时。

基本流程通常是上传图片，工具会自动识别并移除背景，然后提供下载透明PNG的选项。

如何保存为【透過png】？

即使在支持透明度的软件中工作，正确的保存步骤也至关重要，否则可能丢失透明度信息。

在 Photoshop 中保存透明PNG

推荐使用“导出”功能，特别是“导出为(Export As)”或“存储为Web所用格式(旧版)(Save for Web (Legacy))”，它们提供了更多PNG相关的优化选项。

1. 使用“导出为(Export As)”：
   • 选择 File > Export > Export As…。
   • 在弹出的对话框中，选择 Format 为 PNG。
   • 在 PNG 选项下，确保勾选了“Transparency”（透明度）选项。
   • （可选）选择尺寸和缩放比例。
   • 点击“Export All”或“Export”。
2. 使用“存储为Web所用格式(旧版)”：
   • 选择 File > Export > Save for Web (Legacy)…。
   • 在右上角的预设或格式下拉菜单中，选择 PNG-24 或 PNG-8。
   • 如果选择 PNG-24，请务必勾选“Transparency”（透明度）选项。PNG-24支持完整透明度。
   • 如果选择 PNG-8，虽然它文件更小，但只支持单级透明度（类似GIF），且颜色限制在256色。如果需要平滑的半透明效果，请选择PNG-24。
   • 检查预览窗口，确保透明区域显示为棋盘格。
   • 点击“Save”。
3. 使用“另存为(Save As)”：
   • 选择 File > Save As…。
   • 在“Save as type”（文件类型）下拉菜单中，选择 PNG (*.PNG)。
   • 点击“Save”。
   • 在弹出的“PNG Options”对话框中，确保“Interlace”（隔行扫描）选项不影响透明度，但通常选择“None”即可。最重要的设置是文件类型本身是PNG。如果您的文档包含透明区域，且图层结构正确（没有锁定的背景层），Photoshop在保存为PNG时默认会保留透明度。但为了确保万一，使用Export As或Save for Web (Legacy)并勾选透明度选项是更可靠的方式。

在 GIMP 中保存透明PNG

1. 选择 File > Export As…。
2. 在文件类型中选择“PNG Image”。
3. 输入文件名并点击“Export”。
4. 在“Export Image as PNG”对话框中，确保“Save color values from transparent pixels”（保存透明像素的颜色值）选项已勾选（这有助于在某些情况下避免边缘的“光晕”），但更重要的是，如果您的图像本身包含Alpha通道且透明区域显示正确（棋盘格），GIMP默认会保留透明度。通常无需更改其他复杂选项。
5. 点击“Export”。

重要提示： 无论使用哪种软件，在保存为PNG时，一定要确认输出设置中“透明度”或“Alpha通道”相关的选项是启用状态。如果将透明PNG另存为不支持透明度的格式（如JPEG），透明区域会根据软件设置被填充为白色、黑色或其他颜色。

如何使用【透過png】？

使用透明PNG非常直观，就像使用其他图片格式一样，只是将其放置在不同背景上时，透明区域会“透出”下面的内容。

• 在网页中使用：
  使用 HTML 的 <img> 标签插入即可。浏览器会自动识别PNG的透明度并在相应的背景上正确显示。
  
  例如：<img src="your_logo.png" alt="Your Logo" style="background-color: blue;">
  如果 your_logo.png 是透明的，Logo会无缝地叠加在蓝色背景上。
• 在文档或演示文稿中使用：
  通过软件菜单中的“插入”>“图片”功能将PNG文件导入。然后可以调整大小、位置，它会自然地叠放在页面或幻灯片的背景上。
• 在图像/视频编辑软件中使用：
  将透明PNG文件导入为新的图层。将其放置在时间线或图层堆栈的上方，透明区域就会显示下面的内容。

如何检查一个PNG文件是否透明？

有几种方法可以检查一个PNG文件是否包含透明度信息以及其透明区域：

• 在图像编辑软件中打开：
  使用Photoshop, GIMP, Photopea等支持图层和透明度的软件打开PNG文件。如果图像中有透明区域，这些区域通常会以灰白棋盘格图案显示。
• 在常见的图片查看器中打开：
  大多数现代操作系统的图片查看器（如Windows的照片应用、macOS的预览应用）都能正确显示透明PNG。它们通常会将透明区域显示为查看器本身的背景颜色（可能是白色、黑色或应用界面的颜色），或者在特定视图模式下显示为棋盘格。如果图片边缘没有硬邦邦的白色或黑色边框，而是与查看器背景融合，那它很可能是透明的。
• 在网页浏览器中打开：
  将PNG文件直接拖放到网页浏览器窗口中，或者通过文件菜单打开。浏览器会在其默认的白色或灰色背景上显示图片。如果图片是透明的，其透明区域会显示浏览器窗口的背景色。
• 在支持透明度预览的在线工具中查看：
  有些在线工具（如在线图片编辑器或某些PNG优化工具的预览功能）会明确地在棋盘格背景上显示图片，以便用户确认透明区域。

关于透明PNG的其他细节（文件大小、优化等）

虽然透明PNG非常实用，但它的一个潜在缺点是文件大小相对较大。这是因为：

• PNG使用无损压缩，这意味着它可以完美地保留图像的每一个细节，但通常不如有损压缩（如JPEG）文件小。
• 存储Alpha通道信息增加了额外的数据量。

为了解决文件大小问题，同时保留透明度，可以采取以下措施：

• 优化： 使用专门的PNG优化工具，如TinyPNG、OptiPNG、PNGOUT等。这些工具可以通过去除不必要的元数据、优化调色板（如果是PNG-8）或使用更高效的压缩算法来减小文件大小，而不会损失图像质量或透明度。
• 选择合适的尺寸： 仅使用所需分辨率的PNG图片，避免在网页或其他地方使用过大的图片然后通过HTML/CSS或软件缩放，因为这样并不能减小实际加载的文件大小。
• 考虑替代方案： 如果图像不需要半透明效果，只有完全透明和完全不透明的区域，并且颜色数量在256色以内，可以考虑使用PNG-8格式（确保支持透明度）或GIF格式（同样支持单级透明度），它们的文件通常会比PNG-24小。然而，PNG-8和GIF在颜色表现力和透明边缘平滑度上通常不如PNG-24。
• 评估需求： 如果图像是复杂的照片且不需要透明背景，JPEG格式通常是更好的选择，文件尺寸会小得多。

总结

【透過png】是一种强大且灵活的图像格式，凭借其对多级透明度的支持，成为网页设计、图形制作、视频编辑等众多领域不可或缺的工具。了解如何创建、保存和使用透明PNG，以及如何管理其文件大小，能够帮助您更有效地进行视觉内容的创作和呈现。