教你簡(jiǎn)單快速的設(shè)計(jì)Banner

"不要太復(fù)雜,簡(jiǎn)單就好。要大氣,要漂亮!"
這是大多設(shè)計(jì)師面對(duì)需求提出者所共同聽道的一個(gè)聲音,然而說(shuō)簡(jiǎn)單,設(shè)計(jì)并不簡(jiǎn)單。
面對(duì)緊縮的時(shí)間與"大氣"的要求,想要花太多的時(shí)間去雕琢一個(gè)好作品,在工作中并不現(xiàn)實(shí),所以在較短的時(shí)間內(nèi)拿出一個(gè)合格的設(shè)計(jì)品,是十分考驗(yàn)UIDer的。
那么,如何能快速高效的設(shè)計(jì)出一個(gè)漂亮的Banner呢?
選材:仔細(xì)選擇一個(gè)與主題相關(guān)的形象或背景,不要復(fù)雜,簡(jiǎn)單就好。
背景:稍加處理,在背景上留出足夠的文字空間,產(chǎn)品(OR 模特)在1/3到1/4位置,即不會(huì)搶到文字視覺焦點(diǎn),又不會(huì)使自己跑出視野。
配色:從背景(or 模特,即Banner中的圖案元素)選擇2到3種顏色,以保證Banner整體的色彩和諧。
布局:一般來(lái)說(shuō)是不要人物與文字過(guò)分纏繞,有文字部分的背景不要太花。另外,不管怎么排,一定記住,要隱隱的有一種對(duì)齊(這點(diǎn)下面實(shí)例會(huì)講)。
審視:最后審視全局,然后看圖思考,并做調(diào)整:
該突出的是否突出
該弱化的是否弱化
色彩是否和諧
是否"對(duì)齊"
交稿審核

可能空范的理論并不是很好理解,下面以一個(gè)簡(jiǎn)單的實(shí)例來(lái)說(shuō)明上面的幾個(gè)要點(diǎn)的實(shí)際運(yùn)用:
(實(shí)例是隨便一畫,圖片與文字我都不知道是神馬,So莫追究意義。
這里講的是設(shè)計(jì)的思路,或者說(shuō)方法?總之不是PS工具使用教程,所以不會(huì)講如何操作。)
好,廢話結(jié)束,開始主題:

采集所需素材(其實(shí),這也是一種能力)

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

處理背景

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

將背景適當(dāng)?shù)难诱?,以留足文字空間。文字才是主體,人物是輔助。把人物放在邊上,但注意,不要太帖近邊緣,那會(huì)給人感覺空間不足,看著很累。
選擇色彩

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

這里選取了三種色彩,包的米黃色,海天的藍(lán)色,還有人物主色:粉。從圖可以看出,這三種色彩與背景很和諧,相互之間也有足夠的對(duì)比。
字體的選擇上,不要選擇一些奇奇怪怪的字體,使用方方正正的字體,宋體,線體等簡(jiǎn)單而又易讀的字體即可。盡可能的壓制你使用的字體種類,多則亂。
對(duì)文字進(jìn)行排版布局

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

把需要突出的主題放大并放在第一位。
同一種字體,同一顏色,我們還可以用大小做區(qū)分。在保正整體一致的前題下做出不同。
當(dāng)然,我們還可以用其它選好的顏色做出主次分明,區(qū)塊劃分。主題用包的米黃色,中間選用了海天的藍(lán)色,而最后用了粉色。注意,到了這里,請(qǐng)?jiān)倏匆槐閳D。發(fā)現(xiàn)了嗎?"米黃背包"的背景是藍(lán)色,這四個(gè)字非常突出。而下面兩行,與背景相似的色彩,藍(lán)字對(duì)海天,粉字對(duì)沙灘,很和諧。
最后一點(diǎn),也是非常重要的,不管怎么排列文字,一定要隱有一種對(duì)齊。請(qǐng)看下圖:

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

文字的垂直方向,是底對(duì)齊的。水平方向是左對(duì)齊的(人總是喜歡有序的東西...),這樣整個(gè)文字的排版就不會(huì)亂,但又不像板書那般看上去很死板。
文字與人物之間的對(duì)齊很特殊:不要讓文字壓到人物,并且兩者之間要有一定的留白空間。如上圖所示,切記不要讓圖挨字,會(huì)讓人物有"面壁思過(guò)"的感覺。
當(dāng)然,如何對(duì)齊視具體情況而定,這只是一種可能。
審視并微調(diào)細(xì)節(jié)
現(xiàn)在主體已經(jīng)出來(lái)了?,F(xiàn)是還太"簡(jiǎn)單",這不是我們所要的那種"簡(jiǎn)單"。所以我們需要審視并調(diào)整細(xì)節(jié),讓圖更"耐看"。
主題部分夠突出,但有些過(guò)于獨(dú)立,加些簡(jiǎn)單的修飾性內(nèi)容:

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

修飾同樣簡(jiǎn)單,但卻使文字區(qū)域不再是純文字那么單調(diào),圖形的加入,帶來(lái)了活力。但不要用過(guò)于復(fù)雜的修飾,那會(huì)破壞我們想要的"簡(jiǎn)單"。
嗯,現(xiàn)在看起來(lái)好多了,可是文字區(qū)域下面似乎有些空洞,我們?cè)傺a(bǔ)充一點(diǎn)內(nèi)容:

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

同樣是簡(jiǎn)單的文字與簡(jiǎn)單的白色矩形背景,不會(huì)破壞"簡(jiǎn)單",但圖形的加入,又一次帶來(lái)了活力。值得注意的是,"特價(jià)包郵"與"活動(dòng)時(shí)間"仍然存在"對(duì)齊"。
嗯,嗯,現(xiàn)在已經(jīng)可以收工了吧。再看一眼...
夠簡(jiǎn)單,簡(jiǎn)單的沒有一點(diǎn)起色 -_-!!!。最后再給文字加一點(diǎn)小修飾,這里我給主題"米黃背包"和"特價(jià)包郵"的背景加了一點(diǎn)漸變色:

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

也許還可以給背景加點(diǎn)小花樣:

教你簡(jiǎn)單快速的設(shè)計(jì)Banner

OK,再次審視,可以收工了。
課后作業(yè):這個(gè)作品還有不足,你能發(fā)現(xiàn)是什么嗎?提示一下,是空間方面的。思考一下吧,你的收獲會(huì)很大。[思考后的參考答案:按CTRL+A,在本頁(yè)尋找]
定稿并總結(jié)>
收工后總結(jié)一下,這個(gè)Banner,不是很牛掰,但也算的是簡(jiǎn)單,漂亮,大氣。不用復(fù)雜高超的PS技術(shù),只要肯用心思考,用勤奮的雙手去練習(xí)。設(shè)計(jì)一個(gè)簡(jiǎn)單的Banner,很簡(jiǎn)單。

到此,設(shè)計(jì)結(jié)束,我的交流教程也結(jié)束。希望本文對(duì)你有所幫助。我是設(shè)計(jì)師Lenton,下期見。

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
特色推薦
設(shè)計(jì)講座:定期邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司的設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音(YY頻道:15335158)分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博:我們擁有粉絲量26萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ,歡迎大家關(guān)注及時(shí)獲取設(shè)計(jì)資源。
設(shè)計(jì)導(dǎo)航:史上最贊最全面的設(shè)計(jì)師網(wǎng)址導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào):【youshege】?jī)?yōu)設(shè)哥的全拼
您還可以掃描下方二維碼快速添加:
教你簡(jiǎn)單快速的設(shè)計(jì)Banner
 

收藏 6
點(diǎn)贊 2

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