第7章樂能企業網站頁面設計情景模擬樂能科技有限公司是一家專注于電子產品生產和研發的科技公司。在2014年該公司發布了第一版企業門戶網站，對內用于公司員工的信息交流，對外用于樹立企業形象和發布企業信息。隨著公司的發展，這版網站的各項功能和頁面風格已不能滿足公司的發展需要，亟待改版。小張所在創業團隊接到了樂能科技有限公司網站改版的項目，經與項目負責人充分溝通后，小張了解到該公司主要從事手機、電腦和相關配件的生產和銷售，網站改版目的是為了完善現有功能，添加購物功能，實現商品的在線銷售。項目負責人要求網站頁面的整體風格要簡潔、大氣，富有科技感，能夠讓用戶快速找到所需信息。掌握企業網站頁面的基本布局和頁面中各元素的設計方法掌握制作企業網站首頁與子頁的方法，能根據頁面內容安排版塊位置，添加裝飾元素掌握網頁切片和輸出的方法學習目標7.1前期規劃在設計網站頁面前，首先要了解樂能科技有限公司的企業性質、經營產品和改版目的，才可切實地對網站進行規劃，制定最合理的頁面設計方案。經分析改版需求，對網站結構做出如下規劃：7.1.1規劃網站結構5

6

樹立企業形象，展示商品：在網站導航欄中可以加入“關于樂能”和“新聞中心”模塊，為用戶提供了解企業信息的平臺。另外，除在首頁主體內容版塊中展示部分商品外，在網站導航欄中還加入“全部商品”模塊，在該模塊對應的頁面中，將全部商品進行分類展示，以便于用戶挑選。網站用戶權限：分為2個等級，一是游客，二是注冊會員。游客是未注冊用戶，需要注冊成為會員后才可購買商品。在網站首頁中加入“登錄”和“購物車”模塊，通過這兩個模塊，注冊會員可登錄賬號并管理購物車；游客用戶可進入“登錄”頁進行注冊，或進入“購物車”頁后跳轉至“注冊”頁進行注冊。注冊成功后，還可在“個人中心”頁完善各項信息。圖7-1網頁結構樹狀圖在線訂購功能：在網站導航欄中加入“全部商品”“服務中心”和“搜索”模塊，瀏覽者可通過這些功能進入對應頁面，完成商品的查找、選擇與咨詢等操作。首頁中的各功能模塊如圖7-1所示。具體說明如下：8

搜索：查詢產品、公告、新聞等信息。登錄：采集用戶信息，方便產品的銷售和售后服務。購物車：通過購物車功能用戶可一次性選購多件商品。關于樂能：展示企業相關信息，樹立企業形象。全部商品：分為“手機”“電腦”和“配件”3個子頁，用于商品的展示。新聞中心：分為“行業要聞”和“樂能資訊”2個子頁，用于發布即時業界行情，展示樂能最新動態。服務中心：分為“售前咨詢”和“售后服務”2個子頁，用于打消潛在用戶疑慮，為消費者保駕護航。規劃網頁布局時，可先從網頁尺寸考慮，然后設計首頁和子頁布局。7.1.2規劃網頁布局9

10

圖7-2首頁和子頁效果圖網頁尺寸：目前顯示器都為寬屏，可把網頁寬度設置為1920像素，版心寬度為1350像素。首頁布局：根據網站的功能定位，網站首頁的版塊可分為：頁首、Banner、商品展示和頁尾版塊，如圖7-2（a）所示。（a）11

圖7-2首頁和子頁效果圖子頁布局：根據網站內容，分為橫向導航欄、Banner、縱向導航欄、主體內容和頁尾版塊。如圖7-2（b）所示為“關于樂能”子頁。（b）顏色與字體能影響網頁的整體風格，在設計網頁前應做出合理規劃。7.1.3規劃網頁顏色與字體12

13

顏色：樂能屬于科技類公司，因此以大面積的灰色和白色作為網站主要顏色，體現高端、簡潔和科技感。其中，采用深灰色（#303030）作為頁面主色；淺灰色（#f5f5f5）作為背景色；白色（#ffffff）作為輔助色；從Logo中提取的藍色（#2c9fec）和黃色（#f9e369）作為頁面的點睛色。此外，主頁中通過商品背景的白色和網頁背景的灰色對比，明確商品版塊的分類；子頁中通過縱向導航欄的藍色（#2c9fec）和裝飾元素的黃色（#f9e369）與Logo呼應，讓頁面整體更契合公司理念。圖7-3標準顏色與字體14

