Photoshop網(wǎng)店美工與網(wǎng)店裝修（微課版）課件 第1章　網(wǎng)店美工與Photoshop CS6基礎(chǔ)

Photoshop網(wǎng)店美工與網(wǎng)店裝修（微課版）第01章

網(wǎng)店美工與PhotoshopCS6基礎(chǔ)1.1認(rèn)識(shí)網(wǎng)店美工1.2圖像文件基礎(chǔ)知識(shí)1.3PhotoshopCS6圖像文件基本操作1.4

綜合案例—制作寧寧母嬰網(wǎng)店店招1.1.1網(wǎng)店美工的工作范疇3網(wǎng)店美工與常見(jiàn)的美術(shù)工作者不同，網(wǎng)店美工主要負(fù)責(zé)網(wǎng)店的店面裝修，以及商品圖像的創(chuàng)意處理。網(wǎng)店美工的工作范疇如下。打造網(wǎng)店特色設(shè)計(jì)與裝修網(wǎng)店設(shè)計(jì)活動(dòng)頁(yè)面美化商品圖像設(shè)計(jì)與制作推廣圖點(diǎn)面線1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)41.點(diǎn)、線、面1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)52.色彩（1）色彩的屬性色相明度純度1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)62.色彩（2）色彩的比例網(wǎng)店美工在搭配店鋪的頁(yè)面色彩時(shí)，需要遵循一定的比例與程序。網(wǎng)店裝修配色的黃金比例為“70:25:5”，其中，主色占總版面的70%，輔助色占25%，而其他點(diǎn)綴性的色彩占5%。1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)72.色彩（3）色彩的對(duì)比色彩的對(duì)比明度對(duì)比色相對(duì)比冷暖色對(duì)比純度對(duì)比色彩面積對(duì)比154321.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)82.色彩搭配技巧ABC合理選擇主色調(diào)您?善用無(wú)彩色?突出前景色和背景色的色彩對(duì)比（4）色彩的搭配技巧1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)93.文案（1）文案寫(xiě)作要點(diǎn)通過(guò)“利益訴求”吸引消費(fèi)者信息真實(shí)巧用修辭手法鎖定精準(zhǔn)目標(biāo)人群強(qiáng)調(diào)商品賣點(diǎn)1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)103.文案（2）文案寫(xiě)作注意事項(xiàng)?避免語(yǔ)句過(guò)長(zhǎng)避開(kāi)敏感詞避免重復(fù)1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)113.文案（3）文案設(shè)計(jì)要點(diǎn)

字體的選擇宋體是網(wǎng)店裝修中使用最廣泛的字體之一，筆畫(huà)纖細(xì)，較為優(yōu)雅，具有文藝氣息，常用于家裝類、服裝類等網(wǎng)店中。宋體黑體筆畫(huà)橫平豎直，字形方正，具有濃烈的商業(yè)氣息，常用于商品詳情頁(yè)、首頁(yè)Banner等內(nèi)容中。黑體書(shū)法體是指具有書(shū)法風(fēng)格的字體，筆畫(huà)多變，富有歷史性和文化性，常用于書(shū)籍類等具有古典氣息的網(wǎng)店中。書(shū)法體美術(shù)體多指一些筆畫(huà)和結(jié)構(gòu)有特殊設(shè)計(jì)的字體，具有較強(qiáng)的獨(dú)特性和藝術(shù)性，常用于海報(bào)制作或模板的標(biāo)題部分設(shè)計(jì)。美術(shù)體1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)123.文案（3）文案設(shè)計(jì)要點(diǎn)

