應(yīng)用的時(shí)代到來(lái)？毋庸置疑的回答是“Yes！”。無(wú)論是PC、Web還是移動(dòng)終端，都迎來(lái)自己“應(yīng)用化”的春天。當(dāng)然，隨著UC8.0各線瀏覽器產(chǎn)品的發(fā)布，UC瀏覽器的粉絲們不難發(fā)現(xiàn)，“應(yīng)用化”的道路上出現(xiàn)了大家摯愛(ài)的UC嘞，可喜可賀呀！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、桑日網(wǎng)絡(luò)推廣、成都微信小程序、桑日網(wǎng)絡(luò)營(yíng)銷、桑日企業(yè)策劃、桑日品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供桑日建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：aaarwkj.com

找好自己的風(fēng)格！這是我們開(kāi)始圖標(biāo)設(shè)計(jì)之前需要想好的。平面的？立體的？寫(xiě)實(shí)的？卡通的？等等。這個(gè)過(guò)程也許很長(zhǎng)，也許會(huì)很短。靈感這東西很難琢磨。當(dāng)我們想好大體的形狀，我們就可以先動(dòng)手畫(huà)幾個(gè)“模擬”圖標(biāo)，這時(shí)候的圖標(biāo)畫(huà)的不必太過(guò)復(fù)雜，能有個(gè)感覺(jué)就好。最后咱們UC選擇了較為立體的圖標(biāo)風(fēng)格來(lái)進(jìn)行設(shè)計(jì)嘞。

今天咱們一起繪制一個(gè)簡(jiǎn)單的“游戲中心”的圖標(biāo)，跟大家分享一下圖標(biāo)繪制過(guò)程的一些方法和心得吧。那我們開(kāi)始！首先我們先用鉛筆啦圓珠筆啥的畫(huà)個(gè)草圖，找個(gè)自己滿意的形，哈哈，就定第二個(gè)圖的了。（畫(huà)的很丑——||大家將就瞅瞅！）

Stept1：這就是我們今天要一起繪制的“游戲中心”的圖標(biāo)啦。第一步咱們先把圖標(biāo)“寬衣解帶”一下。這個(gè)圖標(biāo)主要可以分解為兩個(gè)部分，一個(gè)“外框”和一個(gè)“游戲手柄”。

Stept2：先用圓角矩形工具畫(huà)出兩個(gè)交疊的圓角立體矩形，這個(gè)就是我們外框的基本形了。接下來(lái)我們對(duì)其進(jìn)行漸變著色。在圓角處添加高光，使得整個(gè)立體圖形更加自然圓滑，同時(shí)在明暗區(qū)分較強(qiáng)顏色區(qū)隔處增加1px的高光邊線，使得圖標(biāo)更顯質(zhì)感。

Stept3：我們開(kāi)始繪制暗底區(qū)域的高光，這邊值得注意的是，我們繪制的高光區(qū)域要在暗底選中區(qū)域的基礎(chǔ)上內(nèi)收縮1px，使得高光區(qū)與暗底間存在明顯的間隔，同時(shí)為了使繪制的高光區(qū)更有色感，我們要進(jìn)行“二次混合模式疊加”，第一次使用“疊加”的混合模式，第二次則使用“濾色”的混合模式。為了使繪制的高光區(qū)更富有質(zhì)感，我們?cè)谠械母吖鈪^(qū)基礎(chǔ)上，添加1px的高光亮邊，這么一來(lái)，圖標(biāo)就更晶瑩剔透咯。

Stept4：接下來(lái)我們開(kāi)始繪制右下角的藍(lán)色游戲標(biāo)簽。簡(jiǎn)單的藍(lán)色側(cè)45度漸變便可完成基本型配色，但是為了錦上添花，我們需要在藍(lán)色漸變的基礎(chǔ)上加上與高光區(qū)同向的高光亮邊，繪制方法與之前提到的繪制高光區(qū)域的方法一致，同樣需要“二次混合模式疊加”。接下來(lái)添加“GAME”的文字，效果使用漸變+投影即可，值得注意的是，漸變色區(qū)隔不要太大，淡淡的即可，投影選擇黑色“正片疊底”，距離1px，大小2px即可。同時(shí)在暗底上層加上藍(lán)色的高光，便可給圖標(biāo)帶來(lái)不一樣的剔透質(zhì)感。

Stept5：繪制完外框，我們開(kāi)始繪制游戲手柄嘞。先用鼠標(biāo)繪制一個(gè)游戲手柄的外形。添加一個(gè)簡(jiǎn)單的線性漸變。然后在手柄的邊界處打上陰影，讓手柄立體起來(lái)。

Stept6：現(xiàn)在我們開(kāi)始游戲手柄的左側(cè)操作欄的繪制。為了讓其更有“凹凸”感，我們選擇在暗色漸變的外側(cè)添加與手柄主體漸變色相反的漸變描邊。在暗色方向操作盤(pán)上繪制上下左右的方向鍵，注意，漸變色使用時(shí)，與背景色不能過(guò)于反差，淡淡的區(qū)隔即可。

Stept7：至于右側(cè)的操作按鈕與左側(cè)操作盤(pán)的繪制方法也有異曲同工之處。先繪制四個(gè)“凹槽”，然后在里邊放置四個(gè)按鈕，在按鈕的圖層屬性配置上，可以只用純色加上”斜面浮雕”效果，簡(jiǎn)單顯示高光即可。然后為你的按鈕配上不同的色彩即可完工。值得注意的是，每個(gè)按鈕的外層可以添加一個(gè)顏色屬性更深的色值，使得產(chǎn)生更為細(xì)致的區(qū)隔立體效果。

Stept8：接下來(lái)繪制的是手柄的底部操作桿了。這部分的處理我們可以簡(jiǎn)單想像成一個(gè)立體按鈕的繪制。概括起來(lái)就是“兩個(gè)圖形平移”。即先繪制一個(gè)圓形，然后復(fù)制一個(gè)副本，并將其向上平移，簡(jiǎn)單吧~操作桿的高光部分，我們同樣使用簡(jiǎn)單的“斜面浮雕”效果即可。手柄的主體基本完成，然后我們添加上一些“附屬”小物件，游戲手柄搞定嘞！

Stept9：最后一步就是“打包”啦。我們將游戲手柄裝進(jìn)我們之前繪制好的外框中。這里需要注意的是，需要在外框暗色區(qū)域的選區(qū)內(nèi)，在手柄四周打上陰影，拉出手柄與外框的距離，使得整體更有層次感。之后我們只需要再增加一些小光點(diǎn)作為點(diǎn)綴，接著拉個(gè)倒影，便大功告成了！

結(jié)束語(yǔ)：不知道看了這篇文章是否會(huì)對(duì)大家的圖標(biāo)設(shè)計(jì)有所幫助嘞，繪制圖標(biāo)是個(gè)細(xì)致活，大家平時(shí)也多多練習(xí)，多多繪制圖標(biāo)，孰能生巧嘛~大家都Fighting！

名稱欄目：UC8.0誕生記–應(yīng)用中心圖標(biāo)設(shè)計(jì)小教程
網(wǎng)址分享：http://aaarwkj.com/article38/chsisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、定制網(wǎng)站、微信公眾號(hào)、標(biāo)簽優(yōu)化、商城網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)