字體：網站中的文字主要以展示企業信息和描述商品為主，因此無須使用過多裝飾的字體，只使用常規的微軟雅黑和宋體即可，以便閱讀，如圖7-3所示。7.2網站首頁制作下面通過制作樂能科技有限公司的首頁，學習介紹網站首頁的一般制作方法。視頻講解7.2.1制作頁首部分16

在Photoshop中新建圖像文檔，設置文檔尺寸為1920×2990像素，分辨率為72像素/英寸，顏色模式為RGB顏色，文檔名稱為“網站首頁”。設置前景色為#f5f5f5，按【Alt+Delete】組合鍵為“背景”圖層填充前景色。步驟117

圖7-4新建參考線在菜單欄中執行“視圖”>“新建參考線”命令，依次建立版心、導航欄、Banner和頁尾位置的參考線，如圖7-4所示。步驟218

按【Ctrl+O】組合鍵打開本章案例素材“樂能Logo.png”，使用“移動工具”將其移至“網站首頁”文檔中如圖7-5（a）所示的位置，然后在“圖層”面板中更改其圖層名稱為“Logo”。選擇“橫排文字工具”，在頁面最上方右側垂直參的左邊輸入“登錄購物車”（登錄與購物車間隔5個空格），按【Ctrl+Enter】組合鍵確定，然后在工具屬性欄中設置參數，如圖7-5（b）所示。步驟3圖7-5導入素材并輸入文字（a）（b）（c）#33333319

使用“矩形工具”在導航欄參考線區域繪制一個1920×60像素的矩形，在“屬性”面板中設置其填充顏色為#303030，描邊為無，并在“圖層”面板中更改其圖層名稱為“導航欄底色”，如圖7-6所示。步驟4圖7-6繪制導航欄底色圖形按【Ctrl+Alt+Shift+N】組合鍵新建圖層，使用“橫排文字工具”在左側垂直參考線上單擊并輸入“首頁”，按【Ctrl+Enter】組合鍵確定，然后在工具屬性欄中設置字體為微軟雅黑，字體大小為22點，顏色為白色，并單擊“左對齊文本”按鈕，使文本左對齊參考線。步驟520

在“首頁”文字右側繼續輸入其他導航項文字，然后使用“移動工具”調整“聯系我們”文字位置，將其移至左側參考線右側790像素處，接著在“圖層”面板選中除“登錄購物車”外的所有文字圖層，在工具屬性欄中分別單擊“水平居中分布”按鈕和“垂直居中對齊”按鈕，調整文字位置，效果如圖7-7所示。步驟6圖7-7輸入并調整文字位置21

繪制搜索按鈕。使用“矩形工具”在右側垂直參考線左側繪制一個寬高為74×37像素的矩形，在“屬性”面板中設置其填充顏色為#e6e6e6，描邊為無，然后按【Ctrl+Alt+Shift+N】組合鍵新建圖層，使用“橫排文字工具”在剛繪制的矩形上輸入“搜索”，按【Ctrl+Enter】組合鍵確定，并在“字符”面板中設置其參數，如圖7-8所示。步驟7圖7-8制作搜索按鈕#33333322

繪制搜索框。使用“矩形工具”沿搜索按鈕左側繪制一個寬高為242×37像素的矩形，在“屬性”面板中設置其填充顏色為白色，描邊為無，如圖7-9所示。按住【Shift】鍵，在“圖層”面板中分別單擊“矩形2”和“Logo”圖層，按【Ctrl+G】組合鍵編組，并更改組名為“頁首”。步驟8圖7-9繪制搜索框7.2.2制作Banner23

按【Ctrl+O】組合鍵打開本章案例素材“手機.psd”和“海豹.jpg”，使用“移動工具”將海豹圖像移至“手機”文檔中，并更改其圖層名稱為“海豹”，如圖7-10所示。步驟1視頻講解圖7-10打開素材文件24

圖7-11調整海豹圖像位置按【Ctrl+T】組合鍵調整海豹圖像的大小、角度和位置，按【Enter】鍵確定，如圖7-11（a）所示。在“圖層”面板中展開“手機”圖層組，按住【Ctrl】鍵單擊“屏幕”圖層縮略圖，制作屏幕選區，然后選中“海豹”圖層，單擊“圖層”面板下方的“添加圖層蒙版”按鈕，利用選區為“海豹”圖層添加圖層蒙版，效果如圖7-11（b）所示。步驟2（a）（b）25

提示制作電視、手機或電腦等帶有顯示器的商品廣告時，通常會將精美的，具有動感的照片素材置于屏幕中，通過圖層蒙版等手段處理圖像，能模擬破屏而出的效果。這種設計方法雖然操作簡單，但容易出效果。26

