網(wǎng)店美工教程課件

第5

章美工構(gòu)圖第5章美工構(gòu)圖5.1頁面構(gòu)圖內(nèi)容導(dǎo)航5.2海報(bào)布局5.3海報(bào)排版技巧5.4設(shè)計(jì)思路5.1頁面構(gòu)圖內(nèi)容導(dǎo)航5.2海報(bào)布局5.3海報(bào)排5.1頁面構(gòu)圖一個(gè)成功的專題頁面，大部分會(huì)具有以下幾個(gè)出彩的要素：色彩丶構(gòu)圖丶風(fēng)格創(chuàng)意，細(xì)節(jié)等。一個(gè)頁面從無到有，設(shè)計(jì)師需要對(duì)整個(gè)頁面有全盤的設(shè)計(jì)和把控，良好的畫面分割能夠讓用戶第一眼看到這個(gè)頁面就能被視覺吸引，甚至不用瀏覽具體內(nèi)容就能了解這個(gè)頁面的很多信息。5.1頁面構(gòu)圖一個(gè)成功的專題頁面，大部分會(huì)具有以下幾個(gè)在現(xiàn)實(shí)生活與自然界中，我們隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形甚至幾根線條就可以組成很多有趣的圖形，也很符合現(xiàn)代審美需求，適當(dāng)?shù)漠嬅媲懈钅軌蚪o頁面帶來動(dòng)感與節(jié)奏感。加入幾根線條，幾個(gè)塊面就能令頁面起到意想不到的效果。

5.1.1幾何切割在現(xiàn)實(shí)生活與自然界中，我們隨處可見幾何圖形的存A.簡單切割5.1.1幾何切割實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過復(fù)雜和花哨，一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。

