說(shuō)到電子雜志，目前國(guó)內(nèi)閱讀體驗(yàn)比較好的還算雅志電刊！另外一方面，電子雜志對(duì)設(shè)計(jì)界的意義，比你想象中更大、更有影響力！

你可能不知道，世界上第一本誕生于1875年的英國(guó)，而中國(guó)電子雜志的出現(xiàn)則在1930年左右。也就是說(shuō)中國(guó)人讀電子雜志已經(jīng)足足90年了。

所以現(xiàn)在說(shuō)到的各種設(shè)計(jì)手法的應(yīng)用，在這90年里，電子雜志已經(jīng)玩到玩無(wú)可玩了，電子雜志設(shè)計(jì)自然包含了無(wú)數(shù)的設(shè)計(jì)干貨。

聊排版，現(xiàn)在很多人都可能會(huì)想到網(wǎng)頁(yè)、海報(bào)、電商廣告之類的。

但是，真正將圖文排版推到極致的，其實(shí)是電子雜志。現(xiàn)在的網(wǎng)頁(yè)、網(wǎng)絡(luò)廣告等無(wú)不是從電子雜志排版中汲取了大量的營(yíng)養(yǎng)。

當(dāng)前在互聯(lián)網(wǎng)新媒體的沖擊下，電子雜志這種形式正在逐步退出歷史舞臺(tái)。盡管如此，電子雜志設(shè)計(jì)師們當(dāng)年做的排版實(shí)驗(yàn)，還是值得我們?nèi)ズ煤没匚逗蛯W(xué)習(xí)。

我們先來(lái)欣賞一下那些將排版做到極致的電子雜志。

風(fēng)格非常大氣的紐約時(shí)報(bào)電子雜志：

時(shí)尚前衛(wèi)的 IdN，這本是不少設(shè)計(jì)師的摯愛(ài)。

國(guó)內(nèi)的《新視線》，排版上也是爐火純青。

說(shuō)到排版設(shè)計(jì)，怎么可能少得了日本人的作品。

這本《idea》是關(guān)于設(shè)計(jì)資訊類的電子雜志。

好了，今天這篇文章當(dāng)然不是電子雜志賞析，在翻看了大量的經(jīng)典電子雜志排版之后，我給大家總結(jié)出幾招既好用，又十分易學(xué)的排版干貨技巧。

圖文疊壓是很常見(jiàn)的一種排版手法，在強(qiáng)調(diào)圖片展示的電子雜志排版中也十分常見(jiàn)。

具體的做法有很多種，我們可以根據(jù)圖片的實(shí)際情況靈活處理。

最常見(jiàn)的做法大致可以分為這兩種：

一、整體疊壓

最大化展示圖片，讓文字全部壓在圖片上。

這種疊壓方式的優(yōu)點(diǎn)很突出，可以充分展示圖片帶來(lái)的視覺(jué)沖擊力，同時(shí)文案的排版 空間也很大，可以自由發(fā)揮。

缺點(diǎn)也同樣明顯，那就是對(duì)圖片質(zhì)量要求很高，文字的可閱讀性會(huì)受到一定影響。

更多案例：

從上面這些案例可以看出，整體疊壓的方式，如果要做得出彩，除了圖片質(zhì)量要上乘之外，在文案排版方面，最重的是字體樣式有對(duì)比，有變化。比如說(shuō)加入手法字體、強(qiáng)烈的顏色對(duì)比等等。

二、局部疊壓

顧名思義，就是文字只壓住圖片的一小部分。

局部疊壓的方式初看起來(lái)平平無(wú)奇，但是如果應(yīng)用得當(dāng)，往往可以產(chǎn)生意想不到的效果。

優(yōu)點(diǎn)一：應(yīng)用靈活。

圖文可以隨意地?cái)[放。相對(duì)于整體疊壓，這種方式對(duì)圖片素材的精度和比例都沒(méi)有硬性要求，同時(shí)也給文字留出了很大的處理空間。

優(yōu)點(diǎn)二：打破版式平衡，制造畫(huà)面沖突。

太過(guò)于工整的排版會(huì)讓畫(huà)面顯得死板，通過(guò)文字的局部疊壓，可以產(chǎn)生不對(duì)稱的效果，打破畫(huà)面的平衡，產(chǎn)生視覺(jué)上的起伏和落差。

好了，下面進(jìn)入實(shí)操環(huán)節(jié)。

先來(lái)一張我年輕時(shí)候的照片。

還可以吧，也就一般般帥。。

先把照片擺放到畫(huà)面中，先調(diào)節(jié)一下對(duì)比度，以及裁剪一下適當(dāng)?shù)谋壤?/p>

