萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps鼠繪教程 >> Photoshop設計立體光感效果的手機圖標

Photoshop設計立體光感效果的手機圖標

  隨著Android等操作系統的開發,現在的互聯網逐步向手機端應用推進,很多都有了手機端應用程序,必須淘寶,新浪等,所以手機端應用程序UI設計也逐 步的成為新潮,下面來看下一個APP應用程序圖標的制作吧,這只是個思路,算拋磚引玉,有很多時候,我們感覺我們不會,而不是正真的我們不會,是我們沒有接觸過。

  素材包下載:本地高速下載

  看下效果圖:

Photoshop設計立體光感效果的手機圖標 三聯

  1.新建畫布

Photoshop設計立體光感效果的手機圖標,三聯

  2.選擇圓角矩形工具,點擊畫布,跳出設置彈框,設置如下,顏色設置為#000000,得到圓角矩形1

Photoshop設計立體光感效果的手機圖標,三聯

  3.繼續選擇圓角矩形工具,點擊畫布,跳出設置彈框,設置如下,顏色設置為#898989,得到圓角矩形2

Photoshop設計立體光感效果的手機圖標,三聯

  4.將兩個圖層的位置擺放如下

Photoshop設計立體光感效果的手機圖標,三聯

  5.選擇橢圓工具,點擊畫布,跳出設置彈框,設置如下,顏色設置為#323232,得到橢圓1

Photoshop設計立體光感效果的手機圖標,三聯


Photoshop設計立體光感效果的手機圖標,三聯

  6.復制橢圓1,得到橢圓1副本,拉到橢圓1圖層下面,顏色改成#77f8f3,然後ctrl+T,按住shift+alt進行按照中心放大

Photoshop設計立體光感效果的手機圖標,三聯

  7.將我們的logo拖進去,調整好大小和位置

Photoshop設計立體光感效果的手機圖標,三聯

  8.選擇圓角矩形2,把素材包裡的 tactile_noise 壓縮包裡面的圖案自定義圖案,然後給此圖層添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  9.拷貝圖層樣式,粘貼到橢圓1,然後繼續給橢圓1添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯


  10.選擇橢圓1副本,添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  11.將logo復制一層,然後ctrl+L,設置色階

Photoshop設計立體光感效果的手機圖標,三聯

  12.給logo副本添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯

  13.回到logo圖層,添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯


Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  14.選擇橢圓1圖層,添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  15.回到圓角矩形1圖層,添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  16.回到圓角矩形2圖層,添加圖層樣式

Photoshop設計立體光感效果的手機圖標,三聯
Photoshop設計立體光感效果的手機圖標,三聯

  17.在圓角矩形2圖層上面新建一個圖層,得到圖層2,按住ctrl點擊圓角矩形1圖層,調出圓角矩形1圖層的選區

  ,然後用白色柔焦畫筆,畫出如圖的效果

Photoshop設計立體光感效果的手機圖標,三聯


  18.然後按住ctrl點擊圓角矩形2圖層,調出圓角矩形2圖層的選區,刪除,得到如圖效果

copyright © 萬盛學電腦網 all rights reserved