如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

今天繼續為大家帶來新一期的《拍一張照片,就是一幅海報》系列文章,重點跟大家講一下如何處理好文案和圖片之間的層級關係。


拍一張照片,就能設計成一幅海報!

《隨手拍一張照片,就是一幅海報》系列設計分享文章終於更新了,快來看看這次有哪些讓人驚豔的海報吧!

閱讀文章 >>


照片一

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

熟悉我的麵粉以及看過我很多照片海報系列文章的人應該發現了,我非常喜歡拍照,尤其是拍自己走路時的影子。

像上面這張就是 3 月份滯留在雲南的時候拍的,那時候我已經過了隔離期一個多月了,但還是哪也不方便去,只能窩在民宿裡,有時候憋久了也會想出去溜達一下透透氣,所以就在附近馬路邊拍了上面這張影子照片。

拍完才發現,頗有一種雲遊四海的俠客的韻味。

於是當時就回到住所打開 ps 整了下面這幅海報:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

其實按理這幅海報的文案如果改用瀟灑毛筆字會更好,但是當時條件有限,身邊只有一個筆記本,手繪板也沒帶,有點不好搞,所以乾脆偷懶用了免費又通用的思源黑體了。

後來發現其實也勉強可以看,簡簡單單的字體和簡簡單單的排版,看起來比較現代,有點像書籍封面了。

至於右邊的兩個圓形,一方面是讓畫面更平衡,另一方面就是跟當時的心境有關吧,身在異鄉太久了,很想回家,就想到了足跡地球之類的。然後為了避免太具象,所以用了圓形代替,有個方向指引的意味。

文字選擇排在右邊也是為了平衡,因為我的影子很靠左,如果文字不放右邊會失衡,但我並沒有完全右對齊文字,因為太對齊了也會顯得呆板,所以我在大標題那塊的排版稍微做了點變化,也不影響整體的秩序感。

至於顏色,有些人可能覺得略微詭異了點,那你也可以理解為我當時確實心態無法跟普通人一樣了,所以色彩上會比較情緒化。

再一個因為影子這類東西本來就是比較神秘、抽象的東西,有人拿來撒狗糧,有人拿來耍可愛,還有電影裡關於影子的畫面大多也都比較詭異,所以設計者想怎麼表達,觀眾想怎麼理解都是可以的。

就像我以前的系列影子海報,每一幅畫面給人的感受也不一樣,我設計它們的時候是自由的,你們看的時候也是。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

照片二

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

這張照片是在普吉島的酒店拍的,酒店的園林佈置和裝修風格都很好,所以幾乎是隨便拍一張照片就很美了。

比如上面這張,當時並沒有想過要設計海報,就是覺得想給它大量留白,會顯得很夏天,很清爽。

這些旅遊時拍的照片已經在我的手機裡躺好幾個月了,等回到家整理出來,發現這張照片拿來設計海報應該會很不錯。

於是就有了下面這幅海報,取名《普吉島的一抹綠》。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

看上去是不是跟前面一幅海報的感覺完全不一樣啦?

前一幅海報看起來會有點不開心、有點壓抑的樣子,但是這一幅海報立馬就變得很清爽,很隨性的樣子。因為在疫情暴發以前,我在泰國旅遊的那幾天就是我這幾個月最開心的時候了。

所以自然而然地想用那種很自由的字體形式,正好我回到家也有大屏幕電腦和手繪板了,工具齊全,做起設計來自然也會得心應手和開心一些,所以就用鋼筆工具和手繪板配合著設計了這幾個字。

文字選擇豎版排版放在右邊,是因為原照片左邊飽滿,右邊很空,而且中間有一條由葉子邊緣組成的分割線,方向性已經有了,所以這麼排版整體會比較協調,比較平衡。

另外,這些不是現成的字體,也沒有特定的規律在裡面,就是隨心去寫,文字排版也是大大小小的,有些節奏感和韻律在裡面就好了。

然後設計的時候就假想是自己穿著清涼的吊帶長裙,打著赤腳,拿著一隻畫筆在潔白的牆上亂塗亂畫,很愜意的樣子,所以文字效果的處理就是這麼來的。

照片三

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