圖7-12設置畫筆參數并處理圖層蒙版選擇“畫筆工具”，在工具屬性欄中設置畫筆參數，如圖7-12（a）所示，然后在“圖層”面板中單擊選中“海豹”圖層的圖層蒙版，將前景色設置為白色，使用“畫筆工具”涂抹被蒙版遮住的海豹頭部，使其顯示出來，如圖7-12（b）所示。步驟3（a）（b）27

提示涂抹時用戶可配合按【Ctrl++】組合鍵方法放大圖像顯示區域；在涂抹錯誤時可按【Ctrl+Z】組合鍵后退一步，或按【X】鍵，切換前景色為黑色，涂抹錯誤區域，將其遮蓋。28

圖7-13調整圖像位置并輸入文字按住【Ctrl】鍵，在“圖層”面板同時選中“海豹”圖層和“手機”組，使用“移動工具”調整圖像位置，然后使用“橫排文字工具”在海豹圖像上方輸入“LEphone8”，按【Ctrl+Enter】組合鍵確定，并在“字符”面板中設置參數，接著在“LEphone8”文字下方輸入“新一代LE·phone”，確定后更改其字體大小為36點，如圖7-13所示。步驟4#1a1a1a29

圖7-14蓋印圖層并調整圖像顏色按【Ctrl+Shift+Alt+E】組合鍵蓋印圖層，然后在菜單欄中執行“濾鏡”>“CameraRaw濾鏡”命令，在“CameraRaw”對話框中設置參數，如圖7-14（a）（b）和（c）所示，單擊“確定”按鈕，效果如圖7-14（d）所示。步驟5（a）（b）（c）30

圖7-14蓋印圖層并調整圖像顏色（d）31

圖7-15制作Banner版塊并導入手機圖像使用“移動工具”將蓋印后的圖像移至“網站首頁”文檔的Banner版塊中，并在“圖層”面板中更改圖層名稱為“Banner”，效果如圖7-15所示。步驟632

圖7-16制作Banner輪播標識制作滾動點。使用“橢圓工具”在Banner圖像上繪制一個直徑為25像素的正圓，在“屬性”面板中設置其填充顏色為#2c8fec，描邊為無，然后按住【Alt】鍵，使用“移動工具”將正圓右移50像素，釋放鼠標復制正圓，接著在“屬性”面板中更改復制后正圓的填充為無，描邊顏色為#a0a0a0，描邊寬度為2點，如圖7-16所示。步驟733

圖7-17調整Banner輪播標識位置參考步驟7的操作，使用“移動工具”將灰色描邊的正圓向右復制兩次，各正圓之間間隔50像素，最后調整各正圓的位置，如圖7-17所示。步驟834

圖7-18繪制尖角形狀使用“矩形工具”在Banner左側繪制一個寬高為60×10像素的矩形，在“屬性”面板中設置其填充顏色為#eeeeee，描邊為無，然后按【Ctrl+T】組合鍵將其順時針旋轉45°，按【Enter】鍵確定，然后按【Ctrl+J】組合鍵復制該矩形，按【Ctrl+T】組合鍵，將復制后的矩形逆時針旋轉90°并確定，最后使用“移動工具”調整兩矩形位置，使之組成尖角形狀，效果如圖7-18所示。步驟935

圖7-19制作Banner切換圖標按住【Ctrl】鍵，在“圖層”面板中依次單擊同時選中“矩形3”和“矩形3拷貝”圖層，按【Ctrl+J】組合鍵將其復制，然后按【Ctrl+T】組合鍵進入圖像的自由變換狀態，右擊鼠標，從彈出的快捷菜單中選擇“水平翻轉”項，按【Enter】鍵確定，接著使用“移動工具”將復制后的圖形移至Banner右側，效果如圖7-19所示。步驟1036

按住【Shift】鍵在“圖層”面板中分別單擊“矩形3拷貝2”和“Banner”圖層，按【Ctrl+G】組合鍵編組并更改組名為“Banner”。步驟117.2.3制作產品分類部分37

制作標題參考線。在菜單欄中執行“視圖”>“對齊到”>“參考線”命令，然后使用“矩形選框工具”在Banner底部參考線下方繪制一個寬為任意像素，高為48像素的矩形選區，接著按【Ctrl+R】組合鍵顯示標尺，在水平標尺中下拖鼠標，將拖出的參考線與選區底部重合，如圖7-20所示。步驟1視頻講解圖7-20繪制標題參考線38

