電子商務網頁制作-項目三

1、項目三 搭建電子商務網店頁面項目綜述 各類電子商務平臺提供的最基本店鋪則是由平臺生成,用戶只需添加對應的店招圖片、商品圖片、文字分類等即可生成。總體而言,電子商務網店的搭建主要是通過運用Photoshop設計與制作的圖像素材來完成的。本項目將通過完成網店的主要模塊來使學生掌握Photoshop的基本應用。項目目標能力目標：學習完本項目后,應當能夠依據項目要求完成網店各構成模塊的設計與制作,包括:（1）對商品照片進行處理以適應電子商務網店。（2）對圖片進行色調色澤的美化調整。（3）抽取圖像素材用來修飾網店模塊。（4）制作網店的店標。（5）制作網店推廣促銷海報區(qū)域知識目標：（1）Photoshop

2、基本操作命令。（2）Photoshop新建文件的設置、圖像和畫布的調整。（3）Photoshop的圖像模式和調整。（4）Photoshop層的概念。（5）Photoshop圖像的復制粘貼、自由變換和導航器的使用。（6）Photoshop濾鏡的使用。（7）Photoshop的裁剪工具。項目目標知識目標：（8）Photoshop的橡皮擦工具。（9）Photoshop的選區(qū)創(chuàng)建和修改。（10）Photoshop的文字工具。（11）Photoshop圖層的使用、樣式修飾、混合和蒙版。（12）Photoshop的漸變工具。（13）Photoshop的形狀工具。Part 01任務一處理修飾商品圖片任務引導

3、 本任務的目標是通過對所要搭建的網店中經典伊秀淘米水洗發(fā)水的圖片進行處理,來展示一般網店圖片處理美化的流程。任務實施1.新建文件2.將要處理的圖片放入新建的文件中3.商品圖片大小和方向調整4.商品圖片的亮度調整5.商品圖片的色彩調整6.商品圖片的銳化設置7.保存調整結果 知識分析1.AdobePhotoshop AdobePhotoshop，簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。2.圖層與像素

4、圖層是Photoshop中構成圖像的重要組成單位,許多效果可以通過對層的直接操作而得到，Photoshop中圖像文件常由若干圖層組成。而每一個圖層都是由許多像素組成的，而圖層又通過上下疊加的方式來組成整個圖像。像素(Pixel，常用PX標識)，通常被視為圖像的最小的完整采樣，圖像由許多像素組成。商品拍攝圖像基本都由位圖（即像素圖）構成。知識分析3.分辨率 Photoshop中分辨率是指圖像的分辨率,圖像的大小與質量取決于像素和分辨率,常用單位為像素/英寸(PPI)，即每英寸包含的像素點數(shù)。例如300ppi表示每英寸包含300個像素點。相同打印尺寸的圖像，分辨率越高，所包含的像素點也就越多,色彩

5、信息也就越豐富。當然分辨率也不是越大越好，對于網頁載體的圖片，通過計算機等在線瀏覽，則72ppi就是合適的分辨率，而輸出打印時，則可選擇300ppi。知識分析4.旋轉畫布 旋轉畫布是針對整個圖像的旋轉,無論是否選擇了選區(qū),旋轉范圍依然是整個畫布。任意角度,是指按輸入的指定角度旋轉圖像。水平翻轉或垂直翻轉,是指整個圖像沿垂直軸線水平翻轉或沿水平軸線垂直翻轉。5.自由變換 在“編輯”菜單項列表中，有“變換”命令，可對所選圖像應用各種變換操作，如“縮放”、“旋轉”、“斜切”、“扭曲”、“透視”或“變形”等。而“自由變換”命令則可用直接在一個連續(xù)的操作中應用變換（“旋轉”、“縮放”、“斜切”、“扭曲”

