渣圖也能質(zhì)感炸裂,五個(gè)案例教會(huì)你!
之前圖趣剛給同學(xué)們分享過(guò)一篇教程:《素材low?看我玩轉(zhuǎn)百變中文排版》,對(duì)于沒(méi)有高質(zhì)量的素材,很多設(shè)計(jì)師無(wú)從下手,覺(jué)得自己拿到了一張比較普通的圖片,沒(méi)有質(zhì)感,色調(diào)乏味。最后做出的圖稿太過(guò)簡(jiǎn)單,只是簡(jiǎn)單整合信息對(duì)整體畫(huà)面的作用從視覺(jué)效果來(lái)看并不大。
所以平時(shí)看設(shè)計(jì)的時(shí)候就開(kāi)始哀嘆,怎么人家拿到的圖那么好,我這個(gè)命哦...
確實(shí),平時(shí)我們根本拿不到這么好的圖,不是所有的甲方都這么有錢(qián),有專(zhuān)業(yè)的模特,專(zhuān)業(yè)的攝影,專(zhuān)業(yè)的營(yíng)銷(xiāo)團(tuán)隊(duì)。但是問(wèn)題是,甲方有錢(qián)的人家找你做嗎?你多便宜啊。心里沒(méi)有點(diǎn)數(shù)嗎?
這次的教程我們用五個(gè)方案來(lái)逐步一點(diǎn)一點(diǎn)告訴你,不同的圖片處理對(duì)于整體畫(huà)面的影響力到底有多大。那么具體到一個(gè)畫(huà)面當(dāng)中,需要顧及的部分挺多的。
圖片處理,構(gòu)圖方式,文字整理分組排列,顏色選擇,圖形點(diǎn)綴,這些方面我們盡量都注意到。
首先,我們來(lái)看一下,這次我們拿到的圖片,為了裝作圖片的質(zhì)量一般,我的確是隨便百度了一個(gè)圖。而且是顯示的第一個(gè)圖,都不帶挑的。很少有像我這么真誠(chéng)的人了,注意珍惜。
再來(lái)看一下文案,文案這次我就簡(jiǎn)單處理一下,什么叫做簡(jiǎn)單處理呢?就是把字體選好,中英文搭配好,字重選對(duì),字距調(diào)整,行距調(diào)整,信息分組,層級(jí)明確,字距拉開(kāi),簡(jiǎn)單的形式化處理,你看,就是這么簡(jiǎn)單。
文案的處理不用特別復(fù)雜,你要注意,無(wú)論如何我們是要傳達(dá)信息給受眾的,不要陷入自嗨,整理信息的時(shí)候不要你覺(jué)得哪個(gè)重要哪個(gè)次要,站在受眾的立場(chǎng)來(lái)看。
如果你要去健身的話,你關(guān)注的信息點(diǎn)到店重要的有哪些,哪些不重要,層級(jí)順序又是如何劃分的?多想想。
我們拿到的圖是這樣的,所以你要觀察了,這是一張人物為主的畫(huà)面,人物在一個(gè)場(chǎng)景之內(nèi),這個(gè)場(chǎng)景重要嗎?重要,她是在健身房運(yùn)動(dòng)的一個(gè)狀態(tài)。但是這個(gè)場(chǎng)景我們不用全部保留,摘取一部分就可以了。所以這一步,我們要進(jìn)行圖片裁切,讓畫(huà)面進(jìn)行主要聚焦。讓第一視線留在人物上。
然后用一個(gè)簡(jiǎn)單的圖形讓人物二次聚焦,其余部分我給了百分之八十的黑色透明度疊加。然后加一個(gè)小的常規(guī)裝飾圖形,兩個(gè)小圖點(diǎn)綴。
然后文案依次排列。
這個(gè)一個(gè)非常常規(guī)的方向。
總結(jié)一下這個(gè)案例我們用到的方法主要是兩個(gè)。
01.圖片裁切
02.明暗對(duì)比再次突出主圖。
那么圖片的裁切我們已經(jīng)確定了,下面我們來(lái)簡(jiǎn)單演示一下第二種形式表達(dá)。
這個(gè)案例我們主要看一下,利用簡(jiǎn)單的色彩疊加圖片,處理一下圖片的色調(diào)和質(zhì)感,不需要你做更多復(fù)雜的調(diào)色操作,非常簡(jiǎn)單。
下圖可以看見(jiàn),首先我給圖片做了一個(gè)人物的聚焦?jié)u變,還是沿著第一個(gè)方案的思路,其余部分我全部給了一個(gè)黑色到透明的漸變,文案會(huì)更加清晰一些。
因?yàn)闃?gòu)圖方式幾乎是從左右構(gòu)圖變成了半包圍構(gòu)圖,所以文案的部分我稍微調(diào)整了一下。
對(duì)比第一個(gè)方案,是不是這個(gè)案例圖片的質(zhì)感稍微提升了一點(diǎn)點(diǎn)呢?
總結(jié)一下這個(gè)案例我們主要用到的方法。
01.圖片裁切
02.漸變疊加圖片(我這里用到的是“柔光”)
第三個(gè)案例我們結(jié)合一下案例一和案例二,然后在色彩上可以再突破一點(diǎn),兩個(gè)小圖的部分我也進(jìn)行了簡(jiǎn)單的形式感處理,這樣整體出來(lái)的對(duì)比效果更好一些,更顯質(zhì)感。
有同學(xué)就有疑惑了,這個(gè)左右的對(duì)比有什么依據(jù)嗎?沒(méi)錯(cuò),正是白銀比。
黃金比和白銀比都是常用的一種比例方式,在日本海報(bào)當(dāng)中其實(shí)我們經(jīng)常會(huì)見(jiàn)到白銀比。
但是不要盲目用,如果合適的話就可以加,不能加不要勉強(qiáng)。
扯遠(yuǎn)了,我們來(lái)看一下這個(gè)案例的最終效果。
總結(jié)一下這個(gè)案例我們主要用到的方法。
01.圖片裁切
02.漸變疊加圖片
03.明暗對(duì)比再次突出主圖
04.圖片分成兩部分做白銀比
第四個(gè)案例我們主要來(lái)說(shuō)一個(gè)很重要的調(diào)色功能----漸變映射
這個(gè)功能是在ps里完成,也是比較簡(jiǎn)單實(shí)用的一個(gè)方法。
然后圖像—調(diào)整—漸變映射,找到這個(gè)功能之后,開(kāi)始進(jìn)行細(xì)節(jié)調(diào)色,一直調(diào)到你想要的效,我這里主要是想讓人物的明暗對(duì)比再大一些。
添加文案之后的最終效果。
總結(jié)一下這個(gè)案例我們主要用到的方法。
01.圖片裁切
02.漸變映射
第五個(gè)案例其實(shí)是為了加深大家對(duì)于漸變映射這個(gè)功能的理解,換了一種顏色和排版方式重新演繹了一下第四案例的方向,你會(huì)發(fā)現(xiàn)以上這些案例中我主要用到的構(gòu)圖方式基本還是左右構(gòu)圖,而且人物一直是在左邊,這個(gè)因?yàn)槿宋锏哪抗馐亲詈檬悄芨采w在文案上,受眾會(huì)沿著人物的目光方向來(lái)閱讀文案,也是一個(gè)小細(xì)節(jié)。
然后這個(gè)案例中,我用了一個(gè)簡(jiǎn)單線條與人物之間做了一個(gè)穿插關(guān)系,有同學(xué)就要問(wèn)了,你那個(gè)看也看不懂的英文到底是個(gè)什么東西?看不懂就對(duì)了,我想讓你看懂的話它就是重要信息,如果你看不懂,那么它就只是一個(gè)簡(jiǎn)單的裝飾作用的點(diǎn)綴,儂曉得伐?
總結(jié)一下這個(gè)案例我們主要用到的方法。
01.圖片裁切
02.漸變映射
03.線條與人物的穿插關(guān)系
本文地址:http://m.likemindfilms.com/tutorial/ui4203.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