這張照片也是滯留在雲南昆明的時候拍的。

雖然之前一直聽說昆明是花城,但我那時候幾乎不怎麼出門,所以也體會不到,直到後來有一天民宿老闆突然發消息告訴我,附近有個景點可以去看看,步行十幾分鍾就到了。

於是真的看到很多花了,而我又是一個特別喜歡花的人,尤其是上面這種虞美人,平時都很難在花店買到,雖然我去看的時候花都凋謝得差不多了,但還是很開心的,因為我好久好久沒有看到花了。

拍完花發朋友圈,好多人都說漂亮,又喊著要我設計海報,於是就有了下面這幅《虞美人》。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

為什麼會把好好的一幅風景照片調成這種顏色,因為當時看到這種五顏六色的花的時候,很自然而然地聯想到了日本攝影蜷川實花的攝影作品,她的作品多以花為主題,而且色彩非常豐富濃郁,很有個人特色,我個人也是很喜歡。

所以就嘗試著調了個色,以藍色為主調,點綴一些橙紅、玫紅、白色的花,畫面立馬豐富起來了,而且還有點像一幅畫了。

另外,虞美人這幾個字是用的現成的字體,但是什麼字體我也忘了,因為這幅海報也是當時在雲南的時候用筆記本設計的,源文件在筆記本上,但自從回家後我都沒有打開過筆記本了,所以,等我哪天心血來潮了再打開筆記本看看是啥字體吧。

之所以選擇這種字體,是因為有一種日式的隨性和毛筆字的厚重感在裡面,跟我整個海報濃郁的色調還比較搭。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

△ 花瓣可以搜索蜷川實花的攝影作品

那有人可能會問,為什麼大標題文字會放在左下角的位置呢?按理原照片它本身的構圖是重心偏左下角的,文字不是應該放到右上角才會比較平衡嗎?

我想說,做設計不能太呆板地思考平衡和節奏感,還應該考慮色彩的影響。

因為我這裡把原圖大面積的綠色調成了藍色,而藍色和橙色是互補色,這兩個顏色放一起對比非常強烈,而且調色後的畫面對角線構圖更加明顯了,橙色的顏色範圍又基本都分佈在了對角線周圍,所以我需要一個超大面積的文字壓在左下角的對角線上,才能讓整體畫面平衡起來。

  • 做設計的時候思維靈活一點;
  • 不同的色彩是有不同的重量感的,如果你改變了其中一種色彩,那麼整體的重心可能會發生改變;
  • 如果要在原本就比較平衡的畫面裡增加其他元素,諸如文字、圖形之類的,可以通過改變這些元素的大小、位置、色彩來達到一個新的平衡。

總而言之,我們不管是設計海報也好,還是設計頁面或 banner 也好,都相當於是在一個容器裡把玩裡面各種元素的平衡感,而我們就是這種平衡感的掌控者。

這麼聽起來,成為一枚設計師是不是爽爆了?這也是為什麼當你完成一幅滿意的作品之後,會有一種成就感的原因之一。

照片四

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

又到了吃小龍蝦的季節了,身為湖北人的我當然是少不了吃小龍蝦,並且作為一枚攝影愛好者,見什麼拍什麼早已成為了習慣,於是就有了上面這張照片。

拍完才發現,怎麼平平無奇的小龍蝦被我拍出了一種別樣的美感?於是我就琢磨著是不是也可以拿來做一幅海報呢?所以就有了下面這幅海報。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

原照片雖然好看,小龍蝦看起來也可口又新鮮,但是把它拿來做海報還是需要花點心思去考量的,主要問題在於以下幾個方面:

  • 原圖畫面很飽滿,沒有多少空地可以放文字了;
  • 原圖裡龍蝦的擺放很隨意,所以畫面看起來其實有點亂;
  • 漁網的虛化效果太狠太多了,如果做龍蝦海報會有點視覺干擾。

而我們設計海報,尤其是當你把主題定為了賣貨和新品宣傳海報類型,那你是不可能不放文案信息的,所以如何解決在這種畫面比較亂、干擾比較多的畫面上保證文案能清晰展示,成了首要解決的問題。

