我們在去做這種類型的風(fēng)格時，要學(xué)會總結(jié)，機能風(fēng)的海報版面雖然整體呈現(xiàn)較為復(fù)雜的效果，但如果仔細(xì)觀察，基礎(chǔ)的元素都比較簡單。
大家在做之前可以去先總結(jié)，通過觀察這類作品可以得到以下元素，比如：
01. 電子元件/芯片
02. 機械感元素
03. 不規(guī)則標(biāo)簽
04. 警告符號，裝飾性符號等
05. 黑白灰及熒光色的搭配使用
然后我在準(zhǔn)備教程案例就開始畫呀畫，畫了蠻多適合應(yīng)用在機能風(fēng)格海報中的元素，最后干脆想了一下，那就索性把所有的畫完，源文件都送給大家吧…
教程突然就變成了素材分享…
下面我們來先看一下本期分享的素材，總共分為四個部分，每個部分的形狀細(xì)節(jié)都有不同的差別。
但是下載素材只是第一步，很多同學(xué)平時電腦里也攢了不少素材了，誤以為收藏等于學(xué)會，下載等于精通…
設(shè)計畢竟是個手藝活，還是要動手試試才知道怎么使用。
01、首先我們從我給的素材里面挑選幾個元素，我這里選擇了三個，大中小。
02、人物摳圖后，先觀察一下，人物本身自帶了黃色的輪廓光，那么主色我們就盡量要選擇黃色了，畫面才會有合理性。
03、這一步就是將圖形按照較為平衡的構(gòu)圖方式進行放置，可以和人物有適當(dāng)?shù)寞B壓穿插關(guān)系。
為了避免圖形太過零碎，強烈建議大家可以先以一個大色塊為主，可以避免主體散亂。
04、接下來將文字信息進行空白處放置，注意這里比較主要的信息就三塊，人名，活動名稱，時間地點，編排上主要突出這三個部分即可。
多余的裝飾性英文信息適當(dāng)縮小，起到一個點綴的作用就可以了。
05、最后添加一個紙張褶皺的效果，因為我元素及色彩處理的比較簡單，所以加深質(zhì)感的處理，可以讓海報更有層次感。
接下我們看第二個案例，這個案例我打算使用元素拼接的方式讓畫面更整體，細(xì)節(jié)可以適當(dāng)處理多一些。
01、老規(guī)矩，開始挑選圖形元素…
挑元素的過程確實是…太爽了，怪不得大家這么喜歡素材，盡管素材是我一個一個畫的，但是我挑的時候也感覺…太方便了…
這里我順便將元素組合了一下并且加了個顏色。
02、如果只是在畫面中間這樣放置的話，四周缺乏呼應(yīng)的元素，所以大家可以根據(jù)已經(jīng)選好的圖形特征自己簡單畫一些。
效果如下，是不是感覺完整性好多了。
03、然后圖片放置進圖形中，圖片整體也是呈現(xiàn)紅色調(diào)的，所以整體的色彩和元素我已經(jīng)用了紅色，那么建議重點的信息在這里都用白色，可以簡單做一個色彩突出的作用。
無論裝飾元素和文字有多少，最終還是要想辦法突出重點信息，這兩者本身并不沖突。
看第三個案例，先選元素。
01、順便選一些簡單的圖形裝飾元素，比如箭頭條形碼等。
02、這個圖片本身已經(jīng)蠻好了，底色也很簡單，所以我不打算摳圖了。
03、接下來注意觀察圖片，底部有大量的黑色，所以我們的標(biāo)簽部分可以直接放圖片下方就可以了。
其余文字環(huán)繞人物進行編排即可。
04、正在這個案例中，我想添加一下類似毛玻璃和磨砂的效果，增強圖形的質(zhì)感。
05、按照這個方法，我為其他地方也添加了這樣的磨砂效果，下圖為最終效果。
01、看第四個案例，先選元素。
其實我個人還是更喜歡這種帶圓角的感覺，感覺有點高端的樣子…
02、將元素和人物圖片進行合理構(gòu)圖，其實就是控制每個元素的大小和位置，放置他們的錯落感，保證人臉不要被色塊遮擋，文字信息順便也放置進元素中即可。
03、還是按照上個案例做磨砂效果的步驟，我們再加幾處磨砂效果。
下圖為最終效果。
04、注意這里的磨砂效果除了加描邊，我還加了投影，讓整個畫面的色塊錯落有點縱深感。
01、第五個案例我們換一下人物…一個題目做了四個案例,估計大家已經(jīng)看膩了…挑幾個圖形元素。
02、我們將圖片和元素做一下結(jié)合處理，人物的部分我做了錯位的處理，有點視覺迷幻的效果。
人物名字放置圖片頂部即可。裝飾性文字可以適當(dāng)?shù)母刈鲆粋€整體排版處理。
03、最后，老方法，再加幾個磨砂效果，你別說…這個效果確實有點上頭，普通人受不了這種誘惑…
不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…
01、第六個案例，還是…
挑幾個圖形元素…
02、人物圖片本來是這個樣子，背景是白色，不好處理整體的色彩變化，而我…也不想摳圖…
所以在ps里加了一個漸變映射效果。
03、圖片用一個元素，標(biāo)題用一個元素，這樣就做好了構(gòu)圖排版處理。
04、但是到這一步，畫面還是會有點空空蕩蕩，填充一些呼應(yīng)的元素即可。
最后，再加入紋理的效果疊上去就可以了。
01、第七個案例，挑幾個細(xì)節(jié)較為復(fù)雜的元素，這次我們是單獨拿來做背景使用。
02、為了做出層次感，可以給色塊適當(dāng)添加漸變色和投影，有點立體的效果會更好，因為本來就都是偏白色的，沒有投影和漸變的話效果不明顯。
03、重點信息我們就用以復(fù)本來的顏色就好，可以多一點裝飾性元素作為點綴，不然白色的背景還是有點空，有一些點線面的變化版面會舒服一些。
04、最后…
再加幾個磨砂玻璃效果…
這次我是真的膩了膩了…
01、第八個案例，元素選好之后，我這里直接處理了漸變的效果，作為背景，有了一點質(zhì)感。
02、黑白的人物放上去就很適合，這一步我們就搞定了背景和人物的畫面整體處理。
03、然后將文字編排進畫面中，但是整體除了黑就是白…
顏色有點太單調(diào)了，所以我們要換換顏色。
04、這個顏色…
就…
挺好…夜店風(fēng)的感覺…
最后來放一下合集
原文地址：胡曉波工作室（公眾號）
作者：王猛奇
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》科幻機甲風(fēng)格海報怎么做？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司