人工智能Logo设计师Brandmark

早在去年 mixlab 的一篇

「 国内首个 」设计+人工智能深度案例分析报告​mp.weixin.qq.com

里，就介绍过 Brandmark 了，当时 Brandmark 还是 v1 的版本，现在已经是 v2 版本了，也上线了一些子产品，例如 Brand Rank 、 Logo Crunch 。

Brandmark 在官方博客里介绍了关于人工智能做 Logo 设计的思考，核心的内容，我梳理了下：

使用类似于字体向量（ https://github.com/Jack000/fontjoy ）来发现字体之间的关系， Brandmark 希望将 Logo 中的图标与字体分别向量化，进行匹配。 Brandmark 认为 粗体字体与 icon 的填充面积是相关的 ，于是设定了一条规则： 越粗的字体配填充面积越大的 icon ，是一个较好的设计 ( 设计师更多地思考及制定设计规则 ) 。基于此，很多工作将得以开展。关于颜色， Brandmark 是这么思考的。颜色是通过大量的配色数据，按照明度进行排序，并打上标签，以生成各种标签的颜色集。颜色方面， Brandmark 颜色生成采用的是基于 pix2pix ，使用 GAN 来生成新的颜色组合（ http://colormind.io ）。数据集使用 Adobe Color 数据和 Dribbble 的手工挑选的调色板组合。颜色数据集的更新，补充 Brandmark 采用从照片提取主题色的方法，使用 MMCQ （ Modified Median-Cut Color Quantization 改进的中位切分法）的方法。除了 MMCQ 方法，还有 KMeans 对于主题色的提取效果也是不错的。

在 Brandmark 的博客里，提到了“ 设计民主 ”，以后任何人都更容易接触到设计，同时快速具备设计能力。

Brandmark 的核心产品 Logo 设计，有4个流程：

1、输入logo的名称，简介

2、输入关键词

3、选择喜欢的颜色风格

4、生成设计

目前普遍认为 step by step 的方式是体验比较好的做法，但我们需要留意流程的长度，基于技术实现的难度，尽量减少流程的长度。当然，除了很智能的几步生成设计之外， Brandmark 还提供了手动编辑／调整 Logo 的功能。

我们从参数的角度看 Brandmark Logo 的设定。主要是由2大块，一个是关于 Logo 组成元素，例如 Title 、Tagline 、Icon 、 Background。另一个是 ColorScheme 。整个产品的模型：

Logo=BrandMark( Title, Tagline, Icon, Background ) ColorScheme( Main_color, Background_color )

详细的参数设置，有兴趣可以翻阅下：

Title={ “Text”:String, “Size”:Number, “Letter_space”:Number, “Line_space”:Number, “Color”:String, “Font”:String} Tagline={ “Text”:String, “Size”:Number, “Letter_space”:Number, “Line_space”:Number, “Color”:String, “Font”:String} Icon={ “Hide_icon”:Boolean, “Size”:Number, “Spacing”:Number, “Line_space”:Number, “Color”:String, “Choose_icon”:String} Background={ “Color”:String } ColorScheme={ “Title_color”:String, “Tagline_color”:String, “Icon_color”:String, “Background_color”:String }

Brandmark 在智能生成与手动设置之间找到了一个较好的平衡点。

接下来，我们看下 Brandmark 的子产品 Logo Rank ，一款用于评估 Logo 设计质量的web应用，根据用户上传 Logo 图片，系统根据 Uniqueness （独特性）、Legibility （醒目）、Color/Contrast （颜色／对比度）几个维度进行评测，输出简单的报告。

Uniqueness

独特性

类似于“ 以图搜图 ”，基于相似度，比对数据库里的一百万个 icons ，计算出视觉上的独特性。这边官方也介绍了是基于 CNN 来做的。

Legibility

醒目

从线条的清晰，粗细，易于识别程度来评估 Logo（也许技术上是通过计算像素 rgba 中的 a 通道值，让 计算机区分手绘的线条与软件画出来的线条 ）。

Color/Contrast

颜色／对比度

评估色彩属于主观的成分较多，从数据本身，Brandmark 采用基于著名品牌的 Logo 进行参照。如麦当劳、 snapchat 、可口乐乐等。

Overall

总体的评估得分

通过各评估维度的占比，得出一个总体的评分：

Overall( Uniqueness, Legibility, ColorContrast )

再介绍一款子产品 Logo Crunch 。它是一个用于生成多分辨率的 Logo ，它使您的高分辨率 Logo 在较低分辨率上清晰可见。可以运用于网站图标，iOS 应用图标或 Android 应用图标的生成。用户只需上传一个高分辨率的 Logo ，其他分辨率的内容通过此工具自动生成。策略上有3个方法： 图像形态学上的开与闭运算来进行 ，给 Logo 整体加粗描边，识别图像中过细的线条进行针对性描边。

Brandmark 还有 Font Generator 字体生成，AI Color Wheel 智能配色。大家有兴趣可以自行体验，或在知识星球进一步交流。

*

知识星球

更多可以在知识星球交流。

*

热门文章

UI2Code 之 利用 antd.sketchapp 生成训练数据​mp.weixin.qq.com

人工智能时代，设计师如何学习新技术​mp.weixin.qq.com

我们利用周末尝试了一次CO-CODING活动​mp.weixin.qq.com

*

关于公众号：

本公众号定期更新 人工智能&设计&科技内容。

谈点设计，敲点代码，偶尔创作点人工智能实验产品 。

码字不易，开启新的打赏方式：