• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 PS電腦繪圖 】Photoshop繪製逼真的計時器UI圖標教程




    Photoshop繪製逼真的計時器UI圖標教程

    這一次的教學是屬於PS教程領域中的鼠繪教程的相關教學。

    文章出處是來自百度貼吧的PS教程類文章,寫教學的作者是P大點S,感謝P大點S提供鼠繪教程的實作教學。

    教學大綱:

    本教程主要使用Photoshop繪製逼真的計時器UI圖標教程,今天這枚圖標效果很經典了,作為一枚入門必備的練手圖標,今天走着P大點S重新把教程寫出來給大家練手,有什麼不懂的東西可以下載PSD源文件,喜歡的朋友讓我們一起學習吧。


    鼠繪教程教學開始

    本教程主要使用Photoshop繪製逼真的計時器UI圖標教程,今天這枚圖標效果很經典了,作為一枚入門必備的練手圖標,今天走着P大點S重新把教程寫出來給大家練手,有什麼不懂的東西可以下載PSD源文件,喜歡的朋友讓我們一起學習吧。

    教程源文件素材:網頁UI計時器圖標設計PSD源文件

    首先,看看我們的山寨原圖。

    Photoshop繪製逼真的計時器UI圖標教程

    我們的成品:

    Photoshop繪製逼真的計時器UI圖標教程

    Photoshop繪製逼真的計時器UI圖標教程

    原圖有點小,我這裡文檔比原圖建得稍大了一些。

    Photoshop繪製逼真的計時器UI圖標教程

    我們首先進行背景的創建,我創建了一個“漸變”調整層,設置的#444c60到#262f37的90度的徑向漸變。

    Photoshop繪製逼真的計時器UI圖標教程

    建個新圖層,填充白色,執行“濾鏡—雜色—添加雜色”,設置雜色數量為20%,平均分佈,並將這個圖層混合模式更改為“正片疊底”。

    Photoshop繪製逼真的計時器UI圖標教程

    下面,我們製作原圖中的像素斜線,新建個5像素*5像素的文檔,放大畫布到最大,用鉛筆工具,設置鉛筆像素大小為1像素,畫出如下圖案,記得把文檔的背景圖層刪除掉,我們只要那個斜線圖層。

    Photoshop繪製逼真的計時器UI圖標教程

    接下來,我們把這個圖案自定義,執行“編輯—自定圖案”。

    Photoshop繪製逼真的計時器UI圖標教程

    回到我們的文檔,在“雜色”圖層上層,新建個圖層,執行“編輯—填充”,選擇使用圖案填充,找到剛才我們自定義的那個圖案,確定。

    Photoshop繪製逼真的計時器UI圖標教程

    將這個斜線圖層的圖層不透明度更改為30%,這樣我們就完成了背景的創建。

    Photoshop繪製逼真的計時器UI圖標教程

    設置前景色為黑色,畫一個黑色的圓角矩形,並將填充更改為20%

    Photoshop繪製逼真的計時器UI圖標教程

    為這個底框圖層添加一個內陰影

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個投影

    Photoshop繪製逼真的計時器UI圖標教程

    複製這個底框圖層,擺放到右邊,現在我們得到如下的效果:

    Photoshop繪製逼真的計時器UI圖標教程

    下面,我們開始製作圖標的整體,用圓角矩形工具,畫一個圓角矩形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個框添加一個漸變疊加。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個外描邊。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個內陰影。

    Photoshop繪製逼真的計時器UI圖標教程

    現在,我們得到如下效果:

    Photoshop繪製逼真的計時器UI圖標教程

    選擇框圖層,複製一層在下層,調整圓角矩形大小,寬度縮小4像素,高度不變,向下移動4像素。

    Photoshop繪製逼真的計時器UI圖標教程

    選擇框拷貝圖層,再次複製一層在下層,同樣的寬度還是縮小4像素,高度不變,向下移動4像素。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個最底層的框,也就是框拷貝2圖層增加一個外發光。

    Photoshop繪製逼真的計時器UI圖標教程

    增加一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    現在,我們的效果如下:

    Photoshop繪製逼真的計時器UI圖標教程

    接下來,打上字。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個數字設置一個漸變。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    設置前景色為#172026,畫一個矩形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個線,設置一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    用圓角矩形工具,畫一個圓角矩形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個圓角矩形設置一個漸變疊加。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個斜面和浮雕。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個外發光。

    Photoshop繪製逼真的計時器UI圖標教程

    現在,我們的效果如下:

    Photoshop繪製逼真的計時器UI圖標教程

    接下來,打上字。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個數字設置一個漸變。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    設置前景色為#172026,畫一個矩形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個線,設置一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    用圓角矩形工具,畫一個圓角矩形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個圓角矩形設置一個漸變疊加。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個斜面和浮雕。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個外發光。

    Photoshop繪製逼真的計時器UI圖標教程

    現在,我們的效果如下:

    Photoshop繪製逼真的計時器UI圖標教程

    我們把最後一個圖標修改一下,我們把高光圖層,移動到文字5的下層,複製一層框圖層在文字5的上層。並畫一個矩形減去,組合形狀組件。

    Photoshop繪製逼真的計時器UI圖標教程

    進行適當的透視變形,得到如下效果。

    Photoshop繪製逼真的計時器UI圖標教程

    為其設置一個漸變疊加。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個漸變的描邊。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個內陰影。

    Photoshop繪製逼真的計時器UI圖標教程

    複製一層文字5,置於這個變形后的框的上層,轉形狀,用減去模式畫個矩形,得到一個一半的5

    Photoshop繪製逼真的計時器UI圖標教程

    對這個一半的5進行透視變形。

    Photoshop繪製逼真的計時器UI圖標教程

    為這個一半的5添加一個漸變疊加。

    Photoshop繪製逼真的計時器UI圖標教程

    添加一個投影。

    Photoshop繪製逼真的計時器UI圖標教程

    現在,我們得到如下效果:

    Photoshop繪製逼真的計時器UI圖標教程

    設置前景色為黑色,用鋼筆工具畫一個下圖的形狀,我們來添加一個陰影。

    Photoshop繪製逼真的計時器UI圖標教程

    在屬性面板中,為其設置一個10像素的羽化。

    Photoshop繪製逼真的計時器UI圖標教程

    更改這個陰影圖層的混合模式為正片疊底,不透明度35%。

    Photoshop繪製逼真的計時器UI圖標教程

    到這裡,就大功告成了,當然,你喜歡的話,隨便做什麼顏色都行。

    Photoshop繪製逼真的計時器UI圖標教程

    — —

    文章永久連結為: Photoshop繪製逼真的計時器UI圖標教程