《電腦美術》第17章網(wǎng)頁設計與ImageReady的應用

本文格式為Word版，下載可任意編輯——《電腦美術》第17章網(wǎng)頁設計與ImageReady的應用

第17章網(wǎng)頁設計與ImageReady的應用

17.1利用Photoshop設計網(wǎng)頁17.2ImageReady快速入門17.3網(wǎng)頁banner動畫制作

第17章網(wǎng)頁設計與ImageReady的應用

本章目標網(wǎng)頁設計已經(jīng)逐漸成為一個熱門的話題，而Photoshop又是設計頁面的重要工具。通過前面的學習，相信大家利用Photoshop來制作網(wǎng)頁的頁面已經(jīng)不是什么問題了，本章的主要目標是講解如何切片和優(yōu)化網(wǎng)頁圖片，以及如何制作Web畫廊和GIF動畫等。

17.1利用Photoshop制作個人主頁

制作個人主頁制作一個介紹圖形圖像的個人主頁。在實例中，主色調(diào)選用了藍色，藍色能給人一種恬靜、理智、永恒、博大的感覺。同時，運用白色、藍色和其它顏色的搭配，使網(wǎng)頁顯得典雅、溫馨。

17.1利用Photoshop制作個人主頁

設計標題欄

創(chuàng)立新的圖像文件啟動Photoshop,執(zhí)行|命令，創(chuàng)立一個新的圖像文件，如下圖。設置完后，單擊按鈕。

創(chuàng)立參考線

執(zhí)行||命令，彈出對話框，設置為“title〞

17.1利用Photoshop制作個人主頁

設計標題欄新增,選擇工具箱中的,在欄中設置為,為“770像素〞,為“100像素〞,在中創(chuàng)立一個選區(qū)，如下圖。創(chuàng)立一個矩形選區(qū)

按Ctrl+R鍵，開啟標尺，用鼠標從橫向標尺上拉出一條參考線，如圖所示。創(chuàng)立參考線6

17.1利用Photoshop制作個人主頁

設計標題欄制作背景圖案按Ctrl+R鍵，隱蔽標尺，設置前景色為白色，按Alt+Delete鍵，用前風景填充選區(qū)。按Ctrl+D鍵，取消選擇，在面板中新增,用繪制出路徑，如下圖。

繪制出路徑1

在面板中新增,用繪制出路徑，如圖。

繪制出路徑2

17.1利用Photoshop制作個人主頁

設計標題欄在面板中，新增。按住Ctrl鍵，單擊面板中的,將路徑轉(zhuǎn)化為選區(qū)。選擇工具箱中的,在欄中單擊按鈕，彈出對話框，在漸變色條下，設置左端色標的RGB值為(235,241,246),右端色標的RGB值為(135,185,248),其它參數(shù)設置如下圖。

設置漸變色

設置完后，單擊按鈕。按住Shift鍵，用鼠標從選區(qū)的頂端拖拉到底端，創(chuàng)立漸變，按Ctrl+D鍵，取消選區(qū)，如下圖。

從上到下的漸變效果8

17.1利用Photoshop制作個人主頁

設計標題欄新增,按住Ctrl鍵，在面板中

單擊,將路徑轉(zhuǎn)變?yōu)檫x區(qū)。選擇工具箱中的,在欄中單擊按鈕，開啟對話框，在漸變色條下，保持左端色標的顏色不變，設置右端色標顏色的RGB漸變填充效果值為(170,204,248),單擊按鈕。按住Shift鍵，用鼠標從選區(qū)的上端拖拉到選區(qū)的下端，創(chuàng)立漸變效果。在的參數(shù)層】面板中，將調(diào)整到的下面，按Ctrl+D鍵，取消選擇，效果如圖選擇工具箱中的,在工具欄中，設置參數(shù)如下圖。用鼠標涂抹過渡不自然的區(qū)域，潤飾圖像，效果如下圖。

潤飾圖像后的效果9

17.1利用Photoshop制作個人主頁

設計標題欄制作LOGO文字選擇工具箱中的,在欄中設置文字顏色為黑色，輸入文字，如下圖。輸入“圖像愛好者天堂〞

執(zhí)行||命令，單擊按鈕，開啟對話框，設置左端色標的RGB值為(20,91,210),右端色標的RGB值為(255,255,255),如下圖。

設置漸變色10

17.1利用Photoshop制作個人主頁

設計標題欄選擇選項，設置為“2像素〞,的RGB值為(187,214,247),其它參數(shù)設置如下圖。設置描邊參數(shù)

設置完后，單擊,效果如圖所示。

設置圖層樣式后的效果

