本篇文章主要是AIGC在圖標設計上的一個應用,希望對大家有所幫助。
更多落地教程:
1. 花瓣網找參考圖,處理不必要的元素
這個彈窗設計我嘗試了很多方法,發現還是需要墊圖才能生成符合我想要的效果,所以這個方法還是得去找參考圖才行,以下這張圖來自花瓣網。
用 ps 處理下文字,別偷懶~(百度直接搜“花瓣網”即可,然后搜索“彈窗設計”)。
嘗試了圖生文功能,這里沒能如愿生成合適的,不過也給了我寫關鍵詞的靈感,突然發現圖生文還可以這樣用,牛~
2. 關鍵詞描述并墊圖生成
然后我開始嘗試寫關鍵詞,以下是完整關鍵詞:
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
使用一張卡片作為背景,四周環繞著三葉草和白色的花朵,綠色的底座,白色的小車,淡金色的硬幣,黃色的星星,云彩,迪士尼風格,卡通風格,3D, behance,dribbble
上面這個寫關鍵詞的網站還挺好用的,也內置了一些常用關鍵詞,分享給大家:https://moonvy.com/apps/ops/
接下來就簡單了,墊圖+關鍵詞組合。參數命令用 --iw 2(增加圖片權重,出圖更接近原圖)。--v 5.2 這個模型是最新的,用 v5 和 v5.1 模型生成的效果也差不多。
3. 挑選圖片并摳圖
Midjourney 的隨機性大家知道,多跑幾次圖準有你想要的圖:
選好圖片之后就需要處理圖片了,摳圖和修部分細節,這一點也很簡單。這里用到兩個工具,Clipdrop 和 PS Beta。
我是利用 Clipdrop 摳圖的,PS Beta 也可以,不過我感覺 Clipdrop 摳的更好點,這個是它的網址: https://clipdrop.co/
接下來就要用到 PS Beta 了,這個需要大家安裝下,真的很好用。
4. 文案排版+UI 規范
為什么會用到 PS Beta 呢,是因為我需要處理這個卡片上的元素,我需要有一塊空白的地方填寫文案,框選不需要的元素,使用“內容填充”和“創意式填充”,根據最終的效果來合理運用。
最后一步,寫上文案并進行 UI 規范設計一下~
來看下最終效果:
1. 找參考圖,確定設計風格
我們在接到設計需求之后,大家是否會跟我一樣,根據需求來去找對應的參考圖片。需求分析我就不介紹了,我們直接開始視覺設計篇。
首先就是去找到與需求描述相符的參考圖片,注意的是我們下面的操作不會用到“/describe”功能(咱也不能老是用墊圖的方法是不,這多沒技術含量,雖然很好用...)。老辦法,素材網站找參考圖,這里還是我們的老朋友:花瓣。
我們先確定主體元素樣式,這里我找到了這個禮物盒的圖標,就它了,接下來我就會根據這個禮物元素進行關鍵詞描述。
我會根據以上這個格式去寫關鍵詞,其實這個格式的順序不是太重要,因為你會發現網上很多博主寫的格式都不太一樣,我建議大家按照自己的習慣描述就行,不要太久糾結到底是什么順序,切記不要轉牛角尖~
2. 根據需求及參考圖,寫出關鍵詞
畫面主體:禮物盒,3D 圖標,粘土,卡通,任天堂
修飾詞:可愛,光滑,光澤,紅色和黃色,漸變顏色
細節詞:白色背景,最高細節,等距視圖,高清,最佳質量
參數后綴:--niji 5 --q 2(質量)
上面寫的關鍵詞就是根據找的禮物盒來描述的,不信你可以對著看,大家寫關鍵詞都可以用這種思路去創作,你會發現,寫關鍵詞真的不難~
完整關鍵詞咱也不能落下,要分享就拿出咱最大的誠意來:
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
這套關鍵詞可以作為畫這種 3D 風格圖標的一套模板,可替換的關鍵詞為:
3. 挑選生成的素材,摳出元素
開始跑圖吧,剩下的事情就好辦了,Midjourney 的隨機性會讓你不得不多跑幾組圖片,這一點要耐心~
圖跑出來了就開始把咱們的 3D 元素摳出來吧,這次我就不開 PS 了,用 Clipdrop 摳圖,簡直不要太快。
看來這次的教程又是 4 步就可以完成了,真的是 泰褲辣!
下面一步我會用“Figma”這個軟件,大家用 PS 等設計工具也可以哈,都是可以完成最后一步的,接著看:
4. 排版出圖,真的可落地!
排個版都會吧,打上文案,加點裝飾元素,做個按鈕,就很簡單...
最后再配個顏色,就大功告成啦~
1. 找參考圖,確定設計風格
第一步,找風格元素參考去,這是我們接下來描寫關鍵詞的重點,建議大家不要憑空想象,先看別人做的,我們參考改進,下面還是這個網站(花瓣):
上面的這個圖標就是我找到的參考,接下來我會按照我描述關鍵詞的步驟開始頭腦風暴,進行創作
這期的效果也不用墊圖,可關鍵詞直出圖,也可以墊圖來控制畫面風格,不過注意你如果生成的關鍵詞是 盾牌圖標 ,那么你墊的圖片也要是 盾牌圖標 ,不然會出現災難現場,自己可以試試
2. 根據需求及參考圖,寫出關鍵詞
畫面主體:一個 3D 盾牌 圖標
修飾詞:藍色漸變,磨砂玻璃
細節詞:超簡約外觀,明亮色彩,工作室照明,光線追蹤,藍白色背景,工業設計,等距視圖,豐富的細節,超高清,高質量,16K
參數后綴:--V 5.2
這組描述詞我測試了很久很久,現在我感覺用 AI 繪圖最耗時間的事情就是寫關鍵詞了,因為需要不斷的用關鍵詞來測試效果,這個效果不行就修改關鍵詞繼續測試,所以寫關鍵詞也很重要!!以下是完整關鍵詞:
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
橙色標注地方為可替換關鍵詞,其它關鍵詞可保持不變,同樣這套可作為 B 端科技風格圖標的一套模板關鍵詞。
3. 生成合成圖片素材,摳出元素
先來看看我最終設計的圖片:
這組設計并不是直接出一張圖,然后排版就完成的。是我生成了一共 3 組不同的元素,然后合成為一張場景圖的。
我也嘗試過關鍵詞直出一張圖,但是實際上不管我怎么寫關鍵詞,墊圖,始終無法達到我的最終設計要求,哪怕我“運氣好”生成了一組合適的圖片,后面的視覺風格保持統一也很難做到,所以只能把各個元素拆分,后期合成了。
具體怎么做的咱們繼續往下看吧~
首先用上面寫的關鍵詞跑出以下元素:
再提醒一遍,前面寫的關鍵詞我只改了一個單詞,就是把 盾牌 關鍵詞分別改成了:“相機、文件夾、耳機、魔方、地球儀”,其他關鍵詞保持不變,這也是為了保持風格統一。
主體元素確定了,還缺一個輔助元素,那就是 主體元素 下面的底座。這一步也很簡單,墊圖+關鍵詞(注意,這里的關鍵詞還是剛剛那組,把 盾牌 關鍵詞改為 pedestal(底座)。
墊圖注意:一定要與我們生成的主體元素差不多風格的圖片,不要隨便放一個底座圖片上去!!!
這一步完了之后再來一張背景素材就搞定了,背景素材簡單,直接圖生文,然后墊圖+關鍵詞,看圖。
怕你們看不懂,我再啰嗦一遍,找一張合適的圖片參考,然后用“/describe”命令,找一組大致符合這個圖片的關鍵詞,然后墊同樣的圖片,把關鍵詞加上,跑圖即可。
最后就是把主體元素,輔助元素摳圖:
4. 合成排版出圖,可落地!!
我的寶藏設計工具:Figma!先出個 Demo,把文案排版一下:
然后配上顏色,把背景素材合成上,剩下的路得你們自己走了,整個流程已經走完,希望本篇文章對你有幫助。
1. 找參考圖,確定設計風格
老樣子,先找參考圖,根據參考圖及需求寫出關鍵詞,這期的福袋設計會用到墊圖+關鍵詞 的方式。
第一步,找風格元素參考去,這是我們接下來描寫關鍵詞的重點,建議大家不要憑空想象,先看別人做的,我們參考改進,下面還是這個網站(花瓣):
上面的這個福袋就是我找到的參考,接下來我會按照我描述關鍵詞的步驟開始頭腦風暴,進行創作
這組關鍵詞其實就是用的之前做 3D 元素彈窗的關鍵詞,屬于比較通用的一組關鍵詞,適用于任何此類型的 3D 圖標。
嘗試了關鍵詞直接生成的圖片,很難生成符合國內的福袋風格...
2. 根據需求及參考圖,寫出關鍵詞
畫面主體:福袋,3D 圖標
修飾詞:中國風,卡通風格,粘土材質,可愛,光滑
細節詞:紅色和黃色,白色背景,3D 渲染,最高細節,最好的質量,正視圖,高清,8K
參數后綴:--niji 5
基本上我就修改了前面的關鍵詞,后面的關鍵詞都可以被固定,作為生成 3D 元素的關鍵詞,改變主體元素即可,然后改下顏色關鍵詞,以下是完整關鍵詞:
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
橙色標注地方為可替換關鍵詞,其它關鍵詞可保持不變。
3. 生成合成圖片素材,摳出元素
然后開始操作跑圖吧,墊上前面找的參考,然后加上關鍵詞,然后摳圖都知道吧,不重復了:
我們再來看看不墊圖生成的效果,這種效果也很不錯,但是這個并不是我們最終落地的效果,之所以墊圖,就是控制圖片的整體風格,再配合關鍵詞,基本上就能很好的控制最終的效果,把“命運掌握自己手中吧”:
還有個小知識,可以多墊幾張圖,但是風格需要是一致的圖片,這樣通過 墊圖+關鍵詞 的操作,生不出合適的元素,你可以化身“東北錘王”來捶我,我不反抗
4. 文案排版+UI 規范
處理下圖片吧,把不需要的元素,效果不好的地方,用“PS Beta”處理下,不用 Beta 版本也行,我也只用到了“內容填充”的功能。
完了之后排個版,加點裝飾元素,這福袋活動彈窗不就完成了。
那個周圍的金幣元素也是用同樣的方式生成,把 福袋 關鍵詞 ,改成 金幣 即可。
1. 關鍵詞生圖
這個系列的 3D 元素關鍵詞基本就是通用的模板,大家把這套關鍵詞保存好即可,替換部分關鍵詞就可以控制 3D 元素的形狀和風格,一下紫色地方關鍵詞可替換。
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 圖標,粘土,卡通,任天堂,可愛,光滑,光澤,粉色和藍色,漸變顏色,白色背景,最高的細節,最好的質量,等距視圖,高清
2. 快捷一鍵摳圖
上一步生成了下面這些 3D 元素,接下來就開始摳圖了
3. Figma 排版出設計稿
我們 3D 元素搞定了,接下來就是做 UI 設計稿了,把信息和 3D 元素組合一起就大功告成了。
以上就是這篇 AI 工具賦能 UI 設計的教程了,歡迎大家來與我一起交流討論更多的商業場景。
歡迎添加作者微信交流:
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 22 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