Ŝalenzo图标的设计
这里介绍的是Ŝalenzo第一代徽标(logo)的设计历程。
最初是想做一台黑白液晶屏的游戏机。为了标识品牌总得有一个徽标,也好学着卡○欧计算器做个简单的开关机动画。
当然一开始什么都没有,不知道实物最终要做成什么样,也不知道徽标要表达什么。调查其他产品图标时发现,macOS平台的文本编辑器TextMate的图标居然是非洲菊,简直是各种抽象派编辑器图标中的一股泥石流。这对徽标主体元素的设计有了启发:谁规定徽标一定要和标识的东西有联系呢?
注:试试下面这个关于品牌徽标的小练习:http://ridiculousfish.com/post/posts/logos.html
于是翻阅Mathematica自带三维几何形状库,挑选了一个看上去很好玩的形状PolyhedronData["StellaOctangula"]
,徽标的本体就这样确定下来了。下面便是绘制出它的框架的Wolfram语言代码。
Graphics3D[
PolyhedronData["StellaOctangula", "Faces"],
Boxed → False,
Lighting → {{"Ambient", White}},
BaseStyle → Opacity[0],
ViewAngle → 100°
]
这个形状的英文名是stellated octahedron,借用拉丁说法也叫stella octangula,中文名为星形八面体。
注:这种多面体也是某著名游戏中某重要道具的形状,可参见bilibili专栏文章《【FGO学术】圣晶石中的数学知识》。我不玩FGO,这个事实也是事后才发现的,于是Ŝalenzo徽标也有了圣晶石这一昵称。
关闭抗锯齿,手工调整视角位置,截张图,裁剪成合适大小,修整线条,一套操作下来,Ŝalenzo徽标的总体布局也就差不多完成了。
另一方面,搜寻机器采用硬件的进展并不顺利,不过发现了某宝上有售灰阶液晶显示屏,据描述DPI和fx-991CN X的屏幕差不多,分辨率还要大一半,又有比991不知道高到哪里去的四级灰阶显示,徽标也顺应着硬件发展填上了两层中间灰度。至于何处填深灰,何处填浅灰,我的选择是相当随意的。毫无顾忌地将三维图形的框架投影到了二维而且没有保留明暗信息,八面体也就被清清楚楚地分解成了两个四面体,再也没有先前的神秘感了。唯有再按二维连通区域填色时无视三维的原貌才能补回一点抽象艺术的感觉吧。于是我以“让人看上去觉得色调很随机,从而捉摸不透”为目标填了中间灰色调。“看,这个徽标连用991的屏幕都无法完美显示出来!”这样的话,就能对机体的机能更有信心了。
注:1989年发售的初代Game Boy就有四灰阶液晶屏(尽管绿得发黄),而且分辨率更高。知道这一事实之后信心又大减了。

彩色填色版本起初只是兴趣使然。我很喜欢Windows系统早期的16色图标风格,4位的色深经微软设计师之手也能调教得相当有质感。这些小图标总能令我振奋,而Ŝalenzo徽标的16色重新着色只能说是我对16色VGA时代美好回忆的拙劣模仿。
颜色名 | R | G | B |
---|---|---|---|
亮红(Red) | 255 | 0 | 0 |
暗红(Maroon) | 128 | 0 | 0 |
棕色(Brown) | 128 | 128 | 0 |
黄色(Yellow) | 255 | 255 | 0 |
浅青(Cyan) | 0 | 255 | 255 |
灰色(Gray) | 128 | 128 | 128 |
白色(White) | 255 | 255 | 255 |
彩色版本用的调色板是至高饱和度的红、棕、黄;受够了经典的蓝色商务软件的调子,将暖色调作为软硬件的主题的话,也许能增添些微的亲近感吧。用绘制工具自动填充的棋盘格当然是仿色处理(dithering,Windows中译作抖动),向右下方偏移的投影所用的浅青和中灰隔行交错倒是有些巧合:随机选择的浅青与主体中的深暖色调互补,加上的灰色中和了浅青的高明度和高饱和度,隔行交错则让我回想起Windows 98时代关机对话框背景百叶窗一般的效果,又避免了45°向右向下各微移1像素的投影完全无法展示出棋盘格仿色应有的效果。这些搭配在一起,至少我觉得效果还凑合。以上对于徽标设计中色彩艺术的分析都是我的马后炮瞎扯淡,其实画的时候也没有想那么多。

顺带一提,这个徽标绘制当初,Ŝalenzo项目连名字都没有,所以徽标的文件名一直是MMPD——MultiMedia Portable Device(多媒体便携设备)的缩写。这显然是在企图用一个相当宽泛的短语指代正在开发的项目。很可惜,这个预测如今看来有些窄了。Ŝalenzo后来又在尝试挖很多其他类型的坑,徽标也被用在了从公开资料到个人账号的各种地方。
直到此时,徽标仍然只有32 × 32像素的复古风格。(我为头像用途特别去快速创建了不插值(nearest neighbor)放大到1200%并添加边距空白与放射渐变背景的版本,否则32 × 32像素版本的透明底图片大概就要被上传作为头像,并饱受双线性插值对像素图的摧残了。)以制作宣传网站为契机,把徽标图形矢量化是一个能确保图片不被模糊和扭曲的办法,也是让徽标在各种像素密度下均能正常显示的正解。像素图在今天已经很难逃过失真的命运了。人们想要高清,追求3840 × 2160,32 × 32这点栅格微不足道,双线性的痕迹也已察觉不到。处在框架上层的人们,又有谁还记得那些已化作基石垫在脚下的原始图像技术呢?
我手工测量了原始徽标中各点的坐标,手工编写了对应的SVG标记来绘制线条、填充棋盘格和扫描线图案、创建背景渐变。在允许数百万种颜色和α通道的矢量画中仍沿用了棋盘格,正是希望像素时代的艺术更少被遗忘。
像素图中同样长的45°斜线和水平线/竖直线填充的区域面积并不相同,从而给人的视觉粗细的感受也不相同。像素艺术作品常常不是有意要利用这一性质,因此我将描边线宽设定为了0.8535533906,即√(½)(单像素45°斜线的实际线宽)和1单像素水平线和竖直线的实际线宽)的算术平均值。在离散的像素情形下,数学分析显得复杂而多余;我不能确定两个极端值的算术平均对人的感官是不是最优解,但至少作了一些尝试。
转换出的这幅矢量图中的每一个可打印字符都是我亲手敲出来的。手敲矢量图的技术大概在上世纪用PostScript语言绘图时有应用。时至今日若非还能用SVG配合JavaScript在网页上做些CSS实现不了的效果,恐怕只能让人们嗤之以鼻了。可那些所见即所得的矢量图编辑器们懂些什么!无尽可嵌套的分组、定义即可复用的元素,元绘图功能纵然在艺术创作中无大用武之地,却可能在刻板的领域拯救不知多少重复劳动。
扯远了。还有绘画中最重要的环节——加亿点细节。很遗憾,这个徽标没有细节。我不是搞美术的,水平实在太菜,也只能画这么个没有灵魂的徽标凑数罢。总结下来,随意的形状、任性的投影、敷衍的调色、混乱的搭配、说没就没的细节,Ŝalenzo的宗旨从项目设计中可见一斑:究天人之际,通古今之变 不知道目的,手握西瓜皮,滑到哪里算哪里。离散中的实数值、矢量中的棋盘格,无一不透露着这一锅大杂烩一般的创想。
我估摸着这么个糊出来的徽标寿命应该不能长久。但鉴于目前项目组有俩懒苟(我也是其中之一),大抵是不会再有下一版徽标了吧。