17.1利用Photoshop制作個人主頁

設計標題欄

單擊,輸入網(wǎng)址，如下圖。

輸入網(wǎng)址

制作圖標

開啟“網(wǎng)頁圖標.psd〞文件，如下圖。

開啟“網(wǎng)頁圖標.psd〞

將開啟的圖像復制到“個人主頁.psd〞文件中，在面板中自動創(chuàng)立了。在圖層組中，把調(diào)整到的上方，調(diào)整圖形位置，效果如下圖。

導入的圖片效果12

17.1利用Photoshop制作個人主頁

設計標題欄

在工具箱中選擇,輸入文字，設置文字顏色為白色，如下圖。

制作導航欄

輸入文字

在面板中新增,選擇工具箱中的,在欄中設置為,為“770像素〞,為“25像素〞,在參考線頂部創(chuàng)立一個選區(qū)，如下圖。

創(chuàng)立一個選區(qū)

17.1利用Photoshop制作個人主頁

設計標題欄

執(zhí)行||命令，去掉命令右邊的小勾，隱蔽參考線。選擇工具箱中的,在欄上單擊按鈕，打

開對話框，在漸變條下方，添加兩個漸變色標，分別設置它們的為“45%〞和“80%〞,從左到右，分別設置四個色標的RGB值為(123,158,186)、(198,220,233)、(225,241,255)、(123,150,169),如圖所示。

設置編輯色

設置完后，單擊按鈕。按住Shift鍵，用鼠標從選區(qū)的上端拖到下端，對選區(qū)進行漸變填充，按Ctrl+D鍵，取消選擇，效果如下圖。

對選區(qū)進行漸變填充14

17.1利用Photoshop制作個人主頁

設計標題欄

選擇,輸入欄目名稱，如下圖。

輸入欄目名稱

執(zhí)行||命令，在彈出的對話框中設置為“1像素〞,為白色，如下圖。

設置描邊參數(shù)15

17.1利用Photoshop制作個人主頁

設計標題欄

設置完后，單擊按鈕。在面板中選擇,選擇工具箱中的,在欄中設置為,為“2像素〞,為“18像素〞,設置完成后創(chuàng)立一個選區(qū)，如下圖。

創(chuàng)立一個選區(qū)

執(zhí)行||命令，在彈出的對話框中設置參數(shù)如下圖。

設置色階參數(shù)

17.1利用Photoshop制作個人主頁

設計標題欄

設置完后，單擊按鈕。執(zhí)行||命令，在彈出的對話框中設置為“1.0像素〞,如下圖。

設置高斯模糊參數(shù)

單擊,按Ctrl+D鍵，取消選擇，效果如下圖。

設置高斯模糊后的效果17

17.1利用Photoshop制作個人主頁

設計標題欄

用同樣的方法，制作出其它分隔條，如下圖。

分隔條效果

17.1利用Photoshop制作個人主頁

設計頁面

創(chuàng)立新圖層組

在面板中，單擊圖層組左邊的小三角箭頭，隱蔽圖層組中的子圖層，執(zhí)行||命令，在對話框中，輸入為“body〞,單擊按鈕。在圖層組中，新增。選擇工具箱中的,在欄中設置為,為“770像素〞,為“420像素〞,創(chuàng)立一個選區(qū)，如下圖。

創(chuàng)立一個選區(qū)

17.1利用Photoshop制作個人主頁

設計頁面

執(zhí)行||命令，顯示參考線，用上面學過的方法，在選區(qū)的頂部和底部創(chuàng)立兩條參考線。在工具箱中設置前風景為白色，按Alt+Delete鍵，用前風景填充選區(qū)。按Ctrl+D鍵，取消選擇，

效果如圖11.32所示。

創(chuàng)立參考線并填充選區(qū)

制作分隔線

接下來制作分隔線。在面板中單擊圖層組和圖層左面的眼睛圖標，將它們隱蔽起來。在面板中，選擇圖層組中的,按下中的按鈕，如圖所示。

17.1利用Photoshop制作個人主頁

設計頁面

創(chuàng)立兩條垂直的參考線，如下圖。在工具箱中選擇,在左邊的垂直參考線上單擊，創(chuàng)立一個單列選區(qū)，如下圖。

創(chuàng)立兩條垂直的參考線

在參考線上創(chuàng)立單列選區(qū)

在面板上新增,在工具箱中設置前風景的RGB值為(0,72,101),按Alt+Delete鍵，用前風景填充選區(qū)。用同樣的方法，在右側(cè)的參考線上創(chuàng)立單列選區(qū)，再填充前風景，刪除透明區(qū)域中的填充色，效果如下圖