2013年7月11日 星期四

聯成電腦講師專欄:無接縫背景素材製作

文/圖、RORY 撰 
使用軟體、illustrator
0825pic0001.jpg  
0825pic0000.jpg   


       一般在製作像桌面連結性圖案,或是網頁連網性圖案之背景圖時,有大部份會考量到載入的速度,如果檔案愈大,相對載入的速度就會愈慢。另外還得考慮到如連續性圖案製作成一般常用的大小640*480 ,或是 1024*768,而只要製作成無接縫的連續圖,就不用考慮到解析度大小的問題與檔案大小的問題了。
     那先來試試看,如果去制作出一張不錯的無接縫圖,請先設定版面大小,因為是要製作成電腦上的用圖而己,色彩模式請設為RGB即可以,版面大小:200*200。(也可以自訂,不過等會了就去改吧!)
0825pic0002.jpg  0825pic0003.jpg  
可以先放入先須要的素才,那就不用一個個的去做滙入的動作,置入的圖最好是有透明背景的(去背就要在PHOTOSHOP中製作)。
0825pic0004.jpg  
第一步開始囉!把其中一個素圖放在版面的邊綠上,要怎麼放都可以,不過記得是要放在四個角落其中一個,這裡我們先放在左上角處!
0825pic0005.jpg  
在做之前先記一下幾個快速鍵。
SHIFT+F8:變形面版(視窗工具)
CTRL+C:拷貝(網輯工具)
SHIFT+CTRL+V:原地貼上(網輯工具)
先使用CTRL+C:拷貝複製圖案,再使用SHIFT+CTRL+V:原地貼上,這樣子圖才不會變成只有一張在那移動而己。再打開SHIFT+F8:變形面版,這時圖案還是要在選取的狀態之下。接下來,就只要控制變形面版上的X與Y就好了。因為版面是設定200*200所以X與Y的值輸入要以200的數值下去做加減。
0825pic0006.jpg  
●左上
1.CTRL+C:拷貝
2.SHIFT+CTRL+V:原地貼上
3.X:加上200
0825pic0007.jpg  
●右上
1.CTRL+C:拷貝
2.SHIFT+CTRL+V:原地貼上
3.Y:加上200
0825pic0008.jpg  
●右下
1.CTRL+C:拷貝
2.SHIFT+CTRL+V:原地貼上
3.Y:減去200
0825pic0009.jpg  
再來做上下邊上的無接綘,上下一定是同一張圖。
0825pic00010.jpg 
●上
4.CTRL+C:拷貝
5.SHIFT+CTRL+V:原地貼上
6.Y:加上200
0825pic00011.jpg

再來做左右邊上的無接綘,左右一定是同一張圖。
0825pic00012.jpg  
●右中
4.CTRL+C:拷貝
5.SHIFT+CTRL+V:原地貼上
6.X:加上200
0825pic00013.jpg  
而其餘沒切到的圖,放置的位子就由自己的喜好下去放就好了。
0825pic00014.jpg  
最後使用[檔案]\[儲存為網頁與裝置用]。輸出的格式最好為GIF或PNG,因為只有這兩個圖形格式有支援透明背景。0825pic00015.jpg  
而怎麼去做測試呢?我們可以用最簡單的工具,WINDOWS卓面來做測試。在卓面上沒有圖示的地方,按下滑鼠的右鍵,會出現一個快速選單,使用選單的個人化(基本上應是在選單最下方)。
設定卓面背景,要使用並列顯示,選到所製作好的圖上即可。
0825pic00016.jpg  
完成了一張美美的無接縫背景圖了。

2 則留言: