Photoshop快速繪制含圖案的透明立體按鈕

1、Photoshop快速繪制含圖案的透明立體按鈕來(lái)源:論壇           作者:           加入時(shí)間:2006-10-18 10:59:37           瀏覽次數(shù):6大家先看看下面的三維立體按鈕，如果覺(jué)得喜歡的話，歡迎繼續(xù)看下去。QBHCG家園QBHCG家園QBHCG家園圖1Q

2、BHCG家園QBHCG家園本教程在PHOTOSHOP7.0中實(shí)現(xiàn)，如參數(shù)設(shè)置面板有所不同，請(qǐng)參照7.0版本。QBHCG家園QBHCG家園關(guān)注QBHCG家園圖2 QBHCG家園QBHCG家園如今，三維立體按鈕又發(fā)生了大變化！什么大變化？先別擔(dān)心，技術(shù)上的變化不多，其實(shí)只是將素色加以發(fā)揮，向彩色傾移，并加上些色彩豐富的小插圖而已，留意文章開(kāi)始的圖標(biāo)示例就明白了。QBHCG家園QBHCG家園好了，閑話少說(shuō)，下面就讓我以制作我的論壇圖標(biāo)為例子，一起進(jìn)入三維立體按鈕制作的教程：QBHCG家園QBHCG家園一、繪制過(guò)渡色的圓形QBHCG家園QBHCG家園先打開(kāi)PHOTOSHOP7，按 Ctrl + N，新

3、建一個(gè) Width=48 pixels，Height=48 pixels 的空文檔，設(shè)置選擇工具為“Elliptical Marquee Tool圓形”選擇工具，雙擊鼠標(biāo)，在工具面板上部出現(xiàn)的屬性設(shè)置欄里設(shè)置：Feather=0 px,Anti-aliased,Style=fixed Size,Width=45 px,Height=45 px。設(shè)定選區(qū)為直徑是45的圓。QBHCG家園QBHCG家園QBHCG家園圖3QBHCG家園QBHCG家園移動(dòng)鼠標(biāo)到畫(huà)布上，點(diǎn)擊鼠標(biāo)左鍵，畫(huà)出一個(gè)固定大小的圓形選擇區(qū)。注意了，不是將選區(qū)置于畫(huà)布中間，而是按鍵盤上的方向鍵，向左向上各移動(dòng) 2 pixels，目的

4、為后面做按鈕陰影，突出按鈕立體感做準(zhǔn)備。當(dāng)然，做完了過(guò)渡填充再移動(dòng)也可以，這個(gè)由個(gè)人習(xí)慣定。QBHCG家園QBHCG家園QBHCG家園圖4QBHCG家園QBHCG家園任意選擇一種前景色，并設(shè)置背景色為同一色系中顏色較淺一種，如圖五：QBHCG家園QBHCG家園QBHCG家園圖5QBHCG家園QBHCG家園在這里多插入幾句可有可無(wú)的話，我們?cè)谶x擇同一色系的顏色時(shí)，如果已經(jīng)確定了前景色，想設(shè)置背景色，那么雙擊背景色，彈出顏色拾色器Color Picker，此時(shí)鼠標(biāo)形狀就會(huì)變成一個(gè)吸管，就可移動(dòng)此形狀的鼠標(biāo)到各個(gè)可取色的面板去選擇一個(gè)喜歡的顏色，在此吸取前景色，這時(shí)拾色器自動(dòng)選擇了前景色，那么我們就

5、可以在拾色器中快速地選擇到同一色系不同色深的顏色了。QBHCG家園QBHCG家園選擇“ Gradient Fill Tool 過(guò)渡填充工具”，在屬性工具條中設(shè)置過(guò)渡色為“Foreground to Background前景色到背景色”，過(guò)渡模式為“Linear Grandient線形過(guò)渡”，設(shè)置完成后屬性工具如下圖所示：QBHCG家園QBHCG家園QBHCG家園圖6QBHCG家園在選區(qū)中按“Shift”鍵，由上至下畫(huà)過(guò)渡色，此步驟完成如下圖：QBHCG家園QBHCG家園QBHCG家園圖7二、繪制初步三維立體感QBHCG家園QBHCG家園按“Ctrl + D”消除選區(qū)，雙擊此層應(yīng)用層樣式“Add

