iT邦幫忙

2021 iThome 鐵人賽

DAY 3
1
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 3

找尋你的設計靈感、素材及好工具

製作網站前,通常需要找尋相關設計靈感,有時候想破頭就是沒想法,素材對網頁內容來說很重要,好不容易找到了不錯的素材,大部分都是有著作權,不能直接使用,以下是我常逛或是設計師常用來找尋靈感及找素材的網站
https://ithelp.ithome.com.tw/upload/images/20210918/20112053GFvGoXDml8.png

如何找素材?

做網站需要使用素材及圖片,讓網站看起來更生動,吸引使用者的眼球
使用CC0可商用圖片無版權圖片,就不用擔心會有版權問題了
但在下載使用前,還是要再確認一下使用規則,以免觸法唷~

CC0(Creative Commons Zero)授權是什麼?

可用於私人或商業性質,使用者可以自由地修改創作衍生作品的權利,不需要特別註明素材出處來源。下面會分享圖庫及素材的網址

圖庫

素材

ICON

如何找尋靈感

設計參考

  • Pinterest:找靈感網站,有網頁、平面設計等資源十分豐富
    https://ithelp.ithome.com.tw/upload/images/20210918/20112053YF9v2ot29S.png
  • Behance
  • dribbble
  • collectUI:有多種類型的UI設計可以參考,像是登入、表單、個人簡介等

網站參考

可以依照關鍵字、分類、顏色等搜尋需要的版型

模板參考

哪裡有好用工具?

配色網站

  • Color Hunt:可以透過搜尋欄搜尋合適的配色
    https://ithelp.ithome.com.tw/upload/images/20210918/20112053BtRVAzhuW4.png
  • ColorSpace:設定一個主色,會有多種不同組合的配色參考
    https://ithelp.ithome.com.tw/upload/images/20210918/20112053oyVQS2Z89U.png
  • Coolors :按下鍵盤的空白鍵,會隨機提供五種顏色的配色,可以鎖定主要顏色,更換其他的顏色組合
    https://ithelp.ithome.com.tw/upload/images/20210918/20112053no8dpjHQfT.png

漸層產生器

  • Colorzilla Gradients:可以在這裡設置好漸層色,在複製CSS到你的CSS檔案就可以了,超方便
    https://ithelp.ithome.com.tw/upload/images/20210918/20112053rtDmGKZWK4.png

漸層配色參考

製作Favicon icon

三角形產生器

Font Icon產生器

  • IcoMoon:除了可以在自行挑選需要的icon圖示之外,還可以匯入自己製作的svg icon圖
  • iconfont+:這個網站最大優點就是可以使用彩色的icon圖

假字產生器

圖片產生器

線上生成動畫

  • Animista:提供數十種特效像是淡入、淡出、旋轉、消失等,存CSS產生的動畫

看完這麼多厲害的網站及資源,趕快存到我的最愛裡,以後就不怕沒靈感了,以上是我常用的資源,如果你也有推薦的網站,也歡迎你告訴我唷~


上一篇
如何製作一個精美的網站
下一篇
改造你的VSCode,大幅提升你的Coding效率
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言