Photoshop CC網(wǎng)店美工全能一本通課件

項(xiàng)目簡介：第1章初識網(wǎng)店美工隨著移動互聯(lián)網(wǎng)的發(fā)展以及消費(fèi)結(jié)構(gòu)的升級，電子商務(wù)行業(yè)亦趨向成熟，同時(shí)行業(yè)對于網(wǎng)店設(shè)計(jì)與裝修從業(yè)人員的要求也產(chǎn)生了變化，因此想要從事網(wǎng)店設(shè)計(jì)與裝修行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對網(wǎng)店美工的基礎(chǔ)知識和網(wǎng)店裝修的風(fēng)格定位、頁面構(gòu)成、設(shè)計(jì)要點(diǎn)、常用軟件以及基本流程進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對網(wǎng)店設(shè)計(jì)與裝修有一個(gè)宏觀的認(rèn)識，有助于高效、便利地進(jìn)行后續(xù)的網(wǎng)店設(shè)計(jì)與裝修工作。課堂學(xué)習(xí)目標(biāo)掌握網(wǎng)店美工的基本概述熟悉網(wǎng)店裝修的常用軟件明確網(wǎng)店裝修的基本流程1.1網(wǎng)店美工的基本概述網(wǎng)店美工的基本概念網(wǎng)店美工的工作內(nèi)容網(wǎng)店美工的基本技能網(wǎng)店美工是指對淘寶、天貓商城以及京東商城等電商平臺上的網(wǎng)店，進(jìn)行頁面美化工作的專業(yè)人員。有別于傳統(tǒng)的平面設(shè)計(jì)師，網(wǎng)店美工不僅需要熟練掌握各種圖像處理軟件、熟悉網(wǎng)店頁面的設(shè)計(jì)與布局，還需要了解商品的特點(diǎn)，準(zhǔn)確判斷目標(biāo)消費(fèi)者的需求，這樣才能提升商品轉(zhuǎn)化率?？傊?，網(wǎng)店美工不僅需要處理圖片，還需要具備相應(yīng)的營銷思維，并在其中加入自己的創(chuàng)意，是一種“美工設(shè)計(jì)+運(yùn)營推廣”的復(fù)合型職業(yè)。1.1.1網(wǎng)店美工的基本概念