提示精準創建參考線的方法有兩種：①用菜單欄中的“新建參考線”命令創建精確的參考線；②按【Ctrl+R】組合鍵顯示標尺，使用選區工具制作指定寬度或高度的選區，將選區移至指定位置，在標尺中拖出參考線，使其與選區邊緣對齊，利用選區的寬度或高度確定參考線位置。此外，通過移動選區位置，還可制作不同位置的參考線。39

圖7-21制作水平參考線參考步驟1的操作在Banner底部參考線下方86、502、550、680和728像素處分別制作水平參考線，如圖7-21所示。步驟2電腦Banner版塊手機內容版塊手機標題版塊Banner版塊40

提示本例中的大版塊之間間隔為48像素。例如，Banner版塊和標題版塊、手機版塊和電腦Banner版塊。41

圖7-22制作垂直參考線使用“矩形選框工具”沿左側垂直參考線繪制一個寬為326像素，高為任意像素的矩形選區，然后在垂直標尺上右拖鼠標，將拖出的參考線與選區右側重合，再按此方法依次繪制與最左側垂直參考線相距342、668、684、1009和1024像素的參考線，將“手機版塊”分割成4個小版塊，如圖7-22所示。步驟3版塊版塊版塊版塊42

圖7-23輸入標題文字使用“橫排文字工具”在“標題版塊”左上角輸入“手機”，按【Ctrl+Enter】組合鍵確定，然后在“字符”面板中設置參數，接著在“標題版塊”右側輸入“查看全部”，確定后更改其字體大小為24點，如圖7-23所示。步驟4#66666643

圖7-24繪制查看全部圖標使用“橢圓工具”在“標題版塊”左上角繪制一個直徑為22像素的正圓，在“屬性”面板中設置其填充顏色為#666666，描邊為無，然后展開“圖層”面板中的“Banner”組，按住【Alt】鍵，拖動“矩形3拷貝2”圖層至“橢圓2”圖層上，接著按【Ctrl+T】組合鍵將“矩形3拷貝3”圖形縮小，并移至“橢圓2”圖形上，按【Enter】鍵確定，如圖7-24所示。步驟544

圖7-25制作版塊底色使用“矩形工具”在“版塊1”中繪制一個寬高為326×416像素的矩形，在“屬性”面板設置其填充顏色為白色，描邊為無。按住【Alt+Shift】組合鍵，水平向右拖動剛繪制的矩形至“版塊2”中，釋放鼠標復制矩形，再按此方法，將矩形復制到“版塊3”和“版塊4”中，如圖7-25所示。步驟645

圖7-26打開素材并調整圖像制作“版塊1”中的廣告。按【Ctrl+O】組合鍵打開本章案例素材“手機版塊1.psd”和“滑雪.jpg”，然后使用“移動工具”將滑雪圖像移至“手機版塊1”文檔中，按住【Alt】鍵，在“圖層1”和“矩形1”圖層間單擊，將“圖層1”剪貼至“矩形1”圖層中，最后按【Ctrl+T】組合鍵調整“圖層1”圖像，使人物主體處于屏幕中，按【Enter】鍵確定，如圖7-26所示。步驟746

提示剪貼蒙版遮擋了人物的胳膊、雪杖和部分滑雪板，由于遮擋部分輪廓復雜，因此不適合使用圖層蒙版配合“畫筆工具”的方法進行處理，此時，可用“鋼筆工具”配合圖層蒙版處理復雜輪廓。47

圖7-27制作右臂路徑按【Ctrl+J】組合鍵復制“圖層1”圖層，選擇“鋼筆工具”，在工具屬性欄中設置其工具模式為“路徑”，然后從人物肩部開始依次單擊添加錨點，制作右臂和雪杖路徑，如圖7-27所示。步驟8知識庫錨點：路徑由直線路徑段或曲線路徑段組成，它們通過錨點鏈接，一種是平滑點，另一種是角點，其中平滑點連接形成平滑的曲線；角點連接形成直線，或轉角曲線，如圖7-28所示。用戶可通過按住【Alt】鍵單擊錨點，將平滑點轉換為角點，或將角點轉換為平滑點。方向線：曲線路徑段上的錨點有方向線，方向線的端點為方向點，它們用于調整曲線的形狀。路徑：路徑包括閉合和不閉合路徑兩種，它可以轉換為選區或對路徑進行填充和描邊。本例中需要通過路徑對人物被遮擋圖像制作選區。圖7-28平滑點連接的曲線和角點連接的直線49

