伴隨著 AIGC 異?；鸨?，各種各樣的 AI 工具如雨后春筍般涌現(xiàn)，除了各位設(shè)計(jì)師知道的 Midjourney（以下簡(jiǎn)稱“MJ”），同樣還有十分亮眼的 Stable Diffusion。

所以今天我們主要教大家如何使用 Stable Diffusion（以下簡(jiǎn)稱“SD”）來(lái)進(jìn)行 B 端圖標(biāo)和 C 端圖標(biāo)的創(chuàng)作，充分將 AIGC 靈活的運(yùn)用在項(xiàng)目的工作流程之中。

往期AIGC 生成圖標(biāo)干貨：

一、B 端圖標(biāo)

那首先我們先來(lái)看看 B 端圖標(biāo)，有哪些特點(diǎn)？

從上圖可以發(fā)現(xiàn)主要特點(diǎn)為：立體塊面感、輕科技、材質(zhì)多為毛玻璃、光澤金屬、輪廓光源。

UI 的使用場(chǎng)景多為功能模塊輔助裝飾、官網(wǎng)開(kāi)屏頁(yè)等……

以下圖的數(shù)據(jù)云圖標(biāo)為例：

制作同等設(shè)計(jì)質(zhì)量的圖標(biāo)，從三維建模到渲染最后到后期調(diào)整，平均需要 2.5 小時(shí)制作周期。而且設(shè)計(jì)師需要有一定的三維軟件設(shè)計(jì)能力。

我們先看看 MJ 的使用效果，這里我們使用常規(guī)的操作流程，直接使用關(guān)鍵詞生成，這里我使用了兩種不同的關(guān)鍵詞：

第一種：

A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, white background, sense of technology, --ar 1:1

對(duì)照翻譯：一朵云 Ul 圖標(biāo)，藍(lán)色磨砂玻璃白亞克力材質(zhì), 白色背景, 科技感, 影棚燈光, 藍(lán)色磨砂玻璃白色亞克力材質(zhì), 白色背景, 科技感, --ar 1:1

第二種：

Cloud icon, blue, frosted glass, transparent technology sense, white background, studio lighting, 3d, c4d, high detail, --ar 1:1

對(duì)照翻譯：云朵圖標(biāo)，藍(lán)色，磨砂玻璃，透明科技感，白色背景，影棚燈光，3d，c4d，高細(xì)節(jié)，--ar 1:1

我們可以看出上圖直接生成的圖標(biāo)，偏差較大，且形式、角度、質(zhì)感、顏色無(wú)法很好的控制，基本不能使用。

首先使用墊圖的第一種方式，將想要生成圖標(biāo)的參考樣式上傳到 MJ，接著配合關(guān)鍵詞進(jìn)行操作：

圖片鏈接 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

右邊便是生成的效果（下圖中右邊）：

MJ 學(xué)習(xí)了參考圖片后，在質(zhì)感的使用和色彩上也比較靠近想要的風(fēng)格了，因?yàn)閰⒖嫉膱D片和需要生成的圖像，在造型上有一定的不同，只是用關(guān)鍵詞來(lái)進(jìn)行生產(chǎn)，隨機(jī)性比較強(qiáng)，所以造型不夠可控。

接著我們采用墊圖的第二種方式，將想要生成圖標(biāo)的造型樣式上傳到 MJ，配合關(guān)鍵詞進(jìn)行操作：

圖片鏈接 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

右邊便是生成的效果（下圖中右邊）：

MJ 學(xué)習(xí)了參考圖片后，在造型上靠近了想要的造型，但是在顏色和質(zhì)感上，就無(wú)法學(xué)習(xí)到了，不太能夠使用。

接著我使用組合墊圖法，將兩張素材都上傳到 MJ，接著配合關(guān)鍵詞進(jìn)行操作：

圖片鏈接 1 + 圖片鏈接 2 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

