前言

如果你要設(shè)計(jì)以真實(shí)場(chǎng)景為主的banner或者主視覺(jué)，往往都會(huì)在各大網(wǎng)站圖庫(kù)里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨(dú)一無(wú)二的難上加難，而且自己也沒(méi)時(shí)間建模和拍攝

AI圖片的生成為這個(gè)痛點(diǎn)找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫(kù)素材照片，我將會(huì)按照真實(shí)工作場(chǎng)景搭配設(shè)計(jì)落地方案來(lái)和大家分享AI使用經(jīng)驗(yàn)，讓你看了就學(xué)會(huì)，學(xué)會(huì)就馬上能用

用結(jié)構(gòu)化方式思考咒語(yǔ)

以下需求是我設(shè)計(jì)中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫(xiě)實(shí)照片當(dāng)作首圖，首先先想一下我們需要的素材大概畫(huà)面的呈現(xiàn)，思考的框架可以參考以下，以下內(nèi)容為了方便關(guān)鍵詞我會(huì)用中文，但是實(shí)際操作中Prompt都必須使用英語(yǔ)

通過(guò)結(jié)構(gòu)化思維來(lái)描述這樣就不會(huì)有遺漏，也更能使畫(huà)面完整，另外像我的英語(yǔ)并不是很好，就會(huì)把寫(xiě)好的內(nèi)容通過(guò)Deep L或是chatgpt來(lái)進(jìn)行翻譯

關(guān)鍵詞的使用

prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9

在輸入關(guān)鍵詞的時(shí)候，我通常會(huì)把重要的內(nèi)容放在前面，有時(shí)加在后面的關(guān)鍵詞不容易被機(jī)器人識(shí)別。個(gè)人的一點(diǎn)小經(jīng)驗(yàn)，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設(shè)計(jì)中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過(guò)關(guān)鍵詞生成的圖片

如果覺(jué)得結(jié)果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機(jī)性，像是Promp就不建議非常詳細(xì)，因?yàn)檫@樣反而會(huì)有意想不到的優(yōu)質(zhì)圖片產(chǎn)出

機(jī)器人生成以后就要開(kāi)始挑選圖片了，如果對(duì)左上的結(jié)果比較滿意，就點(diǎn)擊v1，讓機(jī)器人針對(duì)這個(gè)圖片再去生成四張新的圖片，雖然左上效果不錯(cuò)，但是手部有些奇怪，所以需要通過(guò)在該基礎(chǔ)上再次生成，來(lái)挑選沒(méi)有問(wèn)題的圖片

這里說(shuō)明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會(huì)放大這張圖片畫(huà)質(zhì)更加清晰，V則是會(huì)針對(duì)你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調(diào)整。1-4的排序?yàn)椋?是左上，2是右上，3是左下，4是右下

重新生成的左上圖可以看到手部還是有問(wèn)題，但是右上那張就還不錯(cuò)，可以選擇這張來(lái)用或是再重新生成一遍

prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9

這里我想要換一個(gè)畫(huà)面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀(jì)錄片、廣告拍攝使用的，所以使用這個(gè)關(guān)鍵字去生成圖片畫(huà)面會(huì)有一種電影感，角度上我覺(jué)得更好一點(diǎn)。

最后說(shuō)一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個(gè)人感覺(jué)還是不夠清晰，所以會(huì)搭配圖片放大工具來(lái)一起使用。我常用的圖片放大工具h(yuǎn)ttp://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點(diǎn)是免費(fèi)！??！直接上傳圖片無(wú)需更改任何參數(shù)，使用默認(rèn)預(yù)設(shè)清晰度絕對(duì)夠用，畫(huà)質(zhì)太高也沒(méi)有太大意義，反而會(huì)影響網(wǎng)站加載速

1.遙望app

1.視覺(jué)設(shè)計(jì)

遙望app的設(shè)計(jì)在整體上的風(fēng)格化很強(qiáng)，有自己的獨(dú)特性。為了讓用戶之間的粘性更好，更是在活動(dòng)上、動(dòng)效上花了很多心思，給用戶帶來(lái)很多有趣且良好的體驗(yàn)，讓我?guī)闳ンw驗(yàn)一下吧

