教程

前段時(shí)間做了一組練習(xí)作品，其中有一個(gè)關(guān)于球體的圖標(biāo)吸引了大家的注意，發(fā)布之后有很多同學(xué)后臺(tái)留言希望出一個(gè)教程。今天黑馬哥的教程如約而至，就帶大家一起來(lái)畫個(gè)球吧！

一個(gè)不一樣的球

這個(gè)球體圖標(biāo)無(wú)需三維軟件的輔助，全程都是通過(guò)平面類軟件完成，我個(gè)人是通過(guò) AI 軟件和 Sketch 軟件配合完成的。實(shí)際上通過(guò) AI 軟件也可以直接完成，球體造型是通過(guò) AI 軟件的 3D 功能實(shí)現(xiàn)的。后期的配色、光影處理、質(zhì)感強(qiáng)化等細(xì)節(jié)處理，大家可以自由選擇熟悉的軟件，無(wú)論是 PS 還是 Sketch 等均可完成細(xì)節(jié)刻畫。

下面黑馬哥就來(lái)詳細(xì)演練一下，案例分為球體造型繪制和質(zhì)感刻畫兩個(gè)部分。

球體造型繪制

第一步：繪制紋理符號(hào)

通過(guò)矩形工具繪制幾條細(xì)長(zhǎng)的矩形，數(shù)量可以自由發(fā)揮，這個(gè)數(shù)量決定球體紋路的數(shù)量。然后全選之后拖進(jìn)符號(hào)面板，無(wú)需改動(dòng)參數(shù)直接點(diǎn)擊確認(rèn)即可（符號(hào)的名稱可以自由設(shè)置）。

第二步：繪制球體

通過(guò)橢圓工具繪制一個(gè)正圓，然后利用剪刀工具剪切一半，形成一個(gè)半圓。然后再執(zhí)行效果 → 3D → 繞轉(zhuǎn)，然后把預(yù)覽勾選上就可以觀察變化了。注意紅框標(biāo)注位置需要選擇“右邊”，不然無(wú)法出現(xiàn)球體效果。

第三步：貼圖

保持當(dāng)前操作不變，點(diǎn)擊 3D 繞轉(zhuǎn)彈窗底部的“貼圖”按鈕，在彈出的面板中符號(hào)位置展開選擇之前創(chuàng)建的球體紋理。然后調(diào)整紋理的大小，讓其填充滿圖示區(qū)域，這里的紋理大小和位置可以一邊調(diào)整一邊觀察球體的變化，調(diào)整到自己滿意的效果即可。

第四步：調(diào)整空間位置

設(shè)置好貼圖之后，我們可以通過(guò)圖示區(qū)域去拖動(dòng)這個(gè)立方體，改變球體的空間位置，調(diào)整出自己滿意的角度之后點(diǎn)擊確定即可。確定之后我們需要操作對(duì)象 → 擴(kuò)展/擴(kuò)展外觀 → 然后取消編組，把紋理層分離出來(lái)，單獨(dú)之后便于后期調(diào)節(jié)。

通過(guò)以上的步驟我們完成了球體部分的繪制，這個(gè)步驟需要在 AI 軟件里面完成。接下來(lái)的步驟沒(méi)有特殊的軟件限制，只要能夠方便進(jìn)行漸變色調(diào)節(jié)和細(xì)節(jié)刻畫即可。

質(zhì)感刻畫

第一步：導(dǎo)入到軟件

質(zhì)感刻畫不限制操作軟件，直接在 AI 軟件里面也能操作，個(gè)人習(xí)慣運(yùn)用 Sketch 軟件進(jìn)行細(xì)節(jié)刻畫。直接將完成的球體通過(guò)復(fù)制，在 Sketch 軟件里面粘貼即可（如果是 PS 軟件操作類似）。

第二步：刻畫球體立體感

突出球體立體感首先對(duì)圓形添加徑向漸變，中心點(diǎn)設(shè)置在偏向于左上角位置，顏色的參數(shù)參考圖示（顏色大家也可以自定義）。然后再對(duì)其添加兩次內(nèi)陰影，用于增強(qiáng)立體感，也能使得圓形更加通透。（內(nèi)陰影的參數(shù)見(jiàn)圖示，本案例圓形尺寸為 360*360px）

球體背景層繪制完成之后，再針對(duì)紋理層添加漸變色，依然選擇徑向漸變。角度和中心點(diǎn)設(shè)置的范圍和背景層的一致即可，顏色的參數(shù)參考圖示，最終兩個(gè)圖形合起來(lái)即可初步完成球體立體感的刻畫。

第三步：紋理質(zhì)感強(qiáng)化

為了進(jìn)一步突出紋理的質(zhì)感，將紋理部分復(fù)制兩個(gè)出來(lái)，分別進(jìn)行細(xì)節(jié)刻畫。一個(gè)是為了強(qiáng)化色彩感，一個(gè)是為了強(qiáng)化光感，兩個(gè)紋理部分設(shè)置參數(shù)見(jiàn)圖示。

第四步：底部壓暗

為了讓球體能夠顯得更加穩(wěn)重自然，添加一個(gè)同等尺寸的圓形作為底部壓暗。采用的是線性漸變，顏色和填充的不透明度參數(shù)見(jiàn)圖示。

最終我們便完成了球體部分的全部案例演練，添加一個(gè)圓角矩形作為應(yīng)用圖標(biāo)的底座，完成整個(gè)案例的繪制。

小結(jié)

本案例的技術(shù)難點(diǎn)主要是通過(guò) AI 軟件的 3D 功能實(shí)現(xiàn)帶紋理的球體造型，其次就是質(zhì)感刻畫的技巧，關(guān)于漸變色的調(diào)節(jié)和內(nèi)陰影的運(yùn)用。通過(guò)案例的學(xué)習(xí)可以幫助我們熟悉 AI 軟件的 3D 功能運(yùn)用，也能強(qiáng)化關(guān)于營(yíng)造質(zhì)感的技巧。

大家也可以舉一反三，在創(chuàng)建符號(hào)的時(shí)候也可以變換更多不一樣的圖形，也能帶來(lái)更多不一樣的球體紋理效果。希望今天的教程分享可以帶給大家一些思路，創(chuàng)作出更多優(yōu)秀的立體圖標(biāo)設(shè)計(jì)。

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)U網(wǎng)》今天帶你一起來(lái)畫個(gè)球

藍(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)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

藍(lán)藍(lán)設(shè)計(jì)( m.lzhte.cn )是一家專注而深入的界面設(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ì)公司