今天繼續(xù)為大家?guī)?lái)新一期的《拍一張照片,就是一幅海報(bào)》系列文章,重點(diǎn)跟大家講一下如何處理好文案和圖片之間的層級(jí)關(guān)系。

照片一

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

熟悉我的面粉以及看過(guò)我很多照片海報(bào)系列文章的人應(yīng)該發(fā)現(xiàn)了,我非常喜歡拍照,尤其是拍自己走路時(shí)的影子。

像上面這張就是 3 月份滯留在云南的時(shí)候拍的,那時(shí)候我已經(jīng)過(guò)了隔離期一個(gè)多月了,但還是哪也不方便去,只能窩在民宿里,有時(shí)候憋久了也會(huì)想出去溜達(dá)一下透透氣,所以就在附近馬路邊拍了上面這張影子照片。

拍完才發(fā)現(xiàn),頗有一種云游四海的俠客的韻味。

于是當(dāng)時(shí)就回到住所打開 ps 整了下面這幅海報(bào):

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

其實(shí)按理這幅海報(bào)的文案如果改用瀟灑毛筆字會(huì)更好,但是當(dāng)時(shí)條件有限,身邊只有一個(gè)筆記本,手繪板也沒帶,有點(diǎn)不好搞,所以干脆偷懶用了免費(fèi)又通用的思源黑體了。

后來(lái)發(fā)現(xiàn)其實(shí)也勉強(qiáng)可以看,簡(jiǎn)簡(jiǎn)單單的字體和簡(jiǎn)簡(jiǎn)單單的排版,看起來(lái)比較現(xiàn)代,有點(diǎn)像書籍封面了。

至于右邊的兩個(gè)圓形,一方面是讓畫面更平衡,另一方面就是跟當(dāng)時(shí)的心境有關(guān)吧,身在異鄉(xiāng)太久了,很想回家,就想到了足跡地球之類的。然后為了避免太具象,所以用了圓形代替,有個(gè)方向指引的意味。

文字選擇排在右邊也是為了平衡,因?yàn)槲业挠白雍芸孔螅绻淖植环庞疫厱?huì)失衡,但我并沒有完全右對(duì)齊文字,因?yàn)樘珜?duì)齊了也會(huì)顯得呆板,所以我在大標(biāo)題那塊的排版稍微做了點(diǎn)變化,也不影響整體的秩序感。

至于顏色,有些人可能覺得略微詭異了點(diǎn),那你也可以理解為我當(dāng)時(shí)確實(shí)心態(tài)無(wú)法跟普通人一樣了,所以色彩上會(huì)比較情緒化。

再一個(gè)因?yàn)橛白舆@類東西本來(lái)就是比較神秘、抽象的東西,有人拿來(lái)撒狗糧,有人拿來(lái)耍可愛,還有電影里關(guān)于影子的畫面大多也都比較詭異,所以設(shè)計(jì)者想怎么表達(dá),觀眾想怎么理解都是可以的。

就像我以前的系列影子海報(bào),每一幅畫面給人的感受也不一樣,我設(shè)計(jì)它們的時(shí)候是自由的,你們看的時(shí)候也是。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

照片二

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

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

比如上面這張,當(dāng)時(shí)并沒有想過(guò)要設(shè)計(jì)海報(bào),就是覺得想給它大量留白,會(huì)顯得很夏天,很清爽。

這些旅游時(shí)拍的照片已經(jīng)在我的手機(jī)里躺好幾個(gè)月了,等回到家整理出來(lái),發(fā)現(xiàn)這張照片拿來(lái)設(shè)計(jì)海報(bào)應(yīng)該會(huì)很不錯(cuò)。

于是就有了下面這幅海報(bào),取名《普吉島的一抹綠》。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

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

前一幅海報(bào)看起來(lái)會(huì)有點(diǎn)不開心、有點(diǎn)壓抑的樣子,但是這一幅海報(bào)立馬就變得很清爽,很隨性的樣子。因?yàn)樵谝咔楸┌l(fā)以前,我在泰國(guó)旅游的那幾天就是我這幾個(gè)月最開心的時(shí)候啦。

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

