【UI設(shè)計(jì)】大廠AI繪畫(huà)實(shí)際運(yùn)用案例
AIGC全稱AI Generated Content,是利用人工智能技術(shù)來(lái)生成內(nèi)容,AIGC繪畫(huà)屬于AIGC的分支。
近半年,以Midjourney和Stable Diffusion為代表的AIGC繪畫(huà)迎來(lái)爆發(fā)式發(fā)展,掀起了一場(chǎng)生產(chǎn)力革命。
Midjourney和Stable Diffusion強(qiáng)大的創(chuàng)造力和無(wú)與倫比的高效性,使設(shè)計(jì)師通過(guò)它們提升生產(chǎn)力成為了必然。然而Midjourney和Stable Diffusion作為開(kāi)放性工具,本身具有隨機(jī)性與不可控性,很多設(shè)計(jì)師很難在工作中運(yùn)用,僅淪為娛樂(lè)工具。
本篇文章基于網(wǎng)易ASAK設(shè)計(jì)團(tuán)隊(duì)實(shí)際運(yùn)用案例,帶你破除AIGC繪畫(huà)工具的不可控性,讓它們成為你設(shè)計(jì)路上披荊斬棘的神器。
通過(guò)Midjourney和Stable Diffusion已落地項(xiàng)目類(lèi)型分類(lèi),全文大綱如下:
01 設(shè)計(jì)提效
02 活動(dòng)彈窗設(shè)計(jì)
03 勛章圖標(biāo)設(shè)計(jì)
04 IP設(shè)計(jì)
05 KV/海報(bào)設(shè)計(jì)
06 場(chǎng)景設(shè)計(jì)
07 動(dòng)畫(huà)分鏡設(shè)計(jì)
08 物料設(shè)計(jì)
09 設(shè)計(jì)師后記

設(shè)計(jì)提效
當(dāng)未使用Midjourney和Stable Diffusion時(shí),通常設(shè)計(jì)師流程如下:

在設(shè)計(jì)參考階段,設(shè)計(jì)師需要找大量的參考圖,這一過(guò)程需要0.5-1天。設(shè)計(jì)師基于設(shè)計(jì)參考,完成設(shè)計(jì)初稿,這一過(guò)程至少需要1天。
而Midjourney+Stable Diffusion在整個(gè)設(shè)計(jì)流程中,可以極大地縮短概念風(fēng)格、設(shè)計(jì)初稿和設(shè)計(jì)終稿的反復(fù)溝通時(shí)間。如下圖所示:

使用Midjourney或Stable Diffusion直接生成設(shè)計(jì)圖,設(shè)計(jì)師再做細(xì)節(jié)優(yōu)化。整個(gè)設(shè)計(jì)流程提升效率25-55%。

活動(dòng)彈窗設(shè)計(jì)
先運(yùn)用ChatGPT獲取彈窗的設(shè)計(jì)思路,從多角度切入設(shè)計(jì),使設(shè)計(jì)方案更完善,如下圖所示:

通過(guò)ChatGPT分析后,我們可以從中提取的關(guān)鍵詞:黑金、高級(jí)感、精致、質(zhì)感。
繼續(xù)具象延伸,再添加寶石、榮耀感、堅(jiān)硬感和鉆石等關(guān)鍵詞。為了讓元素更加立體,可以帶上3D和三維渲染器等相關(guān)關(guān)鍵詞。
轉(zhuǎn)化成對(duì)應(yīng)的英文后,關(guān)鍵詞如下:
Prompt: Shining gemstone, high class, noble sense, glory sense, 3D, hard, diamond, Octane Render
Negative prompt: Low saturation, deformity, sketch, blur
將初稿中的鉆石圖放進(jìn)Stable Diffusion圖生圖功能。輸入關(guān)鍵詞,重復(fù)幅度調(diào)到5以下,反復(fù)多批量產(chǎn)出后篩選出想要的結(jié)果,如下圖所示:

通過(guò)Stable Diffusion生成更有質(zhì)感和高級(jí)感的設(shè)計(jì)主體元素,節(jié)省大量設(shè)計(jì)細(xì)節(jié)的時(shí)間。下圖為初稿、AI輔助和終稿:


勛章圖標(biāo)設(shè)計(jì)
Midjourney和Stable Diffusion也可以制作勛章圖標(biāo)。
勛章一般需要簡(jiǎn)化版和精細(xì)版,用于不同尺寸的使用場(chǎng)景。
以網(wǎng)易大神夢(mèng)幻西游武神壇勛章為例,借助Stable Diffusion,只需要輸出簡(jiǎn)化版本的設(shè)計(jì),讓Stable Diffusion去深入刻畫(huà)。
然后用生成最滿意的圖繼續(xù)下一輪刻畫(huà),以達(dá)到最貼合自己需求的出圖。
勛章自帶榮譽(yù)感屬性,因此可以從這個(gè)思路出發(fā),得到寶石、金屬質(zhì)感、閃耀感和高級(jí)感等關(guān)鍵詞。轉(zhuǎn)化成對(duì)應(yīng)的英文關(guān)鍵詞如下:
Prompt: Metallic texture, Shining gemstone, high class, noble sense, glory sense, 3D, hard, diamond, Octane Render
Negative prompt: Low saturation, deformity, sketch, blur
輸入對(duì)應(yīng)的關(guān)鍵詞后,得到設(shè)計(jì)圖如下所示:


IP設(shè)計(jì)
在設(shè)計(jì)IP前期,設(shè)計(jì)師需要先確定IP的應(yīng)用場(chǎng)景,根據(jù)應(yīng)用場(chǎng)景來(lái)確定IP的角色動(dòng)作。
在這一階段,設(shè)計(jì)師可以通過(guò)Stable Diffusion輸入相關(guān)動(dòng)作的關(guān)鍵詞,來(lái)提取靈感參考。
以網(wǎng)易大神IP霸哥為例,講解如何用Stable Diffusion制作IP素材。
下圖1是設(shè)計(jì)師手繪草稿,下圖2是最終Stable Diffusion完成的IP。

第1步:繪制角色動(dòng)作線稿
確定好角色動(dòng)作后,開(kāi)始給角色繪制草圖線稿。我們給霸哥設(shè)定的動(dòng)作是單手持玩具槍,眼神堅(jiān)毅地望向前方。如下圖所示:

注意:草圖線稿最好較為干凈連貫,以免AI識(shí)別不完整,導(dǎo)致輸出的圖片出錯(cuò)(示例圖的草稿還是有些隨意,建議自己做的時(shí)候再精細(xì)一點(diǎn))。
第2步:選擇并下載合適模型以及插件
這一階段,我們需要結(jié)合IP形象的特點(diǎn),有針對(duì)性地選擇模型和插件。
考慮到霸哥形象整體呈圓形,風(fēng)格偏可愛(ài),抓住角色的這些特點(diǎn),我們可以去到C站(civita)上選擇相對(duì)應(yīng)的模型。
我們選擇的大模型是:MeinaMix;Lora插件是:blindbox。(模型選擇不是唯一的,有感覺(jué)適合的也可以嘗試使用。)
第3步:設(shè)置controlnet面板
在文生圖界面,往下滑找到ControlNet這一欄(要先安裝部署好controlnet插件),將繪制好的線稿草稿上傳至相應(yīng)位置。并將啟用勾選上,如果線稿圖片背景為白色,可以把反色模式也一起勾選。

接著在下方的預(yù)處理器和模型上,選擇好canny(邊緣檢測(cè))以及control_any3_canny [95070f75]模型。
有時(shí)候模型顯示不出來(lái)可以點(diǎn)擊旁邊的刷新按鈕,刷新一下就有了,這一步非常重要,切記不要忘記設(shè)置!否則輸出的模型會(huì)與線稿沒(méi)什么關(guān)聯(lián)。

設(shè)置好后,其余的參數(shù)可以不動(dòng),也可以根據(jù)自己的需求做調(diào)整。
第4步:輸入關(guān)鍵詞并設(shè)置參數(shù)
關(guān)鍵詞如下圖所示:
Prompt:(masterpiece),(best quality),(ultra-detailed), black body, thick red lips, The body is a black ball with thin arms, wearing white gloves on its hands It has round black eyes, and short legs with red shoes, Wearing a display screen on the head, Holding a toy gun in its hand <lora:blindbox_V1Mix:1>
Negative prompt:(worst quality, low quality, medium quality:1.4), low-res, (bad_prompt_version2:0.7), easy negative, bad-hands-5, red hands, white shoes, EasyNegative, text, blob
身體的顏色,手腳的顏色和嘴巴特征主要描述了霸哥的形象特征。
采樣方法(Sampler)上,因?yàn)槲覀兿胱龅氖侨S模型,所以選擇偏寫(xiě)實(shí)風(fēng)格的DPM++2M Karras(該采樣方法不唯一)。其余參數(shù)沒(méi)有特定要求,可根據(jù)輸出的圖片效果靈活調(diào)整。
第5步:產(chǎn)出圖片/后期調(diào)整
前期出圖可能效果會(huì)有些偏差,這時(shí)候可以靈活調(diào)整一些參數(shù),并多生成幾次。挑選出最接近霸哥形態(tài)的圖片進(jìn)行后期處理即可。下圖為其中一個(gè)生成示意圖:


KV/海報(bào)設(shè)計(jì)
1.KV設(shè)計(jì)
在設(shè)計(jì)前期,設(shè)計(jì)師希望得到的畫(huà)面是:預(yù)言家在中心操控著魔法球,兩邊的魔法狼群圍繞著她,然后中心散發(fā)光芒,頭發(fā)飛舞為畫(huà)面的核心。
其中風(fēng)格關(guān)鍵詞:暗黑風(fēng),神秘,狼人,夜晚,哥特。
結(jié)合chatpgt轉(zhuǎn)化成故事描述,獲得精準(zhǔn)關(guān)鍵詞。

按照Midjonrney的語(yǔ)言描述:客觀描述+風(fēng)格。
其中客觀描述如下:
A beautiful seer is holding a glowing magic ball in the center of the picture, with orange-red hair fluttering around her, surrounded by a group of transparent blue magic wolf heads
插畫(huà)風(fēng)格如下:
Illustration, Drawing, Hand-Drawn, Isometric, Saturated, Split-Complementary-Colors, 2-Dimensional, Rays of Shimmering Light
使用Midjonrney v5輸入關(guān)鍵詞后,不斷調(diào)試后得到如下圖所示:

上述圖片風(fēng)格非平面插畫(huà)類(lèi),那么繼續(xù)優(yōu)化關(guān)鍵詞,這次加入關(guān)鍵詞:Graphic illustration(平面插畫(huà))重新放在Midjonrney里面,并且把引擎模型改成niji得到如下圖:
將上述AI生成的圖,給業(yè)務(wù)方評(píng)估風(fēng)格,這樣需求方可以更清晰直觀地感覺(jué)后續(xù)設(shè)計(jì)風(fēng)格,有利于提出更有建議性的意見(jiàn)。最后設(shè)計(jì)師從氣氛、構(gòu)圖和整體細(xì)節(jié)進(jìn)行調(diào)整。完成線稿后,基于線稿快速實(shí)現(xiàn)設(shè)計(jì)終稿。
下圖1為線稿,下圖2為最終稿:
如果沒(méi)有Midjourney的話,那么設(shè)計(jì)師至少需要出一版設(shè)計(jì)初稿給業(yè)務(wù)方,業(yè)務(wù)方根據(jù)設(shè)計(jì)初稿提修改意見(jiàn)。
有了Midjourney,可以快速實(shí)現(xiàn)腦海畫(huà)面,擁有更多更快試錯(cuò)機(jī)會(huì)。
在這個(gè)流程中Midjourney承擔(dān)著設(shè)計(jì)初稿的執(zhí)行角色。
2.海報(bào)設(shè)計(jì)
設(shè)計(jì)團(tuán)隊(duì)接到狼人殺游戲賽事的3張倒計(jì)時(shí)天數(shù)海報(bào)。
需求風(fēng)格:暗黑哥特漫畫(huà)風(fēng)格手繪。
業(yè)務(wù)方希望設(shè)計(jì)交付時(shí)間為3-4天。然而一張純手繪的時(shí)間需要2天(三張則是6天),時(shí)間完全不夠,所以需要借助AIGC來(lái)提高效率,做到準(zhǔn)時(shí)交付。
接到需求后,設(shè)計(jì)開(kāi)始了前期提案。先用Midjourney完成我們的設(shè)計(jì)表達(dá),讓需求方更清晰直觀地感覺(jué)到設(shè)計(jì)稿的風(fēng)格感。
我們以倒計(jì)時(shí)還有1天的海報(bào)為例。
第1步:實(shí)現(xiàn)腦海畫(huà)面
海報(bào)構(gòu)思畫(huà)面:狼人變身,一條光柱表示1的形式。關(guān)鍵詞如下:
A transformed beam of light soars into the sky, amazing Abigail Larson style, Illustration, Hand-Drawn, Macro, Depth of Field, Dichromatism, 2-Dimensional --iw 0.5 --s 1000 --ar 9:16
畫(huà)面重點(diǎn)關(guān)鍵詞:光柱
雖然上述生成效果圖不太完美,但可以讓需求方更清晰直觀地感覺(jué)到設(shè)計(jì)稿的方向。
第2步:根據(jù)已確認(rèn)方向,背景圖制作
因?yàn)楣疟ず痛笤铝翗?gòu)圖已較為常見(jiàn),所以我們直接用Midjourney進(jìn)行基礎(chǔ)的背景繪制,關(guān)鍵詞如下:
Abigail Larson, an original painting of a scene, a broken village in the middle of the night, a white full moon in the night sky, clouds and mist around the moon, dark blue background --ar 2:4
畫(huà)面重點(diǎn)關(guān)鍵詞:古堡,月亮。
第3步:最終細(xì)化繪制,完成作品
從生成圖中挑選數(shù)張,選取每一張突出的地方進(jìn)行合成、重制筆觸和添加細(xì)節(jié)后,得到如下圖所示的背景圖:
最后加上狼人和光束變身特效后,進(jìn)行簡(jiǎn)單排版就完成了終稿。
倒計(jì)時(shí)還有2天和3天運(yùn)用類(lèi)似上文kv設(shè)計(jì)思路,最終三張交付稿如下所示:
按照傳統(tǒng)提案過(guò)程,需要尋找大量參考,然后合成拼湊出一張接近效果的圖,三張海報(bào)的提案需要大概1.5天。
現(xiàn)在使用Midjourney進(jìn)行批量出圖,寫(xiě)出對(duì)應(yīng)的關(guān)鍵詞,出來(lái)的效果非常接近最后呈現(xiàn)的感覺(jué),0.5天就能完成三張?zhí)岚感Ч麍D。并且需求方能清楚了解到最后效果,更快做出審核。
三張手繪倒計(jì)時(shí)海報(bào),在Midjourney輔助下,從7天左右的工作量縮減到3-4天,對(duì)于設(shè)計(jì)和質(zhì)量都有較為正向的反饋,值得繼續(xù)深入研究并在工作中推廣。
場(chǎng)景設(shè)計(jì)
1.倩女幽魂虛擬演播廳
以倩女幽魂演播廳概念圖設(shè)計(jì)為例,講解Midjourney是如何定向控制,生成設(shè)計(jì)師和業(yè)務(wù)方想要的設(shè)計(jì)稿。
倩女幽魂這次的太一斗魂壇,需求方想要的風(fēng)格元素是唐朝建筑、墨子機(jī)關(guān)元素和整體以紅色建筑為主。
設(shè)計(jì)師開(kāi)始嘗試用Midjourney做前期框架搭建。
第1步:關(guān)鍵詞生成概念圖
開(kāi)始以雄偉的中國(guó)式建筑和紅色機(jī)關(guān)等關(guān)鍵詞跑圖。對(duì)應(yīng)的關(guān)鍵描述如下:
Chinese palaces surround the central stage, there are mechanical gears on the building, Chinese style, red, Volume cloud, Volume light
然后調(diào)整關(guān)鍵詞如下圖所示:
Many red Chinese-style buildings surround the central stage, and there are mechanical gears on the buildings, clear structure, Volume cloud as background, Magnificent atmosphere, Unreal Engine 4
生成新的概念圖如下圖所示:
第2步:優(yōu)化關(guān)鍵詞
上述生成的概念圖雖然有紅色中國(guó)風(fēng)建筑和機(jī)關(guān)元素,但擂臺(tái)的感覺(jué)不夠強(qiáng)烈,缺少建筑纏繞的感覺(jué)。
重新修改了關(guān)鍵詞加入擂臺(tái)和建筑環(huán)繞中心舞臺(tái)等元素,關(guān)鍵詞如下:
Many red Chinese-style buildings surround the central stage, and there are mechanical gears on the buildings, Clear structure, Volume cloud as background, Magnificent atmosphere, Unreal Engine4, --ar 16:9
第3步:精選效果圖合成初稿
上面幾張概念圖已經(jīng)比較接近我們想要的效果。
最后設(shè)計(jì)師進(jìn)行二次修改、合成和手繪后得到設(shè)計(jì)稿,如下圖所示:
第4步:Midjourney快速修改
需求方審核后,需要臨時(shí)調(diào)整整個(gè)構(gòu)圖,畫(huà)面改成懸空建筑擂臺(tái),空中需要漂浮的巖石,所以我們修改了關(guān)鍵詞為懸空擂臺(tái)、漂浮在空中的中國(guó)風(fēng)建筑等。關(guān)鍵詞如下:
A piece of Chinese architecture floating in the sky, the building is built on floating rocks, the center of the rock is a stage, and the buildings surround the stage --ar 16:9
這次改動(dòng)如果不借助Midjourney,我們就要大面積重新制作,而使用Midjourney來(lái)制作浮空島的場(chǎng)景,只需要將我們之前合成好的建筑場(chǎng)景后期替換進(jìn)去。