第二步，選一個(gè)奔放自由一些的字體，半疊壓在照片上。字體顏色選用明亮鮮艷的紅色，打破畫(huà)面的沉悶感。

最后在畫(huà)面的空白地方填上文案，注意節(jié)奏的變化。

duang。。。

一張文藝風(fēng)的海報(bào)就完工了！

十分鐘搞定，是不是So easy的感覺(jué)？

沒(méi)辦法，

只要人長(zhǎng)得帥，設(shè)計(jì)就是做得快！

OK，

再來(lái)一個(gè)更實(shí)用的案例。

比如說(shuō)要做一個(gè)服裝海報(bào)，現(xiàn)在有了一張還不錯(cuò)的主圖。

先將它擺放在適當(dāng)?shù)奈恢茫缓筮x擇和主畫(huà)面相呼應(yīng)的背景色。

按照我們前面講的半疊壓的方式，把文案排在左邊。給其中的一些文案增加色塊，一方面形成排版上的變化，另一方面也可以在視覺(jué)上更突出。

最后再添加一些輔助性的小字，豐富一下畫(huà)面的層次感。

一張電子雜志風(fēng)格的廣告就搞定了！

非常實(shí)用的排版方式，各位做電商的同學(xué)，趕緊應(yīng)用起來(lái)吧！

好了，繼續(xù)上菜。

先給大家普及一下拼貼這種藝術(shù)風(fēng)格的起源。

拼貼藝術(shù)起源于20世紀(jì)早期的達(dá)達(dá)主義。當(dāng)時(shí)一群年輕而反叛的藝術(shù)家們?yōu)榱朔磻?zhàn)，設(shè)計(jì)了一些反美學(xué)的藝術(shù)作品來(lái)表達(dá)對(duì)資產(chǎn)階級(jí)價(jià)值觀和第一次世界大戰(zhàn)的絕望。

達(dá)達(dá)主義拒絕任何標(biāo)準(zhǔn)，追求隨意。

“dada”這個(gè)詞，據(jù)說(shuō)就是來(lái)自羅馬尼亞語(yǔ)的一句口語(yǔ)，意思是“是的，是的”。

大概就是這么個(gè)意思：

看似佛系，無(wú)所謂，其實(shí)內(nèi)心是反叛的，蔑視一切現(xiàn)有的藝術(shù)規(guī)則。

達(dá)達(dá)主義具體表現(xiàn)在平面視覺(jué)上，是這樣的風(fēng)格：

一眼看過(guò)去，就是三個(gè)字：有毛病！

完全就是胡亂拼貼嘛！

不過(guò)你仔細(xì)一瞧嘛，好像又有那么點(diǎn)韻律和節(jié)奏在里面，隱隱地能感受到一種情緒和力量。

總之，最后達(dá)達(dá)主義還是由一種“反藝術(shù)”變成了一種“藝術(shù)”風(fēng)格。

到現(xiàn)在，拼貼風(fēng)格被大量地應(yīng)用到了各種設(shè)計(jì)中。

比如說(shuō)服裝設(shè)計(jì)：

鞋子：

在電子雜志的排版設(shè)計(jì)中，更是看到大量的拼貼風(fēng)格。

電商頁(yè)面的設(shè)計(jì)，明顯受到了時(shí)尚電子雜志的影響，拼貼式的設(shè)計(jì)手法也隨處可見(jiàn)。

拼貼的風(fēng)格看似雜亂無(wú)章，但是要表現(xiàn)出良好的視覺(jué)節(jié)奏感，還是需要有一定的排版功底的。不然的話，就真的變成了胡亂拼湊了。

說(shuō)一千道一萬(wàn)，不如自己動(dòng)手做一下。

下面我們來(lái)做一個(gè)日本風(fēng)的秋季女裝海報(bào)。

