越來越多的app結(jié)合ip來增加情感化設(shè)計(jì)，比如會(huì)員等級(jí)體系、新手指引、登錄注冊、周邊延展等等。今天跟大家分享這組IP的設(shè)計(jì)過程，先來看看最終效果吧～

(資料圖片僅供參考)

01IP風(fēng)格設(shè)定

項(xiàng)目屬性是教育類型，小孩、年輕人群為主。那么可愛的風(fēng)格不會(huì)出錯(cuò)，以下是我從網(wǎng)上找的一些參考。

參考圖來源于網(wǎng)絡(luò)，僅做分析使用

通過參考分析，不難發(fā)現(xiàn)以上IP的共性特征：1 :0.5～1之間的頭身比，造型圓潤且以幾何形的方式概括。

02造型繪制

1.圖形組合

使用方、圓幾何形繪制造型，通過重疊的形式，增加細(xì)節(jié)。比如：加個(gè)小口袋、頭飾等等之類裝飾。保證IP基礎(chǔ)型簡單，同時(shí)豐富整體造型。

2.頭身比例

頭身比例越大，整體的造型越趨近于胖墩墩、Q萌。這里我把IP的頭身比設(shè)定為1:0.5，是不是更加幼齡、可愛些了。

線稿確定后，開始上色，我們設(shè)定IP的固有色為黃色，通過改變其明度的形式，給每個(gè)造型填充色塊，如下圖所示，最后，添加光影、結(jié)構(gòu)線等方式打造偽3D效果，接下來一起看看如何塑造立體質(zhì)感的吧～

03立體質(zhì)感

3.光影

立體的質(zhì)感一定是有體積的，通過加入亮面和暗面的方式，使其視覺“膨脹”，形成立體的效果。

以IP頭部為例，設(shè)定左上角為主光源，那么左上方就會(huì)形成亮面。新建圖層樣式-內(nèi)陰影，選擇比固有色更亮一點(diǎn)淺黃色繪制亮面。

相對的，右下角的地方就會(huì)形成一個(gè)暗部區(qū)域，我們選取黃色的鄰近色-橙色作為暗部內(nèi)陰影的顏色，同時(shí)設(shè)置混合模式【正片疊底】，增加飽和度且不容易變臟哦。如下圖所示，加入暗面后，立體效果明確些了～

最后，在暗部區(qū)域加上一些反光，讓整體更透氣。需要注意的是，反光顏色不要太亮，接近受光面的明度即可。

另外內(nèi)陰影參數(shù)中，阻塞值也不要過大。太亮的顏色和過大的阻塞值，一來容易導(dǎo)致受光面曝光，二來由于內(nèi)陰影之間會(huì)相互影響，過大的反光會(huì)掩蓋暗部的顏色。

用同樣的方式在臉部也加入亮面和暗面，立體效果初步形成～

雖然有了明暗，但立體感不夠強(qiáng)。我們觀察如下球體，右邊的球體通過擴(kuò)大亮部區(qū)域，加深明暗交界線。強(qiáng)化了黑白灰對比，讓整體亮灰暗層級(jí)關(guān)系更明確，是不是立體感強(qiáng)多啦。

回到IP本身，同理，我們要強(qiáng)化整個(gè)頭部的明暗對比關(guān)系。

①擴(kuò)大亮部區(qū)域，越靠近光源的地方顏色明度越高。

新建圖層，選擇畫筆工具，降低畫筆透明度度一層一層的疊加進(jìn)去。顏色上可以直接用吸管工具吸取亮部區(qū)域，稍微調(diào)整下明度和飽和度。

②加深明暗交界線，襯托反光區(qū)域更通透。

這一步通過加強(qiáng)明暗關(guān)系，亮部亮起來，暗部暗下去，畫出頭部和臉部的厚度，凸顯立體質(zhì)感。

4.邊緣光、結(jié)構(gòu)線

當(dāng)有多個(gè)物體重疊時(shí)，除了繪制投影區(qū)分前后關(guān)系外，我們還可以加上邊緣光和結(jié)構(gòu)線來進(jìn)一步拉開層級(jí)。如下圖所示

同樣的繪制方式，把IP的身體和四肢分別加上立體質(zhì)感。扁平色稿到立體質(zhì)感部分就塑造完成啦～

接下來一起看看表情設(shè)計(jì)的小技巧吧～

04IP延展-表情設(shè)計(jì)

下圖是我在網(wǎng)絡(luò)上搜索開心大笑和憤怒生氣兩組詞得到的一些截圖。右邊動(dòng)漫人物的表情都有一個(gè)共同點(diǎn)：夸大了嘴巴在五官中的占比，相對而言，夸張后的表情給人的感染力更強(qiáng)。

5.夸大比例

適當(dāng)?shù)目浯笪骞俦壤欣诜糯螽?dāng)前情緒的氛圍。比如開心、驚訝、憤怒等，張的大大的嘴巴是不是使得整體表情張力強(qiáng)很多啦～

6.五官緊湊

五官之間的距離越舒展，看起來越顯得成熟，反之，越幼齡。下圖中緊湊的五官顯得低齡、可愛些～

參考圖來源于網(wǎng)絡(luò)，僅做分析使用

細(xì)心的同學(xué)一定發(fā)現(xiàn)了，有些五官畫眉毛，有些沒畫。通常來說，眉毛可以畫也可以不畫，

例如，下圖表情中，有眉毛和沒眉毛，傳遞出來的情緒有所差異。大家根據(jù)想要傳達(dá)的具體情緒視情況而定。

如果IP定位很可愛、幼齡的風(fēng)格，可以在眼睛的下方繪制一個(gè)小小的腮紅，既豐富色彩，又提升了表情可愛值～

不管是IP造型還是表情動(dòng)作，盡量簡化用圓、方、三角、梯形等等這些基礎(chǔ)的幾何形狀來繪制，就會(huì)簡單很多啦。比如：用圓形表示開心大笑的眼睛，用半圓表示委屈的雙眼等等。

最后我們來回顧一下知識(shí)點(diǎn)：

IP設(shè)計(jì)：①設(shè)定頭身比例，②幾何形構(gòu)建造型，③質(zhì)感塑造-光影關(guān)系、邊緣光、結(jié)構(gòu)線；

表情設(shè)計(jì)：①基礎(chǔ)幾何形繪制五官，②適當(dāng)夸大比例，③五官緊湊。

以上就是此次IP設(shè)計(jì)以及表情延展的一些小技巧啦~ 拋磚引玉，希望對大家有一丟丟啟發(fā)~

視覺課09期 試聽課火熱報(bào)名中！

菜心&慢熱視覺課2.0版09期的試聽課來咯，僅需9.9元，名額有限，先到先得！理論+實(shí)操，入股不虧！

上課時(shí)間：8月15日（周二）晚8點(diǎn)30。

課程詳情點(diǎn)擊左下角【閱讀原文】即可查看，購買后記得掃上方二維碼，或者添加微信：Amber-huihui(備注:試聽課) 拉你進(jìn)群，以免錯(cuò)過直播哦~

標(biāo)簽：