6、 a Layer Style”，在“Layer Style層樣式”設(shè)置面板中選擇“Drop Shadow下拉陰影”，參數(shù)設(shè)置為：Distance2，Size2，其它為缺省值。如圖八所示：QBHCG家園QBHCG家園QBHCG家園圖8QBHCG家園再勾選“Inner Glow(內(nèi)部發(fā)光)”，參數(shù)設(shè)置為： Blend ModeMultiply，其它為缺省值。如圖九所示：QBHCG家園QBHCG家園QBHCG家園圖9QBHCG家園QBHCG家園此步驟完成畫(huà)布上已經(jīng)初步顯示出三維立體按鈕的基本模樣了，如下圖：QBHCG家園QBHCG家園QBHCG家園圖10三、加強(qiáng)三維立體感QBHCG家園QBHCG家園

7、新建一個(gè)圖層，選擇“Elliptical Marquee Tool圓形”選擇工具，畫(huà)一個(gè)橢圓，長(zhǎng)約為圓形的二分之一，寬約為圓形的三分之一。選擇前景色為白色，并按“G”把工具換成過(guò)渡工具，設(shè)置過(guò)渡色為“Foreground to Transparent 前景色到透明”，在選區(qū)中按“Shift”鍵，由上到下填充過(guò)渡色，效果如下圖：QBHCG家園QBHCG家園QBHCG家園圖11QBHCG家園QBHCG家園再新建一個(gè)圖層，按住“Ctrl”鍵，點(diǎn)擊圓形層，重新獲得圓形層選區(qū)，在菜單中選擇“Select”“Modify”“Contract”，填充數(shù)字“2”，把選區(qū)壓縮 2 pixels。QBHCG家園Q

8、BHCG家園回畫(huà)布后，再選擇矩形選擇工具，按住“Alt”鍵，由選區(qū)左上部拖動(dòng)鼠標(biāo)到選區(qū)的右下部，整個(gè)選區(qū)的三分之二處，留下整個(gè)選區(qū)的三分之一。QBHCG家園QBHCG家園仍然使用白色作為前景色，并再次選擇過(guò)渡工具，過(guò)渡色為“Foreground to Transparent 前景色到透明”，在選區(qū)中按“Shift”鍵，由下到上填充過(guò)渡色。QBHCG家園QBHCG家園選擇菜單中的“ Filters濾鏡”“Gaussian Blur.高斯模糊”，在“Radius”中填入適當(dāng)?shù)臄?shù)值，本例為2，加個(gè)高斯模糊效果。確定后回到工作界面，把此層的透明度設(shè)置為68%左右。至此，整個(gè)圖標(biāo)制作過(guò)程完成了三分之二，

9、完成后如下圖：QBHCG家園QBHCG家園QBHCG家園圖12QBHCG家園QBHCG家園如果想做素素的按鈕，到這個(gè)步驟就基本完工了，只需添加按鈕文字?？杀疚某霭l(fā)點(diǎn)為做豐富多彩的三維立體按鈕，所以要出入下一個(gè)工序：QBHCG家園QBHCG家園五、插入漂亮圖標(biāo)QBHCG家園QBHCG家園為了讓按鈕更加美觀，我們可以加入一些標(biāo)志按鈕寓意的圖標(biāo)。至于加什么樣的圖標(biāo)，看個(gè)人決定。QBHCG家園QBHCG家園打開(kāi)一個(gè)現(xiàn)成的圖標(biāo)，經(jīng)過(guò)細(xì)心的勾選，把它復(fù)制到上面做成的按鈕中，QBHCG家園QBHCG家園QBHCG家園圖13QBHCG家園QBHCG家園調(diào)整圖標(biāo)的大小，以適應(yīng)按鈕，為了使插入的圖標(biāo)顏色與按鈕色相

10、融合，有必要調(diào)整圖標(biāo)的色相與飽和度。確定選中圖標(biāo)層，打開(kāi)菜單“Image圖象”“Adjustments調(diào)整”“Hue/Saturation.色相/飽和度”，或按快捷鍵“Ctrl + U”，進(jìn)入調(diào)整界面，移動(dòng)滑標(biāo)，設(shè)置：Hue=-18,Saturation=+30，其它為缺省。QBHCG家園QBHCG家園QBHCG家園圖14QBHCG家園QBHCG家園為了突出按鈕的三維效果，把圖標(biāo)層的透明度設(shè)置為65%。同時(shí)記得把此層調(diào)整到“第四道”工序中創(chuàng)建的兩層下。完成的按鈕如下圖所示：QBHCG家園QBHCG家園QBHCG家園圖15QBHCG家園QBHCG家園把按鈕保存成PSD分層文件，有了這個(gè)模板，我們可以通過(guò)色相、飽和度和亮度的調(diào)整，制作其它顏色的一系列按鈕。QBH