6、和“透視”），也可以應用“變形”變換，而不必選取其它命令。知識分析6.約束比例 約束比例即保持長寬比,保持原圖像的寬度和高度的比例,即改變寬度的同時高度也隨之改變。當取消后,表示高度與寬度無關,即改變任一項的數(shù)值都不會影響另一項。7.色階 “色階”是表示圖像亮度強弱的指數(shù)標準,但并不指具體顏色。一個顏色從最亮的白色到最不亮的黑色,共256個色階,由0255來表示。使用“色階”調整通過調整圖像的陰影、中間調和高光的強度級別，從而校正圖像的色調范圍和色彩平衡。色階調整對話框可以調整圖像的明暗度,可以對整個圖像進行調整也可以對被選中選區(qū)、被選中的圖層、被選中的顏色通道進行調整。知識分析8.曲線 除了

7、“色階”，“曲線”也是亮度調整時“調整”列表中常用的一個命令。點擊“調整”列表中的“曲線”，打開“曲線”調整對話框（快捷鍵：Ctrl+M），在對話框中用鼠標提升原圖高光部曲線從而帶動全圖曲線向高光部色階偏移，如圖3-17所示，完成微調。知識分析9.色相/飽和度 色相，可改變色相光譜的對應關系。在設置對話框中顯示的值反映像素原來的顏色在色相環(huán)中的度數(shù)。正值指明順時針旋轉，負值指明逆時針旋轉。值的范圍可以是 -180 到 +180。飽和度，是控制圖像色彩程度的，即鮮艷度。調至最低的時候圖像就變?yōu)榛叶葓D像了。對灰度圖像改變色相是沒有作用的。明度，即亮度。如果將明度調至最低會得到黑色，調至最高會得到白

8、色。對黑色和白色改變色相或飽和度都沒有效果。知識分析10.替換顏色 和色相/飽和度的作用類似，使用時用吸管工具在圖像中單擊所要改變的顏色區(qū)域，所圈框中就會出現(xiàn)有效區(qū)域的灰度圖像，呈白色的是有效區(qū)域，呈黑色的是無效區(qū)域。改變顏色容差可以擴大或縮小有效區(qū)域的范圍，如果選擇較低的百分比，則替換與所單擊像素非常相似的顏色；如果選擇較高的百分比，則替換范圍更廣的顏色。也可以使用 “添加到取樣”的吸管工具和“從取樣中減去”的吸管工具來擴大和縮小有效范圍。選區(qū)確定后，替換顏色的方式和色相/飽和度類似。如果需要在圖像中選擇相似且連續(xù)的顏色，則選擇“本地化顏色簇”可構建更加精確的選擇區(qū)域。知識分析 11.USM

9、銳化USM銳化是一個常用的技術，簡稱USM，用來銳化圖像中的邊緣清晰度。對于高分辨率的輸出，通常銳化效果在屏幕上顯示比印刷出來更明顯。數(shù)量：用于調節(jié)銳化的程度，該值越大，銳化效果越明顯。半徑：用于設置圖像輪廓周圍被銳化的范圍，該值越大，銳化效果越明顯。 閥值：用于設置銳化相鄰像素必須達到的最低差值，只有對比度差值高于此值的像素才會得到銳化處理。知識分析12.歷史記錄面板該面板中,可顯示記錄的當前圖像文件的每一步操作。在用Photoshop進行圖像處理時,經常需要回到前一狀態(tài)。這時可以使用“歷史記錄”面板在當前工作會話期間跳轉到所創(chuàng)建圖像的任一最近狀態(tài)。每次對圖像編輯更改時,圖像的新狀態(tài)都會添加

10、到該面板中。也可以使用“歷史記錄”面板來刪除圖像狀態(tài),并且在Photoshop中,可以使用該面板依據某個狀態(tài)或快照創(chuàng)建文檔。當恢復到前某一狀態(tài)時,做了新更改,新狀態(tài)將會替代原有灰色狀態(tài),原有狀態(tài)不能還原。拓展練習1.隱藏快速工具箱和浮動面板區(qū) 按住“Shift+Tab”可以同時隱藏或顯示所有打開的浮動面板,按住“Tab”可以同時隱藏或顯示所有打開的浮動面板和工具箱以及屬性欄。2.前景色與背景色 在使用當前所選的繪圖工具時,如“畫筆”工具、“鉛筆”工具以及使用“油漆桶”工具填充選區(qū)時，出現(xiàn)的顏色即為前景色。而設置圖像的底色，以及使用“橡皮擦”工具應用到“背景”圖層時出現(xiàn)的顏色即為背景色。前景色和

