使用Photoshop制作漂亮的圖標(biāo)流程解析.doc

使用Photoshop制作漂亮的圖標(biāo)流程解析導(dǎo)言：看到效果圖，蠻以為一個(gè)小圖標(biāo)應(yīng)該很容易就能搞定沒(méi)想到需要這么多步驟。細(xì)節(jié)，細(xì)節(jié)，還是細(xì)節(jié)！切記！OK，開(kāi)始我們這次的教程先上效果圖：老規(guī)矩，看到效果圖：分析!分析！再分析！我們將怎么完成這個(gè)圖標(biāo)的制作呢？經(jīng)觀察得：一：背景制作（灰白色，加一條高光線）這步應(yīng)該比較簡(jiǎn)單。二：圖標(biāo)的雛形（關(guān)鍵地方，顏色的搭配漂亮，因?yàn)榻o你第一感覺(jué)就是色彩。高光，浮雕，影子等細(xì)節(jié)的制作，看上去很立體就是這些因素造成的啦！）三：郵件圖標(biāo)的添加（這個(gè)跟第二步類似）四：文字的添加（關(guān)鍵點(diǎn)，文字排版，圖層樣式的設(shè)置。）這都是我自己主觀的分析。嘿嘿，僅供參考我覺(jué)得最關(guān)鍵的就是：色彩的搭配了，圖標(biāo)影調(diào)的分布！準(zhǔn)備素材：字體下載第一步：新建一個(gè)文檔200200px背景色：白分辨率：72dpi現(xiàn)在給按鈕做輔助線，Ctrl+R顯示輔助線在尺寸區(qū)域里面按住鼠標(biāo)左鍵，把拽輔助線拉下來(lái)。（圖01）圖01按快捷鍵：Ctrl+Alt+C，打開(kāi)調(diào)整畫(huà)布大小的窗口。設(shè)置如下：（圖02）圖02（畫(huà)布擴(kuò)大區(qū)域顏色的選則，窗口最下面的那個(gè)選項(xiàng)）下面是效果圖：（圖03）第二步：制作背景作者使用的是灰白色的漸變：#f2f2f2#c5c5c5。（圖04）圖04注意這步小技巧：作者在背景 上新建一層空白圖層命名為“backlight”，使用小筆刷在背景中間和頂部分別畫(huà)一個(gè)小光圈。（圖05）圖05調(diào)整這層大?。海▓D06）圖06這步干嘛用的呢？OK,我們的背景搞定！第三步：新建一層按U，選擇圓角矩形工具，羽化值：10。（圖07）圖07重命名為“button bg”關(guān)鍵部分：圖層樣式的設(shè)置投影：（圖08）圖08漸變疊加：（圖09）圖09描邊：（圖10）圖10效果：（圖11）圖11第四步：關(guān)鍵：高光和陰影的制作在按鈕下面添加一層使用矩形選取工具畫(huà)個(gè)陰影：（圖12）圖12重命名 為：“shadow”影子太生硬了，必須模糊一下。濾鏡高斯模糊13。（圖13）圖13按快捷鍵Ctrl+T 調(diào)整陰影大小，位置。不透明度30%。（圖14）圖14在按鈕圖層上面，新添加一層并命名“Highlight”（高光）設(shè)置圖層混合模式為： 疊加選擇白色筆刷，在按鈕上部單擊一下。（圖15）圖15效果還不是很滿意，復(fù)制一層混合模式改回 “正?！卑?Ctrl+T 改變大小和位置。（圖16）圖16效果：圖17第五步：新建圖層，畫(huà)“信封”圖標(biāo)了選擇矩形選取工具，畫(huà)出如下圖矩形。（圖18）圖18重命名為“envelope”（信封）注意步驟：圖層樣式的設(shè)置投 影：（圖19）圖19外發(fā)光：（圖20）圖20描邊：（圖21）圖21注意顏色的選擇！最終效果：（圖22）圖22第六步：新建一層，繼續(xù)制作信封的圖標(biāo)按U選擇多邊形工具。（圖23）圖23設(shè)置如下：（圖24）圖24畫(huà)出一個(gè)三 角形如下圖。使用自由變換工具調(diào)整位置，大小。（圖25）圖25圖層樣式設(shè)置投影：（圖26）圖26內(nèi)陰影：（圖27）圖27漸變疊加：（圖28）圖28描邊：（圖29）圖29最終效果：（圖30）圖30復(fù)制一層Ctrl+T自由變換，選擇垂直翻轉(zhuǎn)并調(diào)節(jié)大小：（圖31、32）圖31圖32記得把這復(fù)制的小三角形的圖層選項(xiàng)：描邊去掉！在大三角和小三角形中間新建一層做一個(gè)小圓選區(qū)我們使用筆刷畫(huà)一下大三角形投影到小三角形上的陰影。（圖33）圖33記得使用模糊和調(diào)整圖層透明度來(lái)使陰影柔和效果：（圖34）圖34第七步：添加文字：“Contact Me”（聯(lián)系我）（圖35）最上面提供了字體下載圖35小注意下顏色深紅色看上去會(huì)有點(diǎn)“下陷”的感覺(jué)也方便我們加上圖層樣式后看上去更真實(shí)內(nèi)陰影：（圖36）圖36漸變疊加：（圖37）圖37描邊：（圖38）圖38等等，最后一個(gè)小技巧，看到描邊的顏色選擇嗎？（圖39）圖39對(duì)，選擇的顏 色比按