第五章 電子商務(wù)網(wǎng)站圖像處理技術(shù)

電子商務(wù)網(wǎng)站圖像處理技術(shù)不學(xué)習(xí)PhotoshopCS就無法獨立建設(shè)電子商務(wù)網(wǎng)站,我們沒有必要全面學(xué)習(xí)，我們應(yīng)該站在應(yīng)用的角度上學(xué)習(xí)，即可勝任電子商務(wù)網(wǎng)站制作的全部需要。第5章第一節(jié)PhotoshopCS使用速成第二節(jié)網(wǎng)頁常用圖像處理第三節(jié)網(wǎng)站版面制作實例第五章電子商務(wù)網(wǎng)站圖像處理技術(shù)一、PhotoshopCS工作環(huán)境進入AdobePhotoshopCS、系統(tǒng)后會出現(xiàn)如圖

在【歡迎屏幕】窗口中單擊按鈕，將【歡迎屏幕】窗口關(guān)閉，此時所顯示的是PhotoshopCS軟件的工作界面

PhotoshopCS軟件的工作界面主要包括

菜單欄屬性欄工作區(qū)控制調(diào)板狀態(tài)欄工具箱標題欄二、PhotoshopCS圖像文件的處理1．圖像文件的創(chuàng)建

2．圖像的打開與保存【文件】→【新建】命令Ctrl+N圖像文件的打開執(zhí)行菜單欄中的【文件】→【打開】命令Ctrl+O圖像文件的保存執(zhí)行菜單欄中的【文件】→【存儲】命令Ctrl+S三、PhotoshopCS圖層的應(yīng)用123476859【圖層】調(diào)板圖層的概述

圖層的功能及效果

圖層的分類圖層創(chuàng)建及刪除

調(diào)節(jié)圖層順序

圖層的編輯

創(chuàng)建圖層組

創(chuàng)建剪貼蒙版10對齊和分布圖層

應(yīng)用提醒：1.網(wǎng)站版面設(shè)計使用的分辨率為72像素/英寸。2.網(wǎng)站版面設(shè)計色彩模式為RGB、網(wǎng)站版面設(shè)計中以像素為單位。3.新建圖層Ctrl+Alt+Shift+N不出現(xiàn)對話框，在圖層調(diào)板中自動生成透明圖層。

本節(jié)所介紹的PhotoshopCS是做版面設(shè)計不可缺少的；要快速的制作網(wǎng)站那你就必需熟練的運用以下的快捷鍵；1．新建圖層【Ctrl】+【Alt】+【Shift】+【N】

2.矩形選區(qū)描邊

【Alt】+【E】+【S】

3.重新選擇

4.反向選擇

5.通過拷貝建立一個圖層6.蓋印可見圖層

7.調(diào)整當前圖層的透明度小鍵盤的

8.自動調(diào)整色階

【Ctrl】+【Shift】+【D】【Ctrl】+【Shift】+【I】【Ctrl】+【J】

【Ctrl】+【Alt】+【Shift】+【E】

【0】至【9】

【Ctrl】+【Shift】+【L】

案例：

PhotoshopCS精細制作網(wǎng)站的導(dǎo)航條制作步驟：①新建立文件500px×50px、分辨率72ppi，制作480px×530px的一個選區(qū)；②執(zhí)行“選擇”→“修改”→“平滑”，設(shè)置半徑為2px。③創(chuàng)建一個新圖層，填充選擇為任何顏色；在如圖所示的“應(yīng)用圖層樣式”設(shè)置漸變顏色為“#313332”到“#46474a”、描邊顏色為“#676767”；④選擇“導(dǎo)航”上部的“選取”，新建一個圖層，從上到下用白色到透明進行漸變填充。圖層模式改為線性減淡，不透明度35%，效果如圖所示；⑤新建圖層。使用單行選框工具在上部選擇1px區(qū)域填充為白色，改變圖層混合模式為柔光，不透明度為60%；⑥下面添加一個按鈕。創(chuàng)建一個130px×524px選區(qū)，然后“選擇”→“修改”→“平滑”，設(shè)置半徑為2px。方法同上③～⑤步，效果如圖5.23所示；⑦添加字符。字體為宋體，字號12點，白色；⑧在文字中間添加分隔線。創(chuàng)建新層，使用單列選框工具選擇區(qū)域，填充顏色為“#1a1b1c”；向右移動選區(qū)1px再次填充為“#5d5f60”；再向右移動1px填充為“#232526”。用20px柔筆刷擦除上下的部分，圖層不透明度設(shè)置為50%，效果如圖所示?！居?xùn)練內(nèi)容】制作5種不同風(fēng)格的網(wǎng)站導(dǎo)航條【訓(xùn)練目的】（1）熟悉軟件的操作。（2）了解網(wǎng)站導(dǎo)航條的制作過程和網(wǎng)站內(nèi)容?！居?xùn)練要求】（1）用文字說明制作的網(wǎng)站類型，錄入網(wǎng)站導(dǎo)航的鏈接文字。（2）統(tǒng)一尺寸：800px×530px。（3）文字說明制作感言。第一節(jié)PhotoshopCS使用速成第二節(jié)網(wǎng)頁常用圖像處理第三節(jié)網(wǎng)站版面制作實例第五章電子商務(wù)網(wǎng)站圖像處理技術(shù)

PhotoshopCS功能強大、工具眾多，初次學(xué)習(xí)，如入云山霧海，但網(wǎng)站頁面制作中常用的功能并不多，也非常容易學(xué)習(xí)。本節(jié)將以案例導(dǎo)航的方式將網(wǎng)站設(shè)計常用的圖像處理一網(wǎng)打盡，并將對網(wǎng)頁制作常用的圖像處理技術(shù)，以案例的方式進行全面講解。一、頭部常用圖像處理實例二、“導(dǎo)航”常用圖像處理實例三、欄目常用圖像處理實例四、網(wǎng)站背景圖像處理實例五、鏈接常用圖像處理實例將所選文本的文字大小減小2點像素：“Ctrl+Shift+<”。將所選文本的文字大小增大2點像素：“Ctrl+Shift+>”。將所選文本的文字大小減小10點像素：“Ctrl+Alt+Shift+<”。將所選文本的文字大小增大10點像素：“Ctrl+Alt+Shift+>”。將行距減小2點像素：“Alt+↓”。將行距增大2點像素：“Alt+↑”。將基線位移減小2點像素：“Shift+Alt+↓”。將基線位移增加2點像素：“Shift+Alt+↑”。“Google”標志的制作網(wǎng)站圖像制作實例【訓(xùn)練內(nèi)容】制作5個不同風(fēng)格的欄目和5個熱鏈接按鈕【訓(xùn)練目的】（1）了解網(wǎng)站的整體構(gòu)成。（2）熟練運用Photoshop各種工具?！居?xùn)練要