PuTTY 工具的图标演变史
PuTTY 工具的图标演变史
[Simon Tatham, 2025-03-12]
简介
2025年3月,我收到一封电子邮件,询问关于 PuTTY 的“logo”——Windows 可执行文件使用的图标。发件人想知道它的来源,以及它随时间的演变过程。 有时我会收到一封提出问题的电子邮件,当我完成回答时,我意识到值得将其转化为一篇博文。这次我甚至在开始输入之前就知道这将是其中之一,因为这个问题既有平面设计的角度,也有技术的角度。所以我有很多话要说。 PuTTY 的图标设计可以追溯到 20 世纪 90 年代末和 21 世纪初。它们从未进行过重大的 风格 重新设计,但多年来,这些图标必须在各种约束条件下重新渲染,这构成了一项技术挑战。
手绘时代
当我第一次开始绘制 PuTTY 图标时,我不知道我需要大量不同尺寸的图标。所以一开始我没有任何自动化——我只是在 MSVC 图标编辑器中手动绘制每个图标。
PuTTY 本身
放大到可见尺寸,这是我仍然保留在源代码控制中的最早版本的原始 PuTTY 图标。这意味着它在 1999 年初是当前的;我的源代码控制并没有一直追溯到 1996 年夏季的最初项目开始,但如果它做到了,我希望这 可能 是我最初绘制的同一个图标。我会很早地绘制一个,因为没有图标的 Windows GUI 程序看起来非常没有帮助。
原始的 PuTTY 图标,彩色和黑白
它是 32 × 32 像素,并使用有限的原色和灰色阴影调色板。这是因为我在 20 世纪 90 年代中期启动了该项目,当时非真彩色显示器非常常见。当时建议在图标中使用固定的 16 色调色板,包括明显的原色和间色及其暗淡版本,以及几个备用的灰色阴影。这样,整个 GUI 中的所有图标都可以重复使用相同的 16 个调色板条目,而不会耗尽显示器的颜色。所以这个图标是使用那个调色板绘制的。
提供纯黑白版本是当时的另一个标准建议。但我记不清原因了——我当然从来没有真正 见过 一台运行 Win95 或更高版本的电脑使用黑白显示器!我最好的猜测是,该建议旨在与“Win32s”扩展一起使用,该扩展至少可以尝试让 32 位程序在 Windows 3.1 上运行(在合适的底层硬件上)。可能 Windows 3 仍然支持黑白显示器。
我认为我没有过多考虑设计。我只是匆匆画了一下,因为我需要 某种 图标。这两台电脑以 90 年代常见的风格绘制:一个系统盒坐在 CRT 监视器下,软盘驱动器在右端可见。它们通过一个闪电连接,以暗示它们之间的电气通信。我不 认为 我很有创意:我模糊地认为已经存在几个这样的图标(尽管我从未能够找到任何我所想到的具体例子),所以在我的脑海中,它符合当时的总体图标,并且看起来很容易理解。
我不记得为什么闪电是 黄色 的。事后看来,这似乎是其中最奇怪的事情;青色本来是电的更明显的选择。可能只是为了与电脑的蓝色屏幕形成更大的对比。
说到屏幕……我也不记得为什么屏幕是蓝色的了。我 认为 我只是打算将其作为一种中性的颜色,而不是黑色,这样就可以清楚地表明屏幕已打开。我很确定蓝色 不是 暗示 Windows 的蓝屏死机——这没有意义,因为在 PuTTY 的典型用法中,只有连接的 一端 运行 Windows,并且两端都没有崩溃!
回想起来,我想我也可能考虑过让两台电脑看起来彼此不同,因为客户端机器可能位于某人的桌面上,而服务器可能位于数据中心的机架中?但我开始编写 PuTTY 时还是一个学生,并且 我的 你可以远程登录的 Linux 服务器在我的桌子上,而不是在机架中。所以我认为这根本没有发生在我身上。
PSCP (和 PSFTP): 文件传输
1999 年,一位贡献者发送了一个 SCP 实现,PSCP 就诞生了。我决定为它绘制一个自己的图标。
PSCP 是否需要图标并不特别重要。你不是 从 GUI 运行它(没有命令行参数它毫无用处),因此它不需要一个图标让你在资源管理器中找到它或在开始菜单中识别它。并且它不会弹出 GUI 窗口,因此它也不需要一个图标来在任务栏中识别它们。但我还是画了一个图标。我不记得为什么了。也许只是为了完整性,或者我只是想画一些东西,或者其他什么。
我通过修改现有的 PuTTY 图标来制作 PSCP 图标,用一张带有可变长度行的纸张替换了两台计算机中的一台,暗示着书面文件:
原始的 PSCP 图标,彩色和黑白
我保留了将剩余计算机连接到该文档的闪电,理论是你使用 PSCP 远程访问文档。(在某种相当模糊的意义上。)
后来,我们获得了第二个文件传输工具 PSFTP,我为它重复使用了相同的图标,因为它们都是文件传输工具,并且该图标并没有真正说明其中任何一个的具体内容。PSFTP 仍然是一个命令行应用程序,但与 PSCP 不同,可以 从 GUI 运行它(通过在资源管理器或开始菜单中单击它),因为它具有交互式提示,因此如果你不使用任何命令行参数运行它,你可以在提示符下告诉它要连接到哪里。因此,PSFTP 比 PSCP 更实际地使用了相同的图标。
(另一方面,给两个工具相同的图标意味着你必须仔细检查你在资源管理器中拖动的是哪个!也许以某种方式使 PSCP 和 PSFTP 图标不同会更好。但我无法轻易想到两种工具之间差异的视觉描述。)
Pageant: SSH 代理
Pageant,我们的 SSH 代理,是套件中下一个需要图标的工具。
我最初的想法是绘制一个 秘密 代理的面孔——穿着间谍小说中更傻的一端的典型服装,戴着宽边帽和竖起的衣领。
但我不太擅长画脸。经过几次失败的尝试后,我意识到如果我等到画出我想要的图标,Pageant 将永远不会发布。所以取而代之的是,我拿走了秘密特工的帽子——这是我 确实 画得很满意的那部分——只是把它以倾斜的角度放在原始 PuTTY 图标中较大版本的电脑的顶部。
原始的 Pageant 图标
我本打算将其作为占位符,计划稍后回来再次尝试绘制我最初的想法,即人类秘密特工。但后来我意识到我已经绘制的图标简直 更好! 它通过重用相同的计算机设计在视觉上与套件的其余部分相符;它更合适,因为所讨论的“代理”是计算机化的而不是人类的。最重要的是,戴帽子的电脑原来很可爱。所以我保留了它。
从技术方面来看:Pageant 的原始图标 没有 附带黑白版本。我不记得为什么了;也许,随着 Windows 3 过去几年,它似乎不再那么重要了。但另一方面,Pageant 提出了一个新的要求:我必须绘制该图标的 小 版本。到目前为止,我只是以(当时的)标准图标尺寸 32 × 32 绘制了所有内容;但 Pageant 将一个图标放在任务栏上的系统托盘中,因此它需要一个较小的 16 × 16 图标才能安装在那里。如果你只是让 Windows 缩小 32 × 32 版本,它不会做得那么好。
原始 Pageant 图标的半尺寸版本
绘制相同计算机 logo 的小版本是一个挑战,尤其是在仍然使用该 16 色固定调色板的同时。你可以看到我用较深的调色板条目做了一些技巧,“手动抗锯齿”了帽带,并将计算机显示器底部的内部黑色轮廓替换为深灰色轮廓,以使其不那么突出——好像原始的 1 像素黑色轮廓已缩小到半个像素。
(但 外部 轮廓仍然是纯黑色,因此它可以将整个图标与显示的任何背景颜色清楚地分开。任务栏是灰色的,大多数图标也是灰色的,因此这仍然很重要!)
PuTTYgen: 密钥生成器
在那之后是 PuTTYgen。我绘制了另一个“计算机 + 闪电 + 对象”图标,这次另一个对象是一把钥匙——一个微弱的视觉双关语,因为 PuTTYgen 生成并处理加密密钥。
原始的 PuTTYgen 图标
指示网络通信的闪电在此工具中尤其不合适。它在 PSCP 中已经相当薄弱,但 PuTTYgen 根本不进行任何网络通信,因此闪电完全不准确。我真的把它放在那里是为了在视觉上与其余图标保持一致:它在那里是为了发出“这是来自与 PuTTY 相同套件的工具”的信号。
(我仍然对钥匙的绘制感到不太满意。)
此图标与 PSCP 图标的方向相反:在这里,我保留了主 PuTTY 图标中左下角的计算机,并用另一个奇怪的对象替换了右上角的计算机,而在 PSCP 中,我保留了右上角的计算机,并用一个对象替换了 另一个 计算机。我不记得有任何特殊原因——也许我什至懒得检查我之前绘制的图标的方向!但我对此并不太不满意,因为它使两个图标彼此更加不同,因此更容易区分。
配置对话框
我们需要的下一个图标根本不是用于单独的工具:它是用于 PuTTY 的配置对话框。
配置框的任务栏条目具有无聊的“默认”图标,仅表示通用窗口框架,Windows 将其用于任何未提供更好图标的窗口。我认为这看起来很丑。
我没有只是未修改地重复使用主 PuTTY 图标,而是绘制了一个图标来专门表示配置或修改,方法是在顶部叠加一个大扳手:
PuTTY 配置对话框图标,彩色和黑白
对于此图标,我返回到包含单色版本。我不记得为什么了。也许只是因为我正在修改 确实 具有单色版本的现有图标!
脚本生成时代
在此区域中没有任何其他事情发生,直到 2007 年。
大约是人们开始抱怨 32 × 32 像素图标开始看起来很糟糕的时候。显示器变得更大,Windows 默认显示 48 × 48 图标而不是 32 × 32 图标。因此,如果你的应用程序只有一个 32 × 32 图标,Windows 会拉伸它。
如果将 32 × 32 图标精确放大 2 倍到 64 × 64,复制每个输入像素相同的次数,这看起来不会很棒。但 48 甚至不是 32 的倍数,因此 Windows 不得不 不均匀地 拉伸我的图标,这看起来更糟。
我没有手动绘制另一整套图标,而是决定变得更有抱负。所以我编写了一段代码,以编程方式绘制每个图标图像的所有组件,以便我可以运行该脚本来为每个工具自动生成一整套图标。这消除了关于哪些图标具有微小版本以及哪些图标具有黑白版本的不一致:现在 所有 图标都具有 所有 版本。
其中最难的部分是微小的 16 × 16 图标。到目前为止,我只为 Pageant 绘制了其中一个。现在我必须尝试捕捉我在该图标中用于“手动抗锯齿”的艺术判断,并尝试使一段软件为图标套件的 所有 图形组件做同样的事情。
我记得那是一项非常艰苦的工作,但最终我设法制造出了一些我满意的东西。此后,每个 图标都有 48 × 48、32 × 32 和 16 × 16 图标。
脚本生成的一整套图标
我没有尝试让程序重新创建我在原始绘图中做出的 每个 决定。毕竟,我在匆忙中并没有经过太多思考就做出了很多这些决定。所以我只是让脚本达到我 足够 满意的程度。我借此机会改进了一些东西:例如,Pageant 帽带的 所有 版本现在都是抗锯齿的,而不仅仅是微小版本。
但是脚本生成的图标还有其他一些方式与原始手绘版本 不完全 匹配。下面的单选按钮应该允许你在原始版本和脚本生成的版本中的两个示例图标之间来回切换:
Original Scripted
使用单选按钮在原始 PuTTY 和 Pageant 图标与脚本的 32 × 32 输出之间切换
实际的 PuTTY 图标是一个非常接近的匹配——只有少量像素发生了变化。但是 Pageant 图标却大相径庭:除了帽带的故意更改的抗锯齿之外,图标中的计算机甚至不是相同的 大小! 我不记得这是否是一个纯粹的意外(也许我在编写脚本时没有在这两个版本的图标之间来回切换),或者是一个有意的样式更改。
(当然,如果我 想 更改计算机的大小,使用脚本比手动重绘更容易。因此,现在机会已经到来,它应该是有意的更改。但我不记得它是 有意的 了。)
正如我之前所说,我确保脚本也可以生成一整套黑白图标,以防万一。在 2007 年,我认为有人仍在 B&W 显示器上运行 Windows(或其他任何东西)的可能性甚至更小,但是使用脚本完成这些工作的好处之一是,你可以让它为你做很多艰苦的工作,以防万一。所以现在我也有了一整套黑白图标,即使是新的 48 像素尺寸:
所有五个图标,黑白,48 像素
pterm
在 2002 年,我将大量的 PuTTY 代码移植到 Linux。我编写了一个完整的 GUI PuTTY 应用程序的 Linux 版本,并且还重用了部分代码作为 X11 终端模拟器 pterm
,你可以使用它来代替现有的终端模拟器,例如 xterm
。
Linux GUI 应用程序也可以根据需要具有图标:X11 程序可以在其窗口上设置一个属性,其中包含一个用作其图标的位图。窗口管理器在 如何 使用它方面有所不同——它们可能会将整个窗口最小化为 Windows 3.1 样式的图标,或者在任务栏条目中显示该图标,其样式更像现代 Windows,或者在应用程序的窗口框架中的某个位置显示该图标,或者他们可以想到的任何其他东西。
我没有在 2002 年对此做任何事情,部分原因是据我所知,我使用的工具包库 (GTK 1) 不支持在窗口上设置图标,而且提供多种位图文件格式的相同图标也会很痛苦。
但是现在我正在从脚本生成图标,突然之间,使脚本输出多种文件格式变得容易得多。我还发现 GTK 1 确实 允许你毕竟设置一个图标属性。(无论如何,我已经知道 GTK 2 可以做到这一点,并计划进行升级。)因此,出于这两个原因,现在可以为 PuTTY 工具的 X11 版本提供图标了。
因此,我必须为 pterm
绘制一个图标,该图标已经没有图标了!
这一次,我真的用尽了想象力。由于 pterm
不进行任何网络通信,所以我只是绘制了一个图标,该图标仅包含一个与所有其他图标中看到的相同的计算机 logo 的副本,将其扩展到图标图像的完整大小。(比 Pageant 大一点,因为这次它不必戴在帽子下。)
pterm
还有一个配置对话框,因此我为此制作了一个单独的图标,重复使用了来自 PuTTY 本身的相同扳手叠加。
pterm
的图标及其配置对话框
很久 以后,在 2021 年,有可能编写一个可以在 Windows 上运行的 pterm
版本,并充当普通 Windows cmd.exe
或 Powershell 会话的替代 GUI 容器。一旦发生这种情况,此图标也成为 Windows pterm 的图标。
安装程序
灵活的图标绘制脚本还允许我支持真彩色图标作为额外的输出模式,因此我不必再局限于旧的 16 色调色板。
当我需要 PuTTY 安装程序 的图标时,这派上了用场。我认为绘制一个纸板箱作为该图标的一部分会很好,纸板箱顶部打开,一道闪电从纸板箱中射出,指向计算机,这表明“PuTTY 正在从这个盒子里炸到你的机器上”。纸板箱是棕色的,而棕色不在 16 色图标调色板中——但现在我们不再局限于该调色板了,因此我可以使用 实际 棕色绘制真彩色图标!
但我仍然想支持 16 色图标,因为如果可以避免,我从不喜欢丢弃向后兼容性。我注意到,你可以通过采用旧 Windows 16 色图标调色板中的两种不同颜色并将它们混合 50:50 来制作 几种 可接受的棕色阴影。我的所有混合都涉及深红色 (#800000
);我通过将它与黑色 (#000000
)、深黄色 (#808000
) 和全黄色 (#ffff00
) 混合,得到了三种不同的棕色或足够棕色的颜色。
因此,我用这三种 50-50 混合制成了纸板箱,使用它们全部显示纸板箱的不同部分与光线的角度不同。这样,在真彩色图标中,我可以使用单色,它是两种旧颜色的平均值,而在 16 色版本中,我通过交替 实际 两种旧颜色的像素来对它进行半色调处理。
PuTTY 安装程序图标,真彩色和半色调版本
SVG 重构
我的图标绘制脚本在普通的 32 × 32 和 48 × 48 尺寸下工作良好,并且 向下 缩放到 16 × 16 也相当好,但是当你开始 向上 缩放时,它效果不佳。
因此,如果有人需要图标的 非常大 版本,则只需运行具有更大图像尺寸的相同脚本来生成它们将不会产生非常好的输出。在我将 PuTTY 移植到 Mac 的失败尝试之一中,我发现 MacOS 需要一个 128 × 128 的图标才能在 dock 中使用,而我的脚本在该尺寸下的输出绝对不是很好。
我现在已经或多或少放弃了该 Mac 端口,但我认为所有图标的完全可缩放版本可能仍然有用。一方面,它允许在 GUI 图标以外的上下文中使用它们。(无偿商品,有人吗?T 恤?笔记本电脑贴花?🙂)
因此,部分是“以防万一”,但也是为了好玩,我一直在开发第二个图标绘制脚本。它模仿了原始脚本的相同“思考过程”,但它输出 SVG 文件而不是位图——使插图仍然尽可能接近原始风格。
截至目前,这些是我在 SVG 版本方面的最大努力:
所有八个图标,以完全可缩放的 SVG 格式
对于微小的图标,我仍然认为我的原始脚本正在做更好的渲染工作,因为 SVG 根本不知道如何最好地进行抗锯齿处理。但是对于 大 图标,尤其是在真彩色中,我认为我的建议将基于这些 SVG——只需渲染为大的位图即可。
结束语
这就是 PuTTY 图标集的历史和当前状态。
人们有时会反对整个 20 世纪 90 年代的风格,并自愿为我们设计一套不同风格的完整替代品。我们从来没有喜欢其中任何一个到足以采用它们。我认为这可能是 因为 20 世纪 90 年代的风格是使 PuTTY 成为 PuTTY 的一部分——“令人安心的过时”。我不知道我们是否真的会接受 任何 重大的重新设计。
所以我希望到目前为止,我们可能会在项目的整个生命周期内保留这些图标,或者基本上相同的图标!