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




  • 【 PS創意設計 】Photoshop設計銀色立體效果的APP圖標教程




    Photoshop設計銀色立體效果的APP圖標教程

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

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

    教學大綱:

    本教程主要使用Photoshop設計銀色立體字效果的軟件圖標,銀色的質感主要使用圖層樣式來表現,喜歡的朋友一起來學習吧。


    設計教程教學開始

    本教程主要使用Photoshop設計銀色立體字效果的軟件圖標,銀色的質感主要使用圖層樣式來表現,喜歡的朋友一起來學習吧。

    教程源文件:銀色質感的軟件圖標PSD源文件

    臨摹的成果:

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    下面,我們開始山寨之旅。 新建文檔,我用的大小是2000*1500像素,設置背景色為# 101010

    Photoshop設計銀色立體效果的APP圖標教程

    新建一層,設置前景色為白色,使用圓角柔邊畫筆,設置大小為1500像素,在畫布中點一點,設置圖層的不透明度為60%。

    Photoshop設計銀色立體效果的APP圖標教程

    下面,我們來做背景中那個圓形的圖案,我這裡是用一個無縫圖案來完成的。新建一個40*40像素的文件,背景為透明,用橢圓工具畫一個20*20像素的正圓,並讓其水平居中,垂直居中。

    以下截圖為方便觀看,是放大了1200%的截圖。

    Photoshop設計銀色立體效果的APP圖標教程

    複製一層橢圓圖層,執行“濾鏡—其他—位移”,設置水平和垂直位移均為我們文檔大小的一半。

    Photoshop設計銀色立體效果的APP圖標教程

    現在我們的效果應該是這樣。

    Photoshop設計銀色立體效果的APP圖標教程

    下面,我們將自定圖案預設。點擊“編輯—自定圖案”

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    OK,現在回到我們那個圖標的文檔,在剛才那個白色畫筆圖層的頂層新建一層,執行“編輯—填充”,選擇我們剛才自定義的圖案。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    為這個圖案圖層設置一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    設置完圖層樣式,我們完成了背景的創建,效果如下:

    Photoshop設計銀色立體效果的APP圖標教程

    下面,我們開始圖標部分的操作。 用圓角矩形工具,運用減去模式,畫出如下的外框形狀來。

    Photoshop設計銀色立體效果的APP圖標教程

    為這個外框添加一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    接下來,還是用圓角矩形工具,畫出如下圖中的紅色的內框。

    Photoshop設計銀色立體效果的APP圖標教程

    為其添加一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    接下來,我們來做那個紋理效果,紋理的話網上估計大把,我也試着做了一下。新建一層,填充#333333,執行“濾鏡—雜色—添加雜色”,設置數量為13%,高斯分佈,勾選單色。

    Photoshop設計銀色立體效果的APP圖標教程

    執行“濾鏡—濾鏡庫—畫筆描邊—陰影線”,設置描邊長度為38,銳化程度為3,強度為1。

    Photoshop設計銀色立體效果的APP圖標教程

    將這個紋理圖層旋轉45度,創建剪貼蒙版。

    Photoshop設計銀色立體效果的APP圖標教程

    複製一層內框圖層,置於頂層,設置填充為0,添加一個圖層樣式,來模擬內部的陰影效果。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    用圓角矩形工具畫出頂層的這個框來。

    Photoshop設計銀色立體效果的APP圖標教程

    為其添加一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    下面,我們為金屬框添加一個拉絲效果。新建一層,填充#272727,執行“濾鏡—雜色—添加雜色”,設置數量為20,高斯分佈,勾選單色。

    Photoshop設計銀色立體效果的APP圖標教程

    執行“濾鏡—模糊—動感模糊”,設置角度為0度,距離為200像素。

    Photoshop設計銀色立體效果的APP圖標教程

    選擇頂框加外框的選區,為拉絲紋理添加一個圖層蒙版,更改拉絲紋理圖層混合模式為“線性減淡(添加)”,不透明度為35%。

    Photoshop設計銀色立體效果的APP圖標教程

    拉絲效果不是很明顯,複製一層拉絲圖層,更改圖層混合模式為柔光,不透明度為25%。

    Photoshop設計銀色立體效果的APP圖標教程

    放入我們的LOGO,設置填充為0,並為其添加一個圖層樣式。

    這兒同學們放一個自己喜歡的圖案/文字就好,比如優設LOGO神馬的哈哈哈

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    OK,完成了LOGO的添加,我們最後來添加左右兩側的那兩個線狀的東西。設置前景色為#1f1f1f,畫一個矩形。

    Photoshop設計銀色立體效果的APP圖標教程

    為這個矩形添加一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    複製一層矩形圖層,清除掉圖層模式,重新添加一個圖層樣式。

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    現在效果如下,右邊的線直接把左邊的複製過去就行了。

    Photoshop設計銀色立體效果的APP圖標教程

    大功告成

    Photoshop設計銀色立體效果的APP圖標教程

    部分作業展示:

    Photoshop設計銀色立體效果的APP圖標教程

    Photoshop設計銀色立體效果的APP圖標教程

    — —

    文章永久連結為: Photoshop設計銀色立體效果的APP圖標教程