歡迎關注作者微信公眾號：「ASAK」

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

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

一、B 端圖標

那首先我們先來看看 B 端圖標，有哪些特點？

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

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

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

制作同等設計質量的圖標，從三維建模到渲染最后到后期調整，平均需要 2.5 小時制作周期。而且設計師需要有一定的三維軟件設計能力。

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

第一種：

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

對照翻譯：一朵云 Ul 圖標，藍色磨砂玻璃白亞克力材質, 白色背景, 科技感, 影棚燈光, 藍色磨砂玻璃白色亞克力材質, 白色背景, 科技感, --ar 1:1

第二種：

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

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

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

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

圖片鏈接 + 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 學習了參考圖片后，在質感的使用和色彩上也比較靠近想要的風格了，因為參考的圖片和需要生成的圖像，在造型上有一定的不同，只是用關鍵詞來進行生產(chǎn)，隨機性比較強，所以造型不夠可控。

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

圖片鏈接 + 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 學習了參考圖片后，在造型上靠近了想要的造型，但是在顏色和質感上，就無法學習到了，不太能夠使用。

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

圖片鏈接 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

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

小結一下，MJ 在進行 B 端圖標設計的使用中，主要有以下不足之處：

1. 可控性不夠高 ；

2. 隨機性較強 ；

3. 無法局部調整 ；

4. 風格不符

下面我們來看看 SD 的效果如何？

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

Checkpoint 大模型使用的是：DDicon；

Lora 模型使用的是：Playstation5DesignAI。

更多SD模型：

出圖效率倍增！47個高質量的 Stable Diffusion 常用模型推薦

“選用適當?shù)哪Ｐ?，隨隨便便出個圖，都要比打上一堆提示詞的效果要好。

閱讀文章 >

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

這里的正向提示詞：

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,

直接輸入進 SD 即可。

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

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

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

上圖就是生成的效果啦。

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

生成出來的效果圖有更好的設計兼容性，最后我們再進 SD 的后期處理進行放大就可以使用啦～

采用 SD 工具輔助 B 端圖標的設計，整個設計過程只需要 0.5 小時，主要工作量主要在于前期的黑白線稿繪制，大大降低了設計成本與制作門檻。

二、C 端圖標

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

接下來我們再看看 C 端圖標應該如何用 SD 進行創(chuàng)作繪制。

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

例如我找的這幾個，它們的共同點就是：軸側構圖、低多邊形、圓潤規(guī)整；之后我們便可以運用 ControlNet-硬邊緣檢測功能，從而“鎖定”圖標的大致外輪廓，用 SD 對這些圖標進行風格樣式的重繪。

使用步驟 - 打開 SD 后

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

第二步：選擇預處理器 Canny（硬邊緣檢測）以及對應的 Canny 模型

第三步：勾選啟用 ControlNet

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

我們先來說說 3D 直播禮物圖標類型的圖標，這類的圖標可采用真實系大模型 Deliberate，搭配造型圓潤可愛、質感材質偏向粘土手辦的 Blindbox 盲盒和 3D rendering 風格的 Lora 模型。

接著我們來了解下提示詞，這里的正向提示詞能更好的幫我們確定想要的風格，這里要注意的一點是：對詞語使用雙括號意味著讓生成的畫面更加聚焦于生成的物體，這里的“Polaroid camera（拍立得相機）”如不使用雙括號的話，就可能生成：一個人拿著拍立得相機或者拍立得相機放在場景中，為了避免這樣的情況，就可以使用雙括號；

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

在使用 Lora 模型時候，可以在正向提示詞區(qū)域調整 Lora 模型的效果權重數(shù)值，直接影響生成圖的視覺風格比重。要注意：Lora 權重默認為 1，最低不能低于 0.2，否則沒效果影響。

迭代步數(shù)指的是 Stable Diffusion 生成圖像所需的迭代步數(shù)。每增加一步迭代，都會給 AI 更多的機會去比對提示和當前結果，并進行調整。

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

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

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

下面我們再看另外一個案例：賽博機械圖標。

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

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

有一個知識點要注意一下叫 canny 權重，因為機械風格往往造型結構相對復雜夸張，這里我們把 Canny 控制權重從默認的 1 調整為 1.5。原因是控制圖標外形變化差異不要過大，使得與參考圖不符。

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

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

描邊厚涂手繪圖標：

正向提示詞：

((圖標內(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

國風水墨圖標：

正向提示詞：

((圖標內(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

扁平輕漸變圖標：

正向提示詞：

((圖標內(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

像素風格圖標：

正向提示詞：

((圖標內(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 生成的位圖通過這個在線網(wǎng)站（ https://vectorizer.ai/ ）工具轉換成可編輯的 SVG 矢量圖，該網(wǎng)站不需要注冊，而且完全免費的，我們將下載好的 SVG 矢量圖拖至 Figma 或者 Adobe AI 軟件，便可以編輯對應的路徑及視覺樣式。

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

歡迎關注作者微信公眾號：「ASAK」