先摳一張人物圖，選擇代表秋天的黃色為背景。在背景上疊加紙質(zhì)紋理，營(yíng)造一點(diǎn)復(fù)古的感覺(jué)，再將人物做成貼紙的樣式。

打上主標(biāo)題，復(fù)制一層描邊錯(cuò)位，將標(biāo)題做一點(diǎn)立體樣式。

接下來(lái)是關(guān)鍵的一步。

將幾張商品圖隨意地?cái)[放到畫(huà)面中，分別做一點(diǎn)樣式來(lái)裝飾一下每張圖。比如做個(gè)相框效果，或者描邊效果等。

最后再添加文案和輔助小元素。

因?yàn)橄胱龀扇障碉L(fēng)格，所以可以適當(dāng)?shù)靥砑右稽c(diǎn)日語(yǔ)文字作為裝飾。再添加像小標(biāo)簽，波點(diǎn)這樣的輔助元素，這樣整個(gè)畫(huà)面就十分豐富了。

拼貼風(fēng)格的畫(huà)面不要害怕元素多，只要風(fēng)格統(tǒng)一，適當(dāng)數(shù)量的元素拼貼在一起，可以營(yíng)造出豐富、熱鬧的氣氛。

一張輕松寫(xiě)意，雜而不亂的海報(bào)就完成了！

毫無(wú)疑問(wèn)，對(duì)齊是最基本的設(shè)計(jì)規(guī)律。

那不對(duì)齊、錯(cuò)位在排版中就是絕對(duì)的錯(cuò)誤嗎？

顯然不是這樣，所有的規(guī)律都是用來(lái)打破的，而所有打破規(guī)律，又都是為了重建新的規(guī)律。

錯(cuò)位設(shè)計(jì)在有些時(shí)候就能達(dá)到破壞原有規(guī)律，重建新規(guī)律的效果。

錯(cuò)位排版的應(yīng)用：

通過(guò)上面兩個(gè)例子，我們可以看出來(lái)，錯(cuò)位排版并不是單純地為了錯(cuò)位而錯(cuò)位，而是通過(guò)錯(cuò)位的方式打破原有畫(huà)面平衡，然后通過(guò)小元素的穿插，以及大小的變化，輕重避讓等設(shè)計(jì)手法，重新構(gòu)建新的畫(huà)面平衡。

錯(cuò)位的排版方式，可以營(yíng)造出錯(cuò)落有致排版風(fēng)格，相對(duì)于嚴(yán)謹(jǐn)?shù)膶?duì)齊，可以給人更活潑的感覺(jué)。

優(yōu)秀的版式設(shè)計(jì)，很少刻意地遵循某一個(gè)死板的規(guī)律，而是在規(guī)律與突破之間尋找到了微妙的平衡。

再給大家看一些“錯(cuò)而不亂”的排版：

OK，理論講完，

下面看操作！

利用錯(cuò)位排版的特點(diǎn)，做一張比較有張力的運(yùn)動(dòng)風(fēng)格的海報(bào)。

首先摳一張“我心飛翔”的人物素材。再鋪上一張?zhí)炜盏谋尘埃@樣會(huì)讓人物更有起飛的感覺(jué)。

經(jīng)過(guò)上面的處理之后，整個(gè)畫(huà)面質(zhì)感得到很大的提升。

接下來(lái)處理文案，選擇視覺(jué)沖擊力更強(qiáng)的手繪字體。

人物的形態(tài)是向左上運(yùn)動(dòng)的，因此文字的錯(cuò)位方式也可以向左上形成動(dòng)感。

最后，為了保持畫(huà)面的平衡感，我加入了線形nike標(biāo)志，以及左下角的小字。

相對(duì)于四平八穩(wěn)的排版方式，這種刻意制造的錯(cuò)位排版，視覺(jué)上更加具有張力，就像忽然使出了其不意的一招！

做設(shè)計(jì)的都知道：無(wú)對(duì)比，不設(shè)計(jì)。

對(duì)于電子雜志的排版，更是如此。大部分電子雜志的開(kāi)本都比較大，文字信息多，因此設(shè)計(jì)師在排版的時(shí)候，一定需要將視覺(jué)層次拉開(kāi)，引導(dǎo)用戶的閱讀視線。

