內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略。一般的配色工具都是給使用者色配或色號,這種方式對於設計產業的人來說可能是很方便又不會影響到自己創意的發揮,但對於「找靈感」的使用者來說,會不知道顏色比例怎麼分比較好?如何將這些顏色運用在各方面,今天就要介紹一「PaletteMaker 」免費線上配色工具,就很像我們之前跟大家介紹過的 Happy Hues 設計師的靈感補給站!網站調色盤提升你的配色美學,接下來就跟著鵠學苑一起學習吧!
PaletteMaker
https://palettegenerator.colorion.co/
「Palette Maker」是一個免費線上配色工具,最大特色就是可以看到色彩運用在真正的設計版型上,並且能及時調整顏色篩選器,帶入不同的設計版型中,其中的設計模板包括網頁、應用程式 UI、品牌和標誌、插圖、排版、海報和圖案。
Palette Maker 最終能將配色直接複製或匯出各種格式,如:HEX 色碼、圖片、ASE、Procreate 和程式碼,滿足各種設計類型需求。
點擊上方的網址就可以進入 PaletteMaker ,接下來就跟著小編一起學習,了解 PaletteMaker 如何使用吧!
第一步:色彩組合。
Palette Maker 網站後左側會有一排隨機產生的色彩組合,點選後就會將配色帶入右側各種設計版型中,就能看到這組顏色實際運用的效果。
第二步:顏色篩選器。
從左上角篩選器可依照顏色進行篩選,例如想要綠色系、藍色系、紅色系等等,就會為調色盤的色彩產生近似色彩,從篩選器也能設定顏色數量(預設五個),如果你覺得顏色太多看起來太雜亂,也能設定最少 2 個、最多 5 個顏色數。
第三步:設計版型挑選。
Palette Maker 的預設是「Mixed」也就是混合顯示,他能依照使用者需求單獨切換為顯示網頁和行動裝置 UI、品牌和標誌、插圖、排版、海報或圖案。
第四步:「Start the generator」。
將滑鼠移到版型上時會顯示「Start the generator」點選後會開啟產生器,將不同顏色組合帶入此版型中,並且顯示出每個模板下方會有顏色名稱、調色盤顏色及匯出顏色功能。
第五步:「Export palette」。
首頁右上角的「Export palette」或是模板右下角的「Export」都能將色彩組合匯出,匯出時會有每個顏色的 HEX 色碼,點選就能快速複製到剪貼簿,也能儲存為圖片、ASE、Procreate、程式碼。
Happy Hues 設計師的靈感補給站!網站調色盤提升你的配色美學
https://www.design-hu.com.tw/wordpress/wordpress-tools/animated-icons.html
UI Buttons 免費網頁動態按鈕素材,輕鬆踏入網頁設計CSS 的世界!
https://www.design-hu.com.tw/webmaster-tools/iconbros-elegantthemes.html
免費的上線配色工具很多,但大多都是提供配色、色號,PaletteMaker 是少數提供配色實際運用的模板給使用者的工具,相信 PaletteMaker 這個工具一定能為不管是設計人還是找靈感的人帶來很嘟的靈感。
那今天的教學就到這裡告一段落了,如果想了解最新網站知識,也可以到 鵠崙設計 官網看看,我們下次的教學見~
通用 Google Analytics 即將停止服務,快來確認資源有沒有影響!
CTR、CPM、CPC、CPA是什麼?一次搞懂20個網路廣告用語!
行銷組合4P到4C?擬定行銷策略前必須了解的消費者觀點!