使用Photoshop的「畫面錯位(Offset)」濾鏡製作網頁無接縫背景圖

使用Photoshop的「畫面錯位(Offset)」濾鏡製作網頁無接縫背景圖
文∕趙英傑

網頁的背景圖片預設將自動堆砌、佈滿整個視窗。若將網頁背景設定成底下的圖樣:

無接縫背景

畫面將呈現如下圖的對稱拼貼樣式:

透過Photoshop內建的「畫面錯位(Offset)」濾鏡,就能輕鬆地將圖像轉換成無接縫的拼貼背景。以Photoshop CS3版本製作上面的雪花圖像為例,步驟如下(註:舊的Photoshop版本操作步驟一樣,只是匯出Web圖像的指令不同罷了):

  1. 開啟範例檔(請按此連結下載)裡的snow.psd檔。筆者已經事先在其中放置一個雪花圖案。此圖檔的尺寸是150 x 150像素。

  2. 選擇「濾鏡(Filter)→其他(Other)→畫面錯位(Offset)」指令。將水平(Horizontal)與垂直(Vertical)位移都設定成75像素,並使用預設的「折回重複(Wrap Around)」選項,讓原本位於中央的圖像分佈到四個角落。

    畫面錯位(offset)面版

  3. 按下「確定」鈕,即可完成四角無縫拼貼的圖案。

  4. 開啟"snowFlack.png"範例檔,並選用「移動工具」,把snowFlake.png檔案視窗裡的雪片圖像,直接拖放到snow.psd視窗裡面。

  5. 選取「圖層」面版裡的兩個圖層,再按下「移動工具」屬性面版上的「對齊垂直居中」與「對齊水平居中」按鈕,讓剛才的雪花圖案居中對齊。
  6. 選擇「檔案→儲存為網頁與裝置用」指令,匯出GIF或PNG格式的圖像。

補充說明,雪花圖案最簡易的做法,是到P22網站下載雪花字體並安裝之後,在Photoshop中選擇該字體(P22 Snowflakes),就能直接敲打出各式各樣的雪片了。

畫面錯位(Offset)」中的水平和垂直錯位並不一定要對稱,以下圖為例:

製作時,先在畫面上先繪製一個矩形:

再選擇「畫面錯位」指令,設定水平和垂直錯位值:

畫面錯位(offset)

將獲得下圖的結果:

重複這兩個步驟,直到滿意為止:先繪圖,再執行「畫面錯位」指令,最後就能完成手繪無接縫的拼貼背景圖了。

Posts created 467

7 thoughts on “使用Photoshop的「畫面錯位(Offset)」濾鏡製作網頁無接縫背景圖

  1. 大大,我想問如果要用紙質或石質的圖片(像你這頁的背景)作為網頁無縫背景也是一樣的作法ㄇ?:roll:多謝大大不另賜教!

  2. 如果你是使用Adobe Photoshop CS2或以前的版本,最快的方法是透過Adobe ImageReady的Tile Maker濾鏡。

    在Photoshop中,將影像素材轉換成無接縫的網頁背景,同樣是採用「畫面錯位(Offset)」濾鏡,參數設定也一樣:讓影像錯位寬、高的一半。

    錯位後的影像接縫應該會很明顯。你可以用「仿製印章工具」、筆刷、模糊…等工具,以及圖層遮色片等影像處理技巧來消除圖像之間的接縫。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top