Photoshop製作漂亮的圖標流程解析

導言：

看到效果圖，蠻以為一個小圖標應該很容易就能搞定
沒想到需要這麼多步驟。細節，細節，還是細節！切記！
OK，開始我們這次的教程
先上效果圖：

老規矩，看到效果圖：分析!分析！再分析！我們將怎麼完成這個圖標的製作呢？

經觀察得：
一：背景製作（灰白色，加一條高光線）
這步應該比較簡單。
二：圖標的雛形（關鍵地方，顏色的搭配漂亮，因為給你第一感覺就是色彩。高光，浮雕，影子等細節的製作，看上去很立體就是這些因素造成的啦！）
三：郵件圖標的添加（這個跟第二步類似）
四：文字的添加（關鍵點，文字排版，圖層樣式的設置。）

這都是我自己主觀的分析。嘿嘿，僅供參考
我覺得最關鍵的就是：色彩的搭配了，圖標影調的分布！
準備素材：
字體下載

第一步：
新建一個文檔200×200px
背景色：白
分辨率：72dpi
現在給按鈕做輔助線，Ctrl+R顯示輔助線
在尺寸區域裏麵按住鼠標左鍵，把拽輔助線拉下來。（圖01）

 圖01

按快捷鍵：Ctrl+Alt+C，打開調整畫布大小的窗口。
設置如下：（圖02）

 圖02

（畫布擴大區域顏色的選則，窗口最下麵的那個選項）
下麵是效果圖：（圖03）

 圖03

#p#e#

第二步：
製作背景
作者使用的是灰白色的漸變：#f2f2f2—#c5c5c5。（圖04）

 圖04

注意這步小技巧：
作者在背景 上新建一層空白圖層
命名為“backlight”，使用小筆刷在背景中間和頂部分別畫一個小光圈。（圖05）

 圖05

調整這層大小：（圖06）

 圖06

這步幹嘛用的呢？
OK,我們的背景搞定！

第三步：
新建一層
按U，選擇圓角矩形工具，羽化值：10。（圖07）

 圖07

重命名為“button bg”

#p#e#

關鍵部分：圖層樣式的設置
投影：（圖08）

 圖08

漸變疊加：（圖09）

 圖09

描邊：（圖10）

 圖10

效果：（圖11）

 圖11

第四步：
關鍵：高光和陰影的製作
在按鈕下麵添加一層
使用矩形選取工具畫個陰影：（圖12）

 圖12

重命名 為：“shadow”
影子太生硬了，必須模糊一下。
濾鏡—高斯模糊—13。（圖13）

 圖13

按快捷鍵Ctrl+T 調整陰影大小，位置。
不透明度30%。（圖14）

 圖14

#p#e#

在按鈕圖層上麵，新添加一層並命名“Highlight”（高光）
設置圖層混合模式為： 疊加
選擇白色筆刷，在按鈕上部單擊一下。（圖15）

 圖15

效果還不是很滿意，複製一層
混合模式改回 “正常”
按 Ctrl+T 改變大小和位置。（圖16）

 圖16

效果：

 圖17

第五步：
新建圖層，畫“信封”圖標了
選擇矩形選取工具，畫出如下圖矩形。（圖18）

 圖18

重命名為“envelope”（信封）

注意步驟：圖層樣式的設置
投 影：（圖19）

 圖19

外發光：（圖20）

 圖20

描邊：（圖21）

 圖21

注意顏色的選擇！
最終效果：（圖22）

 圖22

#p#e#

第六步：
新建一層，繼續製作信封的圖標
按U選擇多邊形工具。（圖23）

 圖23

設置如下：（圖24）

圖24

畫出一個三 角形如下圖。使用自由變換工具調整位置，大小。（圖25）

 圖25

圖層樣式設置

投影：（圖26）

 圖26

內陰影：（圖27）

 圖27

漸變疊加：（圖28）

 圖28

描邊：（圖29）

 圖29

最終效果：（圖30）

 圖30

複製一層
Ctrl+T自由變換，選擇垂直翻轉
並調節大小：（圖31、32）

 圖31

 圖32

記得把這複製的小三角形的圖層選項：描邊去掉！
在大三角和小三角形中間新建一層
做一個小圓選區
我們使用筆刷畫一下大三角形投影到小三角形上的陰影。（圖33）

 圖33

記得使用模糊和調整圖層透明度來使陰影柔和
效果：（圖34）

 圖34

#p#e#

第七步：
添加文字：“Contact Me”（聯係我）（ 圖35）
最上麵提供了字體下載

 圖35

小注意下顏色
深紅色看上去會有點“下陷”的感覺
也方便我們加上圖層樣式後看上去更真實

內陰影：（圖36）

 圖36

漸變疊加：（圖37）

 圖37

描邊：（圖38）

轉載自：http://pskungfu.info/2010/04/漂亮的圖標製作教程/

原教程：http://www.psdvault.com/drawing/design-a-delicious-contact-me-button-in-photoshop/