無接縫圖案的製作

 

一、前言：

無接縫圖案一般的用法為用於網頁的背景，或是當作桌面的桌布。

 

<html>

<body background =“ pic1.gif”>

<img src= “penguin.jpg>

</body>

</html>

 

 

l          以上html的原始碼會以pic1.gif圖案堆砌出網頁的背景

pic1.gif

 

 

二、無接縫圖案的原理：

單一張pic1.gif

 

l          淡藍色不規則多邊形

 

l          為何出現這個無接縫圖案？

l          D區塊與另外三張pic1.gif的B區塊、A區塊、C區塊的圖案接在一起。

單一張pic1.gif

 

l          米黃色不規則多邊形

 

l          為何出現這個無接縫圖案？

 

 

l          F區塊圖案與另一張影像E區塊圖案接在一起。

 

以無接縫圖案當背景時需注意若網頁的前景圖案與文字為暗色系時，則背景應選亮色系的圖，反之，若網頁的前景圖案與文字為亮色系時，則背景應選暗色系的圖。

 

三、製作無接縫圖的方法：

這一節主要是要講Offset這個功能可以幫助製作無接縫圖。

l          這是Larry Ewing所繪的企鵝，來源處http://www.gimp.org/gallery.html。

l          [image] -> Image -> Transforms -> Offset，點選Wrap Around，按下Offset by (x/2),(y/2)的按鈕。

l          測試一下效果：

l          執行[image] -> Filters -> Map -> Tile，產生Tile對話盒。

l          原本影像的大小131x144，將長與寬都放大4倍，Width設5 24、Height設576。產生右圖，16隻企鵝。

 

 

四、再接再勵：

在第三節所產生的企鵝的無接縫圖顯得很單調，我們來做些變化。

本圖由以下七個圖層疊起

 

l          首先，準備一張底色為透明的企鵝圖案。

l          複製多個底色為透明的企鵝圖案的圖層。

圖層1

l          Offset by (x/2),(y/2)

圖層2

l          縮小並移動

圖層3

l          縮小、左右反轉並移動。

圖層4

l          縮小、左右反轉並移動。

圖層5

l          移動。

圖層6

l          左右反轉並移動。

圖層7

l          用Ice pattern填滿。

 

執行[image] -> Filters -> Map -> Tile，測試一下。