A.簡單切割5.1.1幾何切割實(shí)現(xiàn)的時(shí)候需用一個(gè)形狀或者素材切分整個(gè)頁面，畫面瞬時(shí)變得有趣生動(dòng)起來，內(nèi)容區(qū)域也能得到有效劃分。這類構(gòu)圖方式對(duì)內(nèi)容沒有過多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來處理，也是現(xiàn)在專題頁面用得最多，最普遍的一種構(gòu)圖方式用一個(gè)形狀或者素材切分整個(gè)頁面，畫面瞬時(shí)變得有這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對(duì)立關(guān)系的情況下，比如說：對(duì)戰(zhàn)，男女，冷熱等等。頁面一分為二，內(nèi)容劃分明確也更加具有視覺沖擊力。B.對(duì)稱切割5.1.1幾何切割這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且網(wǎng)店美工教程ppt課件5.1.1幾何切割集中而規(guī)律的排列，從整體上抓住人們的視覺。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專題，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意C.組合切割5.1.1幾何切割集中而規(guī)律的排列，從整體不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，不規(guī)則的構(gòu)圖方式，避免了畫面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感，科技感，與鋒利感覺的專題，例如時(shí)裝，家電，以及游戲戰(zhàn)斗類的專題等等不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，5.1.2主題輪廓根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個(gè)邊界或外形線，形成一個(gè)大的輪廓，將專題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁面更有設(shè)計(jì)感，生動(dòng)且活潑。需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化，加以強(qiáng)調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。5.1.2主題輪廓根據(jù)專題的主要內(nèi)容，從5.1.2主題輪廓這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確具象，能夠用物品或輪廓直接代表，比如:中秋可以用月餅丶玉兔；會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來進(jìn)行嘗試5.1.2主題輪廓這類構(gòu)圖方式一般針對(duì)那種主體內(nèi)容很明確5.1.2主題輪廓5.1.2主題輪廓5.1.2主題輪廓5.1.2主題輪廓5.1.3放射及透視通過整體放射狀加透視構(gòu)圖，使畫面呈現(xiàn)立體與空間感，視覺焦點(diǎn)明確，畫面沖擊力強(qiáng)，富有動(dòng)感。5.1.3放射及透視通過整體放射狀加透視構(gòu)5.1.3放射及透視需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會(huì)較多的使用這種構(gòu)圖，突出動(dòng)感5.1.3放射及透視需要注意的是放射狀的排版不太適合文字5.1.4整體場景專題內(nèi)容不多，要突出趣味性，又怕用戶無聊，那就設(shè)計(jì)成一副美妙的插畫吧！讓用戶迅速置身在搭建的場景中，帶動(dòng)情緒，參與互動(dòng)，直觀獲取有用信息。這種處理方式會(huì)使頁面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁面氛圍當(dāng)中。5.1.4整體場景專題內(nèi)容不多，要突出趣味性5.1.4整體場景5.1.4整體場景5.1.4整體場景5.1.4整體場景5.1.4整體場景需要注意的是場景搭建對(duì)素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會(huì)搭配動(dòng)畫一起實(shí)現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候，對(duì)專題內(nèi)容頭腦里要有畫面感，先搭建大的畫面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容，切記場景不要搶了內(nèi)容的視覺焦點(diǎn)，在適當(dāng)?shù)臅r(shí)候做些減法5.1.4整體場景需要注意的是場景搭建對(duì)素材5.1.5流程圖如果你拿到的專題是漸進(jìn)以及流向又或者是展示各節(jié)點(diǎn)的內(nèi)容，用別的形式總感覺不夠具象，那何不干脆做成一個(gè)個(gè)性化的流程圖？俗話說，千言萬語不如一張圖，專題運(yùn)用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系，各個(gè)節(jié)點(diǎn)以及整體流向展示清楚，配合圖片展示，一個(gè)枯燥的流程瞬間變得個(gè)性十足，用戶瀏覽簡單又明了，并且充滿了趣味性。5.1.5流程圖如果你拿到的專題是漸進(jìn)以及流向又或者是展5.1.5流程圖在網(wǎng)頁設(shè)計(jì)越來越注重個(gè)性丶趣味性以及視覺沖擊力的今天，專題頁面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點(diǎn)也不盡相同，上面列舉出來的方法也可以搭配使用。5.1.5流程圖在網(wǎng)頁設(shè)計(jì)越來越注重個(gè)性丶趣味性以及視覺5.1頁面構(gòu)圖所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域，形成視覺感受，達(dá)到設(shè)計(jì)意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候要注意在追求創(chuàng)意構(gòu)圖的同時(shí)也別影響到用戶閱讀內(nèi)容?？偨Y(jié)5.1頁面構(gòu)圖所謂構(gòu)圖就是將表現(xiàn)主題的各個(gè)構(gòu)成要素按照5.2海報(bào)構(gòu)圖文案產(chǎn)品圖海報(bào)尺寸一張海報(bào)一般首先要問客戶要下面3個(gè)東東：5.2海報(bào)構(gòu)圖文案一張海報(bào)一般首先要問客戶要下面3個(gè)東東在設(shè)計(jì)的過程中最主要也就確定以下2個(gè)方面：1：排版構(gòu)圖（文案+產(chǎn)品）2：海報(bào)配色（背景+文案與產(chǎn)品色的協(xié)調(diào)）本文主要針對(duì)這2個(gè)方面進(jìn)行解讀。一張電商海報(bào)基本有3部分組成，產(chǎn)品、背景、文案。確定好了構(gòu)圖版式，也就成功了一半。常見的版式有3種左文右圖、左圖右文、中間文兩邊圖。5.2海報(bào)構(gòu)圖在設(shè)計(jì)的過程中最主要也就確定以下2個(gè)方面：1：排版構(gòu)圖（文案5.2.1左文右圖

