motta’s here

网络图标, 或者叫网络徽标 (Web Badges) 现在被广泛应用, 比如说明网站符合的规范, 网站的环境, 使用的协议等等等等. 一般来说, 标准的网络图标是大小为 80×15 或者 88×31 像素的 png 或 gif 图片. 结构上, 小图片在左, 文字在右, 而文字绝大多数情况都是使用名叫 Silkscreen 的字体. 使用统一的, 规范的图标好处有很多, 丰富的色彩, 可重用, 不受模板限制等等. 随处都能见到各式各样设计精美的这类图标.

之所以想到要做图标, 是因为一直觉得之前随便找的那个 wordpress 的图标很难看, 想自己弄一个. 在网上发现了一篇很好的文章: Web Badges / Buttons by zwahlendesign, 给我一个极好的指导! 文中有一个非常重要的图标制作参考图 ( 如下图 ).

文章的作者是用 Gimp 作为绘图工具的, 我用的则是 Photoshop. 原文提供的 psd 文件地址有误, 所以我自己按照参考图简单做了一个模板, 和原作者的 xcf 文件一起, 提供下载. 有需要的朋友可以下载参考一下.

• badges_80×15_standard.psd
• badges_80×15_standard.xcf

有了模板, 做一个简单的图标就简单很多. 按照前面说的, 选好背景颜色, 左边放上小图片, 右边用 Silkscreen 字体 (8 号字比较合适) 写上文字就好了. 由于图标很小很小, 所以图片随便拿来一个就可以, 都不用找矢量的. 比如下面这两个, 再简单不过了.

当然, 要是在原作地址上找到想要的, 就更省事儿了. Web Badges / Buttons 文中有大量做好的图标, 从操作系统到 W3C, 从 wordpress 到 firefox…… 都是标准的左图片右文字. 现在在线制作图表的也是不计其数, 比如 Brilliant Button Maker 和 the Button Maker. 用他们提供的服务更是方便! 想要图标但是苦于手头没有工具的, 快去定制吧!