步驟一 網站首頁效果圖的制作

依據網站風格定位及客戶欄目設置要求，首頁效果圖圖像文件規格設置為，寬度776像素，高度1697像素，分辨率72像素/英寸。

一、網站Logo和Banner的制作

網站首頁的Logo和Banner部分均為ImageReady動畫部分，按照動畫尺寸及網頁布局要求分別預留出776×130和776×93像素區域，并用文字標注上即可，效果如圖1-4所示。

二、文字導航欄的制作

本網站導航欄由一個背景圖像bg1.Jpg及導航文字構成。

圖像bg1.Jpg的制作步驟如下。

（1）創建新圖層，繪制776×26像素的矩形。

（2）填充顏色RGB（105，183，222）→白色的漸變，填充方式為對稱漸變，如圖1-5所示。

（3）輸入導航文字，字符格式設置如圖1-6所示。

（4）文字導航欄最終效果如圖1-7所示。

三、視頻新聞欄目的制作

（1）創建新圖層，繪制大小為200×207像素的矩形，填充漸變色RGB（105，183，222）→RGB（182，239，219）。

（2）創建新圖層，利用磁性套索工具從小圖片文件夾中選出所用圖片，設置外發光圖層樣式，適當調整大小，如圖1-8所示。

（3）利用橫排文字工具，輸入“視頻新聞”文字，字符格式如圖1-9所示。

（4）輸入文字MORE，字符格式如圖1-10所示。

（5）上方圓角矩形部分的制作。創建新圖層，利用矩形選框工具，制作一個填充白色、大小為177×10像素的矩形，如圖1-11所示。

（6）創建新圖層，利用橢圓選框工具，在白色矩形兩側制作一個橢圓選區，大小適當，以弧度適宜為準，如圖1-12所示。

（7）填充白色，同理新建圖層制作條形右側的圓角部分，將上面三個圖層合并為一層，矩形水平下方的白色區域可以刪除，并更名為“上方圓角矩形部分”，如圖1-13所示。

（8）創建新圖層，利用矩形選框工具，制作一個填充為白色、大小為190×142像素的矩形。將上方圓角矩形部分復制，將復制后的圖層垂直翻轉、移至下方，輸入視頻新聞文字導航內容，該欄目最終效果如圖1-14所示。

小提示

四、校園快訊欄目的制作

（1）欄目標題按鈕的制作。創建新圖層，繪制78×20的矩形，填充RGB（125，195，229），利用多邊形選框工具，在該圖形的右上角并刪除。為該圖層添加斜面和浮雕如圖1-15所示，圖案疊加如圖1-16所示圖層樣式，輸入文字“校園快訊”，欄目標題按鈕最終效果如圖1-17所示。

（2）斜切矩形圖標的制作。先繪制一個小正方形，填充灰色，再為其進行斜切的變形，然后復制為新圖層，鎖定透明像素，填充稍淡一些的灰色，如圖1-18 所示。同理再復制出一新圖層，填充更淡的灰色，斜切矩形圖標最終效果如圖1-19所示。

（3）灰色長方形及下方細線的制作。創建新圖層，用矩形選框工具選取矩形選區，填充RGB（231，231，231）。用鉛筆繪制1像素、RGB（148，148，148）的細線，效果如圖1-20所示。

（4）欄目右側的小圖標“MORE”的制作與新聞視頻欄目的制作方法相同，由讀者探索完成。

（5）圖片及背景邊框的制作。利用矩形選框工具繪制矩形，用1像素、灰色RGB（204，204，204）居中描邊。

（6）導入相應的圖片，制作灰點細線，并輸入文字內容，該欄目最終的效果如圖1-21所示。

小體驗

小體驗

五、圖片滾動區域的制作

（1）按新聞視頻的制作方法繪制圓角矩形，填充的顏色為RGB（105，183，222），創建新圖層，繪制兩條顏色為RGB（105，183，222）的豎線。網格參數的設置如圖1-28所示。

（2）利用光標對網格和參考線的捕捉原理，用鉛筆工具繪制4像素的白點如圖1-29所示。

（3）復制上方的圓角矩形，移至滾動圖片區域下方，并垂直翻轉。創建新圖層，按網頁布局要求預留出776×140像素的區域，此為滾動圖片區域，可利用JavaScript腳本來編輯，用文字標注即可。最后得到圖片滾動區域的效果如圖1-30所示。

六、知識小寶庫欄目的制作

（1）欄目標題的制作方法同上面新聞視頻的制作方法。

（2）“心理健康”按鈕的制作。創建新圖層，繪制90×31像素的矩形，并填充前景色RGB（125，194，229）；在小圖片文件夾中利用磁性套索工具選取欄目標題前小圖片，通過魔棒工具刪除小圖片周圍多余的白色，調整其大小和位置，輸入文字“心理健康”，即得“心理健康”按鈕。“綠色觀察”等其他按鈕的制作方法同“心理健康”按鈕，效果如圖1-31所示。

小提示

七、圖片導航欄的制作

（1）創建新圖層，選擇圓角矩形工具，半徑為10像素，繪制圓角矩形路徑，如圖1-32所示。

（2）按“Ctrl+Enter”鍵轉換為選區，如圖1-33所示。

（3）填充白色RGB（105，183，222）的漸變色，并進行1像素、RGB（105，183，222）的描邊，如圖1-34所示。

（4）添加圖片后處理為大小一致，最后效果如圖1-35所示。

八、網站鏈接導航條的制作及版權信息的制作

在此部分內容中輸入文字內容、導入數字圖片調整布局即可，如圖1-36所示。