得出的結(jié)論就是：MJ 學(xué)習(xí)了兩張參考圖片后，在想要的造型上靠近了一些，在顏色和質(zhì)感上也靠近了，但是在細(xì)節(jié)的把控上還是有一定的隨機(jī)性，還是不能直接使用。

小結(jié)一下，MJ 在進(jìn)行 B 端圖標(biāo)設(shè)計(jì)的使用中，主要有以下不足之處：

1. 可控性不夠高 ；
2. 隨機(jī)性較強(qiáng) ；
3. 無(wú)法局部調(diào)整 ；
4. 風(fēng)格不符

下面我們來(lái)看看 SD 的效果如何？

我這邊使用的 SD 版本是：秋葉 V4；

Checkpoint 大模型使用的是：DDicon；

Lora 模型使用的是：Playstation5DesignAI。

更多SD模型：

使用的流程我已經(jīng)在上圖標(biāo)記出來(lái)了，大家可以根據(jù)步驟進(jìn)行操作。

這里的正向提示詞：

best quality, many details, 4k, blender, octane render, C4D, transparent glass texture, DDicon, blue, frosted glass, transparent technology sense, industrial design, white background, studio lighting, sunshine, flat, minimal, quasi-object, axisymmetric, Data, cylinder, file,

反向提示詞：

lowers, bad anatomy, ((bad hands)), (worst quality:2), (low quality:2), (normal quality:2), paintings, sketches, lowres, bad anatomy, bad hands, text, error, missing, tingers,

直接輸入進(jìn) SD 即可。

這里要提前準(zhǔn)備好兩張圖：線稿圖和黑白造型圖，同時(shí)需要在 ControlNet 里啟用兩個(gè)類別，分別是 lineart 與 canny，將準(zhǔn)備好的兩張圖分別導(dǎo)入進(jìn) ControlNet，并設(shè)置好參數(shù)；

首先采樣方法選擇“DPM++ SDE Karras”選擇 Canny 的 invert 預(yù)處理器 以及對(duì)應(yīng)的 Canny 模型，最后記得勾選“完美像素模式”。

然后我們就可以點(diǎn)擊生成了，選好生成后覺(jué)得比較 OK 的圖片，發(fā)送到圖生圖中，接著再進(jìn)行一次 ControlNet 的設(shè)置。

上圖就是生成的效果啦。

后面可以將符合預(yù)期的效果圖發(fā)送到圖生圖的局部重繪，涂鴉選擇效果圖需要重新優(yōu)化的小細(xì)節(jié)點(diǎn)。

生成出來(lái)的效果圖有更好的設(shè)計(jì)兼容性，最后我們?cè)龠M(jìn) SD 的后期處理進(jìn)行放大就可以使用啦～

采用 SD 工具輔助 B 端圖標(biāo)的設(shè)計(jì)，整個(gè)設(shè)計(jì)過(guò)程只需要 0.5 小時(shí)，主要工作量主要在于前期的黑白線稿繪制，大大降低了設(shè)計(jì)成本與制作門檻。

二、C 端圖標(biāo)

C 端圖標(biāo)與 B 端圖標(biāo)最大的區(qū)別點(diǎn)在于視覺(jué)風(fēng)格更為多樣，整體風(fēng)格配色與造型更為年輕化。視覺(jué)表現(xiàn)形式目前主流為 2.5D 與 3D 類型較多，通過(guò)同色系輕漸變塑造體現(xiàn)體積感。

接下來(lái)我們?cè)倏纯?C 端圖標(biāo)應(yīng)該如何用 SD 進(jìn)行創(chuàng)作繪制。

我們找素材的時(shí)候，圖片主體物材質(zhì)的質(zhì)感不需要保持相似，這一步只是確保外形調(diào)性一致。需要注意的是，找的這一套圖標(biāo)，都需要有共同點(diǎn)，這是為了確保后續(xù)生成圖標(biāo)結(jié)構(gòu)造型的一致性，使整套圖標(biāo)形成統(tǒng)一的視覺(jué)系列感。

例如我找的這幾個(gè)，它們的共同點(diǎn)就是：軸側(cè)構(gòu)圖、低多邊形、圓潤(rùn)規(guī)整；之后我們便可以運(yùn)用 ControlNet-硬邊緣檢測(cè)功能，從而“鎖定”圖標(biāo)的大致外輪廓，用 SD 對(duì)這些圖標(biāo)進(jìn)行風(fēng)格樣式的重繪。

使用步驟 - 打開(kāi) SD 后

第一步：點(diǎn)擊展開(kāi) ControlNet，將圖片拖動(dòng)至預(yù)覽選取框，（注意，我們要上傳的圖片有幾點(diǎn)要求：1.背景干凈沒(méi)多余的元素或文字? 2.圖片尺寸比例 1:1，最好為 512x512 大小? ?3.圖片清晰度不能過(guò)于模糊，保證外輪廓清晰）

第二步：選擇預(yù)處理器 Canny（硬邊緣檢測(cè)）以及對(duì)應(yīng)的 Canny 模型

第三步：勾選啟用 ControlNet

關(guān)于 Checkpoint（俗話叫“大模型”）、Lora 模型，可以在 C 站進(jìn)行下載，網(wǎng)址為： https://civitai.com/ ；目前“C 站”的模型不斷迭代出新，視覺(jué)風(fēng)格包羅萬(wàn)象，本次將會(huì)通過(guò)運(yùn)用不同的 Checkpoint 大模型及 Lora 進(jìn)行視覺(jué)調(diào)配，生成我們所期望的 C 端圖標(biāo)效果圖。

我們先來(lái)說(shuō)說(shuō) 3D 直播禮物圖標(biāo)類型的圖標(biāo)，這類的圖標(biāo)可采用真實(shí)系大模型 Deliberate，搭配造型圓潤(rùn)可愛(ài)、質(zhì)感材質(zhì)偏向粘土手辦的 Blindbox 盲盒和 3D rendering 風(fēng)格的 Lora 模型。

接著我們來(lái)了解下提示詞，這里的正向提示詞能更好的幫我們確定想要的風(fēng)格，這里要注意的一點(diǎn)是：對(duì)詞語(yǔ)使用雙括號(hào)意味著讓生成的畫(huà)面更加聚焦于生成的物體，這里的“Polaroid camera（拍立得相機(jī)）”如不使用雙括號(hào)的話，就可能生成：一個(gè)人拿著拍立得相機(jī)或者拍立得相機(jī)放在場(chǎng)景中，為了避免這樣的情況，就可以使用雙括號(hào)；

而反向提示詞也比較通用，主要是在正向提示詞中加入想要生成的風(fēng)格。

在使用 Lora 模型時(shí)候，可以在正向提示詞區(qū)域調(diào)整 Lora 模型的效果權(quán)重?cái)?shù)值，直接影響生成圖的視覺(jué)風(fēng)格比重。要注意：Lora 權(quán)重默認(rèn)為 1，最低不能低于 0.2，否則沒(méi)效果影響。

迭代步數(shù)指的是 Stable Diffusion 生成圖像所需的迭代步數(shù)。每增加一步迭代，都會(huì)給 AI 更多的機(jī)會(huì)去比對(duì)提示和當(dāng)前結(jié)果，并進(jìn)行調(diào)整。

更高的迭代步數(shù)需要更多的計(jì)算時(shí)間。但高步數(shù)并不一定意味著更好的結(jié)果。當(dāng)然，如果迭代步數(shù)太少，會(huì)降低生成圖像的質(zhì)量。

這里以 迭代步數(shù) 20 和 迭代步數(shù) 40 為例子，可以看出 迭代步數(shù) 40 生成的圖片細(xì)節(jié)豐富、高質(zhì)量，反觀迭代步數(shù) 20 的造型輪廓模糊，缺少細(xì)節(jié)。

