Hwang's Blog

开源一个头像生成器

开源一个头像生成器
2021-01-26 · 3 min read
开源

为了个用户提供一个独特又有风格的头像,我们开发制作了一款很棒的头像生成器。
长话短说,如果你想生成一个有趣的头像:

可以前往线上体验地址 :

https://avatar.gaoxiazhitu.com

或扫描下方二维码 (微信中,请选择在「Safari中打开」以便能够下载图片):

如果对这个小网页有兴趣,欢迎继续阅读


我们团队使用 Figma 作为设计协同工具。所以在某日闲暇中,产品兼设计 Hwang 在 Figma 社区中逛到了这个由 Micah Lanier 设计的素材,Avatar Illustration System

无论是色彩还是风格,都和我们要做的产品非常搭。作为设计师,Hwang 就将其导入了自家产品的设计图中,「非常合适」:

之后的一段时间里,这个「头像」一直作为默认头像,出现在我们的资源库中。

我们的产品需要头像

在开发进度推进到了用户系统的环节时,我们正式考虑起了这个头像的事宜。一般而言,作为工具类的产品,是不是需要头像,其实一致没有定论。具体到我们自己的产品,后续我们有计划添加分享功能,为了使用户有独特的标识,我们认为头像是需要的。

我们希望为用户提供一套默认的头像

既然头像是需要的,那么我们是不是需要为用户提供一些默认头像呢?一方面节省用户注册时间,另一方面一个可以与整体的设计风格保持一致。我们看看我们的榜样 Notion:

Notion 在自己的网页中,有非常多好看风格一致的「头像」,我们非常喜欢这种美感。不过,Notion并没有为用户提供一个可用的工具创建这样的头像 。

一个可以随机生成头像的工具也许非常不错

既然需要有一套默认头像,那我们为什么不直接做一个生成器呢?综合考虑下来,我们觉得开发一个头像生成器,会很有趣。

剩下的就是素材的问题了。我们尝试了一些选择,最后,我们还是决定继续使用Micah Lanier 设计的素材,并且在此基础上,扩展我们自己的素材。

因为我们基础素材来自社区,所以我们将服务开源,以便大家都能够使用。

最后我们的开发 CatsJuice 用了一个周末,完成了基本的原型开发,之后设计师 人青小妹妹在原有组件基础上,绘制了更多有趣的小组件:

我们的头像生成器就完成了!

开源!

🌍 GitHub 源码地址 :https://github.com/wave-charts/avatar-gen/

欢迎各位转发体验,以及去GitHub star 我们的项目。

生而为人,应该能够换尿布、策划入侵、杀猪、开船、造房子、 写十四行诗、算账、建墙、正骨、抚慰临终之人、接受命令、 下达命令、合作、独行、解决方程式、分析新问题、 清理马粪、编程、烹饪美食、高效战斗、英勇牺牲。 专业分工是给昆虫准备的。



Powered by Gridea

...