前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一次超帅的代码生成设计

一次超帅的代码生成设计

作者头像
Phodal
发布2018-01-29 10:35:19
1.1K0
发布2018-01-29 10:35:19
举报
文章被收录于专栏:phodalphodal

需求

昨天,我看到这个Badge的时候,我就在想我也会创建一个自己的Badge。

然后,我就可以这样到处粘贴:

看样子,我做的效果还是没有上面的好看,不过有些地方更炫。

需求分析

为了达到任意缩放的目的,我们就需要使用适量图片,即SVG。最开始的时候我从没想过用代码来生成,因为使用一些图形工具来创建是最简单的事情了。

原型设计

找了个工具先做了一个Demo:

想了想居然还有三个要做……。

接着看了看SVG的代码,然后我惊呆了:

就这么简单的代码,为什么不自己写呢!!

Coding

首先,我想到的是Python的PIL,然而它并不能做这样的事情!

接着,找到了一个名为SVGWrite的库,就开始写代码了~~。

时间很快就过去了。

我发现这样做起来太单调了,我就想加一点点趣味,比如: Idea风格应该是带蓝图的:

代码风格应该要是这样的:

不断地变更需求之后,我就展开和SVG的大作战了。

ShowCase

最后结果如下:

1. 点亮Idea蓝图风格:

2. 代码风格的works:

3. 没有设计好的Design:

4. 写作风格的article:

代码放在GitHub上: https://github.com/phodal/brand

在线地址:http://brand.phodal.com/

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2016-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 phodal 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档