操作很簡單，大家看完記得練習(xí)哦。直接開始今天的教程吧，yeah…
● 相信大家小時候都玩過超級馬里奧、魂斗羅等游戲。
下圖是馬賽克像素風(fēng)典型的代表游戲之一。回想起來那都是童年的歡樂時光啊~
● 下面用文字簡單的介紹了一些關(guān)于像素畫的知識
● 給大家整理的一些像素風(fēng)格的海報（案例來源于互聯(lián)網(wǎng)，僅做參考）
● 除了像素畫海報之外還有與之對應(yīng)的像素字體下圖來源于互聯(lián)網(wǎng)，僅做示意。
● 這里我們用到上圖03和06的技法思路，像素的趕腳類似PS的半調(diào)效果，或者是仿色擴(kuò)散，以文字設(shè)計為基礎(chǔ)使用的仿色擴(kuò)散的效果來呈現(xiàn)。
設(shè)計思路&步驟解析
01：先設(shè)計完字體部分(這里暫不講字體設(shè)計部分)，不會字體設(shè)計的同學(xué)，使用一款好看的字庫字體也是可以的。
02：合并所有筆畫，在AI中使用路徑偏移，參數(shù)設(shè)置如下，對象-路徑-偏移路徑。
03：取消編組，用2種顏色區(qū)分。
04：勾勒鋼筆連接每個邊，紅色圓圈標(biāo)注部分為示意。
05：接著給字體填充黑白漸變，注意白與黑之間的明暗過度。
06：最終效果如下，將漸變后的字體在PS中選中，圖像-模式-灰度-拼合。
07：圖像-模式-位圖-擴(kuò)散仿色。
大家不要局限于做像素風(fēng)格就非得像我用這種方法去呈現(xiàn)，我們只要抓住海報的主體，呈現(xiàn)是由一個小的單元格組合拼接而成就可以了。AI同樣也可以做出矢量像素海報。。。
這是在AI做出的像素化效果，這里給大家拋磚引玉一下。
選中漸變完之后的字體，AI菜單欄-對象-柵格化，參數(shù)設(shè)置如下，最終位圖再轉(zhuǎn)矢量就可以啦。
08：最終并為其添加色彩與排版就完成了~
我們先看幾組網(wǎng)上的案例展示吧，大概認(rèn)識下這類風(fēng)格的一些表現(xiàn)形式，版面的構(gòu)圖元素，以及顏色的一些使用等。
不難發(fā)現(xiàn)我們目前所看到的孟菲斯風(fēng)格是非常潮的，強(qiáng)烈的色彩組合與碰撞，幾何形狀的構(gòu)成，甚至一些海報當(dāng)中也會出現(xiàn)潮流的插畫小元素，非常具有趣味性，以及強(qiáng)一些畫面視覺沖擊表現(xiàn)。
孟菲斯風(fēng)格版面元素構(gòu)成
孟菲斯平面設(shè)計特征可以歸納為：
1、高明度的色彩組合；線條、圖案的隨機(jī)排列搭配；幾何元素的大量運(yùn)用和空間填充。
2、各式各樣的幾何圖案是“孟菲斯設(shè)計”經(jīng)典元素之一，以正方形、圓形或三角形這類規(guī)則圖形為主。
3、與傳統(tǒng)設(shè)計強(qiáng)調(diào)有序不同，“孟菲斯”的設(shè)計背景喜用凌亂與自由的組合方式。
不管是細(xì)瘦的直線、粗體的波浪線，還是點(diǎn)狀圖案亦或3D結(jié)構(gòu)圖形，你都能在孟菲斯作品里找到。
下圖舉例了孟菲斯在平面中的一些表現(xiàn)！
咱們分析完孟菲斯的一些構(gòu)成元素表現(xiàn)形式之后就好開始下手了，下圖是以人物為主體的表現(xiàn)形式。
為了方便大家觀察我將版面中的元素進(jìn)行了拆解，大致分為人物、文字對話框、一些線條元素和版面中的配色。
文字對話框&文字編排：
版面中的人物主體：
版面中的色彩搭配、字體&線條：
以上就是拆解完的樣式，這里我們?yōu)榱嗽黾影婷娴娜の缎裕沂褂昧耸謱懽煮w以及隨意裝飾的線條活躍版面氣氛，色彩的組合上使用了純色與漸變的組合碰撞，圖形構(gòu)成上表現(xiàn)模擬了電腦頁面對話框的組合形式搭配上文字編排，以上都是為了盡可能的符合孟菲斯的一些風(fēng)格表現(xiàn)而存在的。
這是我做的另外一張孟菲斯的海報，根據(jù)之前給大家總結(jié)的要素：
*幾何圖形構(gòu)成
*強(qiáng)烈的色彩組合
*簡單圖形&插圖
*簡單圖形&插圖
圖形的制作比較簡單用 AI 3D工具就可以完成。
*幾何圖形構(gòu)成
*幾何圖形構(gòu)成
*靚麗/怪誕/潮流
當(dāng)時找素材的時候找到這只鳥的時候，發(fā)現(xiàn)嘴非常的有意思，以及鳥本身的顏色也是符合孟菲斯的色彩要求的（一個巧合罷了），扣完圖之后給鳥加上一個外描邊增強(qiáng)趣味性。
*強(qiáng)烈的色彩組合
純色與漸變色（高飽和度&低飽和度）、（明與暗）以及色彩在版面中的一個過度關(guān)系。
最終組合版面中的主體與文字排版&構(gòu)圖，以及配色孟菲斯風(fēng)格的海報就完成了，只要掌握了他們的元素構(gòu)成風(fēng)格與表現(xiàn)就好做了，希望這2張海報可以給到大家一個啟發(fā)。
所以我們只要能模擬出撕紙的效果差不多就能做了。
下圖是案例展示部分。
我們來看下撕紙效果的一個具體制作方式，基本上都是在PS中完成的。
下圖是關(guān)于PS畫筆的預(yù)設(shè)：
常規(guī)畫筆、干介質(zhì)畫筆、特殊效果畫筆、濕介質(zhì)畫筆。
給人物添加一個蒙版，這里我使用的是干介質(zhì)畫筆，分別給他們換上顏色即可。
選擇下圖第二種干介質(zhì)畫筆，以及它們在不同模式下的樣式效果。
接著在人物的邊緣用干介質(zhì)畫筆（溶解模式）涂抹邊緣，撕紙的效果就出現(xiàn)了，接著加入黑白相間的素材。
為了模擬撕紙的效果，我隨意設(shè)置了一些紋理，讓紋理保持一種不規(guī)則的狀態(tài)。咱們動手制作一些素材使用(特殊效果畫筆)，新建一個畫布，使用畫筆涂滿即可，導(dǎo)出圖片當(dāng)做素材就OK了，涂抹的時候畫筆的大小折中就行，避免效果不理想（大家多嘗試就行）。
最終規(guī)劃版面的文字編排就完成了。
大家多多練起來吧，希望對你有所幫助。
作者：大熊
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》拿捏3種設(shè)計風(fēng)格！
藍(lán)藍(lán)設(shè)計( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司