文字選擇豎版排版放在右邊,是因?yàn)樵掌筮咃枬M,右邊很空,而且中間有一條由葉子邊緣組成的分割線,方向性已經(jīng)有了,所以這么排版整體會(huì)比較協(xié)調(diào),比較平衡。

另外,這些不是現(xiàn)成的字體,也沒有特定的規(guī)律在里面,就是隨心去寫,文字排版也是大大小小的,有些節(jié)奏感和韻律在里面就好了。

然后設(shè)計(jì)的時(shí)候就假想是自己穿著清涼的吊帶長(zhǎng)裙,打著赤腳,拿著一只畫筆在潔白的墻上亂涂亂畫,很愜意的樣子,所以文字效果的處理就是這么來(lái)的。

照片三

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

這張照片也是滯留在云南昆明的時(shí)候拍的。

雖然之前一直聽說(shuō)昆明是花城,但我那時(shí)候幾乎不怎么出門,所以也體會(huì)不到,直到后來(lái)有一天民宿老板突然發(fā)消息告訴我,附近有個(gè)景點(diǎn)可以去看看,步行十幾分鐘就到了。

于是真的看到很多花了,而我又是一個(gè)特別喜歡花的人,尤其是上面這種虞美人,平時(shí)都很難在花店買到,雖然我去看的時(shí)候花都凋謝得差不多了,但還是很開心的,因?yàn)槲液镁煤镁脹]有看到花了。

拍完花發(fā)朋友圈,好多人都說(shuō)漂亮,又喊著要我設(shè)計(jì)海報(bào),于是就有了下面這幅《虞美人》。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

為什么會(huì)把好好的一幅風(fēng)景照片調(diào)成這種顏色,因?yàn)楫?dāng)時(shí)看到這種五顏六色的花的時(shí)候,很自然而然地聯(lián)想到了日本攝影蜷川實(shí)花的攝影作品,她的作品多以花為主題,而且色彩非常豐富濃郁,很有個(gè)人特色,我個(gè)人也是很喜歡。

所以就嘗試著調(diào)了個(gè)色,以藍(lán)色為主調(diào),點(diǎn)綴一些橙紅、玫紅、白色的花,畫面立馬豐富起來(lái)了,而且還有點(diǎn)像一幅畫了。

另外,虞美人這幾個(gè)字是用的現(xiàn)成的字體,但是什么字體我也忘了,因?yàn)檫@幅海報(bào)也是當(dāng)時(shí)在云南的時(shí)候用筆記本設(shè)計(jì)的,源文件在筆記本上,但自從回家后我都沒有打開過(guò)筆記本了,所以,等我哪天心血來(lái)潮了再打開筆記本看看是啥字體吧。

之所以選擇這種字體,是因?yàn)橛幸环N日式的隨性和毛筆字的厚重感在里面,跟我整個(gè)海報(bào)濃郁的色調(diào)還比較搭。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

△ 花瓣可以搜索蜷川實(shí)花的攝影作品

那有人可能會(huì)問(wèn),為什么大標(biāo)題文字會(huì)放在左下角的位置呢?按理原照片它本身的構(gòu)圖是重心偏左下角的,文字不是應(yīng)該放到右上角才會(huì)比較平衡嗎?

我想說(shuō),做設(shè)計(jì)不能太呆板地思考平衡和節(jié)奏感,還應(yīng)該考慮色彩的影響。

因?yàn)槲疫@里把原圖大面積的綠色調(diào)成了藍(lán)色,而藍(lán)色和橙色是互補(bǔ)色,這兩個(gè)顏色放一起對(duì)比非常強(qiáng)烈,而且調(diào)色后的畫面對(duì)角線構(gòu)圖更加明顯了,橙色的顏色范圍又基本都分布在了對(duì)角線周圍,所以我需要一個(gè)超大面積的文字壓在左下角的對(duì)角線上,才能讓整體畫面平衡起來(lái)。

  • 做設(shè)計(jì)的時(shí)候思維靈活一點(diǎn);
  • 不同的色彩是有不同的重量感的,如果你改變了其中一種色彩,那么整體的重心可能會(huì)發(fā)生改變;
  • 如果要在原本就比較平衡的畫面里增加其他元素,諸如文字、圖形之類的,可以通過(guò)改變這些元素的大小、位置、色彩來(lái)達(dá)到一個(gè)新的平衡。