圖7-29制作滑雪板和腿部路徑當繪制路徑到手機屏幕區域時，隱藏“圖層1拷貝”圖層，然后單擊手機屏幕右下方滑雪板底部，如圖7-29（a）所示。顯示“圖層1拷貝”圖層，繼續制作滑雪板和腿部輪廓路徑，在制作完腿部輪廓后，再次隱藏“圖層1拷貝”圖層，單擊人物左腕處，如圖7-29（b）所示。顯示“圖層1拷貝”圖層，制作左手輪廓，如圖7-29（c）所示。步驟9（a）（b）（c）50

提示鋼筆摳圖是設計師處理圖像的常用技巧，在摳取復雜輪廓時，設計師可進行下面操作：①配合使用【Ctrl++】和【Ctrl+-】組合鍵控制圖像的縮放比例。②為減少摳取區域，用戶可在制作路徑過程中，根據需要隱藏當前圖像，觀察下方圖像，以確定摳取位置。例如，本例中屏幕內圖像無需摳取，因此，可在路徑進入屏幕后隱藏“圖層1拷貝”圖層，直接繪制屏幕外圖像的路徑，從而提高效率。51

圖7-30制作閉合路徑并處理圖層蒙版繼續使用“鋼筆工具”單擊人物右肩處錨點，制作閉合路徑，然后按【Ctrl+Enter】組合鍵將路徑轉換為選區，接著在“圖層”面板中單擊“添加圖層蒙版”按鈕，為“圖層1拷貝”添加蒙版，如圖7-30（a）和（b）所示，最后按【Ctrl+I】組合鍵將蒙版反相，如圖7-30（c）和（d）所示。步驟10（a）（b）（c）（d）52

提示由于后面制作的圖像背景顏色是白色到灰色的漸變，因此雪杖繩套鏤空處的白雪可忽略不計。53

圖7-31調整圖像顏色在“調整”面板中分別單擊“自然飽和度”按鈕和“曲線”按鈕，并在“屬性”面板中調整參數，如圖7-31所示。按【Ctrl+Alt+Shift+E】組合鍵蓋印圖層，右擊“圖層2”，從彈出的快捷菜單中選擇“轉換為智能對象”項，將“圖層2”轉換為智能對象。步驟11知識庫智能對象能保留圖像中所有原始特性，從而讓用戶對圖層執行非破壞性編輯。55

圖7-32調整圖像位置并為矩形填充漸變顏色使用“移動工具”將蓋印后的“圖層2”圖像移至“網站首頁”文檔的“版塊1”中，并在“圖層”面板中更改其圖層名稱為“滑雪”，按【Ctrl+T】組合鍵調整圖像的尺寸和位置，按【Enter】鍵確定。在“圖層”面板中選擇“矩形4”圖層，在“屬性”面板中更改其填充顏色，如圖7-32所示。步驟12#ffffff#eef1f656

圖7-33制作“版塊1”中的文字使用“橫排文字工具”在“滑雪”圖像上方輸入“樂能Wise7”，按【Ctrl+Enter】組合鍵確定，在“字符”面板中設置參數，如圖7-33（a）所示，然后在“樂能Wise7”文字下方輸入“前置2000萬……”，確定后設置參數，如圖7-33（b）所示，再按此方法在“前置2000萬……”文字下方輸入“3699元”，確定后設置參數，如圖7-33（c）所示，最后使用“移動工具”調整各圖像位置，如圖7-33（d）所示。步驟13#333333#333333（a）（b）57

圖7-33制作“版塊1”中的文字#ff4949（c）（d）58

圖7-34導入并調整素材位置按【Ctrl+O】組合鍵打開本章案例素材“手機2.jpg”“手機3.jpg”和“手機4.jpg”，使用“移動工具”將其依次移至“網站首頁”文檔的“版塊2”“版塊3”和“版塊4”中，并在“圖層”面板中更改圖層名稱為素材原始名稱，如圖7-34所示。步驟1459

提示科技類商品圖片通常使用白色作為商品背景，這樣利于將用戶視覺焦點集中到商品上，從而突出商品，同時也能讓頁面更加簡潔和大氣。60

圖7-35制作“版塊2”中的文字選擇“橫排文字工具”，在“手機2”圖片下方輸入“LE·phone7S”，按【Ctrl+Enter】組合鍵確定，在“字符”面板中設置字體大小為24點，文本顏色為#333333，然后在其下方輸入“5.99……”，確定后更改字體大小為18點，文本顏色為#808080，接著在“5.99……”文字下方輸入“3270元”，確定后更改字體大小為24點，文本顏色為#ff4949，效果如圖7-35所示。步驟1561

