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

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

軟件下載吧

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

主站蜘蛛池模板: 精品国产高清久久久久久小说 | 91精品国产高清久久久久久91 | 美女被拍拍拍拍拍拍拍拍 | 日韩一区二区天海翼 | 国产伦精品一区二区三区 | 亚洲黄色免费网址 | 国产一级毛片午夜福 | 中国一级淫片aaa毛片毛片 | 国产成人精品免费视频大 | 91香蕉国产 | 九九爱精品 | 日本暖暖在线视频 | 亚洲黄色免费观看 | 亚洲免费人成在线视频观看 | 网红主播大尺度精品福利视频 | 国产精品hd免费观看 | 欧美一级高清黄图片 | 国产精品亚洲专区在线播放 | 国产在视频线精品视频二代 | 久久精品视频免费观看 | 色婷婷久久综合中文久久蜜桃 | 7799国产精品久久久久99 | 成年人在线免费观看网站 | 男女国产一级毛片 | 怡红院老首页主页入口 | 欧美日韩精品国产一区二区 | 欧美亚洲激情视频 | 中文字幕日韩精品有码视频 | 九九九精品视频 | 国产美女做爰免费视频软件 | 爱福利极品盛宴 | 久久成年片色大黄全免费网站 | 久久er国产精品免费观看1 | 美国毛片在线观看 | 亚洲一区视频 | 中文字幕视频免费在线观看 | 欧美 另类 精品一区视频 | 黄色美女免费看 | 99久久精品免费观看国产 | 欧美不卡一区 | 久久国产精品久久精品国产 |