《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目三商品圖片的拍攝與處理

項(xiàng)目三商品圖片的拍攝與處理

主要內(nèi)容項(xiàng)目引導(dǎo)項(xiàng)目任務(wù)書(shū)項(xiàng)目任務(wù)實(shí)施1233項(xiàng)目任務(wù)分析4自學(xué)與拓展35項(xiàng)目引導(dǎo)商品照片在網(wǎng)絡(luò)營(yíng)銷(xiāo)中的地位和作用增加我們的產(chǎn)品被潛在顧客發(fā)現(xiàn)的概率影響買(mǎi)家購(gòu)買(mǎi)決策項(xiàng)目任務(wù)書(shū)—任務(wù)二商品圖片處理與修飾本任務(wù)目標(biāo)：

本任務(wù)目標(biāo)通過(guò)前面拍攝的農(nóng)產(chǎn)品圖片為例完成該網(wǎng)店所用圖片素材的處理，來(lái)展示一般網(wǎng)店圖片處理美化的流程。

項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾1.確定處理的圖片：按歸檔記錄，找到拍攝圖片文件中的盒裝300g鄉(xiāng)村地瓜干的文件夾。根據(jù)拍攝的圖片進(jìn)行挑選滿(mǎn)足網(wǎng)店需求的圖片進(jìn)行處理美化準(zhǔn)備。按一般網(wǎng)店需求，商品圖片分為上傳用的縮略圖（尺寸網(wǎng)站一般會(huì)有相關(guān)規(guī)定）和在商品具體描述頁(yè)面中起修飾補(bǔ)充作用的描述圖。2.使用圖象處理軟件Photoshop,編輯商品拍攝圖片：打開(kāi)PhotoshopCS3后，可見(jiàn)工作界面如圖3-X所示。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾3.拍攝圖片圖像調(diào)整：首先選取圖片“_IGP1541.JPG”作為商品描述圖中，顯示包裝上商品簡(jiǎn)介文字內(nèi)容的說(shuō)明圖，然后對(duì)其進(jìn)行圖像調(diào)整。1）調(diào)整方向：本圖方向和縮略圖所需方向一致不需要調(diào)整。2）調(diào)整明暗：本圖曝光有點(diǎn)過(guò)亮，可進(jìn)行減光調(diào)整。通過(guò)如圖3-X所示操作進(jìn)入“調(diào)整”菜單，選擇“色階”調(diào)整。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾在“色階”對(duì)話(huà)框中，通過(guò)移動(dòng)圖3-X所選的滑塊分別調(diào)整“陰影輸入色階”、“中間調(diào)輸入色階”、“高光輸入色階”，將圖片的明暗調(diào)整到恰當(dāng)。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾3）調(diào)整顏色：對(duì)一些拍攝圖片顏色飽和度、偏色等情況進(jìn)行調(diào)整。本圖顏色基本正常，可通過(guò)圖3-X所示，進(jìn)行“自動(dòng)顏色”微調(diào)。4）調(diào)整銳化：可一定程度提高圖片的清晰度，本圖需要展示文字內(nèi)容所以更需要銳化。一般可使用USM銳化濾鏡來(lái)實(shí)現(xiàn)，如圖3-X所示。單擊USM銳化后，可打開(kāi)USM銳化對(duì)話(huà)框，可移動(dòng)如圖3-X所圈的滑塊進(jìn)行調(diào)整，并通過(guò)預(yù)覽窗口查看銳化效果。4.保存調(diào)整結(jié)果：?jiǎn)螕舨藛螜凇拔募辈藛?，在出現(xiàn)的列表中單擊“存儲(chǔ)”，或單擊“存儲(chǔ)為”，在“存儲(chǔ)為”對(duì)話(huà)框中，選擇保存的路徑、保存的格式、新的名字作為存儲(chǔ)而不覆蓋原始文件。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾5.選取圖片文件“_IGP1542.JPG”作為商品縮略圖進(jìn)行圖片處理。重復(fù)3的步驟流程。調(diào)整方向，本圖是采用豎排，因此需要調(diào)整方向。調(diào)整明暗，本圖曝光不足，顏色偏暗需要調(diào)亮。首先通過(guò)右側(cè)浮動(dòng)面板“導(dǎo)航器”中“縮小放大”滑塊放大工作區(qū)中的圖片，能更清楚了解調(diào)整效果。然后單擊菜單欄中的“圖像”菜單，在出現(xiàn)的列表中選擇“調(diào)整”，在“調(diào)整”列表中選擇“亮度/對(duì)比度”，在“亮度/對(duì)比度”對(duì)話(huà)框中，如圖3-X所圈的進(jìn)行滑塊調(diào)整，增加圖片亮度和對(duì)比度。還可以繼續(xù)通過(guò)“調(diào)整”列表中的“曲線”進(jìn)行微調(diào)。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾6.重復(fù)3類(lèi)似的流程，繼續(xù)調(diào)整該商品其他所需圖片。7.調(diào)整大小：一般網(wǎng)店對(duì)提交上傳的縮略圖片都要大小和寬高比例限制，除了在商品具體描述里面引用外鏈的圖片。這里以淘寶網(wǎng)的要求為例進(jìn)行處理，商品縮略圖要求為310*310像素，是寬高比例1：1的正方形圖。1）裁剪：以處理過(guò)的“鄉(xiāng)村地瓜干”為例調(diào)整搜索縮略大圖為例進(jìn)行調(diào)整大小。首先，點(diǎn)選左側(cè)工具箱的裁剪工具，對(duì)圖片進(jìn)行裁剪，通過(guò)裁剪線的8個(gè)控點(diǎn)，調(diào)整裁剪范圍，裁去主題包裝盒外部分，如圖3-X所示。在裁剪圖中央雙擊或者點(diǎn)選上圖3-X中所選的打鉤處，完成裁剪。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾2）新建圖像文件：?jiǎn)螕舨藛螜凇拔募?，在出現(xiàn)的列表中選擇“新建”，在打開(kāi)的新建對(duì)話(huà)框中，如圖3-X所示設(shè)置后，點(diǎn)擊“確定”按鈕。3）復(fù)制源圖片：切換回裁剪后的包裝盒圖片，單擊菜單欄“選擇”，在出現(xiàn)的列表中選擇“全部”。再單擊菜單欄“編輯”，在出現(xiàn)的列表中選擇“拷貝”。或者用鍵盤(pán)快捷鍵“Ctrl+A”和“Ctrl+C”完成操作。4）粘貼：切換回新建文件“300g盒裝鄉(xiāng)村地瓜干_縮略圖”，單擊菜單欄“編輯”，在出現(xiàn)的列表中選擇“粘貼”，如圖3-X所示。粘貼的圖像將獨(dú)立存在與新圖層“圖層1”上。由于源圖像文件2592*2959像素和新建文件310*310像素之間巨大差距，所以“圖層1”上現(xiàn)在看到的是一片白色（是源圖像的一角）。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾通過(guò)單擊菜單欄的“編輯”，在出現(xiàn)的列表中選擇“自由變換”。再通過(guò)導(dǎo)航器的縮小滑塊縮小圖像。工作區(qū)中白色的即為“300g盒裝鄉(xiāng)村地瓜干_搜索縮略圖”310*310像素的文件大小，灰色帶8個(gè)控點(diǎn)的為所復(fù)制圖的實(shí)際大小。按住Shift鍵（按原始比例）來(lái)縮小粘貼過(guò)來(lái)的源文件圖，并且通過(guò)導(dǎo)航器的放大來(lái)，鼠標(biāo)點(diǎn)選8個(gè)控點(diǎn)中央并移動(dòng)來(lái)不斷調(diào)整位置，若不是水平可在8個(gè)控點(diǎn)的4個(gè)角外用鼠標(biāo)來(lái)調(diào)整，直達(dá)得到合適大小與位置圖3-X所示。最后和裁剪確認(rèn)同樣的方法確認(rèn)“自由變換”完成。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾橡皮擦、橡皮圖章8.加水?。核∽饔檬欠乐贡揪W(wǎng)店的圖片加以說(shuō)明版權(quán)。打開(kāi)已有水印文件“水印(白色).psd”，按住“Ctrl”鍵，鼠標(biāo)點(diǎn)選“圖層縮覽圖”，如圖3-X所示完成水印圖載入選區(qū)操作，然后使用“Ctrl+C”復(fù)制選區(qū)。切換到“300g盒裝鄉(xiāng)村地瓜干_縮略圖”，使用“Ctrl+V”粘貼，再進(jìn)行“自由變換”，調(diào)整到合適位置。選中該水印所在圖層“圖層2”，對(duì)該圖層“不透明度”進(jìn)行調(diào)整到合適大小，完成水印制作，如圖3-X所示。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾9.按前面的調(diào)整流程完成余下的3張縮略圖，并命名保存。保存時(shí)由于對(duì)應(yīng)的圖像文件有多個(gè)圖層，所以直接點(diǎn)“存儲(chǔ)”講保存為“.PSD”。為了在網(wǎng)上能正常顯示所以點(diǎn)擊“存儲(chǔ)為”，格式選擇“JPEG”。在彈出的“JPEG”選項(xiàng)對(duì)話(huà)框中，選品質(zhì)為“最佳”，進(jìn)行“確定”保存完畢，如圖3-X所示。10.加簡(jiǎn)易邊框：由于一般縮略圖要求是白底無(wú)邊框，縮略圖不增加邊框。商品描述圖為了美觀以及和描述文字配合，有時(shí)會(huì)添加邊框。在本任務(wù)中只以加簡(jiǎn)易的單色邊框?yàn)槔齺?lái)說(shuō)明。項(xiàng)目任務(wù)實(shí)施—任務(wù)二商品圖片處理與修飾圖層與像素：“圖層”的概念在Photoshop中非常重要，它是構(gòu)成圖像的重要組成單位，許多效果可以通過(guò)對(duì)層的直接操作而得到，Photoshop中圖像由圖層組成。每一個(gè)圖層都是由許多像素組成的，而圖層又通過(guò)上下疊加的方式來(lái)組成整個(gè)圖像。打個(gè)比喻，每一個(gè)圖層就好似是一個(gè)透明的“玻璃”，而圖層內(nèi)容就畫(huà)在這些“玻璃”上。而且無(wú)論在上一“玻璃”上如何涂畫(huà)都不會(huì)影響到下的“玻璃”。如果“玻璃”什么都沒(méi)有，這就是個(gè)完全透明的空?qǐng)D層，當(dāng)各“玻璃”都有圖像時(shí)，上面的“玻璃”會(huì)遮擋住下面“玻璃”上的圖像并可移動(dòng)各“玻璃”上圖像的相對(duì)位置。最后自上而下俯視所有圖層，各圖層上的圖像重疊或顯示從而形成圖像顯示效果。圖像、圖層、像素關(guān)系可如圖3-X所示。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾像素（Pixel），一個(gè)像素通常被視為圖像的最小的完整采樣，圖像由許多像素組成。像素是一個(gè)帶有特定的位置和顏色值的正方形小塊。像素是以行和列的方式排列，若將位圖圖像某一區(qū)域放大后，所看的這些正方形小塊就是像素，如圖3-X所示。一個(gè)圖像文件，所含像素越多，則圖像的品質(zhì)越高，文件也就越大。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾分辨率：Photoshop中分辨率是指圖像的分辨率，圖像的大小與質(zhì)量取決于像素和分辨率。常用單位為像素/英寸（ppi）表示，即每英寸包含的像素點(diǎn)數(shù)。例如300ppi表示每英寸包含300個(gè)點(diǎn)。相同打印尺寸的圖像，分辨率越高，所包含的像素點(diǎn)也就越多，色彩信息也就越豐富。前景色與背景色：前景色在使用當(dāng)前所選的繪圖工具時(shí)，如“畫(huà)筆”工具、“鉛筆”工具以及使用“油漆桶”工具填充選區(qū)時(shí)，將被應(yīng)用。背景色可以設(shè)置圖像的底色，以及使用“橡皮擦”工具應(yīng)用到“背景”圖層的出現(xiàn)的顏色。前景色和背景色可在工具箱中分別設(shè)置，也可以互相切換，恢復(fù)默認(rèn)值時(shí)，前景色為黑色背景色為白色。設(shè)置前景色或背景色時(shí)，可以點(diǎn)擊工具箱中的設(shè)置前景色或設(shè)置背景色圖標(biāo)，在彈出的“拾色器”對(duì)話(huà)框中設(shè)置，如圖3-X所示。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾色階：表示圖像亮度強(qiáng)弱的指數(shù)標(biāo)準(zhǔn)，和顏色無(wú)關(guān)，也就是我們說(shuō)的色彩指數(shù)，圖像的色彩豐滿(mǎn)度和精細(xì)度是由色階決定的。一個(gè)顏色從最亮的白色到最不亮的黑色，共256個(gè)色階，由0~255來(lái)表示。吸管工具：在設(shè)置前景色和背景色時(shí)可通過(guò)吸管直接對(duì)當(dāng)前圖像區(qū)域進(jìn)行取色。點(diǎn)擊工具箱“吸管工具”則可對(duì)圖像區(qū)域中的顏色進(jìn)行平均取樣，并將取樣顏色運(yùn)用于前景色。在吸管工具屬性欄中可設(shè)置相關(guān)參數(shù)。取樣點(diǎn)：表示取樣點(diǎn)范圍1像素；3*3平均：表示取樣點(diǎn)范圍為9個(gè)像素的色彩平均值；5*5平均：表示取樣點(diǎn)范圍為25個(gè)像素的色彩平均值，其他參數(shù)選項(xiàng)類(lèi)似。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾圖像調(diào)整：旋轉(zhuǎn)畫(huà)布：是針對(duì)整個(gè)圖像的旋轉(zhuǎn)，無(wú)論是否選擇了選區(qū)，旋轉(zhuǎn)范圍依然是整個(gè)畫(huà)布。任意角度，指按輸入的指定角度旋轉(zhuǎn)圖像。水平翻轉(zhuǎn)或垂直翻轉(zhuǎn)，是指整個(gè)圖像沿垂直軸線水平翻轉(zhuǎn)或沿水平軸線垂直翻轉(zhuǎn)。色階：使用色階可以調(diào)整圖像的明暗度，不均可以對(duì)整個(gè)圖像進(jìn)行也可以對(duì)被選中選區(qū)、被選中的圖層、被選中的顏色通道進(jìn)行調(diào)整，色階調(diào)整在如圖3-X中設(shè)置。通道：默認(rèn)對(duì)圖像全部通道進(jìn)行調(diào)整，可選其中某個(gè)顏色通道。輸入色階：通過(guò)設(shè)置陰影、中間調(diào)和高光的色調(diào)來(lái)調(diào)整圖像的色調(diào)和對(duì)比度，也是色階調(diào)整的主要調(diào)整部分。其中陰影值（黑色滑塊下方對(duì)應(yīng)文本框）越大，圖像越暗；高光的色調(diào)值（白色滑塊下方對(duì)應(yīng)文本框）越小，圖像越亮。文本框中值是0~255中波動(dòng)，以圖中陰影值8為例，表示色調(diào)值為8的像素為最暗，則原圖像中色調(diào)值在0～8范圍內(nèi)的像素都是黑色?，F(xiàn)將陰影值改為52，或者通過(guò)黑色滑塊右移，表示除了原先0~8的范圍，現(xiàn)在多了8~52的范圍也變成純黑，顯然整體圖像黑色的區(qū)域增加了，圖像也由此變暗了。中間調(diào)值（灰色滑塊下方對(duì)應(yīng)文本框），表示陰影和高光之間的分布比例，在0.10和9.99之間。比1小表示增加對(duì)比度，比1大表示減小對(duì)比度。中間調(diào)的灰色滑塊位置會(huì)隨著左右陰影和高光的改變而滑動(dòng)，保持原圖的對(duì)比度。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾輸出色階：用于設(shè)置輸出時(shí)陰影和高光色階，以便將圖像色調(diào)壓縮為小于0到255范圍。用于打印圖像時(shí)，使用該調(diào)整功能保留陰影和高光部分的細(xì)節(jié)。設(shè)置正好相反。例如，將第一個(gè)文本框值設(shè)為30，則表示輸出圖像中色調(diào)值為30的像素的暗度為整個(gè)圖像最低暗度，所以圖像將會(huì)變亮；將第二個(gè)文本框值設(shè)為225，則表示輸出圖像中色調(diào)值為225的像素的亮度為整個(gè)圖像最高亮度，所以圖像將會(huì)變暗。曲線：除了“色階”外，“曲線”也能調(diào)整圖像的整個(gè)色調(diào)范圍。從“曲線”對(duì)話(huà)框中可最多調(diào)整14個(gè)不同的點(diǎn)來(lái)控制圖像從陰影到高光的色調(diào)。而“色階”調(diào)整只能控制三個(gè)，陰影、中間調(diào)和高光。“曲線”對(duì)話(huà)框也可對(duì)圖像中的個(gè)別顏色通道進(jìn)行精確調(diào)整?！扒€”對(duì)話(huà)框如圖3-X所示。色相/飽和度，如圖3-X所示：飽和度，是控制圖像色彩程度的，即鮮艷度。調(diào)至最低的時(shí)候圖像就變?yōu)榛叶葓D像了。對(duì)灰度圖象改變色相是沒(méi)有作用的。明度，即亮度。如果將明度調(diào)至最低會(huì)得到黑色，調(diào)至最高會(huì)得到白色。對(duì)黑色和白色改變色相或飽和度都沒(méi)有效果。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾色相，可改變色相光譜的對(duì)應(yīng)關(guān)系。圖中兩條光譜中上方的色譜是固定的，下方的色譜會(huì)隨著色相滑桿的移動(dòng)而改變。這兩個(gè)色相光譜的對(duì)應(yīng)關(guān)系就是說(shuō)明了色相改變的結(jié)果，如圖3-X所示。編輯，指定了改變區(qū)間，可以全圖或者某一種顏色。若對(duì)某一種顏色改變色相，則會(huì)在下方的光譜給出被改變顏色范圍，范圍大小可通過(guò)吸管工具增加、減少和改變。項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾項(xiàng)目任務(wù)分析—任務(wù)二商品圖片處理與修飾銳化：USM銳化是一個(gè)常用的技術(shù)，簡(jiǎn)稱(chēng)USM，是用來(lái)銳化圖像中的邊緣清晰度。對(duì)于高分辨率的輸出，通常銳化效果在屏幕上顯示比印刷出來(lái)的更明顯。數(shù)量：用于調(diào)節(jié)銳化的程度。該值越大，銳化效果越明顯。半徑：用于設(shè)置圖像輪廓周?chē)讳J化的范圍，該值越大，銳化效果越明顯。閥值：用于設(shè)置銳化相鄰像素必須達(dá)到的最低差值。只有對(duì)比