11、背景色可在工具箱中分別設置，也可以互相切換（快捷鍵：X），恢復默認值時（快捷鍵：D）,前景色為黑色，背景色為白色。設置前景色或背景色時,可以點擊工具箱中的設置前景色或設置背景色圖標，在彈出的“拾色器”對話框中設置。拓展練習3.吸管工具 在設置前景色和背景色時,可通過吸管直接對當前圖像區(qū)域進行取色。點擊工具箱“吸管工具”則可對圖像區(qū)域中的顏色進行平均取樣,并將取樣顏色運用于前景色。在吸管工具屬性欄中可設置相關參數(shù)。取樣點:表示取樣點范圍內的像素個數(shù)。4.圖像大小和畫布大小的區(qū)別 調整圖像大小，就是根據設定隨意改變圖像的尺寸的大小。而調整畫布的大小則是：調大時，圖像本身不變，而是將它的背景（不是背

12、景層）按所設定的尺寸變大；而調小時，圖像本身也不變，只是被自動裁切到了所設定的尺寸（圖像已不完整了）。另外關注畫布大小的定位問題。拓展練習5.其余調整亮度的命令（1）亮度對比度：可以對圖像的色調范圍進行簡單的調整。將亮度滑塊向右移動會增加色調值并擴展圖像高光，而將亮度滑塊向左移動會減少值并擴展陰影。對比度滑塊可擴展或收縮圖像中色調值的總體范圍。（2）曝光度,調整色調范圍的高光端,對極限陰影的影響很輕微。（3）陰影/高光,用于修改曝光過度和曝光不足的圖片。陰影調整的作用是增加陰影部分的亮度,從而改進照片中曝光不足的部分。高光調整的作用是降低高光部分圖像的亮度,也可稱為高光抑制。（4）HDR 色調

13、命令可讓您將全范圍的 HDR 對比度和曝光度設置應用于各個圖像。拓展練習6.其余調整色彩的命令 （1）自然飽和度，以便在顏色接近最大飽和度時最大限度地減少修剪。該調整增加與已飽和的顏色相比不飽和的顏色的飽和度?！白匀伙柡投取边€可防止膚色過度飽和。 （2）色彩平衡，用于更改圖像的總體顏色混合,可調整偏色。色調平衡將圖像分為暗調、中間調和高光3個可調色調范圍，每個色調可以進行獨立的色彩調整。從3個色彩平衡滑桿中，進行滑動調整。 （3）可選顏色，用于更改在圖像中的每個主要原色成分的印刷色的數(shù)量。拓展練習7.橡皮擦、背景色橡皮擦、魔術橡皮擦 （1）橡皮擦,擦除后的區(qū)域將為透明。如果在背景層上使用橡皮擦

14、，由于背景層不允許透明，擦除后的區(qū)域將顯示背景色。如果要使其透明的話，要先將背景層轉為普通圖層。 （2）背景色橡皮擦，與普通的橡皮擦相同,都是抹除像素，可直接在背景層上使用，使用后背景層將自動轉換為普通圖層。 （3）魔術橡皮擦工具，作用與背景色橡皮擦類似，都是將像素抹除得到透明區(qū)域。只是兩者的操作方法不同，魔術橡皮擦是區(qū)域型（即一次點擊就可針對一片區(qū)域）的操作，操作重點主要是容差的設置。習題1.做一份表格比較位圖圖像和矢量圖像,以及網頁中常用的圖像格式。2.在“圖像”-“模式”選擇菜單中選擇不同的模式和位數(shù),在圖片處理中會出現(xiàn)哪些區(qū)別?3.為何會有不同的圖像模式,做一份PPT來介紹一下RGB顏