2.設(shè)計(jì)語(yǔ)言

整個(gè)app的設(shè)計(jì)語(yǔ)言貫穿了星形、圓形和三角形 ，同時(shí)增加上面三種圖形的線性來(lái)點(diǎn)綴設(shè)計(jì)。tab圖標(biāo)是圓形和三角形的排列組合，同時(shí)增加線的形式點(diǎn)綴其中，層次更加豐富。其他頁(yè)面的設(shè)計(jì)也是同理，通過(guò)將上面3種圖形排列組合，貫穿到整個(gè)頁(yè)面，設(shè)計(jì)語(yǔ)言十分統(tǒng)一。

3.空界面設(shè)計(jì)

空界面的設(shè)計(jì)運(yùn)用手的動(dòng)作將每個(gè)頁(yè)面的情緒感拉的滿滿的，在互動(dòng)消息的版塊，從關(guān)注到@我，每一個(gè)頁(yè)面通過(guò)不同的情緒表達(dá)方式極大了緩解了用戶的焦慮，同時(shí)也增加了一些趣味性。

4.勛章設(shè)計(jì)

勛章是根據(jù)你的確幸值的多少，等級(jí)的高低，送禮物的多少，以及你在平臺(tái)的表現(xiàn)會(huì)給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺(jué)，增加用戶的參與感和在平臺(tái)的粘性。

2.動(dòng)效設(shè)計(jì)

遙望app的動(dòng)效設(shè)計(jì)也是十分的流暢和有趣，線性的風(fēng)格特征的插畫(huà)、溫暖的文案和趣味的動(dòng)效，帶來(lái)的絲滑體驗(yàn)感十分強(qiáng)烈。

1.匹配器

遙望app首頁(yè)上面的頭像是匹配器，隨著頭像慢慢的流過(guò),頭像旁邊還有對(duì)話框彈出介紹用戶的信息，點(diǎn)擊會(huì)有兩只手彼此召喚，再點(diǎn)擊幸會(huì)就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過(guò)的頁(yè)面，點(diǎn)擊可以同樣到打招呼頁(yè)面，多個(gè)入口引導(dǎo)用戶相互吸引從而形成社交動(dòng)機(jī)。

2.下拉加載

加載的動(dòng)態(tài)效果加入了遙望的IP形象，一個(gè)是像地球一樣的自轉(zhuǎn)，一個(gè)是像風(fēng)箏一樣在天空飛的效果，動(dòng)態(tài)十分流暢且有趣。

3.記錄心情

記錄心情這個(gè)是個(gè)很有趣的設(shè)計(jì)細(xì)節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動(dòng)分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。

查看心情

3.彩蛋設(shè)計(jì)

1.放個(gè)氣球

放個(gè)氣球把心情寫(xiě)進(jìn)氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時(shí)，你想自己接收就可以點(diǎn)收一個(gè)，出現(xiàn)氣球動(dòng)效加載，就會(huì)接收到別人發(fā)出的信息，不想要了，可以點(diǎn)放飛消息就沒(méi)有了。

收氣球

2.發(fā)射泡泡

雖然泡泡這種形式很常見(jiàn)，但是遙望在細(xì)節(jié)處做的設(shè)計(jì)還是很用心，很容易觸動(dòng)用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī)，加上“biubiu”的音效，有很強(qiáng)的場(chǎng)景感。

2. 配配app

1.視覺(jué)設(shè)計(jì)

配配app的設(shè)計(jì)可以說(shuō)是以IP形象為切入的設(shè)計(jì)，app里面有著各種各樣的表情和動(dòng)勢(shì)，生動(dòng)且逗比。而且配配在設(shè)計(jì)的時(shí)候會(huì)融入很多小的細(xì)節(jié)，也能帶給我們很多不一樣的感受。整個(gè)ip融入可以說(shuō)做的很徹底，能夠讓用戶的品牌感知十分深刻。

2.文字字體

