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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

時間:2024-03-08 12:01作者:下載吧人氣:20

本篇UI教程跟大家分享如何設計一枚旋轉風格的開關按鈕,主體由灰白色組成,簡單漂亮,想學UI設計的同學就跟著練習一下吧。

我們來看看最終效果:

UI圖標,設計旋轉開關UI圖標教程
www.16xx8.com

老規矩,先來分析一下。這里我們主要分為二個部分:底座、內圓、其它問題都不大,主要是內圓部分、需要用到多個圖層及圖層樣式,來表現圖標的立體感,騷年分析完已經成功一半了,離成功還會遠么,噢耶!!!

UI圖標,設計旋轉開關UI圖標教程

步驟一:

首先新建畫布1000px*1000px畫布,命名為播放圖標,為其添加漸變疊加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟二:

我們最先來繪制底座吧,使用圓角矩形工具、繪制一個500px*500px圓角半徑90px的底座,并為它添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟三:

高逼格的底座一下就出來了,有木有!!!現在來繪制下裝飾部分,繪制兩個360px的正圓,將填充數值都設置為0。

UI圖標,設計旋轉開關UI圖標教程

步驟四:

現在為裝飾圓添加不同的描邊效果,并將多余的線條利用選區框選出來,在圖層蒙版遮中填充黑色。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟五:

現在選擇直線段工具,長度20px,粗細4px,并復制為加號移動到合適位置,添加OFF文字Adobe 黑體 Std R,字體大小20點顏色#a0a0a0。

UI圖標,設計旋轉開關UI圖標教程

步驟六:

現在我們來繪制內部圓,繼續使用橢圓工具、繪制一個290px*290px的正圓,并為它添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟七:

現在我們來繪制圓環,繪制兩個正圓大小分別為200x,180px的正圓,將倆個合并為一個形狀層,選擇路徑選擇工具選擇內圓,減去頂層形狀,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟八:

繼續使用橢圓工具,繪制一個180px*180px的正圓,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟九:

現在我們來繪制一下最后的小圓吧,繪制一個20px*20px的正圓,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟十:

就剩高光部分了哦,繪制一個大小為180px的正圓,將填充設置為0,添加圖層樣式吧。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

本篇UI圖標設計教程到這里就完整結束了,大家跟著做,應該能做出來。

標簽全棧UI筆記,UI圖標,ps網頁設計,開關圖標,開關UI圖標

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 日韩中文字幕精品 | 亚洲午夜成激人情在线影院 | 99久久久久国产精品免费 | 男人久久天堂 | 久久精品二区 | 国产呦系列免费 | 两性免费视频 | 日韩高清一区二区 | 男女精品视频 | 久久三级毛片 | 香港经典a毛片免费观看看 香港经典a毛片免费观看爽爽影院 | 成年女人免费毛片视频永久 | 中文字幕一区二区三 | 国产伦精品一区二区三区网站 | 伊人久久国产免费观看视频 | 在线观看亚洲精品专区 | 手机成人看片 | 国产高清一区二区三区四区 | 亚洲精品色一区二区三区 | 精品国产综合区久久久久99 | 成人欧美在线观看 | 欧美在线三级 | 欧美激情视频一级视频一级毛片 | 88精品视频| 日韩18在线观看 | 国产成人国产在线观看入口 | 欧美一级aa免费毛片 | 欧美日韩一级大片 | 看日本真人一一级特黄毛片 | 久久精品免费观看国产软件 | 日韩精品午夜视频一区二区三区 | 欧美性色生活免费观看 | 精品极品三级久久久久 | 成人国产在线观看 | 美女福利视频午夜在线 | 欧美激情第一欧美在线 | 欧美一区二区三区在观看 | 亚洲视频在线a视频 | 欧美成人精品高清在线观看 | 欧美国一级毛片片aa | 欧美日韩综合高清一区二区 |