创建文档图像

在整个文档中,通常需要图像来使读者尽可能清楚地解释功能或概念。本页将从头到尾解释该过程。

截图

可以使用屏幕截图工具截取 Godot 中的内容。

在 Windows 10 和 11 上,这将是 Snip & Sketch 程序。按 Windows + Shift + S 可以截取屏幕一部分的屏幕截图并将其保存到剪贴板。按下这些键后,点击并拖动你想要截取的区域。

在 macOS 上,按 Shift + Command + 3 有相同的效果。要拍摄整个屏幕的照片,请按 Shift + Command + 4。所有截取的屏幕截图都将保存到桌面。

每种Linux桌面环境都有自己的屏幕截图工具。比如,在KDE Plasma(译者注:一种linux桌面环境)中,Spectacle 程序用于拍摄截图。如果你的发行版默认没有截图工具,尝试搜索包存储库。如果支持也可以搜索Flathub(译者注:一种Linux应用商店)。

所有的屏幕截图最好在1080p分辨率屏幕上截取。使用更高分辨率会增加无谓细节,这不但不能使文件更好,而且会显著增加文件大小。如果你在更高分辨率的屏幕上截图,截图应该缩小。在本页的后面,会有关于如何执行此操作的说明。

格式转换

Godot 文档中当前的图像格式是 WebP (.webp)。虽然某些 Linux 程序支持以这种格式保存屏幕截图,但 macOS 和 Windows 上的 Snip & Sketch 程序不支持。对于不需要编辑的图像,例如精确裁剪或添加轮廓,可以使用 Squoosh。 Squoosh 是由 Google 开发的开源图片转换器,并且不会通过使用它而向 Google 授予任何图像权利。选择压缩时,如果你的图片大小低于 300KB,请使用无损压缩。如果大小超过 300KB,请使用强度足够大的有损压缩来使其低于该大小。如果使用较强的有损压缩会导致明显的压缩伪影,则降低压缩的强度,即使文件大小较大。

如果你已经安装了图像编辑器,比如GIMP,Krita或者Photoshop,这些软件可以打开图像,然后将其保存为一个WebP(译者注:一种图像文件格式)文件。

裁剪

对于编辑器中的2D或3D场景的屏幕截图,上述步骤就足够了。但是对于大多数UI图像,需要做一些额外工作,特别是进行裁剪让图像看起来干净些。下面的是一个不错的裁剪操作例子。

../../_images/cropped_image.webp

对于图片裁剪这里推荐 Krita。虽然某些屏幕截图程序确实内置了裁剪功能,但获得精确的结果并不那么容易。虽然 Krita 被设计为绘画程序,但其裁剪工具默认提供像素精度。当然,你也可以随意使用你熟悉的其他程序。

如果你之前从未使用过 Krita,请从`Krita 官方网站 <https://krita.org/en/download/krita-desktop/>`_ 下载它,在 Linux 上也可以从你的发行版下载它的存储库,flathub 也是一个选项。将其安装到计算机上后,打开 Krita,然后打开要裁剪的图像。左侧面板上的这个按钮是裁剪工具。

../../_images/crop_tool.webp

选择它后,单击图像,现在应该可以使用裁剪工具。

../../_images/crop_edit.webp

点击并拖动白色框以调整裁剪的内容,如果放大图像,你将看到图像中的各个像素,这对精度很有用。

../../_images/crop_pixels.webp

如果你编辑失误并且进行了过度裁剪,请不要担心,Krita 中的裁剪是非破坏性的,并且可以进行调整。在仍选择裁剪工具的情况下单击图像,控件将返回。

缩小图像

正如本页前面所解释的,在分辨率高于 1080p 的屏幕上拍摄的所有图像都应按比例缩小。要在 Krita 中执行此操作,请单击顶部栏上的 图像 ,然后从下拉菜单中选择 将图像缩放到新尺寸 。也可以通过按 Ctrl + Alt + I 打开此菜单。在此菜单上调整像素尺寸。对于在 4K 显示器上拍摄的任何内容,请将宽度和高度的值更改为其当前值的一半;对于在 1440p 显示器上拍摄的任何内容,请将宽度和高度乘以 0.75。确保选中菜单底部的 约束比例 框,这样只需更改 1 个值。

在 Krita 中保存为 WebP

要将图像另存为 webp(如果还不是),请转至 文件 > 另存为 。从 保存类型: 下拉列表中选择 webp ,然后选择要保存的位置。单击 保存 后,将弹出一个带有 webp 选项的菜单。确保选中 Losses 并将 Quality 设置为 100%。这意味着图像不会丢失细节并且会尽可能的小。

如果图像大小超过 300KB,请尝试使用 Squoosh 无损压缩。如果它仍然超过 300KB,则更改为有损压缩,并缓慢增加压缩,直到它低于 300KB。如果这导致使用较少的压缩产生明显的压缩伪影,那么即使文件大小更大,也没有关系。

为箭头和文本添加轮廓

有时,一张图片需要一些额外的东西来适当的引导读者的注意力,或者让一些东西变得清晰。轮廓线和箭头可以用于此目的。对于这些类型的编辑,Inkscape 是推荐的开源程序,可以从`Inkscap 官方网站<https://inkscape.org/>`_ 下载 。像 Krita 一样,如果你在 Linux 上,你也可以检查你的发行版仓库或从 Flatchub 获取。

这里没有提供关于创建轮廓的完整教程,我们建议搜索各种关于如何在线使用它的教程。但是,文档图像轮廓和箭头有两个标准。首先,颜色应该是黄色,特别是这种十六进制颜色: fffb44 (如果有像 Inkscape 中那样的透明度值,则为 fffb44ff )。选择这种颜色是为了确保色盲在阅读文档时不会遇到问题,如果需要在图像上使用多个轮廓,则除了这种黄色之外,还可以使用其他颜色,应避免使用红色。第二个标准是所有的轮廓和箭头线都应该是 2 像素宽。

最后,一些图像可能需要文本来区分图像的多个部分。除了使用易读的非花哨字体外,没有其他严格的要求。至于颜色,也应该使用以前的黄色,但如果合适,可以使用黑色或其他颜色。例如,如果黄色混合到图像中,或者如果存在多种颜色的多个轮廓。

将图像添加到文档页面

完成图像处理后,就可以将它添加到文档中了。所有的图像都保存在使用它们的页面旁边的名为 img 的文件夹中。

要添加图像,请将其添加到 img 文件夹中,该文件夹与页面的 .rst 文件位于同一文件夹中(如果不存在,请创建它)。在 .rst 页面中,图像应包含在以下代码段中

  1. .. image:: img/documentation_image.webp

其中 documentation_image.webp 将更改为所创建图像的名称。以明确的方式为图像命名,可以的话使用前缀明确表示它们与文档页面的关系。

Previous Next


© 版权所有 2014-present Juan Linietsky, Ariel Manzur and the Godot community (CC BY 3.0). Revision b1c660f7.

Built with Sphinx using a theme provided by Read the Docs.