如何做出優質圖片

以下內容是我在製作banner時的簡略分析,以及平日素材的積累和應對突發任務時的思考。

作為設計師,在工作中我們可能會遇到下午給方案,下班之前出banner的需求。也許我們對於製作banner的方法輕車熟路,但突發的情況總會讓我們措手不及。

措手不及的結果就會導致我們設計產出物的質量有所下降。畢竟,合理的時間保障對於設計來說還是非常重要的。

下面提到的快速製作banner的方法,需要我們平時的積累,以及對設計軟體合理的運用。

banner的結構大致分為三層:背景層、裝飾層、文案層。背景層會確立整體banner的風格或配色;裝飾層起到點綴作用,並可以控制整體版式的平衡;文案層是核心內容的展示,以展示主要文字為主。三層級互相組合搭配,從而支撐起整個banner。

banner的常見版式:①左右排版、②居中排版。

受到文案字數限制、所選搭配元素、產品的屬性等原因,版式的選擇需要根據實際情況進行判斷。

常見的banner構圖樣式組合有:平鋪樣式、環繞樣式、傾斜樣式、斜切樣式、放射樣式、isometric樣式、三角樣式等。

背景層、裝飾層、文案層,三者之間有著密切的關系。

比如:背景層設計的過於復雜,那麼內容文字的處理就要傾向於簡潔,反之亦然;而裝飾層也並不是必須要存在於每一個banner當中。當背景層中內容已經很豐富的時候,裝飾的內容可以刪去。

當背景為純色時,需要適當的添加點綴物。而且可以對文字進行處理增加吸引力,避免整體的單調。

背景的種類大致分為適量圖形、字體、顏色和圖片四種。

圖片包括寫實圖片和卡通圖片等;顏色分為純色或漸變;字體放大也可以當做背景;矢量圖包含的組合有很多。簡單的圓形、方形。甚至是點、線的組合都可以運用在背景中。每當節日臨近,也可以匹配一些節日風格的適量圖形進行設計。

裝飾的點綴應該是錦上添花的。不能盲目的因為視覺效果而添加過多的裝飾,這樣反而會誤導用戶,造成混亂的感覺。不利於文案內容的傳達。

適當的點綴和修飾,可以讓頁面避免單調;也可以使banner的元素之間達到平衡,視覺效果更加和諧。同時,文字的運用也是裝飾點綴的關鍵。

根據產品屬性的不同,舉例說明:金融類的banner可以使用較小或較細的字體進行搭配。同時,使用點狀分布排列營造高端感;電商類的banner可以使用漸變的圓形或線條進行修飾。目的是搭建出歡快的、促銷的感覺,吸引用戶點擊。

①banner的設計當中,文案字數的多少也至關重要。過多字數或復雜的內容非但不能讓用戶清楚文案要表達的事情,反而會讓用戶感到麻煩。我明白交給設計師內容的小夥伴想把活動解釋清楚的初衷。但在注重用戶體驗的當下,人們的耐心顯然是無法接受過多文字的圖片。

因此,當我們接收到的文案字數過多的話,要第一時間果斷提出自己的想法。文案中的賣點和痛點是最重要的兩個部分,其他內容都可以省略。

同時,過多的字數也是我們設計當中的困難。較小尺寸的圖片,可能單單放幾行文字就已經無法再安排其他的布局設計了。

②字體方面主要分為襯線字體和非襯線字體。襯線字體的筆畫有修飾,且粗細不同,參考宋體;而非襯線字體就比較橫平豎直,筆畫粗細相同。襯線字體大多用在古典風格或民族風格的banner設計當中。非襯線字體適用的范圍就比較廣,可以說絕大多數的banner中都可以運用。

③文案分為主標題和副標題。主標題自然是最精簡也是最搶眼的部分,而副標題可以是主標題的解釋說明,也可以是接主標題的新文案。區別搭配有助於用戶第一時間分辨出文案的主次,讓頁面更加協調。

好的配色需要一定的配色基礎以及日常練習的積累。但是當遇到特殊狀況時,顯然並不會在顏色上留給我們有太多的時間。所以,我們就需要一些輔助的方式來完成顏色的搭配工作。

這里我推薦兩個網站:①

/

②

第一個網站會推薦許多不錯的顏色搭配,其中有不少是我個人比較喜歡的;第二個網站是materialdesign官網中的color部分。其中的Colorpalettes在我們輸入顏色之後自動生成搭配。

有了這兩個網站的配色加持,會大大縮短我們設計banner的時間。

當banner設計完成後,我們的工作可能並沒有就此結束。在設計APP產品之初,如果我們在不同頁面的很多地方都設計了不同尺寸的,便於運營做推廣的banner區域的話,那麼後期我們在修改這些尺寸的時候就會非常頭疼。可能一張圖我們需要改成七八張banner。並且有的圖片的尺寸並沒有規律可言。

因此,我們在設計APP之初,就要想到這樣的情況。在設計banner時,設定好統一比例,方便後期更改;同時,要運用photoshop中的智能對象等功能,快速修改尺寸。

要在極短的時間內設計出效果不錯的banner,除非能力強悍或是胸有成竹,我能想到的方法就在於平日的「積累」。

文中提到的背景、裝飾,都是碎片化可拼接的內容。我們在工作或平日里可以設計出足夠的素材,那麼在時間緊迫的時候進行拼接就好。

文字字體方面我們可以分析出平時所給文案中的一些「套路」;分析裡面總是會提到的幾個字或者是相似度很高的標題,來進行字體的設計。

無論是簡單也好、復雜也好,把平日里製作的元素素材進行整理歸納,建立自己的素材庫。這樣,在面對措手不及的任務時才不至於慌亂。花瓣或者Eagle就是兩個不錯的素材整理工具。

提到臨摹,我們就不得不提到另一個詞「抄襲」。其實,抄襲的認定是見仁見智的。每個人都有自己的認定界限。而我能想到的避免抄襲的方法,就是「刻意改變」。以下面的小人為例。

提到臨摹,我們就不得不提到另一個詞「抄襲」。其實,抄襲的認定是見仁見智的。每個人都有自己的認定界限。而我能想到的避免抄襲的方法,就是「刻意改變」。以下面的小人為例。

和日常的元素搜集整理一樣,模板也需要我們提前進行准備。我們需要找准產品定位,和往期banner的規律為其量身設計模板。可以參考原型圖的形式製作黑白排版樣式。

上文中提到的尺寸問題,我們可以用置入鏈接智能對象的方法,來快速批量修改banner的尺寸。

①篩選出尺寸相似或形狀相似的banner;

②找出關鍵banner尺寸,以此作為基準作圖;

③banner中的文案文字的上下高度范圍,要在眾多尺寸中的最小高度banner的尺寸范圍內。

④在基準尺寸圖中進行設計。打開PS其他尺寸的文件,選擇文件--置入鏈接的智能對象--調節大小。這樣我要需要調整時,只需要修改基準banner圖一張就夠了。

作為設計師而言,我相信都不願意碰到要求臨時出圖的情況出現。但我們也需要為這種情況而做准備,以確保在時間緊迫的時候來保證自己設計產出物的質量。因此,日常的收集和積累就尤為重要。