残体字符设计:INVETA
2023-03-07 09:07:57 时间
残体字符设计是logo设计中很常见的一种风格,它通过删减“多余”的笔画来实现残缺的字符,让读者通过“脑补”还原出原来的文字,以此独特的风格加深用户的产品印象。Github支持STL文本格式的3D模型预览,奈何STL格式非常简陋,难以表示复杂的形状和颜色,只能尽可能用最少的三角形来传达更多的信息,思来想去,最终我准备用12个三角形设计一套“INVETA”的残体logo,在 https://github.com/inveta 上可以看到。SVG的源代码如下:
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 12.5 2" style="background-color:black;">
<polygon points="1,2 0.5,0.5 0,2" />
<polygon points="1,0 0,0 0.5,1.5" />
<polygon points="3,0.7 2,0 2,2" />
<polygon points="2.5,1.3 3.5,2 3.5,0" />
<polygon points="5,1 5,2 6,0" />
<polygon points="5,1 4,0 5,2" />
<polygon points="11.5,1 12.5,2 11.5,0" />
<polygon points="11.5,1 11.5,0 10.5,2" />
<polygon points="9.8,2 9.5,0 9.2,2" />
<polygon points="10.5,0 8.5,0 9.5,0.5" />
<polygon points="8,0 6.5,0 7,1" />
<polygon points="8,2 7,1 6.5,2" />
</svg>
这就很简单粗暴了,每个字母用2个三角形表示,使用<polygon>多边形来实现每一个三角形,其中viewBox限定了坐标系的展示范围。然后就要把它转换成STL三维模型的ASCII文本格式,这个格式虽然简陋啰嗦,但也一目了然,就是把每个三角形的每个顶点的XYZ和朝向都罗列出来,仅此而已,把上面的svg代码转换成stl非常简单,stl代码如下:
solid Exported from Blender-3.4.0
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 1.000000 0.000000 0.000000
vertex 0.500000 1.500000 0.000000
vertex 0.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 1.000000 2.000000 0.000000
vertex 0.000000 2.000000 0.000000
vertex 0.500000 0.500000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 3.000000 1.300000 0.000000
vertex 2.000000 2.000000 0.000000
vertex 2.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 2.500000 0.700000 0.000000
vertex 3.500000 0.000000 0.000000
vertex 3.500000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 5.000000 1.000000 0.000000
vertex 5.000000 0.000000 0.000000
vertex 6.000000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 5.000000 1.000000 0.000000
vertex 4.000000 2.000000 0.000000
vertex 5.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 11.500000 1.000000 0.000000
vertex 12.500000 0.000000 0.000000
vertex 11.500000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 11.500000 1.000000 0.000000
vertex 11.500000 2.000000 0.000000
vertex 10.500000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 9.800000 0.000000 0.000000
vertex 9.500000 2.000000 0.000000
vertex 9.200000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 10.500000 2.000000 0.000000
vertex 8.500000 2.000000 0.000000
vertex 9.500000 1.500000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 8.000000 2.000000 0.000000
vertex 6.500000 2.000000 0.000000
vertex 7.000000 1.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 8.000000 0.000000 0.000000
vertex 7.000000 1.000000 0.000000
vertex 6.500000 0.000000 0.000000
endloop
endfacet
endsolid Exported from Blender-3.4.0
这堆STL代码可以直接写在README.md里,然后GitHub会自动渲染,虽然这种做法的性价比不高,每个三角形居然需要7行代码来表示,但出于尝鲜的目的,inveta的GitHub首页就给安排上了,具体的仓库在 https://github.com/inveta/.github 。下面我们来鉴赏一下这个logo的艺术水准。
每个字符是等高等距的,都占2x2个单位空间,因此整体比较对称,字符间隙适中,整体看上去很舒适。由于是抽象派的残体字符,文字的辨识度并不高,比如E和A就很难辨识,某种程度上来说并不算是一个好的设计,只能说仁者见仁了。为了对齐网格,每个顶点的X和Y大都是0.5的倍数,这也能减少文件体积。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的