總而言之,我們不管是設(shè)計(jì)海報(bào)也好,還是設(shè)計(jì)頁(yè)面或 banner 也好,都相當(dāng)于是在一個(gè)容器里把玩里面各種元素的平衡感,而我們就是這種平衡感的掌控者。

這么聽起來(lái),成為一枚設(shè)計(jì)師是不是爽爆了?這也是為什么當(dāng)你完成一幅滿意的作品之后,會(huì)有一種成就感的原因之一。

照片四

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

又到了吃小龍蝦的季節(jié)了,身為湖北人的我當(dāng)然是少不了吃小龍蝦,并且作為一枚攝影愛好者,見什么拍什么早已成為了習(xí)慣,于是就有了上面這張照片。

拍完才發(fā)現(xiàn),怎么平平無(wú)奇的小龍蝦被我拍出了一種別樣的美感?于是我就琢磨著是不是也可以拿來(lái)做一幅海報(bào)呢?所以就有了下面這幅海報(bào)。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

原照片雖然好看,小龍蝦看起來(lái)也可口又新鮮,但是把它拿來(lái)做海報(bào)還是需要花點(diǎn)心思去考量的,主要問(wèn)題在于以下幾個(gè)方面:

  • 原圖畫面很飽滿,沒有多少空地可以放文字了;
  • 原圖里龍蝦的擺放很隨意,所以畫面看起來(lái)其實(shí)有點(diǎn)亂;
  • 漁網(wǎng)的虛化效果太狠太多了,如果做龍蝦海報(bào)會(huì)有點(diǎn)視覺干擾。

而我們?cè)O(shè)計(jì)海報(bào),尤其是當(dāng)你把主題定為了賣貨和新品宣傳海報(bào)類型,那你是不可能不放文案信息的,所以如何解決在這種畫面比較亂、干擾比較多的畫面上保證文案能清晰展示,成了首要解決的問(wèn)題。

所以大家會(huì)發(fā)現(xiàn),為了突出文案,我把畫面壓暗了,同時(shí)要保留蝦的質(zhì)感給人新鮮的感覺,并且主題文案占面積很大,壓在了主角龍蝦的身上。

另外那些虛化網(wǎng)通過(guò)調(diào)色變成了藍(lán)色的光斑,跟蝦本身的顏色形成了冷暖對(duì)比,畫面視覺會(huì)更有沖擊力,雖然很多人會(huì)覺得食物應(yīng)該用暖色更有食欲,但是我這是活蝦,水生物,我覺得冷色調(diào)才更符合新鮮水生物的感覺,所以就這么處理了。

不過(guò),我在設(shè)計(jì)完之后才發(fā)現(xiàn),其實(shí)我應(yīng)該把文案改成「深夜小龍蝦」或者「蹦迪小龍蝦」更合適。但是后來(lái)我轉(zhuǎn)念一想,不能每次都光看我做,改文案這種事情就交給你們吧,就按我的排版方式來(lái)改文案,正好給你們練手文案排版。

再給大家舉一個(gè)關(guān)于圖片和文案層級(jí)關(guān)系的例子吧。

今天有一位面粉發(fā)了一張圖給我,是自己設(shè)計(jì)的練手海報(bào),她也把文字壓在了產(chǎn)品上面排版,但不確定這樣做合不合適:

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

我個(gè)人感覺他這幅海報(bào)如果是想模擬設(shè)計(jì)一個(gè)關(guān)于燈的宣傳海報(bào)的話,是沒有必要把文字壓在產(chǎn)品上面的,雖然他這個(gè)排版其實(shí)還不錯(cuò),大家可以看看,具體原因我后面會(huì)說(shuō)。

這位面粉的原圖:

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

他設(shè)計(jì)的海報(bào):

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

