淘寶美工構(gòu)圖PPT

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

2、。5.1.1 幾何切割5A.簡單切割5.1.1 幾何切割 實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過復(fù)雜和花哨，一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。6 用一個(gè)形狀或者素材切分整個(gè)頁面，畫面瞬時(shí)變得有趣生動(dòng)起來，內(nèi)容區(qū)域也能得到有效劃分。 這類構(gòu)圖方式對內(nèi)容沒有過多要求，可隨意安排。具體排版可根據(jù)內(nèi)容來處理，也是現(xiàn)在專題頁面用得最多，最普遍的一種構(gòu)圖方式7 這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對立關(guān)系的情況下，比如說：對戰(zhàn)，男女，冷熱等等。頁面一分為二，內(nèi)容劃分明確也更加具有視覺沖擊力。B. 對稱切割5.1.1 幾何切割895.1.1 幾何切割 集中而規(guī)律的排列，從整體上

3、抓住人們的視覺。這種構(gòu)圖方式適合那種每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的專題，用這種組合的排列能夠保持各內(nèi)容的關(guān)系，也能讓布局更有創(chuàng)意C.組合切割10 不規(guī)則的構(gòu)圖，穩(wěn)定而銳利，干凈的排版，易于識(shí)別，不規(guī)則的構(gòu)圖方式，避免了畫面生硬，不易產(chǎn)生審美疲勞。不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感，科技感，與鋒利感覺的專題，例如時(shí)裝，家電，以及游戲戰(zhàn)斗類的專題等等115.1.2 主題輪廓 根據(jù)專題的主要內(nèi)容，從整體上構(gòu)建一個(gè)邊界或外形線，形成一個(gè)大的輪廓，將專題內(nèi)容巧妙的填充進(jìn)去。這種處理方式能夠讓用戶一眼就能了解到一些信息，符合專題主題，并且能夠讓頁面更有

4、設(shè)計(jì)感，生動(dòng)且活潑。 需要提醒的是設(shè)計(jì)的時(shí)候?qū)⑿螤畋M量輪廓化，加以強(qiáng)調(diào)突出，主體不需要太具象，舍棄一些繁瑣的、次要的元素，以免影響用戶閱讀內(nèi)容。125.1.2 主題輪廓這類構(gòu)圖方式一般針對那種主體內(nèi)容很明確具象，能夠用物品或輪廓直接代表，比如:中秋可以用月餅丶玉兔；會(huì)員可以用皇冠，鉆石等等等等，可根據(jù)具體的內(nèi)容來進(jìn)行嘗試135.1.2 主題輪廓145.1.2 主題輪廓155.1.3 放射及透視 通過整體放射狀加透視構(gòu)圖，使畫面呈現(xiàn)立體與空間感，視覺焦點(diǎn)明確，畫面沖擊力強(qiáng)，富有動(dòng)感。165.1.3 放射及透視需要注意的是放射狀的排版不太適合文字閱讀，要注意文字排版。建議在文字?jǐn)?shù)量較少的情況下選擇

5、此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會(huì)較多的使用這種構(gòu)圖，突出動(dòng)感175.1.4 整體場景 專題內(nèi)容不多，要突出趣味性，又怕用戶無聊，那就設(shè)計(jì)成一副美妙的插畫吧！讓用戶迅速置身在搭建的場景中，帶動(dòng)情緒，參與互動(dòng)，直觀獲取有用信息。這種處理方式會(huì)使頁面信息表現(xiàn)的更加準(zhǔn)確順暢，快速有效的把目標(biāo)用戶帶入到頁面氛圍當(dāng)中。185.1.4 整體場景195.1.4 整體場景205.1.4 整體場景 需要注意的是場景搭建對素材的要求比較高，明暗，陰影，透視以及層次感，體積都需要用心處理。這類專題大多都會(huì)搭配動(dòng)畫一起實(shí)現(xiàn)，在帶入感上更進(jìn)一層。在設(shè)計(jì)的時(shí)候，對專題內(nèi)容頭腦里要有畫面感，先搭建大的畫面關(guān)系，再往里頭添細(xì)節(jié)

6、和內(nèi)容，切記場景不要搶了內(nèi)容的視覺焦點(diǎn)，在適當(dāng)?shù)臅r(shí)候做些減法215.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è)性十足，用戶瀏覽簡單又明了，并且充滿了趣味性。225.1.5 流程圖在網(wǎng)頁設(shè)計(jì)越來越注重個(gè)性丶趣味性以及視覺沖擊力的今天，專題頁面的構(gòu)圖也已經(jīng)千變?nèi)f化，以上只是列舉出了其中較常見的一部分，不同的主題，不同的內(nèi)容，構(gòu)圖排版的出發(fā)點(diǎn)也不盡相同，上面列舉出來的方法也可以搭配