15、色模式、24位、通道、色相譜等或者介紹CMYK模式。4.運用其余調整工具和不同濾鏡來處理生活圖片。Part 02任務二制作網店優(yōu)惠券任務引導 本任務的目標是通過形狀繪制及文本設置來制作完成網店的優(yōu)惠券。任務實施1. 新建文件2. 設置標尺及參考線3. 設置底色4. 添加形狀5. 添加文字6. 添加效果知識分析1.文本工具 文本工具,就是可以在圖像文件上創(chuàng)建文字,其工具選項欄如圖所示。排列方向,決定文字以橫向排列還是以豎向排列。字體,可以選擇使用何種字體,不同的字體風格完全不同。字體樣式,下拉列表有4種:Regular(標準)、Italic(傾斜)、Bold(加粗)、BoldItalic(加粗并

16、傾斜)。字體大小,也稱為字號,可通過下拉列表選擇,也可通過手動自行設定字號。抗鋸齒選項,控制字體邊緣是否帶有羽化效果。 對齊方向,可以讓文字左對齊、中對齊或右對齊。字體顏色,就是通過調色器來改變文字的顏色,可以針對單個字符設置顏色。變形,可以令文字產生變形效果。知識分析2.字符面板的使用 字符面板,可以用快捷方式打開“窗口”菜單欄的“字符”、“段落”浮動面板,進一步對字體進行操作。 可以對文字設定更多的選項,調整文字。字符面板除了可以從字符工具屬性欄調出外,還可以從菜單欄“窗口”中調出。字符面板如圖所示。拓展練習 文字的柵格化主要用于將圖層轉換為普通的像素圖層，這樣就可以對文字執(zhí)行進行顏色的填

17、充以及添加各種濾鏡效果等。 例如，要對文字運用漸變工具，使其產生漸變效果。文字圖層不能運用漸變工具，需要進行“柵格化”，鼠標右鍵單擊文字所在的圖層，在彈出的列表中單擊“柵格化”命令，“刪格化”后轉換為普通圖層，并使其內容不能再作為文本編輯。然后通過按住“ctrl”用鼠標點選“柵格化”后的圖層縮略圖，沿文字邊緣產生選區(qū)。再運用漸變工具完成漸變文字的效果，實現(xiàn)紅色到綠色的漸變。習題1.淺談優(yōu)惠券的分類和特點。2.簡述字符面板各個參數(shù)的含義。Part 03任務三制作網店店招任務引導本任務的目標是利用文本及圖片完成“潔瑞優(yōu)選旗艦店”店招的設計與制作。任務實施1. 新建文件2. 添加超級鏈接3. 制作L

18、OGO4. 添加文字5. 添加關注6. 插入優(yōu)惠券7. 添加喜慶圖標知識分析1.店招的分類 （1）品牌類店招（2）營銷類的店招（3）活動類的店招知識分析2.形狀工具形狀工具是指可以使用各種形狀工具繪制形狀,也可以從大量的預設的形狀中進行選擇,以及在單獨的圖層上排列矢量形狀。在使用形狀或鋼筆工具時,在對應的工具屬性欄上有三種不同的模式可以選擇。知識分析 （1）形狀生成單獨的圖層,創(chuàng)建形狀。可以使用形狀工具或鋼筆工具來創(chuàng)建形狀圖層。因為可以移動、對齊、分布形狀圖層以及調整其大小,所以形狀圖層非常適于為Web頁面創(chuàng)建圖形。（2）路徑在當前圖層中繪制一個工作路徑,可使用它來創(chuàng)建選區(qū)、創(chuàng)建矢量蒙版,或者

19、使用顏色填充和描邊以創(chuàng)建柵格圖形。 （3）填充像素直接在圖層上繪制,與繪畫工具的功能非常類似。在此模式中工作時,創(chuàng)建的是柵格圖像,而不是矢量圖形?？梢韵裉幚砣魏螙鸥駡D像一樣來處理繪制的形狀。知識分析4.使用input標簽創(chuàng)建表單控件（5）提交按鈕（6）重置按鈕（7）數(shù)字字段（8）電話字段拓展練習漸變工具可以創(chuàng)建多種顏色間逐漸混合的效果?？梢詮念A設漸變中選取或通過漸變編輯器創(chuàng)建新的漸變效果。漸變工具不能運用于位圖或索引顏色模式的圖像。在拖拉時用漸變填充區(qū)域,以按下鼠標處為起點和松開鼠標處為漸變終點。漸變工具選項從左到右為:線性漸變,以直線從起點漸變到終點。徑向漸變,以圓形圖案從起點漸變到終點。角

