2013年1月16日 星期三

網頁設計好幫手- 免費線上調色工具



網頁設計好幫手- 免費線上調色工具
色彩為第一視覺語言,不同的顏色會讓人產生不同的感受,顏色的搭配可以傳達給人各種不同的訊息。因此,「配色」在設計領域裡很重要的。今天小編就請到網頁設計師TED介紹一個免費的線上調色工具給大家,主要是以色環的方式讓使用者選擇顏色,再搭配不同的配色方法,看完這一篇就馬上加入我的最愛吧。

配色方法:
  • Monochromatic單色):以單一顏色做為基礎色,再以飽合度、亮度變化出其它搭配的色。因為是屬於同一個色系,所以這種配色法較能調配出舒適的色彩感受。
  • Complementary互補色):以主色以及在色環對面的補色調出對比效果明顯的配色。
  • Triad三分色): 以一個主色以及在色環對面的兩個補色組成較為柔合的對比效果。
  • Tetrad四分色): 以兩個主色以及在色環對面的兩個補色營造出一種強烈的視覺效果。
  • Analogic類似色):以一個主色以及在它兩旁等距的兩個補色調配出給人優雅、簡潔的色彩感覺。
  • Accented Analogic互補類似色):以三個類似色為基礎,再加上色環對面的一個對比色構成一種既不失優雅又能強調重點的有效配色法。
[使用介紹]
選擇配色方法:在左上角選擇一種配色方法,在下方色環上會出現圓點,可以利用滑鼠拖動圓點改變它們在色環上的位置。在色環右邊會即時呈現配色的預覽圖




預覽網頁配色:在預覽圖的下面有「明亮」以及「暗沉」兩種套用這個配色所產生的「模擬」網頁




調整配色:在色環上選好色調之後,可以調整顏色的「亮度」和「飽合度」,或是可選擇預設配色。例如:「Max Contrast」為最高對比的配色;「Pastel」則是粉色配色等。

  
顏色列表:列出目前配色的所有顏色加上對應的 HTML 色碼



就網頁設計來說,網頁配色的好壞能影響造訪者對這個網頁的觀感,甚至是否願意繼續瀏覽網頁。除了上述功能外,它還能匯出 HTML 色碼、Photoshop 色票檔、隨機配色以及色盲模擬等功能,對網頁設計來說真是如虎添翼呢

 這麼多功能的好網站就介紹給大家囉,小編日後會持續不定時分享一些好用工具,搞懂「配色」真的很重要,畢竟目啾都是先被顏色吸引再注意到造型,就算不是網頁設計師大家也都應用的到歐~
設計師TED分享
資料參考自: http://blog.joaoko.net/archives/1995  joaoko



沒有留言:

張貼留言