看起來(lái)比較日系,其實(shí)構(gòu)圖排版都還可以。

但是我這里有必要跟大家說(shuō)一下這個(gè)問(wèn)題,什么時(shí)候該把文字壓在產(chǎn)品上面,什么時(shí)候不必這么做的問(wèn)題。

正常情況下,我們能不壓產(chǎn)品就不要壓,因?yàn)楸囟ㄟ€是會(huì)遮住部分產(chǎn)品,造成一些視覺干擾。比如前面的小龍蝦,也有這個(gè)問(wèn)題,但我是迫不得已,那張圖摳圖也沒法摳,裁剪也沒處裁,但必須要用它來(lái)做海報(bào)怎么辦呢?只能想其他法子,比如調(diào)色等方式來(lái)處理。

但你這里的畫面很干凈,你的產(chǎn)品圖也是完整的,所以選擇性就很多了,文案壓產(chǎn)品這種方式就完全沒必要了,而是可以通過(guò)調(diào)整產(chǎn)品大小和位置的方式,給文案騰出多一點(diǎn)位置,在空地兒排版就好。

比如,我做了一個(gè)簡(jiǎn)單的演示,如下圖所示:

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

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

所以還是我前面提到的,我們做設(shè)計(jì)的時(shí)候可以思維靈活一點(diǎn)的,要懂得見機(jī)行事。

當(dāng)然,如果只是為了練習(xí)各種不同的排版方式和自己爽,完全不考慮商業(yè)方面的問(wèn)題,那就是隨意怎么搞都可以啦,就像我也有很多影子海報(bào)設(shè)計(jì)也是自己開心就好。

照片五

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

自從上次把小面團(tuán)和小面包(我的貓)送回老家后,我就有 3 個(gè)多月沒秀過(guò)它們的照片了。

上周我在臥室辦公,回頭一看,小面團(tuán)怎么跑到羽絨服上面躺下了,全是掉的白毛毛有沒有?

我心里想這真是個(gè)會(huì)找地兒享受的主兒,剛想把它抱走,才發(fā)現(xiàn):「咦?我的羽絨服上剛好有一個(gè)帶著天使翅膀的愛心圖案,小面團(tuán)躺上面好可愛,而且我以前設(shè)計(jì)海報(bào)從來(lái)沒用過(guò)軍綠色,但是這種軍綠色小面團(tuán)居然也能駕馭,哈哈,要不拿來(lái)設(shè)計(jì)成海報(bào)試試?」

于是,就有了下面這幅海報(bào),感覺是可愛的小面團(tuán)登上了時(shí)尚雜志封面了。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

這種風(fēng)格的海報(bào),文字粗一點(diǎn)大一點(diǎn)都沒關(guān)系,而且英文也可以多用,我這里把英文用來(lái)作為背景圖案處理,所以左右錯(cuò)落排版就很有感覺了。再做點(diǎn)破舊的效果,跟這種軍綠色比較搭。

后來(lái)一想,當(dāng)初決定拿這張照片做海報(bào)就是覺得面團(tuán)背后有個(gè)天使圖案很可愛,但是這里好像把最關(guān)鍵的東西丟了,后來(lái)干脆又重新畫了一對(duì)翅膀放在小面團(tuán)后面,如下圖所示:

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

這樣就合情合理了,因?yàn)槲业挠鸾q服上面的愛心天使圖案是這樣的:

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

現(xiàn)在剛好是翅膀留在身上了,小面團(tuán)把愛心拿在手里,剛好想要把愛心送給我,她是愛我的。

你看,設(shè)計(jì)真的是一件很有意思的事情。

而且生活中也處處是靈感,只要你有一顆愛生活的心和發(fā)現(xiàn)美的眼睛。

歡迎關(guān)注作者的微信公眾號(hào)做設(shè)計(jì)的面條,一個(gè)干貨與文筆俱佳的美女設(shè)計(jì)師。

如何處理好文案和圖片之間的層級(jí)關(guān)系,看這篇文章就夠啦!

收藏 412
點(diǎn)贊 236

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。