圖7-36制作版塊3和版塊4文字按住【Shift】鍵在“圖層”面板中分別單擊“3270元”和“LE·phone7S”圖層，然后按住【Alt+Shift】組合鍵，使用“移動工具”水平右拖選中的文字至“手機3”圖片下方，釋放鼠標復制文字，接著依次更改文字內容，再按此方法制作“手機4”圖片下方文字，如圖7-36所示。步驟1662

圖7-37繪制矩形并導入素材在“圖層”面板中選中除“背景”“Banner”和“頁首”外的所有圖層，按【Ctrl+G】組合鍵編組并更改組名為“手機版塊”。步驟17制作“電腦Banner”。使用“矩形工具”在“電腦Banner”版塊區域繪制一個寬高為1350×130像素的矩形，在“屬性”面板中設置其填充顏色為#d7dfef，描邊為無。按【Ctrl+O】組合鍵打開“電腦Banner素材.png”，使用“移動工具”將其移至剛繪制的矩形上，如圖7-37所示。步驟1863

圖7-38制作近景電腦按住【Alt】鍵，在“圖層”面板中的“圖層1”和“矩形5”圖層間單擊，將“圖層1”剪貼至“矩形5”圖層，然后選中“圖層1”圖層，調整其混合模式為明度，如圖7-38所示。步驟1964

圖7-39制作遠景電腦按【Ctrl+J】組合鍵復制“圖層1”圖層，按【Ctrl+T】組合鍵執行自由變換命令，右擊鼠標，選擇“水平翻轉”項，然后適當縮小圖形，移至“圖層1”圖像左上方，按【Enter】鍵確定，并將其剪貼至“矩形5”圖層中，如圖7-39所示。步驟2065

圖7-40模糊圖像并輸入文字為了進一步加強兩個電腦的前后對比，在菜單欄中執行“濾鏡”>“模糊”>“高斯模糊”命令，在“高斯模糊”對話框中設置“半徑”為2.8像素。使用“橫排文字工具”在電腦圖像左側輸入“樂能筆記本AirM2”，按【Ctrl+Enter】組合鍵確定，并在“字符”面板中設置參數，然后在剛輸入的文字下方輸入“做輕薄本……”，確定后更改文字參數，如圖7-40所示。步驟21（a）（b）（c）#333333#33333366

提示在Banner設計中，設計師要將產品特性與文案結合。例如，“步驟21”中電腦的特點是“輕”“薄”和“性能高”，因此可在制作描述性文案時，將字體樣式設置為“light”，通過纖細的字體樣式呼應電腦“輕”和“薄”的特點，從側面反映電腦特點。67

按住【Shift】鍵，在“圖層”面板中分別單擊“矩形5”和“做輕薄本……”圖層，按【Ctrl+G】組合鍵編組，并更改組名為“電腦Banner”。步驟2268

圖7-41復制圖層組并更改組名制作電腦和配件Banner版塊。按住【Ctrl】鍵，在“圖層”面板中同時選中“電腦Banner”和“手機版塊”組，按住【Alt+Shift】組合鍵，使用“移動工具”將選中圖像垂直下移至“電腦Banner版塊”下方參考線下，然后在“圖層”面板中更改“電腦Banner拷貝”的組名為“配件Banner”，“手機版塊拷貝”為“電腦版塊”，如圖7-41所示。步驟2369

圖7-42制作電腦版塊和配件Banner版塊按【Ctrl+O】組合鍵打開本章案例素材“電腦1.png”“電腦2.png”“電腦3.png”“電腦4.png”和“配件Banner.png”，使用“移動工具”將其移至“網站首頁”文檔中合適位置，并更改圖層名稱為素材原始名稱，然后替換相應圖像，接著更改復制組中的標題和商品信息文字，如圖7-42所示。步驟2470

圖7-43制作配件版塊制作配件版塊。在“圖層”面板中選中“電腦版塊”組，按住【Alt+Shift】組合鍵，使用“移動工具”將選中圖像垂直下移距配件Banner下方48像素處，然后按【Ctrl+O】組合鍵打開本章案例素材“配件1.png”“配件2.png”“配件3.png”和“配件4.png”，使用“移動工具”將其素材移至“網站首頁”文檔中，并參考制作電腦版塊的方法，替換對應位置的圖片和文字，如圖7-43所示。步驟2571

提示“手機版塊”“電腦版塊”和“配件版塊”中的“版塊1”都對商品圖片進行了藝術化處理，其目的是為了區別于其他商品版塊，讓商品展示區域更豐富。設計師在排列大量相同元素時，可采用同樣方法處理首個元素，從而避免頁面呆板。7.2.4制作頁尾部分72

視頻講解73