貼貼功能用了一個(gè)超大的特殊的文字字體設(shè)計(jì)，十分醒目，在瀑布流的頁(yè)面對(duì)用戶的信息區(qū)分的比較清楚，但是對(duì)于用戶的照片也形成了遮擋，有的時(shí)候并不是很好。發(fā)布貼貼的超大字體的設(shè)計(jì)很少有人這么設(shè)計(jì)，雖然看起來(lái)粗糙，但是卻與眾不同。

3.品牌融入

配配app讓人印象比較深刻的就是這個(gè)IP的形象了，在頁(yè)面的各種地方都能看到他，無(wú)論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設(shè)定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。

2.動(dòng)效設(shè)計(jì)

1.點(diǎn)亮

點(diǎn)亮設(shè)計(jì)就是點(diǎn)擊后，寫(xiě)下一個(gè)故事就可以和其他用戶打招呼了，點(diǎn)亮后燈泡會(huì)發(fā)出光，然后有星星散落下來(lái)，將表情運(yùn)用在按鈕上也是很新穎的設(shè)計(jì)方法了。

2.發(fā)布動(dòng)態(tài)

發(fā)布動(dòng)態(tài)的功能IP會(huì)向你招招手，引導(dǎo)用戶參與發(fā)布動(dòng)態(tài)。

3.動(dòng)態(tài)背景

配配的動(dòng)態(tài)背景很有意思，打call、吃蘋(píng)果、打盹，根據(jù)不同用戶展示不同的動(dòng)態(tài)背景。

3.糖果app

糖果app的設(shè)計(jì)在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來(lái)很有場(chǎng)景感。糖果app的整體視覺(jué)風(fēng)格比較中規(guī)中矩，

不過(guò)有一些的功能設(shè)計(jì)和設(shè)計(jì)小細(xì)節(jié)值得體驗(yàn)一下。

1.廣場(chǎng)匹配器

糖果的首頁(yè)的匹配器設(shè)計(jì)是一群人在廣場(chǎng)上一起炫舞，然后各自擺著不同的怪異的姿勢(shì)，設(shè)計(jì)上十分新穎。

2.戀愛(ài)上上簽

戀愛(ài)上上簽就像我們?nèi)ニ聫R里求姻緣一樣，通過(guò)搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個(gè)十分匹配的好友。

3.解憂罐子

解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。

4.無(wú)聊嗶嗶雞

無(wú)聊嗶嗶雞就是一只雞不停的晃動(dòng)，可以發(fā)送一句消息直接可以連接到好友。

4.Blurrr app

Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設(shè)計(jì)上還是十分大膽，熒光綠的顏色和黑色的結(jié)合，十分亮眼，里面的動(dòng)效也十分細(xì)膩，非常吸引人的眼球。

引導(dǎo)頁(yè)的設(shè)計(jì)用多彩的圖形設(shè)計(jì)+表情+動(dòng)效設(shè)計(jì)的方式，打造了靈動(dòng)的引導(dǎo)頁(yè)設(shè)計(jì)，形成了自己很獨(dú)特的風(fēng)格。

一、Photoshop(Beta)版本安裝

PS的AI功能需要在Beta版本中才能使用，安裝過(guò)程很簡(jiǎn)單，可以從下列這個(gè)網(wǎng)址前往Adobe官網(wǎng)下載Photoshop(Beta)版本：

https://helpx.adobe.com/cn/photoshop/using/generative-fill.html

點(diǎn)擊「試用」按鈕，會(huì)調(diào)起電腦中的Creative Cloud應(yīng)用，正常來(lái)說(shuō)大家電腦里有Adobe軟件一般都會(huì)有Creative Cloud，沒(méi)下載的話按提示下載就可。

在Creative Cloud中找到①Beta應(yīng)用程序，點(diǎn)擊②安裝按鈕，再點(diǎn)擊③打開(kāi)按鈕，就可以啟動(dòng)Beta版PS啦！(我這里已經(jīng)安裝過(guò)，所以直接顯示了安裝按鈕)

Beta版PS白色的logo和有趣的啟動(dòng)頁(yè)面??

二、AI創(chuàng)意填充功能

