您的位置: 首頁 > 使用教學
注重細節!Photoshop打造Web2.0風格按鈕
使用教學 時間:2010-04-13 作者/發布人:pc354 點擊:2084
圖1
老規矩，看到效果圖：分析!分析！再分析！我們將怎么完成這個圖標的制作呢？經觀察得：
一：背景制作（灰白色，加一條高光線）。這步應該比較簡單。
二：圖標的雛形（關鍵地方，顏色的搭配漂亮，因為給你第一感覺就是色彩。高光，浮雕，影子等細節的制作，看上去很立體就是這些因素造成的啦！）
三：郵件圖標的添加（這個跟第二步類似）
四：文字的添加（關鍵點，文字排版，圖層樣式的設置。）
這都是我自己主觀的分析。嘿嘿，僅供參考。我覺得最關鍵的就是：色彩的搭配了，圖標影調的分布！
準備素材：字體下載
第一步：
新建一個文檔200×200px。背景色：白。分辨率：72dpi。現在給按鈕做輔助線，Ctrl+R顯示輔助線，在尺寸區域里面按住鼠標左鍵，把拽輔助線拉下來。如下圖：
圖2
按快捷鍵：Ctrl+Alt+C，打開調整畫布大小的窗口。設置如下（畫布擴大區域顏色的選則，窗口最下面的那個選項）：
圖3
下面是效果圖：
圖4
第二步：制作背景
作者使用的是灰白色的漸變：#f2f2f2—#c5c5c5。
圖5
注意這步小技巧：作者在背景上新建一層空白圖層，命名為“backlight”，使用小筆刷在背景中間和頂部分別畫一個小光圈。
圖6
調整這層大小如下圖，OK,我們的背景搞定！
圖7
第三步：
新建一層，按U，選擇圓角矩形工具，羽化值：10。如下圖畫，重命名為“button bg”。
圖8
關鍵部分：圖層樣式的設置
投影：
圖9
漸變疊加：
圖10
描邊：
圖11
現在得到的效果：
圖12
第四步：
關鍵是高光和陰影的制作。在按鈕下面添加一層，使用矩形選取工具畫個陰影：
圖13
重命名為：“shadow”。影子太生硬了，必須模糊一下。濾鏡—高斯模糊—13。
圖14
按快捷鍵Ctrl+T調整陰影大小，位置，不透明度30%
圖15
在按鈕圖層上面，新添加一層并命名“Highlight”（高光）。設置圖層混合模式為：疊加。選擇白色筆刷，在按鈕上部單擊一下。如下圖。
圖16
效果還不是很滿意，復制一層，混合模式改回 “正常”，按Ctrl+T改變大小和位置。如下圖：
圖17
效果：
圖18
第五步：
新建圖層，畫“信封”圖標了。選擇矩形選取工具， 畫出如下圖矩形。
圖19
重命名為“envelope”（信封）。注意步驟：圖層樣式的設置
投影：
圖20
外發光：
圖21
描邊：注意顏色的選擇。
圖22
最終效果：
圖23
第六步：
新建一層，繼續制作信封的圖標。按U選擇多邊形工具。
圖24
設置如下：
圖25
畫出一個三 角形如下圖。使用自由變換工具調整位置大小。
圖26
圖層樣式設置
投影：
圖27
內陰影：
圖28
漸變疊加：
圖29
描邊：
圖30
最終效果：
圖31
復制一層，Ctrl+T自由變換，選擇垂直翻轉。并調節大小如下圖：
圖32
圖33
記得把這復制的小三角形的圖層選項：描邊去掉！在大三角和小 三角形中間新建一層，做一個小圓選區。我們使用筆刷畫一下大三角形投影到小三角形上的陰影。
圖34
記得使用模糊和調整圖層透明度來使陰影柔和。效果：
圖35
第七步：
添加文字：“Contact Me”（聯系我）。最上面提供了字體下載。小注意下顏色。深紅色看上去會有點“下陷”的感覺，也方便我們加上圖層樣式后看上去更真實。
圖36
內陰影：
圖37
漸變疊加：
圖38
描邊：
圖39
等等，最后一個小技巧，看到描邊的顏色選擇嗎？
圖40
對，選擇的顏色比按鈕背景色淺一些，為什么？看上去更有“浮雕”效果了！
OK，最終效果圖：
圖41
總結：這是篇簡單的教程，對于新手，多練習圖層樣式就能搞定。還是要說的：細節的 處理！顏色的搭配！
軟件教學
- 硬盤又壞了？用360云盤或百度云盤給電腦數據“..(12-01)
- PS高級教程：Photoshop內容識別去水印瑕疵(05-29)
- LGv500：8.3寸平板升級4.4的方法,lg8.3寸平板..(05-29)
- 掃盲貼：汽車車載導航升級漫談——致新手！(修..(05-13)
- VMwareWorkstation8,9,10安裝win7系統無法激活..(02-10)
常用下載
- 科杰在線原創作品：文章自動排版的小工具(08-29)
- 【原創】為自己車載播放器和手機放音樂的順序..(06-27)
- 免費小巧虛擬機：VirtualBox4.3.8穩定版下載(02-27)
- 最新版AdobeCC系列軟件的破解軟件集合下載,ps..(06-19)
- 【原創】快速保存文本文章的小工具(02-05)
winXP相關
- 如何將SONYVAIO系列筆記本刪除VISTA或Win7安裝..(03-17)
- IIS服務器出現ServerApplicationError錯誤解決..(04-10)
- HPV3803TX、DV2000系列終于可以安裝XP了！(10-11)
- hpDV2700筆記本為何不能安裝xp？(10-08)
- 惠普dv2700/dv2800/V3700/V3800系列完美安裝X..(10-08)
win8/7相關
- win7打開文件夾時提示權限不足或未獲授權(10-13)
- win7win8系統筆記本如何在插入USB鼠標后自動禁..(01-07)
- 如何安裝和卸載Windows8的應用(09-18)
- 鎂光M4固態硬盤SSD硬盤最新固件000F下載(05-16)
- 如何刪除windows7桌面上的庫和家庭組圖標(12-05)