7、使用。235.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é)總結(jié)245.2 海報(bào)構(gòu)圖文案產(chǎn)品圖海報(bào)尺寸一張海報(bào)一般首先要問客戶要下面3個(gè)東東：25在設(shè)計(jì)的過程中最主要也就確定以下2個(gè)方面：1：排版構(gòu)圖（文案+產(chǎn)品）2：海報(bào)配色（背景+文案 與產(chǎn)品色的協(xié)調(diào)）本文主要針對這2個(gè)方面進(jìn)行解讀。 一張電商海報(bào)基本有3部分組成，產(chǎn)品、背景、文案。確定好了構(gòu)圖版式，也就成功了一半。常見的版式有3種左文右圖

8、、左圖右文、中間文兩邊圖。5.2 海報(bào)構(gòu)圖265.2.1 左文右圖 這張海報(bào)是左文右圖式，這張海報(bào)的左邊文案排版非常典型，字體上粗下細(xì)，上大下小，上下主次分明，形成對比。文案四四方方架構(gòu)非常穩(wěn)重，非常平衡。275.2.1 左文右圖285.2.1 左文右圖295.2.1 左文右圖305.2.1 左文右圖315.2.2 左圖右文這張海報(bào)屬于左圖右文也是很典型的，淘寶官方引導(dǎo)的那種典型排版。字體也是上粗下細(xì)，上大下小。下面的價(jià)格打折部分排版很穩(wěn)重丶結(jié)實(shí)。325.2.2 左圖右文32335.2.2 左圖右文345.2.2 左圖右文34355.2.3 中間文兩邊圖這張海報(bào)是兩邊圖中間文字的排版，常見于多

9、模特海報(bào)中。一般是一邊近景另外一邊是遠(yuǎn)景模特產(chǎn)生對比和呼應(yīng)。365.2.3 中間文兩邊圖375.2.3 中間文兩邊圖385.2.3 中間文兩邊圖395.2.3 中間文兩邊圖放這張海報(bào)我想表達(dá)的是背景是風(fēng)景的情況下，文字直接打上去會(huì)顯得太亂?？梢灾苯赢嬕粋€(gè)半透明的框框，如圖所示。然后再在里面排文案。模特也是一邊遠(yuǎn)景，另一邊近景。405.2.4 斜切式構(gòu)圖斜切式構(gòu)圖會(huì)讓畫面顯得時(shí)尚，動(dòng)感活躍。但是畫面平衡感不是很好控制。一般斜切式的文案傾斜角度最好不要大于30，不然得歪著頭閱讀。另外根據(jù)閱讀習(xí)慣，文字一般是往右上方的傾斜，文字這樣有一種上升感。415.2.5 其他構(gòu)圖當(dāng)海報(bào)上要放置過多的促銷產(chǎn)品，

10、可以采用這種版式。中間是一個(gè)半透明的框輸入文案。425.2.5 總結(jié)在海報(bào)設(shè)計(jì)過程中版式的平衡感極為重要，同時(shí)還要處理好不同物體之間的對比關(guān)系。比如文案字體的大小對比丶粗細(xì)對比丶模特的遠(yuǎn)近對比。好比我們畫素描靜物的時(shí)候，靜物的擺放也是前后層次分明，有主物體，有陪襯的對比分明。關(guān)于文案：文案中要說清這個(gè)寶貝的屬性，給消費(fèi)者帶來的益處等，關(guān)于文案大家可以百度FAB法則看下，這里不多說了。435.3 海報(bào)排版技巧5.3.1 對齊44455.3.1 對齊4646475.3.1 對齊47485.3.1 對齊495.3.1 對齊505.3.1 對齊居中式的排版在生活中最常見就是房地產(chǎn)和一些珠寶海報(bào)，居中排

11、版會(huì)給人正式，大氣，高端，有品質(zhì)感覺。在電商海報(bào)中，居中排版經(jīng)常會(huì)見到文案直接打在產(chǎn)品上面，文案的遮擋會(huì)和后面的產(chǎn)品營造出一前一后的層次感，加上一些光效會(huì)讓整張畫面空間感提升許多。居中對齊并不適合入門的新手，因?yàn)檫@對畫面的布局把控有一定的要求。515.3.2 對比無對比不設(shè)計(jì)。人們的眼睛不喜歡看平淡無奇千篇一律的東西，喜歡看有對比的畫面！使用對比的排版技巧可以最有效的增加畫面的視覺效果。對比原則包含的內(nèi)容很多，比如虛實(shí)對比，冷暖對比等等，這次我們只談關(guān)于字體的大小對比和粗細(xì)對比。525.3.2 對比535.3.2 對比545.3.2 對比觀察使用對比前后的效果，在排版中僅僅運(yùn)用對齊這一個(gè)原則是

