您的位置: 首頁 > 使用教學(xué)
注重細(xì)節(jié)!Photoshop打造Web2.0風(fēng)格按鈕
使用教學(xué) 時間:2010-04-13 作者/發(fā)布人:pc354 點擊:1976
圖1
老規(guī)矩，看到效果圖：分析!分析！再分析！我們將怎么完成這個圖標(biāo)的制作呢？經(jīng)觀察得：
一：背景制作（灰白色，加一條高光線）。這步應(yīng)該比較簡單。
二：圖標(biāo)的雛形（關(guān)鍵地方，顏色的搭配漂亮，因為給你第一感覺就是色彩。高光，浮雕，影子等細(xì)節(jié)的制作，看上去很立體就是這些因素造成的啦！）
三：郵件圖標(biāo)的添加（這個跟第二步類似）
四：文字的添加（關(guān)鍵點，文字排版，圖層樣式的設(shè)置。）
這都是我自己主觀的分析。嘿嘿，僅供參考。我覺得最關(guān)鍵的就是：色彩的搭配了，圖標(biāo)影調(diào)的分布！
準(zhǔn)備素材：字體下載
第一步：
新建一個文檔200×200px。背景色：白。分辨率：72dpi。現(xiàn)在給按鈕做輔助線，Ctrl+R顯示輔助線，在尺寸區(qū)域里面按住鼠標(biāo)左鍵，把拽輔助線拉下來。如下圖：
圖2
按快捷鍵：Ctrl+Alt+C，打開調(diào)整畫布大小的窗口。設(shè)置如下（畫布擴(kuò)大區(qū)域顏色的選則，窗口最下面的那個選項）：
圖3
下面是效果圖：
圖4
第二步：制作背景
作者使用的是灰白色的漸變：#f2f2f2—#c5c5c5。
圖5
注意這步小技巧：作者在背景上新建一層空白圖層，命名為“backlight”，使用小筆刷在背景中間和頂部分別畫一個小光圈。
圖6
調(diào)整這層大小如下圖，OK,我們的背景搞定！
圖7
第三步：
新建一層，按U，選擇圓角矩形工具，羽化值：10。如下圖畫，重命名為“button bg”。
圖8
關(guān)鍵部分：圖層樣式的設(shè)置
投影：
圖9
漸變疊加：
圖10
描邊：
圖11
現(xiàn)在得到的效果：
圖12
第四步：
關(guān)鍵是高光和陰影的制作。在按鈕下面添加一層，使用矩形選取工具畫個陰影：
圖13
重命名為：“shadow”。影子太生硬了，必須模糊一下。濾鏡—高斯模糊—13。
圖14
按快捷鍵Ctrl+T調(diào)整陰影大小，位置，不透明度30%
圖15
在按鈕圖層上面，新添加一層并命名“Highlight”（高光）。設(shè)置圖層混合模式為：疊加。選擇白色筆刷，在按鈕上部單擊一下。如下圖。
圖16
效果還不是很滿意，復(fù)制一層，混合模式改回 “正常”，按Ctrl+T改變大小和位置。如下圖：
圖17
效果：
圖18
第五步：
新建圖層，畫“信封”圖標(biāo)了。選擇矩形選取工具， 畫出如下圖矩形。
圖19
重命名為“envelope”（信封）。注意步驟：圖層樣式的設(shè)置
投影：
圖20
外發(fā)光：
圖21
描邊：注意顏色的選擇。
圖22
最終效果：
圖23
第六步：
新建一層，繼續(xù)制作信封的圖標(biāo)。按U選擇多邊形工具。
圖24
設(shè)置如下：
圖25
畫出一個三 角形如下圖。使用自由變換工具調(diào)整位置大小。
圖26
圖層樣式設(shè)置
投影：
圖27
內(nèi)陰影：
圖28
漸變疊加：
圖29
描邊：
圖30
最終效果：
圖31
復(fù)制一層，Ctrl+T自由變換，選擇垂直翻轉(zhuǎn)。并調(diào)節(jié)大小如下圖：
圖32
圖33
記得把這復(fù)制的小三角形的圖層選項：描邊去掉！在大三角和小 三角形中間新建一層，做一個小圓選區(qū)。我們使用筆刷畫一下大三角形投影到小三角形上的陰影。
圖34
記得使用模糊和調(diào)整圖層透明度來使陰影柔和。效果：
圖35
第七步：
添加文字：“Contact Me”（聯(lián)系我）。最上面提供了字體下載。小注意下顏色。深紅色看上去會有點“下陷”的感覺，也方便我們加上圖層樣式后看上去更真實。
圖36
內(nèi)陰影：
圖37
漸變疊加：
圖38
描邊：
圖39
等等，最后一個小技巧，看到描邊的顏色選擇嗎？
圖40
對，選擇的顏色比按鈕背景色淺一些，為什么？看上去更有“浮雕”效果了！
OK，最終效果圖：
圖41
總結(jié)：這是篇簡單的教程，對于新手，多練習(xí)圖層樣式就能搞定。還是要說的：細(xì)節(jié)的 處理！顏色的搭配！
軟件教學(xué)
常用下載
- 科杰在線原創(chuàng)作品：文章自動排版的小工具(08-29)
- 【原創(chuàng)】為自己車載播放器和手機(jī)放音樂的順序..(06-27)
- 免費小巧虛擬機(jī)：VirtualBox4.3.8穩(wěn)定版下載(02-27)
- 最新版AdobeCC系列軟件的破解軟件集合下載,ps..(06-19)
- 【原創(chuàng)】快速保存文本文章的小工具(02-05)
winXP相關(guān)
win8/7相關(guān)
- win7打開文件夾時提示權(quán)限不足或未獲授權(quán)(10-13)
- win7win8系統(tǒng)筆記本如何在插入USB鼠標(biāo)后自動禁..(01-07)
- 如何安裝和卸載Windows8的應(yīng)用(09-18)
- 鎂光M4固態(tài)硬盤SSD硬盤最新固件000F下載(05-16)
- 如何刪除windows7桌面上的庫和家庭組圖標(biāo)(12-05)
點擊排行
熱點關(guān)注
- 郎咸平合肥演講:長篇大論美國對中國的經(jīng)濟(jì).. ○
- 它值2499塊嗎?聯(lián)想樂Phone智能手機(jī)拆拆樂 ○
- 釣.魚.島事件以來最愛國的視頻，發(fā)出億萬.. ○
- 布嘉迪領(lǐng)銜TOP10之北京車展十大天價車匯總.. ○
- 安徽艷照事件當(dāng)事人之一的夫妻被雙規(guī)開除.. ○
- 電信免費送蘋果手機(jī)？老套騙術(shù)總能騙得貪.. ○
- 溫嶺幼兒園老師以虐待兒童獲快感,空間大量.. ○
- 黑客破解車管所系統(tǒng)幫人消違章分,3年“賺.. ○
- 1歲女嬰性早熟發(fā)育出胸部,直指雅培奶粉激.. ○
- 女司機(jī)劉育紅開無牌寶馬闖紅燈被攔頂交警.. ○
新聞動態(tài)
- 韓國女子組合《牽線木偶》MV高清版加中文.. ○
- 新加坡國立大學(xué)男生拍色-情片,用女友當(dāng)主.. ○
- 疑香港嫩模Amy不雅照片集及視頻被下載被曝.. ○
- 山西輪.奸.案變“通.奸”5名政法人員因說.. ○
- 安徽廬江縣委書記艷照最新進(jìn)展:合肥官方稱.. ○
- 支付寶也可以買火車票,相關(guān)細(xì)節(jié)正在敲定 ○
- 傳久游送蒼井空AV影片疑涉嫌傳播淫.穢信息 ○
- 加拿大政府向西班牙電信提供貸款采購黑莓.. ○
- 京東避談奢侈品為假貨,只強(qiáng)調(diào)貨源無問題 ○
- 揭秘日本AV界傳奇人物：老牛吃嫩草的典范.. ○
- 鬧劇的終結(jié)?我看聯(lián)通iPhone4合約新政 ○
- 男人們?yōu)槭裁锤矚g少婦而不喜歡少女？ ○