Midjourney生成的圖默認(rèn)是方形，主體位于畫(huà)面的中央。如果我們想把主體的位置移到畫(huà)面左側(cè)或右側(cè)，需要花費(fèi)很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個(gè)痛點(diǎn)問(wèn)題！

下圖是在Midjourney中生成的例圖，人物在畫(huà)面的正中間，關(guān)鍵詞描述：

「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」

如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫(huà)面右邊，需要在PS(Beta)中怎么操作呢？

① 先把例圖拖到PS中，用[C]裁剪工具在畫(huà)布左邊拉一個(gè)空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫(huà)布，下方會(huì)出現(xiàn)一個(gè)工具欄。

③ 點(diǎn)擊工具欄的第一個(gè)「創(chuàng)成式填充」按鈕，進(jìn)入到AI創(chuàng)意填充功能。

PS的創(chuàng)意填充看起來(lái)很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：

·PS的輸入框沒(méi)有復(fù)雜的指令，只需要輸入關(guān)鍵詞描述，就能夠在選區(qū)內(nèi)生成想要的內(nèi)容；

·支持不輸入內(nèi)容，直接點(diǎn)擊「生成」按鈕，AI會(huì)根據(jù)畫(huà)面周?chē)膬?nèi)容智能填充選區(qū)。

三、不輸入內(nèi)容直接生成

第一次體驗(yàn)我沒(méi)有輸入任何內(nèi)容，直接點(diǎn)擊PS的「生成」按鈕，一次能生成3張圖片。點(diǎn)擊左右箭頭可以切換查看3張圖，如果覺(jué)得不滿意可以再點(diǎn)擊「生成」，再生成3張?zhí)畛鋱D。

效果圖1??

效果圖2??

效果圖3??

第一次測(cè)試生成的圖片效果遠(yuǎn)超出預(yù)期，和原圖風(fēng)格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來(lái)有點(diǎn)礙眼。

經(jīng)過(guò)多次嘗試后，終于發(fā)現(xiàn)了問(wèn)題所在：如果框選時(shí)剛好只選取了空白畫(huà)布，生成出來(lái)的新圖和原圖之間就會(huì)產(chǎn)生明顯的接縫。簡(jiǎn)單高效的解決方式是在框選畫(huà)布的時(shí)候多框一點(diǎn)點(diǎn)原圖。

這樣再點(diǎn)擊「生成」按鈕，運(yùn)算出來(lái)就會(huì)有很完美的過(guò)渡，看不出破綻。

四、輸入關(guān)鍵詞描述

體驗(yàn)完不輸入關(guān)鍵詞直接生成后，接下來(lái)體驗(yàn)一下輸入關(guān)鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側(cè)先拉出一個(gè)空白畫(huà)布，輸入關(guān)鍵詞描述：

「Particle effect, sense of technology」

生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！

效果圖1??

效果圖2??

右側(cè)的屬性欄會(huì)記錄你剛輸入的關(guān)鍵詞，可以隨時(shí)修改關(guān)鍵詞，點(diǎn)擊再次生成3張圖，依次類(lèi)推，生成的所有圖都會(huì)保留下來(lái)，方便選擇。

最后

通過(guò)這次體驗(yàn)感覺(jué)PS的AI填充非常強(qiáng)大，而且效果很精準(zhǔn)，誰(shuí)能想到在PS中就能完成對(duì)一張圖的拉伸和智能填充。

進(jìn)入喜茶小程序的時(shí)候給我的感受是簡(jiǎn)潔、時(shí)尚、極致的設(shè)計(jì)風(fēng)格，截了兩張小程序內(nèi)的兩個(gè)界面。 確實(shí)做的還挺不錯(cuò)的，為什么給人感受不一樣？接下來(lái)我們分析分析

1.版式

1.首先從下面的頁(yè)面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設(shè)計(jì)給人不對(duì)稱(chēng)的感覺(jué)，這樣的設(shè)計(jì)能讓用戶記住，同時(shí)又有一點(diǎn)時(shí)尚范的感覺(jué)，很符合喜茶目標(biāo)用戶年輕人的審美。
2.同時(shí)產(chǎn)品的banner是3:2的比例，較為靠近黃金比例的尺寸。 