12、不夠的，第二步就要用到對比！第一張圖片由于缺少對比，整體顯得很乏味，除了標(biāo)題略大一點(diǎn)下面的文本太長而且沒有吸引讀者的地方。第二張海報(bào)則運(yùn)用對比的手法，使得頁面更吸引人。而且文案的組織結(jié)構(gòu)一目了然，更便于讀者閱讀。第二張海報(bào)中的標(biāo)題加大加粗，與引標(biāo)題2014夏裝形成大小和粗細(xì)的對比。下面的正文采用小字，但是價(jià)格部分加粗強(qiáng)調(diào)再次形成對比。最下面的包郵說明部分采用最細(xì)最小的字與順豐包郵又形成一種粗細(xì)大小的對比。只要將重點(diǎn)文字提煉出來放大加粗之后就是的整個(gè)版面信息主次分明，富有層次和組織性，就會(huì)在視覺上引導(dǎo)消費(fèi)者向下瀏覽。555.3.2 對比1、找出文案中最重點(diǎn)的語句，運(yùn)用粗細(xì)對比和大小對比加以強(qiáng)調(diào)和

13、區(qū)分！2、字體既然要對比就要對比分明，把標(biāo)題設(shè)置12號(hào)字，把正文設(shè)置為10號(hào)字毫無意義，既然用對比就要大足夠大，小足夠小，細(xì)足夠細(xì)，粗足夠粗，讓人眼一看就看出他們的對比關(guān)系。3、對比不光會(huì)讓畫面更加美觀，而且會(huì)增加頁面的可讀性，不要擔(dān)心對比后的讀者不會(huì)去讀小字，假如畫面所有文字一樣大，沒有重點(diǎn)，沒有邏輯，顧客往往一撇而過。只要你強(qiáng)調(diào)的部分吸引顧客，顧客也會(huì)下意識(shí)的往下看。注意事項(xiàng)：56575.3.2 對比585.3.2 對比595.3.2 對比605.3.2 對比615.3.2 對比625.3.3 分組 當(dāng)文案過多的時(shí)候就考慮將文案分組，將相同信息的文案擺放到一起，這樣不僅使整個(gè)頁面富有條理性

14、，也會(huì)看上去非常美觀，更加有利于消費(fèi)者閱讀。635.3.3 分組645.3.3 分組655.3.3 分組665.3.3 分組一般來說一張海報(bào)基本就運(yùn)用這三個(gè)原則，對齊，對比，分組。切記，畫面中每個(gè)元素的存在以及它的擺放都是有道理的。畫面是你設(shè)計(jì)的，你應(yīng)該說出你這么做的來由！所有帶有震撼效果的畫面都是源自對比，如果有人說你畫面太平淡了，那么就請運(yùn)用對比，對比是最有效的改變你畫面的救命草！最后總結(jié)：67685.4設(shè)計(jì)思路很多新手剛剛轉(zhuǎn)入電商設(shè)計(jì)這一行業(yè)的時(shí)候，總是苦惱如何開始自己的設(shè)計(jì)生涯，不知從何下手，別擔(dān)心，下面我們就一起來理清一下思路，告訴你如何快速走進(jìn)設(shè)計(jì)之路。695.4設(shè)計(jì)思路產(chǎn)品背景顏

15、色通過上圖我們可以看到的一個(gè)設(shè)計(jì)可以分為幾個(gè)元素組成：排版感情705.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)轭伾珟в懈星椋苡绊懭说那榫w。知識(shí)要點(diǎn)715.4設(shè)計(jì)思路知識(shí)要點(diǎn)排版：一個(gè)好的排版，能讓人的視覺得到舒緩，不易疲勞，且看起來很舒服。感情：這個(gè)概念有點(diǎn)模糊，上面我們也說了，顏色可以影響我們的情感，但是我為何要分開這一部分來說呢？因?yàn)楦星槌祟伾膺€有另外一層的意思，下面我們就會(huì)講到。725.4設(shè)計(jì)思路如何去入行電商設(shè)計(jì)：首先實(shí)操就是必不可少的，其次就是理解設(shè)計(jì)的一個(gè)思路，然后我們必須要掌握的設(shè)計(jì)基礎(chǔ)技能，必須要掌握色彩理論，還有構(gòu)圖的技巧。如果你真的不知道應(yīng)該怎么辦，那就先去模仿別人的設(shè)計(jì)。我們說的模仿不是讓你抄，而是理解，其實(shí)我們抄的只是作者的想法，用色關(guān)系和布局，而不是叫你完全