ps設(shè)計(jì)網(wǎng)頁(yè)Banner橫幅教程(3)

使用PS快速合成簡(jiǎn)單大氣的網(wǎng)頁(yè)橫幅，教程挺實(shí)用的，相比之下實(shí)操性很強(qiáng)，推薦過(guò)來(lái)和ps教程論壇的朋友們一起分享，喜歡的朋友記得給我好評(píng)啦，先來(lái)看看效果圖：

"不要太復(fù)雜，簡(jiǎn)單就好。要大氣，要漂亮！"

這是大多設(shè)計(jì)師面對(duì)需求提出者所共同聽(tīng)道的一個(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呢？

1. 選材：仔細(xì)選擇一個(gè)與主題相關(guān)的形象或背景，不要復(fù)雜，簡(jiǎn)單就好。

2. 背景：稍加處理，在背景上留出足夠的文字空間，產(chǎn)品（OR 模特）在1/3到1/4位置，即不會(huì)搶到文字視覺(jué)焦點(diǎn)，又不會(huì)使自己跑出視野。

3. 配色：從背景(or 模特，即Banner中的圖案元素)選擇2到3種顏色，以保證Banner整體的色彩和諧。

4. 布局：一般來(lái)說(shuō)是不要人物與文字過(guò)分纏繞，有文字部分的背景不要太花。另外，不管怎么排，一定記住，要隱隱的有一種對(duì)齊（這點(diǎn)下面實(shí)例會(huì)講）。

5. 審視：最后審視全局，然后看圖思考，并做調(diào)整：

a. 該突出的是否突出

b. 該弱化的是否弱化

c. 色彩是否和諧

d. 是否"對(duì)齊"

6. 交稿審核

可能空范的理論并不是很好理解，下面以一個(gè)簡(jiǎn)單的實(shí)例來(lái)說(shuō)明上面的幾個(gè)要點(diǎn)的實(shí)際運(yùn)用：

（實(shí)例是隨便一畫(huà)，圖片與文字我都不知道是神馬，So莫追究意義。

這里講的是設(shè)計(jì)的思路，或者說(shuō)方法？總之不是PS工具使用教程，所以不會(huì)講如何操作。）

好，廢話結(jié)束，開(kāi)始主題：

1. 采集所需素材（其實(shí)，這也是一種能力）

2. 處理背景

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

3. 選擇色彩

這里選取了三種色彩，包的米黃色，海天的藍(lán)色，還有人物主色：粉。從圖可以看出，這三種色彩與背景很和諧，相互之間也有足夠的對(duì)比。

字體的選擇上，不要選擇一些奇奇怪怪的字體，使用方方正正的字體，宋體，線體等簡(jiǎn)單而又易讀的字體即可。盡可能的壓制你使用的字體種類(lèi)，多則亂。

4. 對(duì)文字進(jìn)行排版布局

把需要突出的主題放大并放在第一位。

同一種字體，同一顏色，我們還可以用大小做區(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)看下圖：

文字的垂直方向，是底對(duì)齊的。水平方向是左對(duì)齊的（人總是喜歡有序的東西...），這樣整個(gè)文字的排版就不會(huì)亂，但又不像板書(shū)那般看上去很死板。

文字與人物之間的對(duì)齊很特殊:不要讓文字壓到人物，并且兩者之間要有一定的留白空間。如上圖所示，切記不要讓圖挨字，會(huì)讓人物有"面壁思過(guò)"的感覺(jué)。

當(dāng)然，如何對(duì)齊視具體情況而定，這只是一種可能。

5. 審視并微調(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)單的修飾性?xún)?nèi)容：

 

 

 

修飾同樣簡(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)單的文字與簡(jiǎn)單的白色矩形背景，不會(huì)破壞"簡(jiǎn)單"，但圖形的加入，又一次帶來(lái)了活力。值得注意的是，"特價(jià)包郵"與"活動(dòng)時(shí)間"仍然存在"對(duì)齊"。

嗯，嗯，現(xiàn)在已經(jīng)可以收工了吧。再看一眼...

夠簡(jiǎn)單，簡(jiǎn)單的沒(méi)有一點(diǎn)起色-_-!!!。最后再給文字加一點(diǎn)小修飾，這里我給主題"米黃背包"和"特價(jià)包郵"的背景加了一點(diǎn)漸變色：

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

OK，再次審視，可以收工了。

6. 定稿并總結(jié)

收工后總結(jié)一下，這個(gè)Banner，不是很牛掰，但也算的是簡(jiǎn)單，漂亮，大氣。不用復(fù)雜高超的PS技術(shù)，只要肯用心思考，用勤奮的雙手去練習(xí)。設(shè)計(jì)一個(gè)簡(jiǎn)單的Banner，很簡(jiǎn)單。