早期電腦桌布與網站很常見的背景樣式,是一種透過很小的一張圖片,來連續重複拼湊出來漂亮的背景圖,而這樣的方法既使是現在也常常用來作為網頁的背景使用,除了可以有效地降低網頁的大小還能維持住設計的美感,可謂是一石二鳥。最近站長發現了一個非常不錯的網站,可以讓使用者自行設計出這種類型的平鋪式背景圖,而且成品非常的漂亮,所以讓站長不得不介紹一下「Patterninja」這個服務。
Patterninja 是一個免費的線上平鋪式背景圖製作工具,可以幫助使用者自行設計出喜愛的平鋪式背景圖,而且能使用的功能非常多樣,像是:背景顏色的調整、精美豐富的圖示庫、圖層的設定及各種圖片參數的調整…等等。哪怕不是一名設計人員也可以輕鬆製作出一張屬於自己的漂亮背景圖,趕快來試試看吧!
網站鏈結:https://patterninja.com/
使用教學
STEP 1
進到 Patterninja 後,請先點擊下方的「Skip tutorial」按鈕來跳過網站的教程。

STEP 2
Patterninja 的主畫面中,所有的功能選項都位於網頁的右上方,首先我們需要點選第一個選項來新增一個全新的背景圖,準備好發揮自己的創意了嗎!

STEP 3
第二個選項可以調整圖片的背景顏色,使用者可以在調色盤中選擇或是直接輸入顏色色碼。

STEP 4
第三個選項中,使用者可以使用 Patterninja 所提供的圖示庫,裡面有許多精美且豐富的圖示可以使用,只要點擊喜歡的圖示 Patterninja 就會自動將其加入到背景圖中。

STEP 5
然後使用者可以點擊加入了背景圖中的圖示,並使用拖曳的方式來調整圖示到想要的位置。

STEP 6
第四個選項可以調整圖示的圖層,使用者如果有需求可以示情況來使用。

STEP 7
第五個選項可以調整背景圖的各種參數,像是:長度、寬度、放大比例、使否顯示界限或網格…等。如果選取圖示後再點擊選項,還可以調整圖示的 X、Y 軸與角度這些進階的設定。

STEP 8
最後的四個選項除了第一個的下載選項外,其他的都必須登入帳號才能使用。當圖片製作完成後,使用者可以先點擊下載選項將背景圖給下載回來。

STEP 9
Patterninja 提供 SVG、PNG 兩種圖片格式可以選擇,使用者可以依照自己需求來選擇,選擇完後請直接點擊「Download」按鈕來開始下載。

STEP 10
除了一般的圖片格式外,Patterninja 還提供了 Base64 的圖片編碼,使用者只要啟動了下方的 embed as data URI 選項,就可以直接複製 Base64 編碼來使用。

STEP 11
上面有提到 Patterninja 有一些功能需要使用者登入帳號才能使用,目前 Patterninja 僅支援了使用 Facebook、Twitter 和 Google 三種帳號來登入,讓使用者可以分享和保存曾經設計過的背景圖,有沒有這個必要還需要使用者自己來決定。

STEP 12
登入帳號之後可以在最後一個選項中查看到之前所設計過的背景圖,並可以重新下載使用。