20、度漸變,圍繞起點以逆時針掃描方式漸變。對稱漸變,使用均衡的線性漸變在起點的任一側漸變。菱形漸變,以菱形方式從起點向外漸變,終點定義菱形的一個角。習題1.簡述店招的分類和組成元素。2.簡述形狀、路徑和填充像素之間的區(qū)別。Part 04任務四制作網店的促銷海報任務引導本任務的目標是通過圖片合成的方式完成洗發(fā)水產品促銷海報的設計與制作。促銷海報通常會出現(xiàn)在頁面的首屏,占整個頁面的核心位置, 展示店鋪最新發(fā)布的產品、爆款的單品以及主推的活動等。網店促銷海報是實現(xiàn)網店推廣和引流的重要途徑。任務實施1. 新建文件2. 摳圖3. 添加素材4. 添加背景顏色5. 添加效果樣式6. 添加文案7. 修飾與修復圖案

21、知識分析 1.網點促銷海報的分類網店促銷海報根據促銷利益點可以分為免郵海報、折扣海報、臨界價格海報、買贈海報、返現(xiàn)海報以及其它海報。根據促銷時間可以分為日常海報、節(jié)日海報和大促海報。 （1）日常促銷海報知識分析（2）節(jié)日促銷海報 （3）大促海報知識分析2.仿制圖章工具仿制圖章工具能將圖像的一部分應用到其他圖像或同一圖像的其他部分。也可以將一個圖層的一部分繪制到另一個圖層。仿制圖章工具對于復制對象或移去圖像中的缺陷很有用。3.圖案圖章工具圖案圖章工具用來復制預先定義好的圖案。當選擇“編輯”菜單的“定義圖案”后,所定義的圖案須為矩形。點擊圖案圖章工具屬性欄的“圖案拾色器”圖標,選定一個圖案。在圖像

22、中按下鼠標并拖動就可以將所選定的圖案繪制到圖層中。知識分析4.圖層樣式是指可以給對應圖層添加一些特殊的樣式,主要可選圖層樣式包括:（1）投影：將為圖層上的對象添加陰影效果。投影參數(shù)由“混合模式”、“不透明度”、“角度”、“距離”、“擴展”和“大小”等各種選項組成，通過對這些選項的設置可以得到相應的效果。（2）內陰影：在圖層內容的邊緣內添加陰影,使圖層具有凹陷外觀。（3）外發(fā)光和內發(fā)光：在圖層內容的外邊緣或內邊緣產生發(fā)光的效果。（4）斜面和浮雕：為圖層添加高光與陰影效果的各種組合。（5）光澤：為圖層創(chuàng)建光滑光澤的內部陰影效果。（6）顏色、漸變和圖案疊加：使用顏色、漸變或圖案填充圖層內容。（7）描

23、邊：使用顏色、漸變或圖案在當前圖層上描畫對象的輪廓,主要運用于文本圖層。知識分析5.畫筆工具畫筆工具和鉛筆工具均可在圖像上繪畫,顏色為當前的前景色。畫筆工具創(chuàng)建顏色的柔邊,鉛筆工具創(chuàng)建硬邊。6.定義畫筆預設可以通過使用任何選區(qū)工具,在當前圖像中選擇要用作自定義畫筆的部分。彩色圖像在被定義成畫筆筆尖圖像時會轉換成灰度。畫筆筆尖的大小最大可達2500像素2500像素,通過“編輯”菜單列表中的“定義畫筆預設”完成,使用時可在當前“畫筆預設選取器”的最后找到。知識分析7.參考線和網格定位參考線和網格使圖像或元素精確定位更為方便。參考線可以移動和移去,也可以被鎖定,以防止它們意外移動。網格可方便對稱布置圖像元素。網格在默認情況下顯示為線條,也可以顯示為點。設置參考線和網格,可通過“編輯”菜單的“首選項”對話框中的“參考線、網格、切片和計數(shù)”來設置。8.圖層