第章10網(wǎng)店美工必修課：Web圖形與網(wǎng)店裝修10.1網(wǎng)店設(shè)計(jì)師基本技能網(wǎng)店設(shè)計(jì)師負(fù)責(zé)為客戶提供店鋪視覺設(shè)計(jì)、進(jìn)行網(wǎng)店裝修。其主要工作是對(duì)店家提供的素材進(jìn)行修圖、摳圖、潤(rùn)飾、調(diào)色等，之后做合成，就是將不同的素材合成到一處，制作成網(wǎng)店Banner、專題頁、詳情頁等。10.2Web圖形10.2.1Web安全色做網(wǎng)頁設(shè)計(jì)和網(wǎng)店裝修時(shí)，為確保顏色不因設(shè)備或系統(tǒng)的差異而出現(xiàn)偏差，應(yīng)該使用Web安全色。Web安全色是瀏覽器專用的216種顏色，與平臺(tái)無關(guān)。此外，計(jì)算機(jī)顯示器、平板電腦、電視機(jī)、手機(jī)等都采用RGB顏色模式，因此，在做以屏幕為輸出終端的設(shè)計(jì)（如網(wǎng)頁、UI）時(shí)，文件還應(yīng)該設(shè)置為該模式。10.2Web圖形10.2.2實(shí)例：制作和優(yōu)化切片網(wǎng)絡(luò)上使用的圖片，其文件越小，用戶瀏覽時(shí)的加載速度越快。對(duì)圖像切片并進(jìn)行優(yōu)化，可以給圖像“瘦身”。此外，切片還可以鏈接到URL地址上，也可用于制作翻轉(zhuǎn)按鈕和動(dòng)畫等。10.2Web圖形10.2.3使用畫板畫板相當(dāng)于在原有的畫布之外又開辟了出新的畫布，這樣就可以在一個(gè)文件中制作不同的設(shè)計(jì)方案。由于每一個(gè)畫板都相當(dāng)于一個(gè)單獨(dú)的畫布，因此，在甲畫板上創(chuàng)建的參考線不會(huì)在乙畫板上顯示。10.2Web圖形10.2.4將畫板導(dǎo)出為單獨(dú)的文件單擊一個(gè)畫板，執(zhí)行“文件”|“導(dǎo)出”|“畫板至文件”命令，可以將其導(dǎo)出為單獨(dú)的文件。10.2Web圖形10.2.5導(dǎo)出圖像資源如果想將圖層、圖層組、畫板或Photoshop文件導(dǎo)出為圖像素材，可以執(zhí)行“文件”|“導(dǎo)出”|“導(dǎo)出為”命令，打開“導(dǎo)出為”對(duì)話框，進(jìn)行設(shè)置。10.2Web圖形10.2.6從PSD文件中生成圖像資源Photoshop可以將PSD文件的每一個(gè)圖層生成一幅圖像。有了這項(xiàng)功能，Web設(shè)計(jì)人員就可以從PSD文件中自動(dòng)提取圖像，免除了手動(dòng)分離和轉(zhuǎn)存工作的麻煩。10.2Web圖形10.2.7導(dǎo)出PNG資源PNG是網(wǎng)絡(luò)上常用的文件格式，其特點(diǎn)是體積小、傳輸速度快、支持透明背景。該格式采用的是無損壓縮方法，可確保導(dǎo)出后圖像的質(zhì)量不會(huì)降低。10.2Web圖形10.2.8復(fù)制CSSCSS即級(jí)聯(lián)樣式表，是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。執(zhí)行“圖層”|“

復(fù)制CSS”命令，可以從形狀或文本圖層生成級(jí)聯(lián)樣式表（CSS）屬性。10.3應(yīng)用案例：制作網(wǎng)店歡迎模塊網(wǎng)店首頁的歡迎模塊是對(duì)店鋪的最新商品、促銷活動(dòng)等信息進(jìn)行展示的區(qū)域。在設(shè)計(jì)時(shí)，將產(chǎn)品的賣點(diǎn)放大，結(jié)合文字做創(chuàng)意，可以將信息高效地傳遞給用戶。10.4應(yīng)用案例：化妝品促銷活動(dòng)設(shè)計(jì)根據(jù)產(chǎn)品特點(diǎn)以及對(duì)客戶群的定位，這個(gè)歡迎模塊的設(shè)計(jì)風(fēng)格以優(yōu)雅清新為主。色彩使用了冰激凌色系，其特點(diǎn)是甜美浪漫，是很得少女心的色系，適合表現(xiàn)與女性相關(guān)的主題。10.5應(yīng)用案例：網(wǎng)店商品修圖商品修圖一般包含摳圖、調(diào)色、修飾細(xì)節(jié)、匹配光影等環(huán)節(jié)，與人像修圖有很多相似之處。但做商品修圖，產(chǎn)品的外觀越完美越好，稍微過頭點(diǎn)也無妨。10.6課后作業(yè)：制作童裝店店招本作業(yè)是制作一個(gè)童裝店的店招。首先新建一個(gè)950像素×150像素、72像素/英寸的RGB模式文件。將背景填充為青藍(lán)色。使用移動(dòng)工具拖入素材，將這幾個(gè)圖層同時(shí)選取并對(duì)齊。為了突出商品，可以給童裝加上投影效果，在童裝后面用白色和粉色加以襯托。10.7復(fù)習(xí)題1.不同操作系統(tǒng)及顯示設(shè)備會(huì)用不同的方法記錄和展現(xiàn)顏色，做網(wǎng)頁設(shè)計(jì)時(shí)，怎樣避免由于系統(tǒng)和設(shè)備的差異而出現(xiàn)偏色