所以大家會發現,為了突出文案,我把畫面壓暗了,同時要保留蝦的質感給人新鮮的感覺,並且主題文案佔面積很大,壓在了主角龍蝦的身上。

另外那些虛化網通過調色變成了藍色的光斑,跟蝦本身的顏色形成了冷暖對比,畫面視覺會更有衝擊力,雖然很多人會覺得食物應該用暖色更有食慾,但是我這是活蝦,水生物,我覺得冷色調才更符合新鮮水生物的感覺,所以就這麼處理了。

不過,我在設計完之後才發現,其實我應該把文案改成「深夜小龍蝦」或者「蹦迪小龍蝦」更合適。但是後來我轉念一想,不能每次都光看我做,改文案這種事情就交給你們吧,就按我的排版方式來改文案,正好給你們練手文案排版。

再給大家舉一個關於圖片和文案層級關係的例子吧。

今天有一位麵粉發了一張圖給我,是自己設計的練手海報,她也把文字壓在了產品上面排版,但不確定這樣做合不合適:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

我個人感覺他這幅海報如果是想模擬設計一個關於燈的宣傳海報的話,是沒有必要把文字壓在產品上面的,雖然他這個排版其實還不錯,大家可以看看,具體原因我後面會說。

這位麵粉的原圖:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

他設計的海報:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

看起來比較日系,其實構圖排版都還可以。

但是我這裡有必要跟大家說一下這個問題,什麼時候該把文字壓在產品上面,什麼時候不必這麼做的問題。

正常情況下,我們能不壓產品就不要壓,因為必定還是會遮住部分產品,造成一些視覺干擾。比如前面的小龍蝦,也有這個問題,但我是迫不得已,那張圖摳圖也沒法摳,裁剪也沒處裁,但必須要用它來做海報怎麼辦呢?只能想其他法子,比如調色等方式來處理。

但你這裡的畫面很乾淨,你的產品圖也是完整的,所以選擇性就很多了,文案壓產品這種方式就完全沒必要了,而是可以通過調整產品大小和位置的方式,給文案騰出多一點位置,在空地兒排版就好。

比如,我做了一個簡單的演示,如下圖所示:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

這樣是不是產品既突出又完整,文案也醒目了?

所以還是我前面提到的,我們做設計的時候可以思維靈活一點的,要懂得見機行事。

當然,如果只是為了練習各種不同的排版方式和自己爽,完全不考慮商業方面的問題,那就是隨意怎麼搞都可以啦,就像我也有很多影子海報設計也是自己開心就好。

照片五

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

自從上次把小麵糰和小麵包(我的貓)送回老家後,我就有 3 個多月沒秀過它們的照片了。

上週我在臥室辦公,回頭一看,小麵糰怎麼跑到羽絨服上面躺下了,全是掉的白毛毛有沒有?

我心裡想這真是個會找地兒享受的主兒,剛想把它抱走,才發現:「咦?我的羽絨服上剛好有一個帶著天使翅膀的愛心圖案,小麵糰躺上面好可愛,而且我以前設計海報從來沒用過軍綠色,但是這種軍綠色小麵糰居然也能駕馭,哈哈,要不拿來設計成海報試試?」

於是,就有了下面這幅海報,感覺是可愛的小麵糰登上了時尚雜誌封面了。

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

這種風格的海報,文字粗一點大一點都沒關係,而且英文也可以多用,我這裡把英文用來作為背景圖案處理,所以左右錯落排版就很有感覺了。再做點破舊的效果,跟這種軍綠色比較搭。

後來一想,當初決定拿這張照片做海報就是覺得麵糰背後有個天使圖案很可愛,但是這裡好像把最關鍵的東西丟了,後來乾脆又重新畫了一對翅膀放在小麵糰後面,如下圖所示:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

這樣就合情合理了,因為我的羽絨服上面的愛心天使圖案是這樣的:

如何處理好文案和圖片之間的層級關係,看這篇文章就夠啦!

現在剛好是翅膀留在身上了,小麵糰把愛心拿在手裡,剛好想要把愛心送給我,她是愛我的。

你看,設計真的是一件很有意思的事情。

而且生活中也處處是靈感,只要你有一顆愛生活的心和發現美的眼睛。


分享到:


相關文章: