前言：

大家好呀，近期一直在寫“小文章”教程，因?yàn)槠鶈栴}，我第一時(shí)間是把這些文章都更新在公眾號(hào)上，這篇文章也是一個(gè)UI設(shè)計(jì)篇的合集。以下是我在近半個(gè)月時(shí)間內(nèi)寫的一些教程，本篇文章主要是在圖標(biāo)設(shè)計(jì)上的一個(gè)應(yīng)用，希望對(duì)大家有所幫助。后續(xù)我還是會(huì)先以小篇幅的文章優(yōu)先更新在公眾號(hào)上，然后等內(nèi)容多了再整理成合集發(fā)布到此平臺(tái)，廢話少說，上干貨了！

一、Midjourney生成APP活動(dòng)彈窗

01 花瓣網(wǎng)找參考圖，處理不必要的元素

這個(gè)彈窗設(shè)計(jì)我嘗試了很多方法，發(fā)現(xiàn)還是需要墊圖才能生成符合我想要的效果，所以這個(gè)方法還是得去找參考圖才行，以下這張圖來自花瓣網(wǎng)。

用ps處理下文字，別偷懶~（百度直接搜“花瓣網(wǎng)”即可，然后搜索“彈窗設(shè)計(jì)”)。

嘗試了圖生文功能，這里沒能如愿生成合適的，不過也給了我寫關(guān)鍵詞的靈感，突然發(fā)現(xiàn)圖生文還可以這樣用，牛~

02 關(guān)鍵詞描述并墊圖生成

然后我開始嘗試寫關(guān)鍵詞，以下是完整關(guān)鍵詞：

Use a card as the background, It is surrounded by clover and white flowers, Green base, White trolley, Pale gold coins, Yellow stars, Clouds, Disney style, cartoon style, 3D, behance, dribbble --iw 2 --v 5.2

使用一張卡片作為背景，四周環(huán)繞著三葉草和白色的花朵，綠色的底座，白色的小車，淡金色的硬幣，黃色的星星，云彩，迪士尼風(fēng)格，卡通風(fēng)格，3D, behance，dribbble

上面這個(gè)寫關(guān)鍵詞的網(wǎng)站還挺好用的，也內(nèi)置了一些常用關(guān)鍵詞，分享給大家：

https://moonvy.com/apps/ops/

接下來就簡(jiǎn)單了，墊圖+關(guān)鍵詞組合。參數(shù)命令用 --iw 2（增加圖片權(quán)重，出圖更接近原圖）。--v 5.2 這個(gè)模型是最新的，用v5和v5.1模型生成的效果也差不多。

03 挑選圖片并摳圖

Midjourney的隨機(jī)性大家知道，多跑幾次圖準(zhǔn)有你想要的圖：

選好圖片之后就需要處理圖片了，摳圖和修部分細(xì)節(jié)，這一點(diǎn)也很簡(jiǎn)單。這里用到兩個(gè)工具，Clipdrop和PS Beta。

我是利用Clipdrop摳圖的，PS Beta也可以，不過我感覺Clipdrop摳的更好點(diǎn)，這個(gè)是它的網(wǎng)址：https://clipdrop.co/

接下來就要用到PS Beta了，這個(gè)需要大家安裝下，真的很好用，安裝包可以分享給大家。

04 文案排版+UI規(guī)范

為什么會(huì)用到PS Beta呢，是因?yàn)槲倚枰幚磉@個(gè)卡片上的元素，我需要有一塊空白的地方填寫文案，框選不需要的元素，使用“內(nèi)容填充”和“創(chuàng)意式填充”，根據(jù)最終的效果來合理運(yùn)用。

最后一步，寫上文案并進(jìn)行UI規(guī)范設(shè)計(jì)一下，我會(huì)把源文件給大家作為一個(gè)參考，用的是figma文件，call me~

來看下最終效果把：

二、Midjourney生成3D運(yùn)營(yíng)活動(dòng)彈窗

01 找參考圖，確定設(shè)計(jì)風(fēng)格

我們?cè)诮拥皆O(shè)計(jì)需求之后，大家是否會(huì)跟我一樣，根據(jù)需求來去找對(duì)應(yīng)的參考圖片。需求分析我就不介紹了，我們直接開始視覺設(shè)計(jì)篇。

首先就是去找到與需求描述相符的參考圖片，注意的是我們下面的操作不會(huì)用到“/describe”功能（咱也不能老是用墊圖的方法是不，這多沒技術(shù)含量，雖然很好用...）。老辦法，素材網(wǎng)站找參考圖，這里還是我們的老朋友：花瓣。

我們先確定主體元素樣式，這里我找到了這個(gè)禮物盒的圖標(biāo)，就它了，接下來我就會(huì)根據(jù)這個(gè)禮物元素進(jìn)行關(guān)鍵詞描述。

我會(huì)根據(jù)以上這個(gè)格式去寫關(guān)鍵詞，其實(shí)這個(gè)格式的順序不是太重要，因?yàn)槟銜?huì)發(fā)現(xiàn)網(wǎng)上很多博主寫的格式都不太一樣，我建議大家按照自己的習(xí)慣描述就行，不要太久糾結(jié)到底是什么順序，切記不要轉(zhuǎn)牛角尖~

02 根據(jù)需求及參考圖，寫出關(guān)鍵詞

畫面主體：禮物盒，3D圖標(biāo)，粘土，卡通，任天堂

修飾詞：可愛，光滑，光澤，紅色和黃色，漸變顏色

細(xì)節(jié)詞：白色背景，最高細(xì)節(jié)，等距視圖，高清，最佳質(zhì)量

參數(shù)后綴：--niji 5 --q 2（質(zhì)量）

上面寫的關(guān)鍵詞就是根據(jù)找的禮物盒來描述的，不信你可以對(duì)著看，大家寫關(guān)鍵詞都可以用這種思路去創(chuàng)作，你會(huì)發(fā)現(xiàn)，寫關(guān)鍵詞真的不難~

完整關(guān)鍵詞咱也不能落下，要分享就拿出咱最大的誠(chéng)意來：

Gift box, 3D icon, clay, Cartoon, Nintendo, Lovely, smooth, Luster, Red and yellow, Gradient color, White background, The highest detail, The best quality, Isometric view, HD --niji 5 --q 2

這套關(guān)鍵詞可以作為畫這種3D風(fēng)格圖標(biāo)的一套模板，可替換的關(guān)鍵詞為：

03 挑選生成的素材，摳出元素

開始跑圖吧，剩下的事情就好辦了，Midjourney的隨機(jī)性會(huì)讓你不得不多跑幾組圖片，這一點(diǎn)要耐心~

圖跑出來了就開始把咱們的3D元素?fù)赋鰜戆?，這次我就不開PS了，用Clipdrop摳圖，簡(jiǎn)直不要太快。這個(gè)網(wǎng)址我在往期分享過，就是這個(gè)：https://clipdrop.co/

看來這次的教程又是4步就可以完成了，真的是 泰褲辣！

下面一步我會(huì)用“Figma”這個(gè)軟件，大家用PS等設(shè)計(jì)工具也可以哈，都是可以完成最后一步的，接著看：

04 排版出圖，真的可落地！

排個(gè)版都會(huì)吧，打上文案，加點(diǎn)裝飾元素，做個(gè)按鈕，就很簡(jiǎn)單...

最后再配個(gè)顏色，就大功告成啦~我做好的這些文件都會(huì)免費(fèi)開放給大家研究，還有這篇文章中生成的3D素材也給大家下載，怎么獲取呢？私信我進(jìn)群領(lǐng)取吧~

三、Midjourney生成B端運(yùn)營(yíng)海報(bào)

01 找參考圖，確定設(shè)計(jì)風(fēng)格

這期B端運(yùn)營(yíng)海報(bào)的思路跟上期3D活動(dòng)彈窗的思路基本一致，因?yàn)槎际怯肕idjourney生成icons，那我們就開始吧：

第一步，找風(fēng)格元素參考去，這是我們接下來描寫關(guān)鍵詞的重點(diǎn)，建議大家不要憑空想象，先看別人做的，我們參考改進(jìn)，下面還是這個(gè)網(wǎng)站（花瓣）：

上面的這個(gè)圖標(biāo)就是我找到的參考，接下來我會(huì)按照我描述關(guān)鍵詞的步驟開始頭腦風(fēng)暴，進(jìn)行創(chuàng)作

這期的效果也不用墊圖，可關(guān)鍵詞直出圖，也可以墊圖來控制畫面風(fēng)格，不過注意你如果生成的關(guān)鍵詞是 盾牌圖標(biāo) ，那么你墊的圖片也要是 盾牌圖標(biāo) ，不然會(huì)出現(xiàn)災(zāi)難現(xiàn)場(chǎng)，自己可以試試

02 根據(jù)需求及參考圖，寫出關(guān)鍵詞

畫面主體：一個(gè)3D 盾牌 圖標(biāo)

修飾詞：藍(lán)色漸變，磨砂玻璃

細(xì)節(jié)詞：超簡(jiǎn)約外觀，明亮色彩，工作室照明，光線追蹤，藍(lán)白色背景，工業(yè)設(shè)計(jì)，等距視圖，豐富的細(xì)節(jié)，超高清，高質(zhì)量，16K

參數(shù)后綴：--V 5.2

這組描述詞我測(cè)試了很久很久，現(xiàn)在我感覺用AI繪圖最耗時(shí)間的事情就是寫關(guān)鍵詞了，因?yàn)樾枰粩嗟挠藐P(guān)鍵詞來測(cè)試效果，這個(gè)效果不行就修改關(guān)鍵詞繼續(xù)測(cè)試，所以寫關(guān)鍵詞也很重要！！以下是完整關(guān)鍵詞：

A 3D shield icon, Blue gradient, Frosted glass, Transparent sense of science and technology, Ultra-minimalist appearance, Bright color, Studio lighting, Blue and white background, Industrial design, A wealth of details, Ultra high definition, dribble, pinterest, Ray tracing, Isometric view, blender, c4d, Oc renderer, High quality, 16K --v 5.2

藍(lán)色標(biāo)注地方為可替換關(guān)鍵詞，其它關(guān)鍵詞可保持不變，同樣這套可作為B端科技風(fēng)格圖標(biāo)的一套模板關(guān)鍵詞。

03 生成合成圖片素材，摳出元素

先來看看我最終設(shè)計(jì)的圖片：

這組設(shè)計(jì)并不是直接出一張圖，然后排版就完成的。是我生成了一共3組不同的元素，然后合成為一張場(chǎng)景圖的。

我也嘗試過關(guān)鍵詞直出一張圖，但是實(shí)際上不管我怎么寫關(guān)鍵詞，墊圖，始終無法達(dá)到我的最終設(shè)計(jì)要求，哪怕我“運(yùn)氣好”生成了一組合適的圖片，后面的視覺風(fēng)格保持統(tǒng)一也很難做到，所以只能把各個(gè)元素拆分，后期合成了。

具體怎么做的咱們繼續(xù)往下看吧~

首先用上面寫的關(guān)鍵詞跑出以下元素：

再提醒一遍，前面寫的關(guān)鍵詞我只改了一個(gè)單詞，就是把 盾牌 關(guān)鍵詞分別改成了：“相機(jī)、文件夾、耳機(jī)、魔方、地球儀”，其他關(guān)鍵詞保持不變，這也是為了保持風(fēng)格統(tǒng)一。

主體元素確定了，還缺一個(gè)輔助元素，那就是 主體元素 下面的底座。這一步也很簡(jiǎn)單，墊圖+關(guān)鍵詞（注意，這里的關(guān)鍵詞還是剛剛那組，把 盾牌 關(guān)鍵詞改為 pedestal（底座）。

墊圖注意：一定要與我們生成的主體元素差不多風(fēng)格的圖片，不要隨便放一個(gè)底座圖片上去?。。?/p>

這一步完了之后再來一張背景素材就搞定了，這篇寫的步驟有點(diǎn)多，耐心看完，你一定會(huì)有新的收獲！

背景素材簡(jiǎn)單，直接圖生文，然后墊圖+關(guān)鍵詞，看圖。

怕你們看不懂，我再啰嗦一遍，找一張 合適的圖片參考，然后用“/describe”命令，找一組大致符合這個(gè)圖片的關(guān)鍵詞，然后墊同樣的圖片，把關(guān)鍵詞加上，跑圖即可。這個(gè)方法我前面出的教程都是這樣玩的，還是看不懂就把我往期教程翻翻。

最后就是把主體元素，輔助元素?fù)笀D，用“Clipdrop”這個(gè)工具，這是網(wǎng)址：https://clipdrop.co/

04 合成排版出圖，可落地！！

我的寶藏設(shè)計(jì)工具：Figma！先出個(gè) Demo，把文案排版一下：

然后配上顏色，把背景素材合成上，剩下的路得你們自己走了，整個(gè)流程已經(jīng)走完，希望本篇文章對(duì)你有幫助，3連支持一下我就滿足了

我做好的這些文件都會(huì)免費(fèi)開放給大家研究，還有這篇文章中生成的3D素材也給大家下載，怎么獲取呢？私信我進(jìn)群領(lǐng)取吧~

四、Midjourney生成福袋活動(dòng)彈窗

01 找參考圖，確定設(shè)計(jì)風(fēng)格

老樣子，先找參考圖，根據(jù)參考圖及需求寫出關(guān)鍵詞，這期的福袋設(shè)計(jì)會(huì)用到墊圖+關(guān)鍵詞 的方式。

第一步，找風(fēng)格元素參考去，這是我們接下來描寫關(guān)鍵詞的重點(diǎn)，建議大家不要憑空想象，先看別人做的，我們參考改進(jìn)，下面還是這個(gè)網(wǎng)站（花瓣）：

上面的這個(gè)福袋就是我找到的參考，接下來我會(huì)按照我描述關(guān)鍵詞的步驟開始頭腦風(fēng)暴，進(jìn)行創(chuàng)作

