《商務(wù)網(wǎng)站設(shè)計(jì)與制作》課件-3.4 效果圖切片

第三章網(wǎng)頁效果圖的制作學(xué)習(xí)目標(biāo)

熟悉使用PhotoShop制作網(wǎng)頁效果圖的流程；掌握PhotoShop中圖層組的設(shè)置；掌握利用PhotoShop制作網(wǎng)頁效果圖的方法；掌握PhotoShop中對效果圖進(jìn)行切片處理的方法。項(xiàng)目概述

小王所在的網(wǎng)絡(luò)公司承接了長沙市碧雅園花卉苗木基地網(wǎng)站建設(shè)業(yè)務(wù)。通過前期需求分析，已經(jīng)明確客戶需要制作的網(wǎng)站為典型的展示型企業(yè)網(wǎng)站，并確定了網(wǎng)站的欄目，繪制了網(wǎng)站首頁的草圖。經(jīng)理要求小王依據(jù)以上欄目結(jié)構(gòu)圖和草圖，為該苗木基地設(shè)計(jì)制作網(wǎng)站首頁效果圖。另外，因客戶不能提供企業(yè)標(biāo)志圖，網(wǎng)站LOGO也需一并設(shè)計(jì)和制作。網(wǎng)站首頁基地介紹苗木品種特色苗木售后服務(wù)工程案例苗木養(yǎng)護(hù)聯(lián)系我們基地簡介基地實(shí)景業(yè)務(wù)范圍榮譽(yù)資質(zhì)喬灌木移栽大樹扦插小苗樹樁盆景竹類植物藤本植物草本花卉草皮草種造林苗新優(yōu)果苗種籽種苗紅花紫薇羅漢杉紅梅廣玉蘭海棠櫻花香樟桂花服務(wù)承諾苗木配送技術(shù)支持病蟲害防治苗木移植苗木修剪道路綠化小區(qū)綠化園林綠化網(wǎng)站欄目結(jié)構(gòu)圖網(wǎng)站首頁草圖將本項(xiàng)目的實(shí)施分解為以下幾個(gè)子任務(wù)：任務(wù)1：網(wǎng)頁素材的選取任務(wù)2：圖層組的管理任務(wù)3：網(wǎng)頁元素的編輯任務(wù)4：效果圖切片最終網(wǎng)站首頁效果圖任務(wù)4：效果圖切片

切片注意事項(xiàng):保持視覺平衡、講究線條的流暢，使整體形狀美觀；切片是生成表格的依據(jù)，切片的過程要先總體后局部，即先把網(wǎng)頁整體切分成幾個(gè)大部分，再細(xì)切其中的小部分。對于漸變的效果或圓角等圖片特殊效果，需要在頁面中表現(xiàn)出來的，要單獨(dú)切出來。標(biāo)志LOGO等主要部分盡量切在一個(gè)切片內(nèi)，防止顯示遇到特殊情況時(shí)顯示一部分。不是主要部分的區(qū)域，不要大塊切片。切得越小，可以加快網(wǎng)頁下載圖片的速度，讓多個(gè)圖片同時(shí)下載而不是只下載一個(gè)大圖片。所以，切片大小要根據(jù)需要來切。網(wǎng)頁切片導(dǎo)出時(shí)，顏色單一過渡少的，應(yīng)該導(dǎo)出為GIF；顏色過渡比較多、顏色豐富的，應(yīng)該導(dǎo)出為JPG；有動(dòng)畫的部分，應(yīng)該導(dǎo)出為GIF動(dòng)畫。保留源文件。即使頁面做好了，也要保留帶切片層的源文件，當(dāng)某天需要修改某一個(gè)部分時(shí)，例如小圖標(biāo)等，直接修改單獨(dú)導(dǎo)出所用的切片即可。在DW中進(jìn)行編輯時(shí)，少用圖片。如果能