經(jīng)過(guò)多張類(lèi)似的推演,我們得到了一張適合通過(guò)后期手繪合成的圖,做出的設(shè)計(jì)圖如下所示:

設(shè)計(jì)稿經(jīng)過(guò)需求方順利通過(guò)后。交付給AR部門(mén)進(jìn)行舞臺(tái)搭建工作。
第5步:AR虛擬搭建演播廳
AR部門(mén)搭建演播廳的設(shè)計(jì)圖,如下所示:

下圖虛擬演播廳中的解說(shuō)桌也是使用類(lèi)似的AI輔助流程完成的制作:
2.AR氛圍概念參考
AR技術(shù)在電競(jìng)賽事應(yīng)用中已經(jīng)相當(dāng)普及,AR即增強(qiáng)現(xiàn)實(shí),為電競(jìng)提供了全新表現(xiàn)形式。
此次永劫無(wú)間賽事,由于場(chǎng)地空間的限制,設(shè)計(jì)師希望通過(guò)AR場(chǎng)景與舞臺(tái)效果結(jié)合,讓觀眾和用戶有更好的觀賽體驗(yàn)。
第1步:投喂風(fēng)格圖
用前期賽事KV草圖和官方概念圖投喂到Midjourney中,下圖為投喂圖:


第2步:生成場(chǎng)景圖
配合關(guān)鍵詞如下:
Mountain forest style, concept art, sunshine, been invaded, god ray, there is Tiger Mountain in the distance, and there is a waterfall on the mountain on the right, high detail, hyper quality, scene type, high resolution, with waterfall, forest style, sunshine, god ray, scene type, waterfall on the right, concept art, and stage in the mid shot, foreground close to water, wooden bridge in the foreground, dilapidated wooden bridge, tiger mountain and bandits in the foreground, --ar 16:9
我們成功地生成了山林主題的場(chǎng)景概念圖,如下圖所示:

第3步:合成初步效果
結(jié)合賽事舞臺(tái)設(shè)計(jì)制作的渲染圖,如下所示:

將Midjourney生成的概念圖與舞臺(tái)設(shè)計(jì)制作的渲染圖合成后,最終的舞臺(tái)整體效果,如下:

第4步:三維建模和UE場(chǎng)景搭建
在上述基礎(chǔ)上,進(jìn)行三維模型制作以及UE場(chǎng)景搭建,形成最終的賽事場(chǎng)景效果圖,如下圖所示:


動(dòng)畫(huà)分鏡設(shè)計(jì)
設(shè)計(jì)師手繪的動(dòng)畫(huà)分鏡圖,如下圖所示:

