在日常工作中，設計師在應對運營和 UI 設計的 B 端圖標時，常常面臨大量的構思、制作和渲染等工作，耗時耗力。我們可以利用 Stable Diffusion（以下簡稱 SD）結合 AI 的方式，幫助設計師優化圖標的設計流程，使任何對這一領域感興趣的人都能嘗試并創作出多樣化的圖標設計，靈活高效運用在項目之中。

一、B端圖標風格

B 端圖標，一種有著立體風格的毛玻璃效果的圖標、有流暢的曲線和細致的表面細節，通常應用在運營詳情頁、UI 頭圖、banner 等占位使用，讓畫面更出彩。

二、本地部署SD

需要對電腦配置有一定的了解，部署要花費一定的時間。已經部署過的可以按照下圖進行配置更新。

B站鏈接：https://www.bilibili.com/video/BV1iM4y1y7oA/

三、下載設置模型文件

SD 模型、外掛 VAE 模型、Refiner 模型、ControlNet 模型（均來自大模型作者）。

下圖為模型文件在 SD 中的設置：

其它參數使用系統默認的即可，采樣方法選了 DPM++ 3M SDE Karras，畫面會柔和一些，背景更干凈，細節也相對的減少，速度和 DPM++ 2M Karras 一樣，所以迭代步數推薦在 30 或以上（太高容易卡頓，畫面細節太多也影響最終的結果，所以推薦 30 即可）。

四、準備底圖素材

1. 線稿處理

用 ControlNet 控圖，需要明確圖標的線稿。要知道自己想要一個什么樣的圖標，推薦使用已有圖標進行優化，使用 PS 進行圖標線稿處理，再對其外形等關鍵特征進行組合或者添加自己的創意。對于特別復雜的圖形，建議避免使用過于復雜的模型。只需有基礎的輪廓圖，就可以快速創建 B 端圖標。如果是專業工作使用，請考慮制作更加規范的底圖，并注意版權使用問題。這里需要注意的是，盡可能的把閉合形狀的輪廓處理的粗細一致且清晰可見；模糊的區域可以用橡皮擦或者蒙版處理干凈；立體圖形的轉折處連接處要明確。

2. 構思關鍵詞

推薦使用下方的關鍵詞，并替換自己想要的內容和顏色等，如果無法找到合適的關鍵詞或創意，請先在網上收集一些相關的設計參考圖片。在圖生圖界面中，將這些參考圖片導入并點擊 CLIP 反推提示詞。選擇生成的關鍵詞，然后將其輸入到文生圖的 Prompt 中。這樣可以快速得到理想的設計方案。

正向關鍵詞：
(a shield icon:1.1),dark blue frosted glass texture,dark blue gradient,(softedges:1.2),3D,best quality,many details,4k,blender,octane render,C4D,transparentglass texture,DDicon,frosted glass,transparent technology sense,industrialdesign,white background,studio lighting,sunshine,flat,minimal,quasi-object,Datafile

負正向關鍵詞：
lowres,bad anatomy,((bad hands)),(worst quality:2),(low quality:2),(normal quality:2),paintings,sketches,lowres,bad anatomy,bad hands,text,error,missing fingers

五、開始生圖

在選擇好剛才的模型和參數后，填入關鍵詞，并在 ControlNet 中上傳已經處理好的線稿，點擊爆炸圖標，得到控圖線稿，再點擊右上角的生成，就可以進行抽卡生圖啦。

六、應用到項目中

對已生成的圖標，可以用 PS 進行處理；也可以將方案放到圖生圖中局部重繪一下細節，得到更符合預期的效果。

最后

整體的制作思路可以大概拆解為 6 個步驟：找到類似參考 - 線稿處理 - 提煉關鍵詞 - 使用 ControlNet 控制線稿 - 重新優化圖標方案 - 實際應用。

AI 的出現為我們節省了大量后期制作的時間，讓我們可以更快地達成目標，也讓我們有更多的空間去探索表現的形式與內容。AI 工具可以決定輸出的下限，而設計師的想象力決定了可以觸達的上限。合理的借助 AI 盡情地發揮你的想象力去嘗試各種可能吧！

歡迎關注「58UXD」的微信公眾號：