今年因為 AIGC 的大爆發,所以也用了許多相關的工具來把紅色死神這個網站做了大改造,為紀念也把目前的紅色死神定為 Ver.7,以下就說一下用到了哪些地方。
設計部分
設計部分算是用到最多的,以下就來逐一說明:
1. 頭像
頭像算是用最早也的是最開始讓我熟悉 AI 生圖的起點,主要用到的工具有 DALL·E 以及 Midjourney。
一開始是 DALL·E,後來開始付費 Midjourney 後就變主力產圖的工具,DALL·E 在年初與後來第三版推出後差距頗大,以下是用 DALL·E 生出來比較滿意的圖。
![賽博龐克風格埃及神阿努比斯, 正面, 有翅膀, 紅與黑配色, 金屬質感, 真實世界風格](https://farm66.static.flickr.com/65535/53229628772_2f90c29c25_w.jpg)
![賽博龐克風格埃及神阿努比斯, 正面, 科幻,有翅膀, 紅與黑配色, 金屬質感, 真實世界風格](https://farm66.static.flickr.com/65535/53230823788_5fac0c1301_w.jpg)
產出來的圖超級多,有興趣可以看完整的我保留下來的圖片。
Midjourney 也嘗試了不少,後來以這些類似圖騰的圖片被保留了下來,我把這些放在一進來的第一個畫面上隨機顯示,可以多刷幾次網頁看看有哪些樣子。
![Anubis Logo](https://farm66.static.flickr.com/65535/53061109451_39bf22038d_n.jpg)
![Anubis Logo](https://farm66.static.flickr.com/65535/53061109421_b963b0174a_n.jpg)
![Anubis Logo](https://farm66.static.flickr.com/65535/53061498085_84c45dc4e5_n.jpg)
![Anubis Logo](https://farm66.static.flickr.com/65535/53061109371_1e41ec0be5_n.jpg)
頭像的部分則是以最後產出的最滿意而拿來使用,完整的產出圖片可以看這個相簿。
![Grimdark futuristic hi-tech Anubis cyborg](https://farm66.static.flickr.com/65535/53294015699_579b7a4f74_n.jpg)
2. Logo
Logo 本來是輸入想要的 prompt 讓 AI 去生圖,但試了很多次都不是很滿意,直到後來利用 Midjourney 的以圖生圖,因為有個明確的參考所以很快弄出我要的樣子了,目前便生出來的圖加上自己後續的修改來當網站的正式 logo。
這是我利用 google 搜尋後在圖庫網站找到這樣的一個喜歡的 logo。
透過 AI 重新發想後變成這樣:
最後轉成向量圖後再利用繪圖軟體修改,成果就是這樣:
![](https://farm66.static.flickr.com/65535/53109745358_c4b642f446_w.jpg)
利用 AI 輔助設計真的讓人大大滿意。
3. 背景圖
背景圖片算是比較單純的應用,我都是用紅黑配色科幻風格去生出每個頁面想要的圖片。
駕駛艙:
![Cockpit](https://live.staticflickr.com/65535/53040349334_f50ba01718_b.jpg)
太空船:
![space pirate ship in space, science fiction style, massive scale, super realistic](https://live.staticflickr.com/65535/53299619034_82f6927383_b.jpg)
機庫:
教室:
![futuristic style classroom, red and black, holographic --ar 16:9](https://live.staticflickr.com/65535/53115864169_ffc8c33dce_b.jpg)
![futuristic style classroom, red and black, holographic, no people, detailed, intricate details, super detailed](https://live.staticflickr.com/65535/53116156075_d16a1aec8d_b.jpg)
控制室:
![imperial starship command bridge, red and black, hyper realistic, render, 8k](https://live.staticflickr.com/65535/53188460626_78c75964d0_b.jpg)
會議室:
![Modern sci-fi conference room of secret inteligence](https://live.staticflickr.com/65535/53203505379_d2643cc9d7_b.jpg)
圖書館:
![In the heart of a massive, sleek spaceship hurtling through the cosmos, lies a cyberpunk library like no other](https://live.staticflickr.com/65535/53231833731_1c21cc5fc9_b.jpg)
內部空間:
![sci-fi Cyberspace, red and black, detailed --ar 16:9](https://live.staticflickr.com/65535/53280333642_6c85014bd7_b.jpg)
長廊:
![A cinematic view of cyberspace far in the future, sci-fi,red and black , unreal 5.2 --ar 16:9 --s 750](https://live.staticflickr.com/65535/53293290087_aa4ff02400_b.jpg)
這些圖是要表示網站很像一艘太空船,每個不同的頁面有各自的樣子及功能性。
科幻風格之外還有像制服地圖這樣用一張學校的圖當背景。
![Variations (Strong), render, anime style, school building, main entrance, school yard](https://live.staticflickr.com/65535/53062863778_4b8a9f87cb_b.jpg)
或是像寶可夢頁面那頁的風景圖。
![anime landscape, grassy field, blue sky](https://live.staticflickr.com/65535/53280748817_1a76d56405_b.jpg)
4. 以圖生圖的素材
除了完全靠 prompt 生成的外圖片外,也有些是怎麼調整 prompt 都很難生出滿意的,這時就可以利用以圖生圖的功能來幫助快速產出圖片,比如我一直很喜歡零式系統的那個 3D 圓球形雷達,我就請 AI 參考並生出我想要的圖來:
![zero-system](https://live.staticflickr.com/65535/53297346924_fc53854957_b.jpg)
透過 AI 重新調整生成後就變這樣:
![futuristic style, sci-fi, red and black, control orb, --no human, --ar 16:9](https://live.staticflickr.com/65535/53065316623_bbe3bcbfd1_b.jpg)
接著我就把他取名叫 J.A.S.O.N. 了。
也有像這樣找圖庫的圖再來重新生成,我這次用到這張:
![futuristic-background-concept_23-2148473541](https://live.staticflickr.com/65535/53297346929_0d42eff406_b.jpg)
透過 AI 參考生成後變這樣:
![reimagine this image, flat design, sci-fi, red, black, gray](https://live.staticflickr.com/65535/53154825603_45267982e8_b.jpg)
再用 Photoshop 調整之後,就能弄到自己想要的圖片了。
5. 重複背景圖
用 AI 生可以無限循環的背景圖片也超級方便,這種以往連圖庫都很難找到滿意的,現在只要透過參數就可以不斷產出了,以下是我一些我這次有用在網站上的。
![starlight galaxy pattern](https://live.staticflickr.com/65535/53075169625_a8c6776c89_w.jpg)
![seemless flat red smooth glossy metalic spaceship panelling --tile --s 750 --v 5.2](https://live.staticflickr.com/65535/53296928714_e94567c6b2_w.jpg)
![detailed overlapping dark gray mechanical parts with a little red neon lights, texture for sci-fi 3d rendering --tile](https://live.staticflickr.com/65535/53282539464_3a04befaa1_w.jpg)
![dark red and black background with technology futuristic elements --tile](https://live.staticflickr.com/65535/53294990445_b43a0f1b18_w.jpg)
6. 虛擬角色
用了一些提示詞產出了角色後覺得好用就把它放到網站上,包含有點奇幻混科技風格的這些角色。
![Anubis](https://live.staticflickr.com/65535/53072313794_dbfaacb8b7.jpg)
![Shrine Maiden robot cat](https://live.staticflickr.com/65535/53072389346_d5c3990d57.jpg)
完整的可以到 Wingzero 頁面看,還有各個角色的名字和介紹。
畫了一個歐西里斯的天空龍。
![slifer the sky dragon from yu-gi-oh:10 | machine:7, sci-fi, futuristic style, dark sky](https://live.staticflickr.com/65535/53098127358_b52dc9682e_b.jpg)
我還用 AI 把洛克人跟地獄死神鋼彈融合產出一個新的角色。
![洛克人 + 地獄死神鋼彈](https://live.staticflickr.com/65535/53296306557_1c7736756e_b.jpg)
![chibi robot, red and black --ar 3:4 --niji 5 - Variations (Strong)](https://live.staticflickr.com/65535/53228169963_120b99eb31.jpg)
為了弄 AI 助理的介紹,弄了些擬人頭像。
![](https://www.wingzero.tw/asset/images/avatar-chatgpt.jpg)
![](https://www.wingzero.tw/asset/images/avatar-copilot.jpg)
![](https://www.wingzero.tw/asset/images/avatar-designer.jpg)
![](https://www.wingzero.tw/asset/images/avatar-post-pro.jpg)
完整可以看公司成員簡介,是已經有點惡趣味的成分了。
以上大致就是網站上 AI 生成的圖片的應用。
文案部分
文案部分在網站上使用的不算多,工具是使用 ChatGPT,大致就是用來生成、翻譯跟改寫內容,在紅色死神上比較特別的應該是有個角色介紹區塊,會做這個區塊是在用 AI 生了一些角色圖後,想說來弄個地方放,所以就又請 ChatGPT 幫我想角色名還有介紹,於是就完成了這個部分的內容。
此外還有請他把預想好的縮寫展開成完整的英文,比如 J.A.S.O.N. 請他幫我想後就有了這樣的全名:Joint AI System for Online Navigation,對於英文單字認識不是那麼多的我而言,真的是一個很方便的幫手。
程式撰寫
程式撰寫就是裝了 GitHub Copilot,Copilot 可以幫忙讀程式碼還有自動完成程式真的很神,再來就是跟有遇到問題就問問 ChatGPT,讓開發效率好很多。
![GitHub Copilot 自動完成程式碼](https://farm66.static.flickr.com/65535/53299256998_3bd6f17f82_c.jpg)
其他還有像影音的應用,因為還沒太多用在紅色死神這個網站上,主要是用在 YT 頻道那邊,所以這邊就不寫了。
這次透過 AI 改造網站又讓紅色死神進到一個新的里程碑,也特此寫一篇文章記錄。