《電子商務網(wǎng)頁設計與制作》課件項目三

項目三使用photoshop設計頁面能力目標：（1）能夠使用photoshop軟件。（2）使用photoshop軟件完成首頁效果圖的切片。（3）使用photoshop軟件完成首頁效果圖的切片導出。知識目標：（1）photoshop軟件的基本工具的使用方法。（2）photoshop軟件的切片選擇工具的使用方法。任務一認識photoshopCS6Photoshop簡介AdobePhotoshop，簡稱“PS”，是由AdobeSystems公司開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。2003年，AdobePhotoshop8被更名為AdobePhotoshopCS。2013年7月，Adobe公司推出了新版本的PhotoshopCC，自此，PhotoshopCS6作為AdobeCS系列的最后一個版本被新的CC系列取代。2013年7月，Adobe公司推出新版本photoshop——PhotoshopCC（CreativeCloud）。在PhotoshopCS6功能的基礎上，PhotoshopCC新增相機防抖動功能、CameraRAW功能改進、圖像提升采樣、屬性面板改進、Behance集成等功能，以及CreativeCloud，即云功能。截止2016年1月AdobePhotoshopCC2015為市場最新版本。任務一認識photoshopCS6Photoshop使用領域（1）平面設計平面設計（2）廣告攝影（3）網(wǎng)頁制作（4）繪畫（5）視覺創(chuàng)意視覺創(chuàng)意與設計（6）界面設計Photoshop功能特色從功能上看，Photoshop可分為圖像編輯、圖像合成、校色調色及特效制作部分。任務一認識photoshopCS61.菜單項2.選項窗口根據(jù)當前工具窗口選擇的功能3.工具箱選項4.為工作區(qū)界面5.為不同工作環(huán)境的窗口配置模式選項6.屬性窗口界面任務一認識photoshopCS6任務二使用photoshop設計一個首頁1．切片的作用；切片的作用在于依據(jù)網(wǎng)頁布局及參考線將大圖切割成小圖，從而加快網(wǎng)頁圖片的下載速度，降低網(wǎng)頁的整體大小。2．切片工具的使用（1）依據(jù)參考線，通過拖動鼠標的方式進行圖片的切割，在通過切片工具創(chuàng)建切片，按住“Shift”鍵并拖動可使切片為正方形，按住“Alt”鍵可使切片從中心向四周擴展。（2）如果需要切片的圖片布局比較簡潔，也可以采用基于參考線的切片來完成圖片的切割。在操作的時候首先可通過參考線在圖像上定位，然后在公共欄上點擊“基于參考線的切片”按鈕。這樣可以方便快捷地完成圖片的切片。（3）執(zhí)行“文件|存儲為Web和設備所用格式”命令，可以完成切片的導出、在彈出的對話框中將保存類型設為“HTML和圖像(*。Html)”，將切片設為“所有用戶切片”，最后點擊“保存”按鈕即可。在“切片”選項中有三個待選項，具體的含義如下：所有切片，包括用戶切片和自動切片；用戶切片，是指使用切片工具拖動出來的那個區(qū)域形成的切片，通常用藍色圖標顯示；自動切片，指的是基于切片動作的基礎系統(tǒng)自動生成的切片，通常用灰色圖標顯示。3．切片時的注意事項；各個切片的邊界應盡可能多地處于同一橫坐標或縱坐標上。這樣便于調整每個切片的邊界，也便于在Dreamweaver中編輯。在切片時，背景相同，重復出現(xiàn)的區(qū)域裁切成統(tǒng)一大小，只使用其中一張區(qū)域的圖片即可。在Dreamweaver后期處理時，顏色單一的區(qū)域