這張海報(bào)是左文右圖式，這張海報(bào)的左邊文案排版非常典型，字體上粗下細(xì)，上大下小，上下主次分明，形成對(duì)比。文案四四方方架構(gòu)非常穩(wěn)重，非常平衡。5.2.1左文右圖這張海報(bào)是左文右圖式，這5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.1左文右圖5.2.2左圖右文這張海報(bào)屬于左圖右文也是很典型的，淘寶官方引導(dǎo)的那種典型排版。字體也是上粗下細(xì)，上大下小。下面的價(jià)格打折部分排版很穩(wěn)重丶結(jié)實(shí)。5.2.2左圖右文這張海報(bào)屬于左圖右文也是很典型的，淘寶5.2.2左圖右文325.2.2左圖右文325.2.2左圖右文5.2.2左圖右文5.2.2左圖右文345.2.2左圖右文345.2.3中間文兩邊圖這張海報(bào)是兩邊圖中間文字的排版，常見于多模特海報(bào)中。一般是一邊近景另外一邊是遠(yuǎn)景模特產(chǎn)生對(duì)比和呼應(yīng)。5.2.3中間文兩邊圖這張海報(bào)是兩邊圖中間文字的排版，常5.2.3中間文兩邊圖5.2.3中間文兩邊圖5.2.3中間文兩邊圖5.2.3中間文兩邊圖5.2.3中間文兩邊圖5.2.3中間文兩邊圖5.2.3中間文兩邊圖放這張海報(bào)我想表達(dá)的是背景是風(fēng)景的情況下，文字直接打上去會(huì)顯得太亂。可以直接畫一個(gè)半透明的框框，如圖所示。然后再在里面排文案。模特也是一邊遠(yuǎn)景，另一邊近景。5.2.3中間文兩邊圖放這張海報(bào)我想表達(dá)的是背景是風(fēng)景的5.2.4斜切式構(gòu)圖斜切式構(gòu)圖會(huì)讓畫面顯得時(shí)尚，動(dòng)感活躍。但是畫面平衡感不是很好控制。一般斜切式的文案傾斜角度最好不要大于30，不然得歪著頭閱讀。另外根據(jù)閱讀習(xí)慣，文字一般是往右上方的傾斜，文字這樣有一種上升感。5.2.4斜切式構(gòu)圖斜切式構(gòu)圖會(huì)讓畫面顯得時(shí)尚，動(dòng)感活躍5.2.5其他構(gòu)圖當(dāng)海報(bào)上要放置過多的促銷產(chǎn)品，可以采用這種版式。中間是一個(gè)半透明的框輸入文案。5.2.5其他構(gòu)圖當(dāng)海報(bào)上要放置過多的促銷產(chǎn)品，可以采用5.2.5總結(jié)在海報(bào)設(shè)計(jì)過程中版式的平衡感極為重要，同時(shí)還要處理好不同物體之間的對(duì)比關(guān)系。比如文案字體的大小對(duì)比丶粗細(xì)對(duì)比丶模特的遠(yuǎn)近對(duì)比。好比我們畫素描靜物的時(shí)候，靜物的擺放也是前后層次分明，有主物體，有陪襯的對(duì)比分明。關(guān)于文案：文案中要說清這個(gè)寶貝的屬性，給消費(fèi)者帶來的益處等，關(guān)于文案大家可以百度FAB法則看下，這里不多說了。5.2.5總結(jié)在海報(bào)設(shè)計(jì)過程中版式的平衡感極為重要，同時(shí)5.3海報(bào)排版技巧5.3.1對(duì)齊5.3海報(bào)排版技巧5.3.1對(duì)齊網(wǎng)店美工教程ppt課件5.3.1對(duì)齊5.3.1對(duì)齊46465.3.1對(duì)齊475.3.1對(duì)齊475.3.1對(duì)齊5.3.1對(duì)齊5.3.1對(duì)齊5.3.1對(duì)齊5.3.1對(duì)齊居中式的排版在生活中最常見就是房地產(chǎn)和一些珠寶海報(bào)，居中排版會(huì)給人正式，大氣，高端，有品質(zhì)感覺。在電商海報(bào)中，居中排版經(jīng)常會(huì)見到文案直接打在產(chǎn)品上面，文案的遮擋會(huì)和后面的產(chǎn)品營造出一前一后的層次感，加上一些光效會(huì)讓整張畫面空間感提升許多。居中對(duì)齊并不適合入門的新手，因?yàn)檫@對(duì)畫面的布局把控有一定的要求。5.3.1對(duì)齊居中式的排版在生活中最常見就是房地產(chǎn)和一5.3.2對(duì)比無對(duì)比不設(shè)計(jì)。人們的眼睛不喜歡看平淡無奇千篇一律的東西，喜歡看有對(duì)比的畫面！使用對(duì)比的排版技巧可以最有效的增加畫面的視覺效果。對(duì)比原則包含的內(nèi)容很多，比如虛實(shí)對(duì)比，冷暖對(duì)比等等，這次我們只談關(guān)于字體的大小對(duì)比和粗細(xì)對(duì)比。5.3.2對(duì)比無對(duì)比不設(shè)計(jì)。人們的眼睛不喜歡看平淡無奇5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比觀察使用對(duì)比前后的效果，在排版中僅僅運(yùn)用對(duì)齊這一個(gè)原則是不夠的，第二步就要用到對(duì)比！第一張圖片由于缺少對(duì)比，整體顯得很乏味，除了標(biāo)題略大一點(diǎn)下面的文本太長而且沒有吸引讀者的地方。第二張海報(bào)則運(yùn)用對(duì)比的手法，使得頁面更吸引人。而且文案的組織結(jié)構(gòu)一目了然，更便于讀者閱讀。第二張海報(bào)中的標(biāo)題加大加粗，與引標(biāo)題2014夏裝……形成大小和粗細(xì)的對(duì)比。下面的正文采用小字，但是價(jià)格部分加粗強(qiáng)調(diào)再次形成對(duì)比。最下面的包郵說明部分采用最細(xì)最小的字與順豐包郵又形成一種粗細(xì)大小的對(duì)比。只要將重點(diǎn)文字提煉出來放大加粗之后就是的整個(gè)版面信息主次分明，富有層次和組織性，就會(huì)在視覺上引導(dǎo)消費(fèi)者向下瀏覽。5.3.2對(duì)比觀察使用對(duì)比前后的效果，在排版中僅僅運(yùn)用5.3.2對(duì)比1、找出文案中最重點(diǎn)的語句，運(yùn)用粗細(xì)對(duì)比和大小對(duì)比加以強(qiáng)調(diào)和區(qū)分！2、字體既然要對(duì)比就要對(duì)比分明，把標(biāo)題設(shè)置12號(hào)字，把正文設(shè)置為10號(hào)字毫無意義，既然用對(duì)比就要大足夠大，小足夠小，細(xì)足夠細(xì)，粗足夠粗，讓人眼一看就看出他們的對(duì)比關(guān)系。3、對(duì)比不光會(huì)讓畫面更加美觀，而且會(huì)增加頁面的可讀性，不要擔(dān)心對(duì)比后的讀者不會(huì)去讀小字，假如畫面所有文字一樣大，沒有重點(diǎn)，沒有邏輯，顧客往往一撇而過。只要你強(qiáng)調(diào)的部分吸引顧客，顧客也會(huì)下意識(shí)的往下看。注意事項(xiàng)：5.3.2對(duì)比1、找出文案中最重點(diǎn)的語句，運(yùn)用粗細(xì)對(duì)比網(wǎng)店美工教程ppt課件5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.2對(duì)比5.3.3分組當(dāng)文案過多的時(shí)候就考慮將文案分組，將相同信息的文案擺放到一起，這樣不僅使整個(gè)頁面富有條理性，也會(huì)看上去非常美觀，更加有利于消費(fèi)者閱讀。5.3.3分組當(dāng)文案過多的時(shí)候就考慮將文案5.3.3分組5.3.3分組5.3.3分組5.3.3分組5.3.3分組5.3.3分組5.3.3分組一般來說一張海報(bào)基本就運(yùn)用這三個(gè)原則，對(duì)齊，對(duì)比，分組。切記，畫面中每個(gè)元素的存在以及它的擺放都是有道理的。畫面是你設(shè)計(jì)的，你應(yīng)該說出你這么做的來由！所有帶有震撼效果的畫面都是源自對(duì)比，如果有人說你畫面太平淡了，那么就請(qǐng)運(yùn)用對(duì)比，對(duì)比是最有效的改變你畫面的救命草！最后總結(jié)：5.3.3分組一般來說一張海報(bào)基本就運(yùn)用這三個(gè)原則，對(duì)網(wǎng)店美工教程ppt課件5.4設(shè)計(jì)思路很多新手剛剛轉(zhuǎn)入電商設(shè)計(jì)這一行業(yè)的時(shí)候，總是苦惱如何開始自己的設(shè)計(jì)生涯，不知從何下手，別擔(dān)心，下面我們就一起來理清一下思路，告訴你如何快速走進(jìn)設(shè)計(jì)之路。5.4設(shè)計(jì)思路很多新手剛剛轉(zhuǎn)入電商設(shè)計(jì)這一行業(yè)的時(shí)候，總是苦5.4設(shè)計(jì)思路產(chǎn)品背景顏色通過上圖我們可以看到的一個(gè)設(shè)計(jì)可以分為幾個(gè)元素組成：排版感情5.4設(shè)計(jì)思路產(chǎn)品通過上圖我們可以看到的一個(gè)設(shè)計(jì)可以分為幾個(gè)5.4設(shè)計(jì)思路產(chǎn)品：就是你要圍繞著它為主題來設(shè)計(jì)的東西，是整個(gè)設(shè)計(jì)的主心骨背景：就是為了襯托出產(chǎn)品的價(jià)值，以為整個(gè)設(shè)計(jì)的氛圍的一個(gè)元素，它是整個(gè)設(shè)計(jì)中好像最不顯眼卻最重要的一個(gè)元素，也是讓人非常頭疼的一個(gè)東西，但是你記住，它終究是配角，不能讓它占了主人的位置。顏色：在電商設(shè)計(jì)中，顏色可以說是重中之重，它是體現(xiàn)一個(gè)設(shè)計(jì)水平的重要條件，因?yàn)轭伾珟в懈星?，能影響人的情緒。知識(shí)要點(diǎn)