2010年6月1日 星期二

製作網頁背景圖-使用Photoshop

ps40034 每次常常會有學生會在上Photoshop的時候會問,如何把圖放到Dreamweaver,反之上Dreamweaver的時候,同樣的問題會發生@@”....我認為這很正常.
所以透過簡單的方式說明要如何從Photoshop製作背景圖,完成後匯出到Dreamweaver,所以如果你會Photoshop、Dreamweaver也可以參考看看喔!


1.首先開啟一個新的文件,尺寸設定為寬100像素、高100像素,解析度為72像素/英寸。
ps40025

2.執行「圖層 / 新增填滿圖層 / 純色」,請選擇需要的色彩填色。
ps40026

3.填入色彩後就會產生一層填滿圖層。
ps40027

4.回到工具箱上,選擇矩形工具。
ps40028

5.在屬性列上選擇「形狀填滿圖層」,色彩選擇比背景色深的色彩。
ps40030

6.在畫面中建立水平與垂直的形狀。
ps40031

7.產生後的結果如圖例。
ps40032
 
8.將圖層混何模式變更成色彩增值,不透明度為50%左右。
ps40033

9.套用後的結果呈現如下。
ps40034

10.製作完成後就可以從Photoshop中儲存為網頁與裝置用。
ps40035

11.將檔案儲存為JPG。
ps40036

12.開啟Dreamweaver 中建立一個新頁面,選擇「修改 / 頁面屬性」。
ps40037

13.因為本範例僅展示完成結果,所以不考慮使用CSS。請選擇外觀(HTML),選擇剛才製作完成的bg.jpg檔案。
ps40038

14.套用完成後就會重覆並且佈滿到背景囉!
ps40039

沒有留言:

張貼留言