ps手機光電圖標(5)

來源:未知 作者:P學堂 學習:6485人次

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

素材包下載:http://tgudhdp.cn/ps/soft/121109/16xx8教程素材.rar

看下效果圖:

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

1.新建畫布

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

9.拷貝圖層樣式,粘貼到橢圓1,然后繼續(xù)給橢圓1添加圖層樣式

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

 

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

19.將圖層2的不透明度改成15%

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

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

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

 

21.復制圓角矩形2,得到圓角矩形2副本,去除所有的圖層樣式,重新添加圖層樣式,然后圖層不透明度改成10%

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

22.同樣的方法,復制橢圓1,得到橢圓1副本2,添加上個步驟的圖層樣式,圖層不透明度改成10%

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

23.選擇文字工具,在橢圓1路徑上面打“|||||”,你自己復制引號里的,然后把圖層拉到橢圓1的下面,調出橢圓1副本的選區(qū),添加蒙板,注意調節(jié)好字體間距

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

24.給字體層添加圖層樣式,然后把填充改成0%,完成最后的效果

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

最終效果圖

Photoshop設計立體光感效果的手機圖標,PS教程,16xx8.com教程網

 

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!