我們?cè)谌プ鲞@種類型的風(fēng)格時(shí)，要學(xué)會(huì)總結(jié)，機(jī)能風(fēng)的海報(bào)版面雖然整體呈現(xiàn)較為復(fù)雜的效果，但如果仔細(xì)觀察，基礎(chǔ)的元素都比較簡(jiǎn)單。

大家在做之前可以去先總結(jié)，通過(guò)觀察這類作品可以得到以下元素，比如：

01. 電子元件/芯片

02. 機(jī)械感元素

03. 不規(guī)則標(biāo)簽

04. 警告符號(hào)，裝飾性符號(hào)等

05. 黑白灰及熒光色的搭配使用 

然后我在準(zhǔn)備教程案例就開始畫呀畫，畫了蠻多適合應(yīng)用在機(jī)能風(fēng)格海報(bào)中的元素，最后干脆想了一下，那就索性把所有的畫完，源文件都送給大家吧…

教程突然就變成了素材分享…

下面我們來(lái)先看一下本期分享的素材，總共分為四個(gè)部分，每個(gè)部分的形狀細(xì)節(jié)都有不同的差別。

但是下載素材只是第一步，很多同學(xué)平時(shí)電腦里也攢了不少素材了，誤以為收藏等于學(xué)會(huì)，下載等于精通…

設(shè)計(jì)畢竟是個(gè)手藝活，還是要?jiǎng)邮衷囋嚥胖涝趺词褂谩?

01、首先我們從我給的素材里面挑選幾個(gè)元素，我這里選擇了三個(gè)，大中小。

02、人物摳圖后，先觀察一下，人物本身自帶了黃色的輪廓光，那么主色我們就盡量要選擇黃色了，畫面才會(huì)有合理性。

03、這一步就是將圖形按照較為平衡的構(gòu)圖方式進(jìn)行放置，可以和人物有適當(dāng)?shù)寞B壓穿插關(guān)系。

為了避免圖形太過(guò)零碎，強(qiáng)烈建議大家可以先以一個(gè)大色塊為主，可以避免主體散亂。

04、接下來(lái)將文字信息進(jìn)行空白處放置，注意這里比較主要的信息就三塊，人名，活動(dòng)名稱，時(shí)間地點(diǎn)，編排上主要突出這三個(gè)部分即可。

多余的裝飾性英文信息適當(dāng)縮小，起到一個(gè)點(diǎn)綴的作用就可以了。

05、最后添加一個(gè)紙張褶皺的效果，因?yàn)槲以丶吧侍幚淼谋容^簡(jiǎn)單，所以加深質(zhì)感的處理，可以讓海報(bào)更有層次感。

接下我們看第二個(gè)案例，這個(gè)案例我打算使用元素拼接的方式讓畫面更整體，細(xì)節(jié)可以適當(dāng)處理多一些。

01、老規(guī)矩，開始挑選圖形元素…

挑元素的過(guò)程確實(shí)是…太爽了，怪不得大家這么喜歡素材，盡管素材是我一個(gè)一個(gè)畫的，但是我挑的時(shí)候也感覺…太方便了…

這里我順便將元素組合了一下并且加了個(gè)顏色。

02、如果只是在畫面中間這樣放置的話，四周缺乏呼應(yīng)的元素，所以大家可以根據(jù)已經(jīng)選好的圖形特征自己簡(jiǎn)單畫一些。

效果如下，是不是感覺完整性好多了。

03、然后圖片放置進(jìn)圖形中，圖片整體也是呈現(xiàn)紅色調(diào)的，所以整體的色彩和元素我已經(jīng)用了紅色，那么建議重點(diǎn)的信息在這里都用白色，可以簡(jiǎn)單做一個(gè)色彩突出的作用。

無(wú)論裝飾元素和文字有多少，最終還是要想辦法突出重點(diǎn)信息，這兩者本身并不沖突。

看第三個(gè)案例，先選元素。

01、順便選一些簡(jiǎn)單的圖形裝飾元素，比如箭頭條形碼等。