上述分鏡較為簡(jiǎn)陋,嘗試運(yùn)用Stable Diffusion來(lái)進(jìn)行上色優(yōu)化。
第1步:優(yōu)化controlnet可識(shí)別范圍
根據(jù)已有手繪分鏡,按照應(yīng)用場(chǎng)景使用controlnet插件功能:seg(語(yǔ)意分割)和canny(線稿)。這兩個(gè)功能在腳本使用中頻率較高。

第2步:方式①使用controlnet的語(yǔ)意分割功能,實(shí)現(xiàn)畫(huà)面分區(qū)
手繪分鏡的P1/P5/P9/P10使用的是seg功能。通過(guò)在Photoshop中劃分顏色來(lái)告訴AI這部分要的是什么物體。
以P8為例,兩側(cè)為墻壁 #787878,地面為地板#503232,中間為人物#96053e(可通過(guò)ADE20K_classes表格來(lái)獲取色值信息)。

在手繪圖上大概劃分好顏色區(qū)域后添加到Stable Diffusion的controlnet中,因?yàn)槲覀冊(cè)赑hotoshop中已經(jīng)做了一些前期工作,所以就不用啟用預(yù)處理模式,直接選擇seg模型然后預(yù)處理。
開(kāi)始添加tag,我們拿到的腳本是角色慌張地逃跑,那么我們可以優(yōu)化為“有一個(gè)在往前跑,黑暗深處,神秘,紫色等詞來(lái)描述翻譯后得到:There is a person running back, deep in the dark, mysterious, purple. Tag交給Stable Diffusion來(lái)生成。
第2步:方式②應(yīng)用controlnet的線稿功能,進(jìn)行區(qū)域上色
以手繪P12為例,我們使用的是canny(線稿)模式。直接把草圖給到controlnet,優(yōu)化詞為:紫色的章魚(yú)觸手從地面出來(lái)、碎石、破碎、兩顆棋子。翻譯后得到英文關(guān)鍵詞如下:
Purple octopus tentacles come out of the ground, gravel, broken, two pawns

上圖中的P6是符合我們的需求,將P6使用圖生圖中做二次細(xì)化,如下圖所示:

第3步:上色氛圍分鏡輸出
運(yùn)用Stable Diffusion來(lái)進(jìn)行上色氛圍,讓需求方更直觀地了解整個(gè)分鏡效果,同時(shí)可以為后續(xù)視覺(jué)靜態(tài)稿提供氛圍參考。


物料設(shè)計(jì)
游戲賽事中的獎(jiǎng)杯是設(shè)計(jì)需求中不可或缺的一環(huán)。設(shè)計(jì)師可以利用Midjourney和Stable Diffusion進(jìn)行大量的前期素材儲(chǔ)備。
以下是需求之外,完成對(duì)賽事獎(jiǎng)杯的素材儲(chǔ)備。
第1步:使用Midjourney生成靈感素材
下圖是使用Midjourney生成的各種獎(jiǎng)杯概念圖。
第2步:繪制草圖
根據(jù)Midjourney生成的概念圖,設(shè)計(jì)師手繪生成獎(jiǎng)品草圖。
第3步:Stable Diffusion二次創(chuàng)作
根據(jù)草圖,使用Stable Diffusion精準(zhǔn)控制上色,完成最終的獎(jiǎng)杯素材,如下圖所示:
這些儲(chǔ)備可以為后期其他設(shè)計(jì)項(xiàng)目提供素材,進(jìn)一步提升設(shè)計(jì)效率。
設(shè)計(jì)師后記
Midjourney和Stable Diffusion的崛起,導(dǎo)致很多設(shè)計(jì)師焦慮,擔(dān)心被取代。通過(guò)上面的案例可以看出Midjourney和Stable Diffusion只能完成項(xiàng)目中的一部分,無(wú)法做到獨(dú)立完成項(xiàng)目,都需要設(shè)計(jì)師二次創(chuàng)作。
早期UI設(shè)計(jì)師的工具是Photoshop。后面出現(xiàn)高效的Sketch。到如今設(shè)計(jì)師使用更高效的協(xié)同工具Figma。
而AIGC本質(zhì)上還是提效輔助工具,需要設(shè)計(jì)師去掌握更高超的操作技能。
決定設(shè)計(jì)的成敗從來(lái)是人,而不是工具。