這組關(guān)鍵詞其實(shí)就是用的之前做3D元素彈窗的關(guān)鍵詞，屬于比較通用的一組關(guān)鍵詞，適用于任何此類型的3D圖標(biāo)。嘗試了關(guān)鍵詞直接生成的圖片，很難生成符合國(guó)內(nèi)的福袋風(fēng)格...

02 根據(jù)需求及參考圖，寫出關(guān)鍵詞

畫面主體：福袋，3D圖標(biāo)

修飾詞：中國(guó)風(fēng)，卡通風(fēng)格，粘土材質(zhì)，可愛，光滑

細(xì)節(jié)詞：紅色和黃色，白色背景，3D渲染，最高細(xì)節(jié)，最好的質(zhì)量，正視圖，高清，8K

參數(shù)后綴：--niji 5

基本上我就修改了前面的關(guān)鍵詞，后面的關(guān)鍵詞都可以被固定，作為生成3D元素的關(guān)鍵詞，改變主體元素即可，然后改下顏色關(guān)鍵詞，以下是完整關(guān)鍵詞：

Blessing bag, 3D icon, Chinese style, Cartoon style, Clay material, Lovely, smooth, Red and yellow, White background, The highest detail, The best quality, Upright view, 3D rendering, HD, 8K --niji 5

橙色標(biāo)注地方為可替換關(guān)鍵詞，其它關(guān)鍵詞可保持不變。

03 生成合成圖片素材，摳出元素

然后開始操作跑圖吧，墊上前面找的參考，然后加上關(guān)鍵詞，然后摳圖都知道吧，說了很多期，不重復(fù)了：

我們?cè)賮砜纯床粔|圖生成的效果，這種效果也很不錯(cuò)，但是這個(gè)并不是我們最終落地的效果，之所以墊圖，就是控制圖片的整體風(fēng)格，再配合關(guān)鍵詞，基本上就能很好的控制最終的效果，把“命運(yùn)掌握自己手中吧”：

還有個(gè)小知識(shí)，可以多墊幾張圖，但是風(fēng)格需要是一致的圖片，這樣通過 墊圖+關(guān)鍵詞 的操作，生不出合適的元素，你可以化身“東北錘王”來捶我，我不反抗

04 文案排版+UI規(guī)范

處理下圖片吧，把不需要的元素，效果不好的地方，用“PS Beta”處理下，不用Beta版本也行，我也只用到了“內(nèi)容填充”的功能。

完了之后排個(gè)版，加點(diǎn)裝飾元素，這福袋活動(dòng)彈窗不就完成了。那個(gè)周圍的金幣元素也是用同樣的方式生成，把 福袋 關(guān)鍵詞 ，改成 金幣 即可。本文出現(xiàn)的素材同樣也會(huì)分享給大家，源文件也會(huì)一起給大家作為一個(gè)參考吧

五、Midjourney生成直播禮物元素

01 關(guān)鍵詞生圖

這個(gè)系列的3D元素關(guān)鍵詞基本就是通用的模板， 我在往期分享過寫這組關(guān)鍵詞的過程，這里不再重復(fù)。

大家把這套關(guān)鍵詞保存好即可，替換部分關(guān)鍵詞就可以控制3D元素的形狀和風(fēng)格，一下紫色地方關(guān)鍵詞可替換。

car, 3D icon, clay, Cartoon, Nintendo, Lovely, smooth, Luster, Pink and blue, Gradient color, White background, The highest detail, The best quality, Isometric view, HD --niji 5 --q 2

汽車，3D圖標(biāo)，粘土，卡通，任天堂，可愛，光滑，光澤，粉色和藍(lán)色，漸變顏色，白色背景，最高的細(xì)節(jié)，最好的質(zhì)量，等距視圖，高清

02 快捷一鍵摳圖

上一步生成了下面這些3D元素，接下來就開始摳圖了，用PS嗎？不，ps摳圖老費(fèi)勁了，我們用這個(gè)工具clipdrop。

上傳文件，一鍵摳圖即可，我現(xiàn)在摳圖都用的是這個(gè)工具。每天都有免費(fèi)次數(shù)。教大家一招，打開一個(gè)新的瀏覽器，然后進(jìn)入這個(gè)網(wǎng)站，不要登錄，直接就可以摳圖，用完這個(gè)瀏覽器的再換一個(gè)，完全夠白嫖了~

03 Figma排版出設(shè)計(jì)稿

我們3D元素搞定了，接下來就是做UI設(shè)計(jì)稿了，把信息和3D元素組合一起就大功告成了。

作者:言川Artie

來源:微信公眾號(hào):智設(shè)AI

出處
:https://mp.weixin.qq.com/s/sZr1_IHQa3CtxFBDUpfOuA