1.點(diǎn)單頁(yè)面，喜茶新增了新品推廣位，一些新上的產(chǎn)品都會(huì)在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報(bào)一樣，同時(shí)第三個(gè)廣告位露出部分，讓用戶知道后面還可以左滑查看。同時(shí)推廣頁(yè)的右下角有個(gè)箭頭指引，告知用戶可點(diǎn)擊。 

2.看完這幾個(gè)頁(yè)面會(huì)發(fā)現(xiàn)，喜茶的基本上都是純直角的設(shè)計(jì)語(yǔ)言，推廣頁(yè)是直角、標(biāo)簽是直角、按鈕微圓角，直角的設(shè)計(jì)語(yǔ)言給人的感受是時(shí)尚、極致、極簡(jiǎn)的設(shè)計(jì)感受，個(gè)人非常喜歡。 

3.但是點(diǎn)單頁(yè)面的有點(diǎn)亂，標(biāo)簽的顏色過(guò)多，不夠統(tǒng)一，圖標(biāo)的也非常的多，這樣給人的感受就會(huì)比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶的效率。

1.在點(diǎn)單頁(yè)面用戶上滑，推廣位漸漸的往上消失，這樣產(chǎn)品的展示會(huì)更多，利于用戶挑選和尋找。 

2.用戶在選口味界面，發(fā)現(xiàn)每一個(gè)標(biāo)簽的內(nèi)的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁(yè)面給人感受簡(jiǎn)潔、易操作，同時(shí)用戶可以選自己的口味，可進(jìn)行保存，下次點(diǎn)直接就可以選擇自己的口味。

在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個(gè)模塊的都是不一樣的，很多產(chǎn)品的商場(chǎng)頁(yè)面都是一致的，而喜茶在產(chǎn)品的展示會(huì)以不一樣的形式出現(xiàn)，每一個(gè)模塊都有尺寸和排版的差異，這樣給用戶有種落錯(cuò)感，更加有設(shè)計(jì)。

2.會(huì)員頁(yè)

1.喜茶的會(huì)員頁(yè)給我眼前一亮的感覺(jué)，會(huì)員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺(jué)。 

2.會(huì)員頁(yè)用戶在切換的同時(shí)圖標(biāo)的顏色會(huì)跟著會(huì)員的顏色變化，特權(quán)的內(nèi)容也會(huì)有不一樣的變化，讓用戶有明顯的等級(jí)感知。 

3.切換到“黑卡”的時(shí)候，會(huì)發(fā)現(xiàn)會(huì)員頁(yè)的“喜”字加上了質(zhì)感。 

4.會(huì)員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會(huì)員做了區(qū)分的同時(shí)又加深了品牌印象。

3.圖標(biāo) 

喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡(jiǎn)，線性，差異性沒(méi)有那么強(qiáng)，而另一種則是插畫(huà)風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡(jiǎn)則符合喜茶整體小程序的調(diào)性，而插畫(huà)又豐富了頁(yè)面的單調(diào)性。

4.動(dòng)畫(huà) 

1.喜茶頂部的banner做非常不錯(cuò)，例如跟FENDI合作的會(huì)在首屏加入視頻，用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。 

2.用戶在左右切換banner時(shí)，文字會(huì)先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動(dòng)畫(huà)效果能給產(chǎn)品加分，給用戶留下好的感受。

5.字體

1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性，給人的感受時(shí)尚、極致、有設(shè)計(jì)。 

2.部分界面和海報(bào)喜茶會(huì)用上方正悠宋，有點(diǎn)中國(guó)風(fēng)、古風(fēng)的韻味在里面，而且也非常有獨(dú)特的設(shè)計(jì)美感，喜茶會(huì)應(yīng)用在國(guó)風(fēng)的海報(bào)以及會(huì)員頁(yè)的“喜”字上，突出風(fēng)格化。

3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計(jì)美感，更能傳達(dá)該品牌想傳達(dá)的東西。

6.更多界面欣賞