與傳統(tǒng)平面美工相比，網(wǎng)店美工的工作內(nèi)容要求普遍更高，更具有針對性，主要圍繞自身服務(wù)的網(wǎng)店展開相關(guān)工作，下面對網(wǎng)店美工的工作內(nèi)容進(jìn)行詳細(xì)介紹。1.1.2網(wǎng)店美工的工作內(nèi)容1.拍攝、美化商品商品拍攝是進(jìn)行網(wǎng)店開設(shè)的第一步，商品拍攝通常需要專業(yè)的攝影師。但隨著攝影器具發(fā)展的普及化、大眾化，很多時(shí)候網(wǎng)店美工會直接進(jìn)行商品的拍攝工作。同時(shí)拍攝出的商品圖片通常無法直接上架，還需要網(wǎng)店美工對其進(jìn)一步設(shè)計(jì)和美化，以保證商品可以呈現(xiàn)出比較理想的視覺效果，從而打動消費(fèi)者。1.1.2網(wǎng)店美工的工作內(nèi)容2.設(shè)計(jì)、裝修網(wǎng)店網(wǎng)店美工除了需要進(jìn)行圖片處理，還應(yīng)該能夠完成整個(gè)網(wǎng)店的設(shè)計(jì)與裝修工作。在進(jìn)行網(wǎng)店裝修時(shí)，需要根據(jù)電商平臺后臺提供的模塊進(jìn)行裝修。但是想要店鋪呈現(xiàn)出更理想的視覺效果，還需要網(wǎng)店美工在后臺模塊的基礎(chǔ)之上對網(wǎng)店頁面進(jìn)行創(chuàng)意設(shè)計(jì)。1.1.2網(wǎng)店美工的工作內(nèi)容3.設(shè)計(jì)促銷活動電商平臺經(jīng)常不定期舉辦各種促銷活動，這就需要網(wǎng)店美工能夠根據(jù)活動主題，完成促銷期間店鋪首頁、商品詳情頁以及活動頁的設(shè)計(jì)。網(wǎng)店美工通過設(shè)計(jì)各個(gè)頁面，令消費(fèi)者充分了解促銷活動的內(nèi)容和促銷力度，從而促使消費(fèi)者積極地參與促銷活動，提升商品銷量。1.1.2網(wǎng)店美工的工作內(nèi)容4.運(yùn)營推廣商品商家只有進(jìn)行積極有效的推廣，才能夠令自己的網(wǎng)店在眾多網(wǎng)店中脫穎而出，而網(wǎng)店美工在商品的運(yùn)營推廣時(shí)發(fā)揮著重要的作用。網(wǎng)店美工需要站在消費(fèi)者角度，深入挖掘消費(fèi)者的瀏覽習(xí)慣和點(diǎn)擊需求，根據(jù)商品的上架情況和促銷信息設(shè)計(jì)主圖、直通車圖、海報(bào)等促銷廣告。1.1.2網(wǎng)店美工的工作內(nèi)容1.1.3網(wǎng)店美工的基本技能一名優(yōu)秀的網(wǎng)店美工需要具備以下四個(gè)方面的基本技巧。（1）圖像處理與設(shè)計(jì)能力：首先需要美工人員一定要有扎實(shí)的設(shè)計(jì)基礎(chǔ)，對設(shè)計(jì)作品能夠具備良好的審美以及鑒別的能力；同時(shí)必須熟練掌握Photoshop、Illustrator等設(shè)計(jì)軟件，來將設(shè)計(jì)創(chuàng)意很好地實(shí)現(xiàn)。（2）視頻拍攝與編輯能力：需要美工人員能夠?qū)⑸唐愤M(jìn)行視頻拍攝，并熟練掌握Premiere等編輯軟件，將視頻剪輯處理。（3）代碼了解與編輯能力：需要美工人員能夠了解基礎(chǔ)HTML和CSS語言，熟練掌握Dreamweaver等軟件，進(jìn)行網(wǎng)店布局。（4）商品策劃與推廣能力：則需要美工人員在掌握相關(guān)專業(yè)技能的基礎(chǔ)之上還應(yīng)該掌握營銷知識，擁有良好的營銷思維，從運(yùn)營、推廣、數(shù)據(jù)分析的角度去思考，激發(fā)消費(fèi)者的購買欲望，提高網(wǎng)店的瀏覽量與商品轉(zhuǎn)化率。1.2網(wǎng)店裝修的風(fēng)格定位網(wǎng)店設(shè)計(jì)與裝修發(fā)展趨勢主要向扁平化、立體化和插畫風(fēng)這三種風(fēng)格進(jìn)行，三種風(fēng)格在視覺表達(dá)上都各有優(yōu)勢。1.扁平化以扁平化為主的網(wǎng)店設(shè)計(jì)與裝修頁面通過字體、圖形和色彩等不同方面的元素打造出清晰的視覺層次，使得頁面具有較強(qiáng)的可讀性。2.立體化以立體化為主的網(wǎng)店設(shè)計(jì)與裝修頁面通過運(yùn)用Cinema4D與OctaneRender搭配進(jìn)行建模渲染，進(jìn)而呈現(xiàn)出別具一格的畫面效果，使得頁面立體生動。3.插畫風(fēng)以插畫風(fēng)為主的網(wǎng)店設(shè)計(jì)與裝修頁面通過運(yùn)用手繪筆觸繪制出各種富有個(gè)性化的形象，使得頁面豐富有趣。1.2網(wǎng)店裝修的風(fēng)格定位1.3網(wǎng)店裝修的頁面構(gòu)成掌握網(wǎng)店裝修的頁面構(gòu)成是進(jìn)行網(wǎng)店設(shè)計(jì)與裝修的重要基礎(chǔ)。下面將分別介紹PC端和移動端的店鋪首頁、商品詳情頁的頁面構(gòu)成，幫助大家掌握網(wǎng)店裝修的頁面構(gòu)成。1.店鋪首頁的頁面構(gòu)成在PC端中，首頁通常由店招、輪播海報(bào)、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息組成。在移動端中，首頁除了尺寸的變化，頁面構(gòu)成與PC端幾乎相同。部分店鋪會根據(jù)商家需求，可自行選擇加入文字標(biāo)題、店鋪熱搜、排行榜和逛逛更多等模塊。2.商品詳情頁的頁面構(gòu)成在PC端中，商品詳情頁通常由主圖、左側(cè)區(qū)域以及詳情區(qū)域組成。在移動端中，商品詳情頁除了尺寸的變化，頁面構(gòu)成與PC端相比缺少了左側(cè)區(qū)域。1.3網(wǎng)店裝修的頁面構(gòu)成1.4網(wǎng)店裝修的設(shè)計(jì)要點(diǎn)基礎(chǔ)元素色彩搭配文字設(shè)計(jì)版式構(gòu)圖1.4.1基礎(chǔ)元素點(diǎn)、線、面是設(shè)計(jì)構(gòu)成中的三大基本元素，網(wǎng)店美工在設(shè)計(jì)時(shí)，將三者結(jié)合使用，可以營造出豐富的畫面效果。下面對基礎(chǔ)元素進(jìn)行詳細(xì)的講解。（1）點(diǎn)點(diǎn)是構(gòu)成一切形態(tài)的基礎(chǔ)，是最基本的視覺單位，具有凝聚視覺的作用。點(diǎn)的形狀多種多樣，整體分為圓點(diǎn)、方點(diǎn)、角點(diǎn)等規(guī)則點(diǎn)和自由隨意、任何形態(tài)的不規(guī)則點(diǎn)兩類。通過改變點(diǎn)的大小、形狀和位置可以在畫面中產(chǎn)生不一樣的效果。1.4.1基礎(chǔ)元素（2）線線是點(diǎn)移動的軌跡，是一切面的邊緣，具有分割畫面和處理界限的作用。線的形狀多種多樣，總的來說，可以分為直線和曲線。通過改變線的粗細(xì)、形狀、長短和角度可以在畫面中產(chǎn)生不一樣的效果。1.4.1基礎(chǔ)元素（3）面面是線移動的軌跡，可以拆分為點(diǎn)型的面和線型的面以及兩者結(jié)合的面。面的形狀多種多樣，針對網(wǎng)店設(shè)計(jì)，常用的形狀為方形、三角形以及圓形的幾何形和墨跡、泥點(diǎn)以及撕紙的偶然形。通過改變面的形狀可以在畫面中產(chǎn)生不一樣的效果。1.4.1基礎(chǔ)元素1.4.2色彩搭配網(wǎng)店的色彩可以帶給消費(fèi)者強(qiáng)烈的視覺沖擊力，網(wǎng)店美工在設(shè)計(jì)時(shí)，應(yīng)圍繞主色、輔助色和點(diǎn)綴色運(yùn)用科學(xué)的搭配方法，打造出色彩協(xié)調(diào)、顏色舒適的畫面。下面對色彩搭配進(jìn)行詳細(xì)講解。1.色彩搭配基礎(chǔ)網(wǎng)店設(shè)計(jì)與裝修中的色彩主要由主色、輔助色和點(diǎn)綴色組成，它們各自承擔(dān)不同的功能，共同進(jìn)行色彩搭配。1.4.2色彩搭配（1）主色主色是畫面中面積最大、最為醒目的色彩，它決定了整個(gè)畫面的顏色調(diào)性。網(wǎng)店美工在選擇主色時(shí)，應(yīng)綜合考慮商品風(fēng)格、消費(fèi)人群等因素。（2）輔助色輔助色是用于襯托主色的顏色，其占用面積僅次于主色。使用輔助色可以使畫面色彩更加豐富美觀。（3）點(diǎn)綴色點(diǎn)綴色是畫面中面積最小但較為醒目的顏色。合理使用點(diǎn)綴色可以起到錦上添花的作用。1.4.2色彩搭配2.色彩搭配方法常用的色彩搭配方法是馬賽克提取法，馬賽克提取法主要通過置入圖片，運(yùn)用Photoshop軟件進(jìn)行“濾鏡-像素化-馬賽克”操作，選取合適的顏色。1.4.2色彩搭配以下4類圖片不建議進(jìn)行馬賽克提取，即低質(zhì)量、PSD、插畫、產(chǎn)品攝影類圖片。1.4.2色彩搭配1.4.3文字設(shè)計(jì)文字是設(shè)計(jì)中重要的組成部分，與色彩相得益彰。網(wǎng)店美工在設(shè)計(jì)時(shí)，應(yīng)選擇符合畫面風(fēng)格的字體并調(diào)整合適的字號、間距以及行距。下面對文字設(shè)計(jì)進(jìn)行詳細(xì)講解。1.字體與字號PC端網(wǎng)店中的最小字號建議為18像素，移動端網(wǎng)店中的最小字號建議為30像素。（1）宋體宋體筆畫有粗細(xì)變化，通常是橫細(xì)豎粗，末端有裝飾部分，點(diǎn)、撇、捺、鉤等筆畫有尖端，屬于襯線字體（serif）。宋體字有著纖細(xì)優(yōu)雅、文藝時(shí)尚的特點(diǎn)，常用于珠寶首飾、美妝護(hù)膚等以女性消費(fèi)者為主的店鋪中。1.4.3文字設(shè)計(jì)（2）黑體黑體又稱方體或等線體，筆畫橫平豎直，粗細(xì)一樣，沒有襯線裝飾。黑體字有著方正粗曠、樸素簡潔的特點(diǎn)，常用于電子數(shù)碼和家用電器等店鋪中。（3）書法體書法體是指傳統(tǒng)書寫字體，可分為篆、隸、草、行、楷五大類書體。書法體有著自由多變、蒼勁有力的特點(diǎn)，常用于茶酒等需要表達(dá)傳統(tǒng)古典風(fēng)格的店鋪中。1.4.3文字設(shè)計(jì)（4）美術(shù)體美術(shù)體是指非正常的、特殊的印刷所用字體，可以起到美化的效果。美術(shù)體有著美觀醒目、變化豐富的特點(diǎn)，使用范圍非常廣泛，既可以表現(xiàn)商品促銷的內(nèi)容，又可以營造活潑調(diào)皮的氛圍。1.4.3文字設(shè)計(jì)2.間距與行距網(wǎng)店中字體的間距建議為字號的1/5以內(nèi)，字體的行距建議為字號的1/2。1.4.3文字設(shè)計(jì)1.4.4版式構(gòu)圖不同的版式構(gòu)圖會給消費(fèi)者帶來不同的視覺感受，網(wǎng)店美工在設(shè)計(jì)時(shí)，應(yīng)使用合理的構(gòu)圖方式構(gòu)造統(tǒng)一協(xié)調(diào)的畫面。（1）左右構(gòu)圖左右構(gòu)圖是指將畫面通過黃金比例進(jìn)行分割，主體可根據(jù)文案放置于畫面的左側(cè)或右側(cè)，這種構(gòu)圖極具美學(xué)價(jià)值，能夠表現(xiàn)出和諧與美感。（2）上下構(gòu)圖上下構(gòu)圖是指將畫面通過黃金比例進(jìn)行分割，主體通常放置于畫面的下方，承載視覺點(diǎn)，文字則放置于畫面的上方，承載閱讀信息，這種構(gòu)圖呈現(xiàn)的視覺效果平衡且穩(wěn)定。1.4.4版式構(gòu)圖（3）居中構(gòu)圖居中構(gòu)圖是指將主體放置于畫面的中心位置，這種構(gòu)圖能夠令主體快速吸引消費(fèi)者的目光，并表現(xiàn)出穩(wěn)定、均衡的感覺。需要注意的是，在使用該構(gòu)圖方式時(shí)，可以小面積加入裝飾元素以避免畫面的呆板。（4）對角線構(gòu)圖對角線構(gòu)圖是指將主體放置于畫面的斜對角位置，這種構(gòu)圖能夠更好地呈現(xiàn)主體，表現(xiàn)出立體感、延伸感和運(yùn)動感。1.4.4版式構(gòu)圖1.5網(wǎng)店裝修的常用軟件網(wǎng)店裝修的常用軟件包括視覺設(shè)計(jì)類、視頻編輯類和代碼編輯類。其中，Photoshop是一款圖像處理軟件，是網(wǎng)店美工進(jìn)行商品修圖、廣告設(shè)計(jì)和頁面設(shè)計(jì)時(shí)最常使用的軟件。Illustrator則是一款圖形處理軟件，主要與Photoshop搭配使用，進(jìn)行頁面中的字體設(shè)計(jì)與圖標(biāo)設(shè)計(jì)。Cinema4D是一款3D表現(xiàn)軟件，該軟件彌補(bǔ)了傳統(tǒng)平面視覺呈現(xiàn)的局限性，豐富了設(shè)計(jì)創(chuàng)意的表現(xiàn)形式。Premiere、會聲會影和快剪輯都是視頻編輯軟件，用于剪輯網(wǎng)店中的主圖視頻和詳情頁廣告視頻。Dreamweaver是一款網(wǎng)頁代碼編輯軟件，網(wǎng)店美工在進(jìn)行后臺裝修時(shí)，會運(yùn)用該軟件為圖片添加跳轉(zhuǎn)鏈接。1.6網(wǎng)店裝修的基本流程網(wǎng)店設(shè)計(jì)與裝修的項(xiàng)目流程可以細(xì)分為需求分析、素材收集、視覺設(shè)計(jì)、審核修改、完稿切圖和上傳裝修六個(gè)基本步驟。（1）需求分析針對項(xiàng)目首先要進(jìn)行相關(guān)的需求分析，網(wǎng)店美工通常會通過文案與相關(guān)主題先明確此次項(xiàng)目的賣點(diǎn)及消費(fèi)者，初步確定頁面風(fēng)格。（2）素材收集根據(jù)初步確定的頁面風(fēng)格，進(jìn)行相關(guān)的素材收集以及整理，為接下來的視覺設(shè)計(jì)做準(zhǔn)備。（3）視覺設(shè)計(jì)使用Photoshop、Illustrator、Cinema4D等相關(guān)軟件，按照之前的分析構(gòu)思進(jìn)行視覺方面的整體設(shè)計(jì)。（4）審核修改針對網(wǎng)店的設(shè)計(jì)項(xiàng)目，通常會用到修圖、調(diào)色以及合成等方式對畫面進(jìn)行處理，這些設(shè)計(jì)方式通常需要