MM131美女爱做视频在线看_性强烈的欧美三级视频_男女性潮高清免费网站_日日摸日日碰夜夜爽歪歪

IT培訓(xùn)-高端面授IT培訓(xùn)機構(gòu)
云和教育:云和數(shù)據(jù)集團高端IT職業(yè)教育品牌
  • 國家級
    全民數(shù)字素養(yǎng)與技能培訓(xùn)基地
  • 河南省
    第一批產(chǎn)教融合型企業(yè)建設(shè)培育單位
  • 鄭州市
    數(shù)字技能人才(碼農(nóng))培養(yǎng)評價聯(lián)盟
當(dāng)前位置:
首頁新聞資訊UI資訊正文

UI設(shè)計教程 | 5步快速制作2.5D插畫

  • 發(fā)布時間:
    2019-04-24
  • 版權(quán)所有:
    云和教育
  • 分享:

現(xiàn)在不光是C4D火,2.5D插畫也很流行。很多創(chuàng)意插畫都采用了這種方式來表現(xiàn),相比于扁平化的風(fēng)格,2.5D風(fēng)格在視覺表現(xiàn)力上更加立體炫酷,使得這種風(fēng)格的插畫活躍在banner、海報、APP和網(wǎng)頁設(shè)計中。

配圖1 UI設(shè)計教程5步快速制作2點5D插畫.jpg

比如,讓人印象最深的“微信跳一跳”的小游戲了,天天守在手機前的動力,除了與朋友圈曬成就感的原因外,也跟簡約新奇的 2.5D 風(fēng)格有關(guān)。

那么這種插畫如何去著手制作呢?今天,我們就教給大家5步快速制作2.5D插畫的方法。

1、構(gòu)思

首先我們不需要考慮要如何下手,或者如何用工具來實現(xiàn)這個插畫效果。先構(gòu)思一下整一個框架或者小建筑的一些細(xì)節(jié),一些有趣的點,用草稿畫一下。如果要畫一個很大場景的同學(xué)就務(wù)必要先畫草稿再下手,否則你的場景會很混亂。

配圖2 UI設(shè)計教程5步快速制作2點5D插畫.jpg

2、畫參考線

2.5D插畫最重要的步驟便是骨骼線網(wǎng)格的搭建,再復(fù)雜的圖形都要乖乖臣服于它的框架之下,可以說解決了骨骼線,你就搞定了2.5D風(fēng)格的精髓,我們后續(xù)的設(shè)計創(chuàng)作都是基于骨骼線網(wǎng)格去完成的,那么如何搭建這個骨骼線網(wǎng)格呢。

配圖3 UI設(shè)計教程5步快速制作2點5D插畫.jpg

3、確定光源

為了讓物體更加立體,我們需要區(qū)分他的受光面和背光面,不同的光源會產(chǎn)生不同的陰影。

配圖4 UI設(shè)計教程5步快速制作2點5D插畫.jpg

4、制作零件,搭積木

配圖5 UI設(shè)計教程5步快速制作2點5D插畫.jpg

有了骨骼線網(wǎng)格我們便可以參考網(wǎng)格線繪制出每一個面,一定要嚴(yán)格按照網(wǎng)格線去繪制,不能有絲毫誤差,否則面與面之間的銜接會出現(xiàn)難看的縫隙。將幾個大的模塊依次拆分慢慢畫出來,不要著急。

拆分示例:

配圖6 UI設(shè)計教程5步快速制作2點5D插畫.jpg

其實并不復(fù)雜對不對,這樣把每一個部分都單獨做出來,很快就可以完成小房子的搭建了。

拓展:切斜工具重復(fù)有規(guī)律排列的組件,我們用到AI中的“再次變換”“切斜工具”。例如下圖中的窗戶,繪制一個矩形,復(fù)制一個,菜單-對象-變換-再次變化(Ctrl+D)得到另外3個相同矩形,最后全選,使用傾斜工具,傾斜30度。

配圖7 UI設(shè)計教程5步快速制作2點5D插畫.jpg

3D字體打上文字(字體選擇一些較為方正的無襯線體效果會好一些),選擇效果-3d-凸出和斜角,根據(jù)自己的需求選擇位置、厚度等參數(shù)。通過“對象-拓展外觀”,將文本拓展一下外觀,變成零碎的個體,以便修改顏色。

配圖8 UI設(shè)計教程5步快速制作2點5D插畫.jpg

5、ps潤色,繪制細(xì)節(jié)

①新建空白圖層,想對哪些元素加細(xì)節(jié),就給他②新建一個空白圖層,并做個蒙板。

空白圖層的模式改為疊加,透明度調(diào)整到50%左右,這個看自己喜好,但不建議很高。

③用畫筆繪制高光,陰影,漸變(漸變可用圖層樣式)

這樣,一個生動的2.5D小插畫就誕生了,最后可以自由發(fā)揮加些小效果。

配圖9 UI設(shè)計教程5步快速制作2點5D插畫.jpg

當(dāng)然,一幅插畫的誕生,并不像描述的那么輕松,可能需要在你設(shè)計的過程中不斷的推倒重來或者改變方向,當(dāng)作品最后呈現(xiàn)在你眼前的時候,你會充滿欣喜,就像是自己的孩子一樣,共勉。