下圖便是我們生成的 3D 直播禮物圖標(biāo)，可以看出生成的圖標(biāo)風(fēng)格還是十分統(tǒng)一的。

下面我們?cè)倏戳硗庖粋€(gè)案例：賽博機(jī)械圖標(biāo)。

這類圖標(biāo)我們選用的大模型是：MechaMix Lora 模型為：Real Mechanical Parts。

這里要說(shuō)的一點(diǎn)是關(guān)于觸發(fā)詞，很多創(chuàng)作者在 C 站上傳模型時(shí)，會(huì)帶上觸發(fā)詞，我們可以在右邊的介紹中直接查看，并將觸發(fā)詞加入到正向提示詞中，這樣能讓 SD 更準(zhǔn)確的識(shí)別模型的預(yù)設(shè)效果與參數(shù)。

有一個(gè)知識(shí)點(diǎn)要注意一下叫 canny 權(quán)重，因?yàn)闄C(jī)械風(fēng)格往往造型結(jié)構(gòu)相對(duì)復(fù)雜夸張，這里我們把 Canny 控制權(quán)重從默認(rèn)的 1 調(diào)整為 1.5。原因是控制圖標(biāo)外形變化差異不要過(guò)大，使得與參考圖不符。

這里以 控制權(quán)重 0.6 和 控制權(quán)重 1.5 為例子，可以看出控制權(quán)重 0.6 生成的圖片剝離外輪廓造型，造型自由發(fā)揮，比較浮夸、反觀控制權(quán)重控制在 1.5 的圖片則更注重外形輪廓，生成的比較靠近我們想要的。

下圖便是我們生成的賽博機(jī)甲圖標(biāo)，可以看出生成的圖標(biāo)風(fēng)格無(wú)論是在造型、配色、視角都十分統(tǒng)一，下面我羅列一些目前市場(chǎng)上比較流行風(fēng)格的提示詞，按照上面教的步驟就可以生成對(duì)應(yīng)風(fēng)格的圖標(biāo)了。

描邊厚涂手繪圖標(biāo)：

正向提示詞：

((圖標(biāo)內(nèi)容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), jim lee

*其中：jim lee 為觸發(fā)詞

反向提示詞（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

國(guó)風(fēng)水墨圖標(biāo)：

正向提示詞：

((圖標(biāo)內(nèi)容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), shuimobysim, wuchangshuo,

*其中：shuimobysim, wuchangshuo 為觸發(fā)詞

反向提示詞（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

扁平輕漸變圖標(biāo)：

正向提示詞：

((圖標(biāo)內(nèi)容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), vector, 2d, geometry, Flat Style, Colorful gradient, game icon institute,

*其中：game icon institute 為觸發(fā)詞

反向提示詞（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

像素風(fēng)格圖標(biāo)：

正向提示詞：

((圖標(biāo)內(nèi)容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), pixel art, 2d, Low Resolution, pixel, pixel sprite, 16bitscene,

*其中：pixel, pixelsprite, 16bitscene 為觸發(fā)詞

反向提示詞（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

我們可以將 AI 生成的位圖通過(guò)這個(gè)在線網(wǎng)站（ https://vectorizer.ai/ ）工具轉(zhuǎn)換成可編輯的 SVG 矢量圖，該網(wǎng)站不需要注冊(cè)，而且完全免費(fèi)的，我們將下載好的 SVG 矢量圖拖至 Figma 或者 Adobe AI 軟件，便可以編輯對(duì)應(yīng)的路徑及視覺(jué)樣式。

最后，文章到此就告一段落了，當(dāng)然這只是 AIGC 在 UI 實(shí)際使用場(chǎng)景中的一部分，本文可以說(shuō)是給 AIGC 的初學(xué)者提供了引導(dǎo)的作用，后續(xù)我們還會(huì)推出更多類似的文章，請(qǐng)敬請(qǐng)期待～

歡迎關(guān)注作者微信公眾號(hào)：「ASAK」