02、這個(gè)圖片本身已經(jīng)蠻好了，底色也很簡(jiǎn)單，所以我不打算摳圖了。

03、接下來(lái)注意觀察圖片，底部有大量的黑色，所以我們的標(biāo)簽部分可以直接放圖片下方就可以了。

其余文字環(huán)繞人物進(jìn)行編排即可。

04、正在這個(gè)案例中，我想添加一下類似毛玻璃和磨砂的效果，增強(qiáng)圖形的質(zhì)感。

05、按照這個(gè)方法，我為其他地方也添加了這樣的磨砂效果，下圖為最終效果。

01、看第四個(gè)案例，先選元素。

其實(shí)我個(gè)人還是更喜歡這種帶圓角的感覺，感覺有點(diǎn)高端的樣子…

02、將元素和人物圖片進(jìn)行合理構(gòu)圖，其實(shí)就是控制每個(gè)元素的大小和位置，放置他們的錯(cuò)落感，保證人臉不要被色塊遮擋，文字信息順便也放置進(jìn)元素中即可。

03、還是按照上個(gè)案例做磨砂效果的步驟，我們?cè)偌訋滋幠ド靶Ч?

下圖為最終效果。

04、注意這里的磨砂效果除了加描邊，我還加了投影，讓整個(gè)畫面的色塊錯(cuò)落有點(diǎn)縱深感。

01、第五個(gè)案例我們換一下人物…一個(gè)題目做了四個(gè)案例,估計(jì)大家已經(jīng)看膩了…挑幾個(gè)圖形元素。

02、我們將圖片和元素做一下結(jié)合處理，人物的部分我做了錯(cuò)位的處理，有點(diǎn)視覺迷幻的效果。

人物名字放置圖片頂部即可。裝飾性文字可以適當(dāng)?shù)母刈鲆粋€(gè)整體排版處理。

03、最后，老方法，再加幾個(gè)磨砂效果，你別說(shuō)…這個(gè)效果確實(shí)有點(diǎn)上頭，普通人受不了這種誘惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

01、第六個(gè)案例，還是…

挑幾個(gè)圖形元素…

02、人物圖片本來(lái)是這個(gè)樣子，背景是白色，不好處理整體的色彩變化，而我…也不想摳圖…

所以在ps里加了一個(gè)漸變映射效果。

03、圖片用一個(gè)元素，標(biāo)題用一個(gè)元素，這樣就做好了構(gòu)圖排版處理。

04、但是到這一步，畫面還是會(huì)有點(diǎn)空空蕩蕩，填充一些呼應(yīng)的元素即可。

最后，再加入紋理的效果疊上去就可以了。

01、第七個(gè)案例，挑幾個(gè)細(xì)節(jié)較為復(fù)雜的元素，這次我們是單獨(dú)拿來(lái)做背景使用。

02、為了做出層次感，可以給色塊適當(dāng)添加漸變色和投影，有點(diǎn)立體的效果會(huì)更好，因?yàn)楸緛?lái)就都是偏白色的，沒有投影和漸變的話效果不明顯。

03、重點(diǎn)信息我們就用以復(fù)本來(lái)的顏色就好，可以多一點(diǎn)裝飾性元素作為點(diǎn)綴，不然白色的背景還是有點(diǎn)空，有一些點(diǎn)線面的變化版面會(huì)舒服一些。

04、最后…

再加幾個(gè)磨砂玻璃效果…

這次我是真的膩了膩了…

01、第八個(gè)案例，元素選好之后，我這里直接處理了漸變的效果，作為背景，有了一點(diǎn)質(zhì)感。

02、黑白的人物放上去就很適合，這一步我們就搞定了背景和人物的畫面整體處理。

03、然后將文字編排進(jìn)畫面中，但是整體除了黑就是白…

顏色有點(diǎn)太單調(diào)了，所以我們要換換顏色。

04、這個(gè)顏色…

就…

挺好…夜店風(fēng)的感覺…

最后來(lái)放一下合集

原文地址：胡曉波工作室（公眾號(hào)）

作者：王猛奇

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》科幻機(jī)甲風(fēng)格海報(bào)怎么做？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司