我用Chatgpt跟SD AI輔助做了一個個人連結網站!製作分享

因為最近買了自己的網址，要在電子名片網站修改的時候想說

((恩 這個其實也蠻簡單的🤔🤔🤔就是一個頁面有不同連結可以點))

乾脆自己來寫好了😆

就開始寫了想說既然都自己寫就可以寫的特別一點

先上成品

總共用到:

• 我的手(人物跟網頁)
•  stable diffusion(背景)
• chat gpt(整理code)
• 網路找的動畫code

網頁內有動畫可以進去參觀~

好了看完就開始介紹~GO

第零步-構思心中的畫面

一開始就有的想法是高科技的感覺  有一個女孩在畫面中右邊放我所有的連結按鈕

(像這樣不過人已經畫完了😂)

第一步-自己畫畫+SD AI繪製背景圖(準備素材)

最先開始畫圖，因為我的網站所以視覺圖人物自己畫
整個網站想暗色調 然後有螢幕燈光發光
背景不是那麼重要就打算丟給AI畫，把原本的構圖再簡單的畫一點，用來暗示AI
之後請sd幫我畫完了

想要一個機房or辦公室的房間

不過也蠻難算椅子部分他一直弄成別的，因為被切到他就以為是螢幕阿之類物品

最後挑選比較滿意的圖 用PS修圖才大功告成

等素材好了就開始進到寫網頁的部分了

第二步-寫網頁

因為構思的時候就想要有RGB光、色差、發光之類看起來很電競的東西

首先先在網路找有沒有預想類似的動畫code可以用

有能用上的在修改放入我的頁面後調整

這時候chatgpt就很好用了

可以叫他改成我網頁放的格式

或是遇到不會修改的直接問它 回答的通常都是正確的

若是不對在調整自己問法可能就成功了

部份動畫效果也能直接問他

ai輔助寫的好處真的省很多時間就能達到效果

以前寫到卡住有時候要先閱讀別人的整個教學才能找到要修改的點

用ai直接複製整個丟給chatgpt問他它就能找出錯誤並直接給你程式碼

第三步-完成+上傳網站

最後就是花時間完成網頁，把效果、簡單rwd做一做，雖然還有很多可以改可是我懶了

主要電腦版的呈現，平板、手機版就比較普通了，有符合頁面就好了其他不要求😂

目前的網頁已經跟我原本預想差不多，雖然動畫有點多可是看到喜歡的動畫想全都要，反正這也不是常規的網站最後喜歡什麼都加爆，我個人的酷網站就完成了!!!😍

這種連結的網站架構很單純，蠻適合自己寫一個，有興趣不妨試看看~

如果您喜歡我的文章，請幫我在下方拍手區按圈圈拍手圖案5次!非常感謝💕