封面設計過程，一個網(wǎng)頁設計師的必備技能！

2022-10-22 2918 0

維塔利·弗里德曼請我設計一個印刷版的封面和版面粉碎雜志，一本面向網(wǎng)頁設計者和開發(fā)者的雜志。然而，我當時為封面和內(nèi)部模板布局創(chuàng)建的設計被擱置了一段時間，因為該項目因其他優(yōu)先事項而暫停了大約兩年。后來，之后粉碎雜志推出他們的新網(wǎng)站，一個新的風格誕生了。

2016年為粉碎雜志印刷而創(chuàng)作的舊封面設計

2018年年中左右，項目重燃，我被要求為雜志設計新的版面模板。后來在今年年初左右，我也重新設計了封面?，F(xiàn)在，一個閃亮的新的試點問題粉碎雜志印刷（查看樣本PDF)已經(jīng)上線。

我很高興看到他們選擇了我最初的目錄設計，因為我自己也非常喜歡它。我后來創(chuàng)作的版本(參見超過右邊的圖像)是完全不同的，因為我追求的是更接近當前設計風格的東西。

對我來說，目錄是一個做事情的機會樂趣和動態(tài)的與。首先，有(頁碼)可以玩。你可以用數(shù)字做很多不同的事情，比如把它們調(diào)大，讓它們彈出來。在最初的布局中，我用這條彩色的線將每個部分連接起來，順便說一句，這條線也用在另一頁上。印刷品的優(yōu)勢在于你可以自由地按照自己喜歡的方式擺放物品。

如果你有適當?shù)腃SS知識和技能，在網(wǎng)絡上你可以做很多事情。不過，這個目錄并不明顯，也不容易變成網(wǎng)頁。然而，奧利維亞·吳成功地這樣做了。她已經(jīng)把我的目錄轉換為響應目錄使用CSS網(wǎng)格。章節(jié)之間的相互連接根據(jù)視口寬度重新對齊和重新構造。對于一個通常被忽視的組件來說，這是一個很好的解決方案。

在我2016年的第一個設計中，我可以選擇字體，我對設計風格有完全的自由。這是完全不同的——非常幾何，更現(xiàn)代。所以我很高興看到雜志的最終版面采用了一些設計，比如目錄和導言的頁面設計。

重塑以適應新的設計風格

現(xiàn)在的挑戰(zhàn)是重塑設計，以適應當前的橙紅色圓形和卡通貓的風格。答案當然非常簡單:從頭開始。

頭腦風暴和素描

幸運的是，第一版的主題已經(jīng)確定，這使我更容易思考一個合適的插圖。粉碎印刷#1將是關于倫理學和隱私。就整體設計概念而言，我的第一個想法是沿著以下方向嘗試一些東西Noma Bar的“負空間”設計風格。當然，說起來容易做起來難，但我認為如果我能成功，想出那樣聰明的東西，那就太棒了。

寫下幾個關鍵詞后(發(fā)現(xiàn),注意,追蹤)，像一只眼睛、一個鑰匙孔和一個放大鏡這樣的東西在我的插圖中作為合適的主題出現(xiàn)在我的腦海中。至于“追蹤“我想到了一串數(shù)字數(shù)據(jù)，我看到它們是由1和0組成的完美曲線。所以我涂鴉了一些基本的想法。

靈感瀏覽

在設計這個封面的時候，我做了大量的瀏覽。這里有一些啟發(fā)了我的圖片。左下角的那張純粹是為了版面給我的靈感。在右上角的一個，我真的很喜歡圓形，加上它的簡單和對比色。中上和右下角的一個使用可愛的數(shù)字，和一個有趣的垂直2D方法。左上角的有很好的平滑的形狀和顏色，我喜歡它強烈的形象?？隙ㄓ懈嗟膱D像，但這五個對我來說是一般的。

激發(fā)我封面設計靈感的圖片

我通常首先選擇我的調(diào)色板來開始一個設計。我在這里選擇的顏色純粹是因為我覺得它們很配。我不確定我會使用所有的顏色，但不知何故，我習慣了在我的畫板上方放置一個圓形的調(diào)色板。然后我使用顏色選擇器工具來選擇我想要應用的顏色填充，或者我選擇它們并制作它們?nèi)謽颖尽?/p>

選擇調(diào)色板

然后我用放大鏡的涂鴉作為眼睛插圖畫家在色彩和構圖上做了一些調(diào)整。我認為在底部添加一些彩色條紋會給插圖帶來引人注目的效果。它們代表從用戶那里收集的數(shù)字數(shù)據(jù)，并轉換成分析圖。

