日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

時(shí)間:2024-03-08 12:01作者:下載吧人氣:16

本篇UI教程跟大家分享了設(shè)計(jì)播放器圖標(biāo)的設(shè)計(jì)案例,制作思路主要用到圖層樣式來制作出圖標(biāo)的質(zhì)感,步驟有點(diǎn)多,請(qǐng)大家認(rèn)真學(xué)習(xí)。

我們來看看效果:

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程
www.16xx8.com

老規(guī)矩,先來分析一下。這里我們主要分為二個(gè)部分:底座、內(nèi)圓,其它問題都不大,主要是內(nèi)圓部分、需要用到多個(gè)圖層來表現(xiàn)圖標(biāo)的立體感,騷年分析完已經(jīng)成功一半了,離成功還會(huì)遠(yuǎn)么,噢耶!!!

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟一:

首先新建畫布800px*600px畫布,命名為個(gè)性圖標(biāo),為背景添加顏色#5c5857。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟二:

使用圓角矩形工具、繪制一個(gè)425px*425px圓角半徑為60px底座,并為它添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟三:

高逼格的底座一下就出來了,有木有!!!接下來繼續(xù)使用圓角矩形工具、繪制一個(gè)375px*375px圓角半徑為60px底座,并為它添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟四:

現(xiàn)在繪制內(nèi)圓吧,使用橢圓工具繪制一個(gè)320px的正圓,并添加圖層樣式吧。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟五:

現(xiàn)在繪制一下內(nèi)圓的線條吧,選擇直線工具繪制一條長(zhǎng)度20px粗細(xì)1px的直線吧,顏色為#5c5857。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟六:

復(fù)制直線執(zhí)行自由變換命令,調(diào)整中心點(diǎn)至畫布中心,旋轉(zhuǎn)90度,并執(zhí)行重復(fù)上一命令并復(fù)制操作shift+ctrl+alt+t復(fù)制出另外兩條直線段,并添加一下圖層樣式吧。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟七:

繼續(xù)繪制一下內(nèi)圓的線條吧,選擇直線工具繪制一條長(zhǎng)度15px粗細(xì)1px的直線吧,顏色為#5c5857。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟八:

重復(fù)上述操作,旋轉(zhuǎn)7.5度并將復(fù)制出的多余直線段利用布爾運(yùn)算減去,并添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟九:

繼續(xù)來繪制內(nèi)圓的位置吧,用橢圓工具、繪制一個(gè)205px的正圓顏色為#040404,并為它添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟十:

我們繼續(xù)來繪制內(nèi)圓的部分,先繪制一個(gè)188px的正圓,在繪制一個(gè)三角形,合并為一個(gè)形狀,使用直接選擇工具移動(dòng)錨點(diǎn),顏色改為#d5d5d5并為它添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟十一:

繼續(xù)繪制內(nèi)圓的部分,用橢圓工具、繪制一個(gè)40px的正圓,并為它添加圖層樣式。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟十二:

繼續(xù)繪制內(nèi)圓的部分,用橢圓工具、繪制一個(gè)25px的正圓,顏色為#272121。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

步驟十三:

現(xiàn)在我們來繪制最后一個(gè)小圓吧,用橢圓工具、繪制一個(gè)17px的正圓,并為它添加圖層樣式就完成這個(gè)案例了哦。

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程

以上就是本次教程的全部?jī)?nèi)容,雖然步驟有點(diǎn)多,大家細(xì)心跟著教程做,一定能成功做出來。

標(biāo)簽全棧UI筆記,UI圖標(biāo),ps網(wǎng)頁(yè)設(shè)計(jì),UI設(shè)計(jì)教程,ui設(shè)計(jì)

相關(guān)下載

查看所有評(píng)論+

網(wǎng)友評(píng)論

網(wǎng)友
您的評(píng)論需要經(jīng)過審核才能顯示

熱門閱覽

最新排行

公眾號(hào)

主站蜘蛛池模板: 特黄日韩免费一区二区三区 | 日韩午夜三级 | 黑人边吃奶边扎下面激情视频 | 日本成人一级片 | 色黄在线| 国产精品久久久久影院色 | 欧美一级做一a做片性视频 欧美一级做一级爱a做片性 | 手机国产精品一区二区 | 男人操美女网站 | 精品国产96亚洲一区二区三区 | 国产一级毛片午夜 | 亚洲欧美日韩中文字幕在线一区 | 萌白酱白丝护士服喷水铁牛tv | 亚洲精品综合一区二区三区在线 | 亚洲精品午夜在线观看 | 亚洲国产天堂久久九九九 | 国产免费亚洲 | a在线v| 日韩成人在线观看视频 | 久久99国产精品免费观看 | 成年人免费小视频 | 亚洲美色综合天天久久综合精品 | 日韩免费视频播播 | www.91免费视频 | ccyycom草草影院成人91 | 久久视频精品36线视频在线观看 | 丝袜美腿在线不卡视频播放 | 久久91亚洲精品中文字幕 | 国产精品久久久久久久hd | 日韩国产精品99久久久久久 | 日韩在线观看视频网站 | 国产99视频精品免费视频7 | 热伊人99re久久精品最新地 | 欧美a区| 高清不卡毛片 | 国产精品大全 | 性做久久久久久久免费看 | aaa大片 | 日韩欧美在线播放视频 | 深夜做爰性大片中文 | 欧美一区二区视频 |