Photoshop制作UI小圖標(biāo)綠色箭頭教程

來(lái)源:未知 作者:bbs.16xx8.com 學(xué)習(xí):448人次

 本教程主要使用Photoshop制作綠色質(zhì)感的UI箭頭圖標(biāo),最終的箭頭效果立體感和質(zhì)感表現(xiàn)的都很漂亮,加上顏色的正確使用,非常的漂亮,下面一起來(lái)學(xué)習(xí).

最終效果

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

1、先用鋼筆勾出一個(gè)箭頭的路徑。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

2、按Ctrl + Enter把路徑轉(zhuǎn)為選區(qū),切換到通道面板,新建一個(gè)通道,然后填充白色,按Ctrl + D取消選區(qū),執(zhí)行:濾鏡 > 模糊 > 高斯模糊,數(shù)值為4.3左右,按Ctrl + L調(diào)色階把左右兩個(gè)黑色三角形箭頭想中間靠攏,使得輪廓變清晰,圓角完成。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

3、按Ctrl點(diǎn)擊通道載入選區(qū),回到圖層面板,新建一個(gè)圖層,填充顏色:#02A600。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

4、復(fù)制該層,并鎖定復(fù)制層,然后選擇漸變工具顏色設(shè)置為從:#CCFF2F到#25CA00的漸變,然后拉出徑向漸變,并把圖層向上移動(dòng)4個(gè)像素。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

5、用鋼筆工具勾出高光路徑。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

6、新建一個(gè)圖層,用3像素的硬畫(huà)筆執(zhí)行路徑描邊,然后用橡皮工具擦掉兩端部分。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

7、勾出一個(gè)三角形選區(qū),新建一個(gè)圖層,選擇漸變工具顏色設(shè)置為從白色到透明,然后由左向右拉出線(xiàn)性漸變。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

8、復(fù)制上面的不做的漸變圖層,把圖層的不透明度改為:68%,并把下面那個(gè)漸變層的圖層混合模式改為“柔光”。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

9、按Ctrl點(diǎn)圖標(biāo)主體載入選區(qū),新建一個(gè)圖層,執(zhí)行2像素的描邊顏色為:#037B02。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

10、在尾部拉出一個(gè)2像素高的選區(qū),新建一個(gè)圖層,用漸變拉出白色到透明的徑向漸變,作出尾部高光細(xì)節(jié)。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

11、新建一個(gè)圖層,并放到最下層,做一個(gè)黑色到透明的徑向漸變,然后按Ctrl + T壓扁并拉長(zhǎng)。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

12、放到箭頭下面的位置,把圖層的不透明度改為:30%,完成最終效果。

Photoshop制作UI小圖標(biāo)綠色箭頭教程,PS教程,思緣教程網(wǎng)

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!