我最終得到了左圖所示的設計。(忽略雜志的名稱，因為它后來被改變了。)我不確定我吃了多少橙紅色的食物應該所以我嘗試了一個有很多橙色的版本，盡管我更喜歡另一個。

雖然我確實喜歡這個結果，但作為第二個概念，用足跡做一些事情的想法也吸引了我。我想象一個人拿著智能手機到處走，留下他們所有互動的文字痕跡。這條軌跡被提取，放大，保存和分析。在開始的時候，我加了一個放大鏡。我還會加入一些圖形條，但此時我不知道在哪里或如何將它們?nèi)谌胛业淖髌分?，盡管我已經(jīng)在嘗試使用一些圓形背景，結合一些微妙的圖案。

通常，我不會勾畫出我的整個設計。我只是快速地涂鴉這個想法，并更詳細地勾畫出我需要的元素，就像那個拿著電話的人。一旦我有了固定的概念，我就開始設計Adobe Illustrator。首先，我創(chuàng)建了一個網(wǎng)格，用于背景形狀，也用于定位軌跡和圖形。完成最終設計需要幾個步驟。

建立網(wǎng)格

這靈感圖像在左下方[1]鼓勵我在標題上方留有大量空白，在下方留有一些空白來添加三篇關鍵文章。至于插圖本身，我設想使用一個正方形網(wǎng)格，可能一直到書脊和背部。

我創(chuàng)造了這個方形網(wǎng)格并將導軌放置在單獨的層中。一旦設置好了，我就從行走的人和他的智能手機開始，把他放在左上方的某個地方。

接下來是彎曲的路徑。我只是在網(wǎng)格上畫了一條有角度的線，然后用邊角部件將它們轉換成完美的圓角。我在考慮在軌跡上使用1和0，因為這是我可視化數(shù)字數(shù)據(jù)的方式。我把彎曲的路徑變成了一條很細的虛線，中間有一個很寬的缺口，作為放置數(shù)字的指引。一旦我開始在每個點上放置數(shù)字，它看起來太忙了，所以我決定在每個數(shù)字之間放置一個小點。

Adobe Illustrator中顯示的最終封面設計，帶有網(wǎng)格參考線和圖層面板。

過程中的下一件事是背景的創(chuàng)建。我腦子里只有一個模糊的想法:用調(diào)色板上不同顏色的圓角組成垂直的幾何圖形。在這個階段，我做了很多實驗。我一遍又一遍地移動和重新著色形狀。一旦我完成了平面的彩色形狀，我就開始在上面添加圖案。我嘗試了微小的點網(wǎng)格，我隨機地塑造了長度和寬度，并應用了顏色。老實說，這完全是一種直覺，嘗試一些東西，然后嘗試另一些東西，比較兩者并選擇最有效的:改變顏色，改變透明度模式，不透明度值，等等。

條形圖和圖標是在最后一個階段創(chuàng)建的，還有放大鏡、書脊和背面。我只是把這個想法放在腦后，一直等到我準備好了人物和背景的形狀。最后，我添加了一些基本圖標來表示對數(shù)據(jù)的操作類型，比如地理定位。

在這個階段，我做了很多實驗。我腦子里只有一個模糊的想法，用不同顏色的幾何垂直形狀和圓角組成。

至于封底，我早就設想好了背景構圖一路走來，只是淡了很多。這就是我如何想出在中心使用一個亮區(qū)，在那里有幾條相交的彩色線的想法。

在……里最終印刷版本中，文本被添加到中間空間，很好地框在一個有黃色邊框的圓形框中，所以您在這里看到的線條組合已被刪除，與打印版本不匹配。

我早些時候有過有趣的想法，讓每個版本都有一個漂亮的標志(見文章頂部的圖片 [2])，但這里棘手的是，每個版本都需要有完全相同的厚度，否則整個概念就會分崩離析。這是不現(xiàn)實的，因為我不確定每個版本會有完全相同的頁數(shù)。我必須記住脊柱的寬度是可變的。所以我想出了一個主意，使用某種寬度可以變化的圖案組合，但仍然可以將雜志連接起來。

總的想法是每期使用不同的主題模式。試點問題使用細點結合膠囊圖案。在脊柱中，我使用了其他幾個。這個想法是當你把它們按正確的順序擺放或堆疊時，就能得到一個連貫的組合，這也是購買所有發(fā)行的動機；)

畫畫真的很簡單

在這里，我將描述一個封面插圖的簡單細節(jié)的快速過程:行走的人的臉的創(chuàng)建。我知道很多人都相信在Adobe Illustrator中繪圖并不容易，而且你必須經(jīng)常使用鋼筆工具，但這不是真的。你可以創(chuàng)作美麗的插圖僅使用簡單的形狀，如矩形和圓形，結合角部件，探路者選項和對齊工具。