封面由ARKie智能設(shè)計(jì)贊助
早在去年 mixlab 的一篇案例報(bào)告里，就介紹過 Brandmark 了，當(dāng)時(shí) Brandmark 還是 v1 的版本，現(xiàn)在已經(jīng)是 v2 版本了，也上線了一些子產(chǎn)品，例如 Brand Rank 、 Logo Crunch 。
Brandmark 在官方博客里介紹了關(guān)于人工智能做 Logo 設(shè)計(jì)的思考，核心的內(nèi)容，我梳理了下：
使用類似于字體向量（ https://github.com/Jack000/fontjoy ）來發(fā)現(xiàn)字體之間的關(guān)系， Brandmark 希望將 Logo 中的圖標(biāo)與字體分別向量化，進(jìn)行匹配。 Brandmark 認(rèn)為粗體字體與 icon 的填充面積是相關(guān)的，于是設(shè)定了一條規(guī)則：越粗的字體配填充面積越大的 icon ，是一個較好的設(shè)計(jì) ( 設(shè)計(jì)師更多地思考及制定設(shè)計(jì)規(guī)則 )。基于此，很多工作將得以開展。關(guān)于顏色， Brandmark 是這么思考的。顏色是通過大量的配色數(shù)據(jù)，按照明度進(jìn)行排序，并打上標(biāo)簽，以生成各種標(biāo)簽的顏色集。顏色方面， Brandmark 顏色生成采用的是基于 pix2pix ，使用 GAN 來生成新的顏色組合（ http://colormind.io ）。數(shù)據(jù)集使用 Adobe Color 數(shù)據(jù)和 Dribbble 的手工挑選的調(diào)色板組合。顏色數(shù)據(jù)集的更新，補(bǔ)充 Brandmark 采用從照片提取主題色的方法，使用 MMCQ （ Modified Median-Cut Color Quantization 改進(jìn)的中位切分法）的方法。除了 MMCQ 方法，還有 KMeans 對于主題色的提取效果也是不錯的。
在 Brandmark 的博客里，提到了“ 設(shè)計(jì)民主 ”，以后任何人都更容易接觸到設(shè)計(jì)，同時(shí)快速具備設(shè)計(jì)能力。
Brandmark 的核心產(chǎn)品 Logo 設(shè)計(jì)，有4個流程：
1、輸入logo的名稱，簡介
2、輸入關(guān)鍵詞
3、選擇喜歡的顏色風(fēng)格
4、生成設(shè)計(jì)
目前普遍認(rèn)為 step by step 的方式是體驗(yàn)比較好的做法，但我們需要留意流程的長度，基于技術(shù)實(shí)現(xiàn)的難度，盡量減少流程的長度。當(dāng)然，除了很智能的幾步生成設(shè)計(jì)之外， Brandmark 還提供了手動編輯／調(diào)整 Logo 的功能。
我們從參數(shù)的角度看 Brandmark Logo 的設(shè)定。主要是由2大塊，一個是關(guān)于 Logo 組成元素，例如 Title 、Tagline 、Icon 、 Background。另一個是 ColorScheme 。整個產(chǎn)品的模型：
Logo=BrandMark( Title, Tagline, Icon, Background )
ColorScheme( Main_color, Background_color )
詳細(xì)的參數(shù)設(shè)置，有興趣可以翻閱下：
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 在智能生成與手動設(shè)置之間找到了一個較好的平衡點(diǎn)。
接下來，我們看下 Brandmark 的子產(chǎn)品 Logo Rank ，一款用于評估 Logo 設(shè)計(jì)質(zhì)量的web應(yīng)用，根據(jù)用戶上傳 Logo 圖片，系統(tǒng)根據(jù) Uniqueness （獨(dú)特性）、Legibility （醒目）、Color/Contrast （顏色／對比度）幾個維度進(jìn)行評測，輸出簡單的報(bào)告。
Uniqueness
獨(dú)特性
類似于“以圖搜圖”，基于相似度，比對數(shù)據(jù)庫里的一百萬個 icons ，計(jì)算出視覺上的獨(dú)特性。這邊官方也介紹了是基于 CNN 來做的。
Legibility
醒目
從線條的清晰，粗細(xì)，易于識別程度來評估 Logo（也許技術(shù)上是通過計(jì)算像素 rgba 中的 a 通道值，讓計(jì)算機(jī)區(qū)分手繪的線條與軟件畫出來的線條）。
Color/Contrast
顏色／對比度
評估色彩屬于主觀的成分較多，從數(shù)據(jù)本身，Brandmark 采用基于著名品牌的 Logo 進(jìn)行參照。如麥當(dāng)勞、 snapchat 、可口樂樂等。
Overall
總體的評估得分
通過各評估維度的占比，得出一個總體的評分：
Overall( Uniqueness, Legibility, ColorContrast )再介紹一款子產(chǎn)品 Logo Crunch 。它是一個用于生成多分辨率的 Logo ，它使您的高分辨率 Logo 在較低分辨率上清晰可見。可以運(yùn)用于網(wǎng)站圖標(biāo)，iOS 應(yīng)用圖標(biāo)或 Android 應(yīng)用圖標(biāo)的生成。用戶只需上傳一個高分辨率的 Logo ，其他分辨率的內(nèi)容通過此工具自動生成。策略上有3個方法：圖像形態(tài)學(xué)上的開與閉運(yùn)算來進(jìn)行，給 Logo 整體加粗描邊，識別圖像中過細(xì)的線條進(jìn)行針對性描邊。
Brandmark 還有 Font Generator 字體生成，AI Color Wheel 智能配色。大家有興趣可以自行體驗(yàn)，或在知識星球進(jìn)一步交流。
*
知識星球
更多可以在知識星球交流。
*
熱門文章
UI2Code 之 利用 antd.sketchapp 生成訓(xùn)練數(shù)據(jù)
人工智能時(shí)代，設(shè)計(jì)師如何學(xué)習(xí)新技術(shù)
*
關(guān)于公眾號：
本公眾號定期更新人工智能&設(shè)計(jì)&科技內(nèi)容。
談點(diǎn)設(shè)計(jì)，敲點(diǎn)代碼，偶爾創(chuàng)作點(diǎn)人工智能實(shí)驗(yàn)產(chǎn)品。
碼字不易，開啟新的打賞方式：