放大字號(hào)，粗壯的字體，強(qiáng)對(duì)比的色彩，將關(guān)鍵信息放到頁(yè)面正中間，這些都是有著 強(qiáng)化對(duì)比的方式。

將關(guān)鍵的信息提取出來(lái)，讓它幾乎占滿排滿空間，這樣可以提升版式的跳躍率，極大的增強(qiáng)視覺(jué)張力。

將某些字符單獨(dú)放大，當(dāng)大到一定程度之后，在視覺(jué)上我們不再當(dāng)它是一個(gè)文字，而是一個(gè)圖形。

圖形化的文字也是強(qiáng)化對(duì)比的有效方式之一。

手寫(xiě)字體是另外一種將文字圖形化的方式。

在上圖中，手寫(xiě)字的輕松、活潑，與工整的正文形成了強(qiáng)烈的對(duì)比。使得整個(gè)畫(huà)面一下子就充滿了生機(jī)。

下面我們用一個(gè)實(shí)操例子看看怎么通過(guò)強(qiáng)化對(duì)比，還強(qiáng)化畫(huà)面的視覺(jué)沖擊力。

下面這個(gè)男裝廣告，按照常規(guī)思路我們摳好圖之后，然后選好合適的背景色，再把文字按步就班的排版好，一個(gè)基本及格的廣告就做好了。

這樣的廣告看起來(lái)好像沒(méi)啥問(wèn)題，但又覺(jué)得有點(diǎn)兒不對(duì)勁。它清晰的將廣告的信息傳達(dá)出來(lái)了，但是也就僅僅這樣，我把這種設(shè)計(jì)稱之為“不痛不癢”的設(shè)計(jì)。

就好像一個(gè)有氣無(wú)力的導(dǎo)購(gòu)員，怎么可能讓你會(huì)有購(gòu)買(mǎi)的沖動(dòng)？

優(yōu)秀的電商廣告不僅僅是將信息傳達(dá)出來(lái)，更重要的是將信息聚焦、放大，更強(qiáng)烈的視覺(jué)沖擊力才能刺激到用戶的購(gòu)買(mǎi)欲。

下面我們看看怎么通過(guò)強(qiáng)化對(duì)比來(lái)增加畫(huà)面的視覺(jué)沖擊力。

首先是盡量把商品圖放大，讓用戶更容易地感知到商品的細(xì)節(jié)。

在顏色上多使用對(duì)比色，互補(bǔ)色，刺激用戶的眼球。

文案的排版上，要營(yíng)造出層次感，一眼看過(guò)去能看到重點(diǎn)。

經(jīng)過(guò)一番調(diào)整之后，整個(gè)廣告的視覺(jué)力度大大地提升了！

再來(lái)一個(gè)案例。

最近《慶余年》比較火，我們就以這個(gè)為主題做一張海報(bào)。

先去劇照里面選擇一個(gè)角色作為海報(bào)主體，選誰(shuí)呢？

當(dāng)然是選擇被演戲耽誤的設(shè)計(jì)師——肖戰(zhàn)小哥。。。

照片原本的比例是橫向構(gòu)圖的，所以我們需要把背景圖拉伸一些，鋪滿整個(gè)畫(huà)面。

接著用書(shū)法字體寫(xiě)上劇名，為了讓標(biāo)題更有張力，我們把字號(hào)放得很大，直到撐到畫(huà)面以外去。

找來(lái)一張金色的紋理圖，疊加在文字上，OK，質(zhì)感瞬間+10086!

將處理好的文字復(fù)制一層，往面下移動(dòng)幾個(gè)像素，這樣文字就有了一定的厚度。最后再用相互穿插的方式，將小文字排版好。

大家在排版的時(shí)候，一定要注意小字的處理方式。小字在視覺(jué)上是起到輔助作用的，可以幫我們平衡畫(huà)面，調(diào)節(jié)排版節(jié)奏，豐富畫(huà)面層次，簡(jiǎn)直就是妙用無(wú)窮。

就問(wèn)你一句，帥不帥？！

好了，

到這里電子雜志風(fēng)排版的教程就完整地結(jié)束了。

大家不只是看進(jìn)去，更重要的是親自動(dòng)手。