PatternCooler – 多種精美背景圖案下載,可自訂顏色和呈現樣式!

PatternCooler

作者/瓜南(2009-07-04)

PatternCooler提供多款精美樣式的重複圖案下載,如果你喜歡圖案的樣式,但是對顏色不滿意,可以透過線上編輯器進行編輯,也可以對圖案的大小、位置等等進行修改。除了PatternCooler提供的圖案外,網站上也儲存了經由別人編輯過的圖案,全部圖案加起來共有幾萬種,數量不少。十分有趣的是,你在瀏覽網站時將會發現到 PatternCooler 的頁面每換一次,背景就會變化一次。

編輯、下載 PatternCooler 的圖案無須進行註冊,不過如果註冊了就可以保存自訂的顏色和圖案,比較方便。

PatternCooler 的註冊十分簡單,點選左上角的 Log in,如果你已經有帳戶,就可以在左邊登入(Login)欄直接登入你的帳號和密碼。如果沒有帳號,點 Create Account 建立新帳號,之後在註冊頁面(Register)分別填入帳號(Username)和密碼(Password)以及電子信箱(Email),最後在點加入(Join)就可以了。註冊 PatternCooler 不需要經過電子信箱驗證。

點選左上 Log In 可登入帳號,或註冊帳號

Register 表單,填入帳號、密碼與信箱即可

在 PatternCooler 上搜尋圖案,可以以tags搜尋,也可以直接根據預覽圖案進行瀏覽。PatternCooler的圖案標籤十分詳細。

直接以tags搜尋圖案,或瀏覽所有設計

每個預覽圖案下面都有工具欄,從左至右分別為:

  • 下載(Download this pattern):直接下載你所看到的圖案,不進行編輯。
  • 預覽(View pattern):以選擇的圖案為背景預覽效果。
  • 加入收藏(Add pattern to account):把圖案收藏到自己的帳號中,方便下次使用。
  • 自訂顏色(Color edit this pattern):重新設定圖案顏色。
  • 重設圖案尺寸(Resize this pattern):對重複圖案的最小尺寸進行自訂。
  • 製作畫布(Create canvas):與調節尺寸類似,而且可以對圖案位置進行設定。不過這一項的實際用途不大。

預覽圖下方的工具列

要對圖案進行編輯,可以點選工具欄的自訂顏色(Color edit pattern)或者直接點選圖案的略縮圖,進入編輯頁面。編輯頁面需要安裝Adobe SVG Viewer,如果你使用的是Firefox 3以上的瀏覽器,那麼無需另外進行安裝;如果使用的是IE,那麼則需安裝。一般情況下,會自動跳出安裝視窗,點選接受 Accept 就可以安裝囉。

安裝 Adobe SVG Viewer

打開顏色編輯器後,開始對圖案不同部份的顏色進行設定,如果你已登入帳號,那麼可以點顏色下面的 + 儲存設定好的顏色。如果你對調色盤不熟悉,或者已有喜愛的顏色,可以直接在右下角輸入顏色的值(hex),然後點 Apply hex ,自訂完顏色就可以點下一步 Next Step,設定圖案大小。

編輯器可以自訂圖像顏色

分別點選200%、150%、100%等可以即時預覽不同大小的圖案組成的背景效果,選定大小後,就可以點旁邊的 Apply size。

即時預覽不同大小的背景效果

設定大小之後,就可以下載設定好的圖案了(Download this pattern),也可以重新對顏色進行設定編輯(Color edit this pattern),或者收藏到自己的帳號內(Add to my account)。點選 Home 或者 Browse pattern library 可以返回主頁面瀏覽其他圖案。

下載圖案、重新編輯或是收藏到帳號內

要查看收藏過的圖案,只需點選左上角的 My Account,就可以進入瀏覽。

點左上角的 My Account 可以查看收藏過的圖案

【網站網址】PatternCooler

  • http://blog.iegoffice.com/ 拆組達人

    這個拿來當網頁背景比較習慣!

    電腦桌面我還是比較喜歡放美女圖!:p

  • http://www.s88o.com 小熊博客

    好复杂~不过感谢教程做到那么详细~