需要配色靈感?快上Adobe Kuler網站!

10
分類 Adobe, 教學文件

需要配色靈感?快上Adobe Kuler網站!
文∕趙英傑

Kuler是Adobe公司製作的免費色彩設計和管理工具,完全用Flash和ActionScript 3.0程式開發,可以讓您在線上瀏覽、搜尋、建立和分享Adobe Swatch Exchange(副檔名為.ASE)格式的色彩計畫交換檔。

ASE色彩交換檔

.ASE檔的主要用途,是提供一個在不同的應用程式之間,複製和分享色票的方案。在目前的所有Adobe CS2(和未來的新版本)系列產品中,都可以從Swatches面版的彈出式選單,選擇Save Swatches for Exchange指令,匯出色盤顏色。匯出色票之前,應該要先刪除色盤裡不必要的顏色(例如,兩個軟體色盤之中都有定義的顏色,就沒有必要匯出)。若要匯入.ASE檔,以Adobe Illustrator CS2為例,從Swatches面板的彈出式選單,選擇Open Swatches Library > Other Library指令,即可瀏覽並開啟指定的.ASE檔。

使用Kuler時,您必須先建立一個Adobe帳號,才能在該網站儲存和下載您喜愛的色彩計畫,並且與他人分享。下圖是Kuler的瀏覽介面,您可以從左邊的導覽列,依照歡迎程度(Popluar)、最高評比(Highest Rated)和最新發佈(Newest)方式來瀏覽。

Kuler軟體的操作介面

找到您想要的色彩計畫之後,只需按下 下載 按鈕,即可下載.ASE檔。或者,按下 編輯 按鈕,進入「色彩建立模式」修改色彩。您也可以直接按下左邊導覽列上的Create(建立)選項,從頭建立自己的色彩計畫。下圖是「色彩建立模式」的操作畫面:

kuler的操作介面

色相環左邊的選項,包含幫助您配色的一些預先設定好的色彩規則,如下:

  • Analogous(類似色):擷取色環上的鄰近色彩。
  • Monochromatic(單色):藉由改變單一色相的彩度和明暗度來建立色彩計畫。
  • Triad(三色組合):取色相環的三角空間中的顏色建立對比色。
  • Compound(複合色):結合不同的色相,產生有趣的配色。
  • Complementary(互補色):從色相環中的兩個相對邊的顏色建立色彩計畫。
  • Shades(明暗層次):依照主色的色相,產生不同明暗程度的變化色。
  • Custom(自訂):讓您自由拖曳色環上的個別色彩來建立顏色組合。

色環上的小圓圈,分別代表目前已選取,並顯示在畫面中間的五種顏色色塊。有兩層圓圈的那個顏色是主色(base color)。您可以在點選方形色塊後,按下上方的"Set As Base"按鈕,將該色設定成主色。

和Kuler比較,Flash和Dreamweaver軟體內建的調色盤和配色工具,實在太死板了,這麼好的東西應該要直接內建在軟體裡面才對。Flash(以及Dreamweaver)並不支援.ASE檔,若要使用這些色彩計畫,最方便的作法就是使用Illustrator匯入.ASE檔,並直接用該軟體繪圖,再匯出圖檔給Flash做動畫。或者,記下位在「色彩建立模式」底下的RGB欄位中的各顏色值,並以手動方式輸入到Flash的調色盤。

除了Kuler,Tutorial Blog網站列出了多達30種給設計師的配色工具和網站資訊。

需要配色靈感?快上Adobe Kuler網站!” 有 10 則回應:

  1. 小店長

    老師,我在致理有參與您的課程(幫你弄廣播系統那個),這個網站真的很棒
    感謝您的介紹,知道了這麼棒的資源~真是太方便了
    謝謝

  2. 別這麼說…您是楊經理嗎?我以前有被廣播教學系統被打敗的經驗,你們的系統真是超讚的!

  3. Pingback: 色彩小工具3:Kuler

  4. Pingback: 提供配色的網站 « 寰葛格的分享空間

  5. Pingback: 線上調色盤kuler « Jimmy Hsia

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">