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

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

軟件下載吧

當(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)

主站蜘蛛池模板: 毛片免费视频 | 久久亚洲精品无码观看不卡 | 精品久久久久久中文字幕一区 | 一区二区三区在线播放视频 | 亚洲精品高清国产一线久久97 | 怡红院免费va男人的天堂 | 国产精品久久久久久久久久久久久久 | 国产精品午夜性视频 | 国产精品国产欧美综合一区 | 日本高清aⅴ毛片免费 | 成人午夜大片免费看爽爽爽 | 亚洲成人免费在线观看 | 天天草综合 | 国产一级毛片免 | 国产高清日韩 | 久久国产精品永久免费网站 | 亚洲国产成人精品激情 | 国产愉拍精品手机 | 99视频免费在线 | 亚洲成a人片在线v观看 | 亚洲图片在线视频 | 大量真实偷拍情侣视频野战 | 欧洲女同互慰在线视频 | 亚洲免费网站观看视频 | 国内精品久久久久久中文字幕 | 老司机毛片 | 成人三级精品视频在线观看 | 毛片成人永久免费视频 | 三级黄色网 | 亚洲影院在线播放 | 一道精品视频一区二区三区图片 | 欧美一级欧美一级在线播放 | 精品亚洲成a人片在线观看 精品亚洲成a人在线播放 | 日韩欧免费一区二区三区 | 国产精品免费观在线 | 亚洲精品在线免费观看视频 | 亚洲第一综合网站 | 91成人精品 | 视频二区 中文字幕 欧美 | 亚洲rct中文字幕在线 | 欧美a极品极品欧美 |