圖7-44制作頁尾版塊底色和Logo制作頁尾版塊。在“圖層”面板中選中“背景”圖層，使用“矩形工具”沿底部水平參考線下方繪制一個寬高為1920×190像素的矩形，在“屬性”面板中設置其填充顏色為#303030，描邊為無。展開“頁首”組，選中“Logo”圖層，按住【Alt+Shift】組合鍵，使用“移動工具”將Logo圖像垂直下移至“矩形6”圖形中，并將“Logo拷貝”圖層移出“頂部”組，如圖7-44所示。步驟174

圖7-45制作頁尾版塊使用“橫排文字工具”在頁尾版塊的Logo右側輸入網站信息，然后按【Ctrl+Enter】組合鍵確定，并在“字符”面板中設置參數，接著使用“矩形工具”在Logo與文字間繪制一個寬高為2×76像素的矩形，在“屬性”面板中設置其填充顏色為#cccccc，描邊為無；使用“移動工具”調整各圖像位置，將“Logo拷貝”“copyright……”“矩形6”和“矩形7”圖層編組，并更改組名為“頁尾”，如圖7-45所示。步驟2#99999975

按【Ctrl+Shift+S】組合鍵將文檔存儲為psd格式。步驟37.3網站子頁制作子頁以敘述內容為主，各子頁布局應當統一，且與首頁風格相同。下面通過制作“關于樂能”子頁，介紹企業網站子頁的一般制作方法。視頻講解7.3.1制作縱向導航77

按【Ctrl+O】組合鍵打開7.2節制作的“網站首頁.psd”文件，在“圖層”面板中刪除“頁首”“頁尾”和“背景”圖層以外的所有圖層組，然后在菜單欄中執行“視圖”>“清除參考線”命令，接著參考7.2.1節的“步驟2”制作兩條垂直參考線，限定版心范圍。步驟178

圖7-46制作縱向導航底色圖形使用“矩形工具”沿左側參考線和導航欄底部繪制一個寬高為248×412像素的矩形，然后在“屬性”面板中設置其填充顏色為#2c8fec，描邊為無，如圖7-46所示。步驟279

圖7-47繪制圖形并輸入文字按【Ctrl+Alt+Shift+N】組合鍵新建圖層，選擇“鋼筆工具”，在工具屬性欄中設置工具模式為“形狀”，填充顏色為#ebebeb，描邊為無，然后在導航欄上方的Logo圖像上描摹Logo中的曲線形狀，接著按【Ctrl+T】組合鍵適當放大路徑，并將其移至下方藍色矩形上，按【Enter】鍵確定，如圖7-47所示。步驟380

圖7-48調整形狀1圖層屬性按住【Alt】鍵，在“圖層”面板中的“形狀1”和“矩形8”圖層間單擊，將“形狀1”剪貼至“矩形8”圖層中，然后設置“形狀1”圖層的“不透明度”為30%，如圖7-48所示。步驟481

圖7-49輸入并設置文字參數按【Ctrl+Alt+Shift+N】組合鍵新建圖層，使用“橫排文字工具”在“形狀1”圖像上輸入“關于樂能”，按【Ctrl+Enter】組合鍵確定，然后在“字符”面板中設置參數，接著在“樂能科技”文字下方10像素處輸入“GUANYULENENG”，確定后在“字符”面板中更改其字體大小為12點，如圖7-49所示。步驟5#33333382

提示使用Logo中的元素作為網站的裝飾元素能使網站更契合企業形象。83

圖7-50制作漸變矩形使用“矩形工具”在藍色矩形上繪制一個寬高為248×10像素的矩形，然后在“圖層”面板中雙擊“矩形9”圖層空白處，為其添加“漸變疊加”樣式，如圖7-50所示。步驟6#e3e3e3#ffffff84

圖7-51制作導航項底色圖形使用“矩形工具”沿“矩形9”圖形底部繪制一個寬高為248×318像素的矩形，設置填充顏色為#ffffff，描邊為無，如圖7-51所示。步驟785

圖7-52輸入導航項文字按【Ctrl+Alt+Shift+N】組合鍵新建圖層，使用“橫排文字工具”在“矩形10”圖形上輸入“公司簡介”，按【Ctrl+Enter】組合鍵確定，然后在“字符”面板中設置參數，按此方法在其下方依次輸入其他導航項。使用“移動工具”調整文字位置，使“人才建設”文字距“公司簡介”文字170像素，然后按住【Ctrl】鍵，在“圖層”面板中選中縱向導航欄中的所有文字圖層，在工具屬性欄中單擊“垂直居中分布”按鈕，調整文字位置，如圖7-52所示。步驟8#33333386

