收藏本站 關于我們

UI設計教程:繪制質感播放按鈕

發布時間:2019-08-13 15:52:19   來源:Uisdc   人氣:0

前言:這篇教程教大家設計一個質感藍色紋理的播放按鈕,按鈕主要分幾個部分完成,全都是利用圖層樣式做出立體感,步驟有點多,但難度不算高,有點耐心就能跟著做出來。

最終效果:


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

步驟一:

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

步驟二:

使用圓角矩形、繪制一個600px*600px,圓角半徑為90px的底座,并為它添加圖層樣式。

步驟三:

高逼格的底座一下就出來了,有木有!!!接下來使用橢圓工具、繪制一個500px*500px的正圓命名為外圓,并為它添加圖層樣式。

步驟四:

接下來是繪制半圓,使用橢圓工具繪制二個正圓,大小分別為500px*500px、440px*440px將兩個形狀圖層合并形狀,使用小黑工具單擊選中內圓,并減去頂層形狀。

步驟五:

繼續繪制半圓現在繼續使用布爾運算按住alt鍵當箭頭出現"-"號繪制矩形,剪切不需要的地方。右側方法操作一樣繪制完成后將形狀合并為組件。

步驟六:

接下來我們繼續使用布爾運算按住shift鍵當箭頭出現"+"號繪制倆30px*30px的正圓操作完成后命名為藍圓,并添加圖層樣式。

步驟七:

接下來是比較復雜的按鈕,使用橢圓工具繪制一個440px*440px的圓,并為它添加圖層樣式命名為內圓。

步驟八:

現在我們趕緊來繪制最后一個圓吧,使用橢圓工具繪制一個200px*200px正圓,給它起名叫小內圓吧,并為它添加圖層樣式。

步驟九:

嘻嘻差不多了ヽ( ̄▽ ̄)?,高逼格的趕腳有木有,最后我們自定義形狀工具選擇設置按鈕追加全部形狀,并繪制82px*82px的形狀吧,將其命名為播放吧,接下來添加下圖層樣式。

以上就是本次按鈕教程的全部內容,步驟雖多,但難度不算高,希望大家能跟著教程學會。


本文來自PS教程網www.idobtc.icu,轉載請注明!關鍵詞:UI播放按鈕


PS教程
河北快3今日开奖号