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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最常見的做法大致可以分為這兩種：

一、整體疊壓

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

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

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

更多案例：

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

二、局部疊壓

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

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

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

圖文可以隨意地擺放。相對于整體疊壓，這種方式對圖片素材的精度和比例都沒有硬性要求，同時也給文字留出了很大的處理空間。

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

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

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

先來一張我年輕時候的照片。

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

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

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

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

duang。。。

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

十分鐘搞定，是不是So easy的感覺？

沒辦法，

只要人長得帥，設(shè)計就是做得快！

OK，

再來一個更實用的案例。

比如說要做一個服裝海報，現(xiàn)在有了一張還不錯的主圖。

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

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

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

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

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

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

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

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

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

“dada”這個詞，據(jù)說就是來自羅馬尼亞語的一句口語，意思是“是的，是的”。

大概就是這么個意思：

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

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

一眼看過去，就是三個字：有毛病！

完全就是胡亂拼貼嘛！

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

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

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

比如說服裝設(shè)計：

鞋子：

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

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

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

說一千道一萬，不如自己動手做一下。

下面我們來做一個日本風(fēng)的秋季女裝海報。

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

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

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

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

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

因為想做成日系風(fēng)格，所以可以適當(dāng)?shù)靥砑右稽c(diǎn)日語文字作為裝飾。再添加像小標(biāo)簽，波點(diǎn)這樣的輔助元素，這樣整個畫面就十分豐富了。

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

一張輕松寫意，雜而不亂的海報就完成了！

毫無疑問，對齊是最基本的設(shè)計規(guī)律。

那不對齊、錯位在排版中就是絕對的錯誤嗎？

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

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

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

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

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

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

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

OK，理論講完，

下面看操作！

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

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

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

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

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

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

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

做設(shè)計的都知道：無對比，不設(shè)計。

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

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

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

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

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

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

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

下面我們用一個實操例子看看怎么通過強(qiáng)化對比，還強(qiáng)化畫面的視覺沖擊力。

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

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

就好像一個有氣無力的導(dǎo)購員，怎么可能讓你會有購買的沖動？

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

下面我們看看怎么通過強(qiáng)化對比來增加畫面的視覺沖擊力。

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

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

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

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

再來一個案例。

最近《慶余年》比較火，我們就以這個為主題做一張海報。

先去劇照里面選擇一個角色作為海報主體，選誰呢？

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

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

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

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

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

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

就問你一句，帥不帥？！

好了，

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

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