圖7-53制作當前導航項提示形狀使用“矩形工具”在“公司簡介”文字上繪制一個寬高為206×40像素的矩形，然后在“圖層”面板中將“矩形11”圖層移至“公司簡介”圖層下方，設置其“不透明度”為80%，接著按住【Alt】鍵，將“矩形9”圖層的樣式拖到“矩形11”圖層，最后在“圖層”面板中同時選中除“背景”“頁首”和“頁尾”圖層外的所有圖層，按【Ctrl+G】組合鍵編組，并更改組名為“縱向導航欄”，如圖7-53所示。步驟9本例要制作的子頁文字內容較多，應根據級別合理設置文字的大小和顏色等參數。7.3.2制作子頁內容87

視頻講解88

圖7-54導入并調整素材位置按【Ctrl+O】組合鍵打開本章案例素材“公司簡介Banner.png”，使用“移動工具”將其貼近右側參考線和導航欄底部，然后分別在垂直和水平標尺中拖出參考線，制作文案版塊范圍，如圖7-54所示。步驟1文案版塊89

圖7-55制作標題和裝飾元素參考7.3.1節步驟3中的方法，使用“鋼筆工具”繪制Logo中的三角形，并設置如圖7-55所示的漸變顏色，然后使用“移動工具”將其移至“文案版塊”中距左、上參考線各20像素處，接著使用“橫排文字工具”在三角形右側10像素處輸入“樂能科技有限公司”，確定后在“字符”面板中設置參數，如圖7-55所示。步驟2#f3aa28#f9e369#33333390

圖7-56輸入并設置字符參數選擇“橫排文字工具”在標題下方30像素處，沿左右兩側參考線繪制一個寬高為1064×548像素的文本區域，然后在該區域輸入文案（可直接拷貝本書提供的文字素材），確定后在“字符”面板中設置字體為宋體，字體大小為16點，文本顏色為#333333，最后分別將第2、3、4和5段的段首文字加粗，如圖7-56所示。步驟391

提示本例中文案級別分為3級，分別是標題級別、首句級別和正文級別。根據正文內容，將段首使用文字加粗進行表現，以便于用戶在瀏覽大量文字時能快速抓住重點。92

圖7-57整理圖層并裁切畫布在“圖層”面板中按住【Shift】鍵分別單擊“樂能是……”和“圖層1”圖層，按【Ctrl+G】組合鍵編組，并更改組名為“主體內容”，然后選中“頁尾”組，使用“移動工具”將“頁尾”組圖像上移至距正文下方48像素處，接著選擇“裁剪工具”，拖動文檔底部控制框至頁尾底部，按【Enter】鍵確定，如圖7-57所示。按【Ctrl+Shift+S】組合鍵將文檔另存為“網站子頁.psd”。步驟47.4網頁切片與輸出本節將通過對7.2節制作的“網站首頁.psd”文件進行切片與輸出，介紹網頁切片與輸出的一般方法。切片是指在網頁制作過程中，利用切片工具將大尺寸網頁效果圖分割為一系列小圖像，這些小圖像稱為原大尺寸圖像的切片。根據圖像特點可對這些切片進行優化處理，并批量輸出，從而方便網站前端設計人員使用，以及在實際應用中有效提高網頁下載速度。7.4.1切片概述94

95

選擇切片對象：設計師需要對頁面中的圖片或Logo等無法通過代碼實現的復雜圖像進行切片處理，而頁面背景或圖像外的文字等均可通過代碼實現，因此無需切片處理。切片方法：根據頁面結構和圖像特點選擇合適的方法對網頁效果圖進行切片。例如，當處理Logo或按鈕等不規則圖像時，應先隱藏其周圍圖層，然后再進行切片處理；當對產品展示頁和一些功能較多的頁面進行切片時，由于切片對象尺寸各異，因此可使用“切片工具”逐一框選切片對象制作切片。網頁美工設計師在對網頁效果圖進行切片時應注意以下幾點：優化和輸出：根據切片圖像的特點，采用JPG、PNG或GIF等格式對圖像進行優化，然后根據用途輸出為“HTML和圖像”“僅限HTML”或“僅限圖像”格式。7.4.2切片輸出96

視頻講解按【Ctrl+O】組合鍵打開本章7.2節制作的“網站首頁.psd”文件。步驟197

提示本例需要切片的圖像主要有Logo、Banner、切換按鈕和商品圖片。其中Banner和商品圖片適合輸出為JPG或PNG格式，Logo和切換按鈕則適合輸出為PNG格式。由于輸出格式不同，且Banner和切換按鈕處于疊加狀態，因此應分兩