WWW 線上電腦講義

饒文忠 製作/版權所有


以 Photoshop 4.0 製作
首頁之背景圖案

前言

在 HTML 的語法中,背景圖案是在 <BODY> 的標籤裡定義的,
如 <body background="back1.jpg">
而 WWW 瀏覽器則會將此圖案以像是貼瓷磚的方式,
一張張拼起來填滿整個畫面。
網上有很多現成的背景圖案可抓來用,
可是都不如自己製作來得合用且有特色。
不過,這就要完全靠 Photoshop 影像處理的功力了!

�

本範例之目標:

        1. 製作水彩紙質感的背景影像(難度:10%)
          直接用 Filter 製作特效

        2. 製作類似紙雕的立體標題字(難度:50%)
          必須先定義字體陰影、反光的區域,
          然後再來改變背景的明暗反差
◆製作背景質感

�

� 一般而言,
背景影像檔案
不應太大,以免
影響載入的速度


















繪圖的背景顏色
也決定了
紙張的顏色
�



控制原有影像的深淺

控制皺的程度

控制皺的深度


  1. 執行 File/New,開啟一個新檔,內容如下圖:
  2. 工具列的背景顏色設定為 R=255, B=220, B=150
  3. 執行 Filter/Sketch/Note Paper... 即可,如下圖之設定:
  4. �

◆繪製文字

�

�

�

�

�

�

�

�

�


  1. 執行 Window/Show Channels,並開啟一個新的頻道:
  2. 按工具盒下方之新頁圖示
    之後會產生Channel #4,同時影像變成黑色

  3. 按來繪製文字,本範例因為中、英文使用不同的字體,故需執行兩次,一次寫英文(DomCasual BT),一次寫中文(華康美少女字體)。文字的虛線框產生後,需填入純白色。可執行 Edit/Fill... 並選擇填入白色。或者,將工具列的繪圖背景顏色改為白色,再按 Delete 鍵亦可。結果如下圖:
  4. 將工具列的繪圖背景顏色改為黑色,然後執行 Layer/Transform/Rotate 將字體旋轉約 -35°。
◆製作明暗區域

本例中假設光線
乃由螢幕之左上
方往右下方照射
故對下凹之字體
而言,#5應為陰
影,#6則為反光

�


  1. 按住頻道工具盒的右上方之並執行 Duplicate Layer...兩次,將 #4 複製成 #5 & #6。
  2. 選擇 #5 ,然後執行 Filter/Other/Offset...,使 X & Y 的偏移量各為 -1 pixel。執行 Select/Load Selection... 來載入 #4,然後按 Delete 鍵來填入黑色。剩下的白色區域將被拿來當作字體陰影部分的選取區域。如下圖:
  3. 選擇 #6,然後執行 Filter/Other/Offset...,使 X & Y 的偏移量各為 1 pixel。執行 Select/Load Selection... 來載入 #4,然後按 Delete 鍵來填入黑色。剩下的白色區域將被拿來當作字體反光部分的選取區域。如下圖:
◆改變明暗反差

�

背景圖案最好
不要太顯眼
以免影響文字的
可讀性


  1. 選擇 RGB,執行 Select/Load Selection... 來載入 #5。
    執行 Image/Adjust/Brightness/Contrast...,將亮度調整為 -100%,反差調整為 40%。如此陰影部分即完成。
  2. 執行 Select/Load Selection... 來載入 #6。
    執行 Image/Adjust/Brightness/Contrast...,將亮度調整為 100%,反差維持為 0%。如此反光部分即完成。
  3. 刪除 #4、#5、#6,並將整張影像的亮度調整為 -40%,反差調整為 -60%。讓背景圖案不要太顯眼。
  4. 存成 JPG 檔(壓縮為 3/medium)


返 回