字體的運(yùn)用字體的運(yùn)用可以參照以下兩個(gè)原則：增強(qiáng)文字的可讀性增強(qiáng)排版的美觀性1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)134.網(wǎng)店頁(yè)面結(jié)構(gòu)（1）首頁(yè)?頁(yè)頭首頁(yè)結(jié)構(gòu)頁(yè)頭包括店招和導(dǎo)航兩部分。其中店招常展示網(wǎng)店Logo、網(wǎng)店名稱、網(wǎng)店信譽(yù)、收藏網(wǎng)店等內(nèi)容；導(dǎo)航主要展示網(wǎng)店的商品分類。?頁(yè)中頁(yè)中包括首屏區(qū)、促銷區(qū)、主推商品區(qū)和商品陳列區(qū)四部分。頁(yè)尾頁(yè)尾主要用于設(shè)置自定義區(qū)，一般展示說(shuō)明色差和所用快遞等溫馨提示、品牌形象或品牌故事、客服、網(wǎng)店二維碼及頁(yè)尾廣告的投放等內(nèi)容。1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)144.網(wǎng)店頁(yè)面結(jié)構(gòu)（2）專題頁(yè)和活動(dòng)頁(yè)活動(dòng)頁(yè)是針對(duì)某個(gè)主題進(jìn)行宣傳，例如，在線抽獎(jiǎng)、限時(shí)活動(dòng)等內(nèi)容，文案比較精簡(jiǎn)，頁(yè)面內(nèi)容不會(huì)太多，因此頁(yè)面高度也不會(huì)太高?；顒?dòng)頁(yè)專題頁(yè)是針對(duì)于某個(gè)主題或者產(chǎn)品展開(kāi)一系列的營(yíng)銷策劃宣傳，內(nèi)容比較豐富，因此頁(yè)面高度會(huì)很高。專題頁(yè)1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)154.網(wǎng)店頁(yè)面結(jié)構(gòu)（3）商品詳情頁(yè)商品詳情頁(yè)主要用于展示商品詳情信息，一般包括商品焦點(diǎn)圖、商品賣點(diǎn)圖、商品細(xì)節(jié)圖、商品參數(shù)展示圖、商品包裝圖等內(nèi)容。1.1.2網(wǎng)店美工應(yīng)掌握的設(shè)計(jì)要點(diǎn)165.網(wǎng)店裝修風(fēng)格極簡(jiǎn)風(fēng)可愛(ài)風(fēng)插畫(huà)風(fēng)C4D風(fēng)科技風(fēng)中國(guó)風(fēng)1.1認(rèn)識(shí)網(wǎng)店美工1.2圖像文件基礎(chǔ)知識(shí)1.3PhotoshopCS6圖像文件基本操作1.4

綜合案例—制作寧寧母嬰網(wǎng)店店招1.2.1像素和分辨率18像素是構(gòu)成位圖圖像的最小單位，是位圖中的一個(gè)小方格。分辨率是指單位長(zhǎng)度上的像素?cái)?shù)目，單位通常為“像素/英寸”和“像素/厘米”。像素分辨率1.2.2位圖和矢量圖191.位圖位圖也稱點(diǎn)陣圖或像素圖，它由多個(gè)像素點(diǎn)構(gòu)成，能夠?qū)艄?、透明度和深度等逼真地表現(xiàn)出來(lái)。將位圖放大到一定程度后，即可看到位圖是由一個(gè)個(gè)小方塊組成的，這些小方塊就是像素。常見(jiàn)的位圖格式有JPEG、PCX、BMP、PSD、PIC、GIF和TIFF等。1.2.2位圖和矢量圖202.矢量圖矢量圖是用一系列計(jì)算機(jī)指令來(lái)描述和記錄的圖像，它由點(diǎn)、線、面等元素組成，所記錄的對(duì)象主要包括幾何形狀、線條粗細(xì)和色彩等。矢量圖常用于制作企業(yè)標(biāo)識(shí)或插畫(huà)，還可用于商業(yè)信紙或招貼廣告，可隨意縮放的特點(diǎn)使其可在任何打印設(shè)備上以高分辨率進(jìn)行輸出。常見(jiàn)的矢量圖格式有CDR、AI、WMF和EPS等。1.2.3圖像的色彩模式21Lab顏色模式位圖模式雙色調(diào)模式索引顏色模式?RGB顏色模式?CMYK顏色模式多通道模式圖像的色彩模式灰度模式1.1認(rèn)識(shí)網(wǎng)店美工1.2圖像文件基礎(chǔ)知識(shí)1.3PhotoshopCS6圖像文件基本操作1.4

綜合案例—制作寧寧母嬰網(wǎng)店店招1.3.1認(rèn)識(shí)PhotoshopCS6的工作界面23選擇【開(kāi)始】/【所有程序】/【AdobePhotoshopCS6】命令，啟動(dòng)PhotoshopCS6后，打開(kāi)如下所示的工作界面。1.3.2新建與打開(kāi)圖像文件241.新建圖像文件選擇【文件】/【新建】命令或按【Ctrl+N】鍵，打開(kāi)如圖所示的“新建”對(duì)話框。設(shè)置相關(guān)參數(shù)后單擊“確定”按鈕即可新建一個(gè)圖像文件。1.3.2新建與打開(kāi)圖像文件252.打開(kāi)圖像文件使用“打開(kāi)”命令打開(kāi)使用“打開(kāi)為”命令打開(kāi)拖曳圖像啟動(dòng)程序打開(kāi)最近使用過(guò)的文件1.3.3置入、導(dǎo)入與導(dǎo)出圖像文件261.置入文件選擇【文件】/【置入】命令，在打開(kāi)的“置入”對(duì)話框中選擇所需選項(xiàng)，然后單擊“置入”按鈕，單擊位于工具屬性欄的

按鈕，或者按【Enter】鍵。1.3.3置入、導(dǎo)入與導(dǎo)出圖像文件272.?導(dǎo)入文件使用Photoshop除了可以編輯圖像外，還可以編輯視頻，但Photoshop并不能直接打開(kāi)視頻文件，此時(shí)，可以將視頻幀導(dǎo)入Photoshop的圖層中。除此之外，還可以導(dǎo)入注釋、WIA支持等內(nèi)容。導(dǎo)入文件的方法是：選擇【文件】/【導(dǎo)入】命令，在打開(kāi)子菜單中選擇所需選項(xiàng)。1.3.3置入、導(dǎo)入與導(dǎo)出圖像文件283.導(dǎo)出文件選擇【文件】/【導(dǎo)出】命令，在彈出的子菜單中可以完成多種導(dǎo)出任務(wù)。數(shù)據(jù)組作為文件Zoomify路徑到Illustrator渲染視頻1.3.4保存和關(guān)閉圖像文件291.保存圖像文件2.關(guān)閉圖像文件選擇【文件】/【存儲(chǔ)】命令（快捷鍵為【Ctrl＋S】），打開(kāi)“存儲(chǔ)為”對(duì)話框，在“保存在”下拉列表框中選擇存儲(chǔ)文件的位置；在“文件名”文本框中輸入存儲(chǔ)文件的名稱；在“格式”下拉列表框中選擇存儲(chǔ)文件的格式，然后單擊“保存”按鈕。010203單擊圖像窗口標(biāo)題欄最右端的“關(guān)閉”按鈕選擇【文件】/【關(guān)閉】命令或按【Ctrl+W】組合鍵按【Ctrl+F4】組合鍵1.3.5移動(dòng)與變換圖像301.移動(dòng)圖像移動(dòng)圖像包括在同一圖像文件中移動(dòng)圖像和在不同的圖像文件中移動(dòng)圖像兩種方式。2.變換圖像縮放圖像旋轉(zhuǎn)圖像斜切圖像123扭曲圖像4透視圖像5變形圖像61.3.6復(fù)制、剪切與粘貼圖像31進(jìn)行復(fù)制操作，可按【Ctrl+C】鍵或選擇【編輯】/【拷貝】命令進(jìn)行復(fù)制操作，也可選擇【編輯】/【剪切】命令進(jìn)行剪切操作。然后再按【Ctrl+V】鍵或選擇【編輯】/【粘貼】命令對(duì)復(fù)制或剪切的圖像進(jìn)行粘貼。1.3.7運(yùn)用圖像輔助工具321.?標(biāo)尺選擇【視圖】/【標(biāo)尺】命令或按【Ctrl+R】鍵，即可在打開(kāi)的圖像文件左側(cè)邊緣和頂部顯示或隱藏標(biāo)尺。在標(biāo)尺左上角的相交處按住鼠標(biāo)左鍵不放，當(dāng)鼠標(biāo)指針變?yōu)槭中螤顣r(shí)拖曳到圖像中的任意位置，釋放鼠標(biāo)，此時(shí)拖曳到的目標(biāo)位置即為標(biāo)尺的x軸和y軸的相交處。1.3.7運(yùn)用圖像輔助工具332.?網(wǎng)格選擇【視圖】/【顯示】/【網(wǎng)格】命令或按【Ctrl+’】鍵，可以在圖像編輯區(qū)中顯示或隱藏網(wǎng)格，按【Ctrl+K】鍵打開(kāi)“首選項(xiàng)”對(duì)話框，在左側(cè)的列表中選擇“參考線、網(wǎng)格和切片”選項(xiàng)，然后在右側(cè)的“網(wǎng)格”欄中可設(shè)置網(wǎng)格的顏色、樣式、網(wǎng)格線間隔、子網(wǎng)格數(shù)量。1.3.7運(yùn)用圖像輔助工具343.?參考線啟用智能參考線后，參考線會(huì)在需要時(shí)自動(dòng)出現(xiàn)。選擇【視圖】/【顯示】/【智能參考線】命令，再次移動(dòng)圖形時(shí)，將會(huì)觸發(fā)智能效果，自動(dòng)進(jìn)行智能對(duì)齊顯示。創(chuàng)建智能參考線選擇【視圖】/【新建參考線】命令，打開(kāi)“新建參考線”對(duì)話框，在“取向”欄中選擇參考線取向，如“垂直”，在“位置”文本框中輸