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

《使用photoshop制作漂亮的圖標(biāo)流程解析》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、使用Photoshop制作漂亮的圖標(biāo)流程解析???導(dǎo)言：看到效果圖，蠻以為一個(gè)小圖標(biāo)應(yīng)該很容易就能搞定沒想到需要這么多步驟。細(xì)節(jié)，細(xì)節(jié)，還是細(xì)節(jié)！切記！OK，開始我們這次的教程先上效果圖：???老規(guī)矩，看到效果圖：分析!分析！再分析！我們將怎么完成這個(gè)圖標(biāo)的制作呢？?經(jīng)觀察得：一：背景制作（灰白色，加一條高光線）這步應(yīng)該比較簡(jiǎn)單。二：圖標(biāo)的雛形（關(guān)鍵地方，顏色的搭配漂亮，因?yàn)榻o你第一感覺就是色彩。高光，浮雕，影子等細(xì)節(jié)的制作，看上去很立體就是這些因素造成的啦?。┤亨]件圖標(biāo)的添加（這個(gè)跟第二步類似）四：文字的添加（關(guān)鍵點(diǎn)，文字排版，圖層樣式的設(shè)置。）?這都是我自己主觀

2、的分析。嘿嘿，僅供參考我覺得最關(guān)鍵的就是：色彩的搭配了，圖標(biāo)影調(diào)的分布！準(zhǔn)備素材：字體下載?第一步：新建一個(gè)文檔200×200px背景色：白分辨率：72dpi現(xiàn)在給按鈕做輔助線，Ctrl+R顯示輔助線在尺寸區(qū)域里面按住鼠標(biāo)左鍵，把拽輔助線拉下來。（圖01）??圖01?按快捷鍵：Ctrl+Alt+C，打開調(diào)整畫布大小的窗口。設(shè)置如下：（圖02）??圖02?（畫布擴(kuò)大區(qū)域顏色的選則，窗口最下面的那個(gè)選項(xiàng)）下面是效果圖：（圖03）?第二步：制作背景作者使用的是灰白色的漸變：#f2f2f2—#c5c5c5。（圖04）??圖04?注意這步小技巧：作者在背景上新建一層空白圖層命名

3、為“backlight”，使用小筆刷在背景中間和頂部分別畫一個(gè)小光圈。（圖05）??圖05?調(diào)整這層大?。海▓D06）??圖06?這步干嘛用的呢？OK,我們的背景搞定！?第三步：新建一層按U，選擇圓角矩形工具，羽化值：10。（圖07）??圖07?重命名為“buttonbg”?關(guān)鍵部分：圖層樣式的設(shè)置投影：（圖08）??圖08?漸變疊加：（圖09）??圖09?描邊：（圖10）??圖10?效果：（圖11）??圖11?第四步：關(guān)鍵：高光和陰影的制作在按鈕下面添加一層使用矩形選取工具畫個(gè)陰影：（圖12）??圖12?重命名為：“shadow”影子太生硬了，必須模糊一下。濾鏡—高斯

4、模糊—13。（圖13）??圖13?按快捷鍵Ctrl+T調(diào)整陰影大小，位置。不透明度30%。（圖14）??圖14??在按鈕圖層上面，新添加一層并命名“Highlight”（高光）設(shè)置圖層混合模式為：疊加選擇白色筆刷，在按鈕上部單擊一下。（圖15）??圖15?效果還不是很滿意，復(fù)制一層混合模式改回“正?！卑碈trl+T改變大小和位置。（圖16）??圖16?效果：??圖17?第五步：新建圖層，畫“信封”圖標(biāo)了選擇矩形選取工具，畫出如下圖矩形。（圖18）??圖18?重命名為“envelope”（信封）?注意步驟：圖層樣式的設(shè)置投影：（圖19）??圖19?外發(fā)光：（圖20）??

5、圖20?描邊：（圖21）??圖21?注意顏色的選擇！最終效果：（圖22）??圖22???第六步：新建一層，繼續(xù)制作信封的圖標(biāo)按U選擇多邊形工具。（圖23）??圖23?設(shè)置如下：（圖24）??圖24?畫出一個(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é)大?。海▓D31、32）??圖31??圖32?記得把這復(fù)制的小三角形的圖層選項(xiàng)：描邊去掉！

6、在大三角和小三角形中間新建一層做一個(gè)小圓選區(qū)我們使用筆刷畫一下大三角形投影到小三角形上的陰影。（圖33）??圖33?記得使用模糊和調(diào)整圖層透明度來使陰影柔和效果：（圖34）??圖34??第七步：添加文字：“ContactMe”（聯(lián)系我）（?圖35）最上面提供了字體下載??圖35?小注意下顏色深紅色看上去會(huì)有點(diǎn)“下陷”的感覺也方便我們加上圖層樣式后看上去更真實(shí)?內(nèi)陰影：（圖36）?圖36?漸變疊加：（圖37）??圖37?描邊：（圖38）???圖38?等等，最后一個(gè)小技巧，看到描邊的顏色選擇嗎？（圖39）?圖39?對(duì)，選擇的顏色比按鈕背景色淺一些，為什么？看上去更有“浮雕

7、”效果了！?OK，最終效果圖：???搞定了！?總結(jié)：這是篇簡(jiǎn)單的教程對(duì)于新手，多練習(xí)圖層樣式就能搞定還是要說的：細(xì)節(jié)的處理！顏色的搭配！