PS五種水晶按鈕制作教程集合

1、圓形水晶按鈕制作教程1 .新建文件，寬、高都為 5,單位cm,分到?率200,模式為RGB白色背景。2. 用圓形選框工具畫(huà)出圓形選框，在選區(qū)內(nèi)點(diǎn)鼠標(biāo)右鍵，選“通過(guò)拷貝的圖層”項(xiàng)（圖層 1）。3. 新建圖層（圖層2），使用漸變工具，設(shè)置成“前景色到透明漸變”，前景色設(shè)置為R： 255，拉出如圖漸變。4. 新建圖層（圖層3），在新圖層上用噴筆畫(huà)出陰影（也可填充顏色，然后用橢圓選區(qū)羽化后刪除，但是那樣效果沒(méi)有用噴筆來(lái)得自然好看，小魔星就不在此贅述：P）5. 新建圖層（圖層4），在新圖層上畫(huà)出橢圓選區(qū)。6. 在圖層 4 上使用漸變工具，前景色設(shè)置為R： 255； G： 255； B： 255。7. 新

2、建圖層（圖層5），使用鋼筆工具任意畫(huà)一個(gè)圖形。8. 在路徑工作區(qū)中點(diǎn)選“將路徑作為選區(qū)載入”，將鋼筆路徑轉(zhuǎn)換成選區(qū)。9. 填充前景色。10. 將圖層 5 拉至圖層 4之下。11. 圖層屬性設(shè)置為“疊加”。12. 把工作區(qū)換到圖層1（通過(guò)拷貝的白色圓形），雙擊圖層，跳出圖層樣式框，參數(shù)設(shè)置如圖。13. 現(xiàn)在就是大功告成拉哈哈哈如果想再做其他顏色的水晶按鈕不必再一個(gè)個(gè)重復(fù)做只要點(diǎn)ctrl+U調(diào)整色相就OK了：）金屬邊框按鈕.背景的制作1 .打開(kāi) photoshop 新建一個(gè) 400*400 的文件 最好是 "RGB" 顏色用黑白圓形漸變繪制如 < 圖 2>所示漸變&

3、lt;圖 1><圖 2>2 .選擇濾鏡 > 雜色 > 添加雜色 數(shù)值如 < 圖 3> 所示<圖 3>3.選擇濾鏡 > 藝術(shù)效果 > 底紋效果 數(shù)值如 <圖 4> 所示<圖 4>背景效果圖如圖 5（第一步大功告成）:<圖 5>一 .水晶部分的制作:1 .新建一個(gè)圖層命名為 “水晶 -底 1”，按 Ctrl + R 調(diào)出標(biāo)尺 拉兩條如圖所示參照線(xiàn)，以參照線(xiàn)的交點(diǎn)為圓心，用橢圓選取工具按住 ALT + Shift 繪制 圖 6 所示的正圓。<圖 6>2 .按 Ctrl + 隱藏參照線(xiàn)，選

4、擇漸變工具在 “水晶-底 1”這層繪制漸變，漸變顏色：黑白漸變，漸變方式：放射性漸變，漸變路線(xiàn)：由選區(qū)的左上角 按住 Shift 向右下方漸變?nèi)鐖D 7<圖 7>3 .按 Ctrl + D 取消選區(qū) 漸變的效果如 圖 8<圖 8>4.雙擊圖層 “水晶-底 1”調(diào)出 圖層樣式 分別選擇描邊和投影 相關(guān)參數(shù)如 圖 9 圖 10 效果如 圖 11<圖 9><圖 10>5.用橢圓選取工具在剛繪制圓形上繪制如圖 12 所示的橢圓，按Ctrl + Alt + D 羽化，數(shù)值為25，再按 Ctrl+ M 把所選的區(qū)域調(diào)成高光如圖 13<圖 12>&l

5、t;圖 13>6.按 Ctrl + D 取消選區(qū)，在 “水晶 -底 1”上面新建一層命名為： “水晶 -底 2”, 再按 Ctrl + 調(diào)出參照線(xiàn)，然后用橢圓選取工具繪制圖 14 所示的正圓。<圖 14>7.用漸變工具繪制漸變：漸變顏色：黑白漸變，漸變方式：放射性漸變，漸變路線(xiàn)：由選區(qū)的右下角 按住 Shift 向左上角方漸變漸變效果如圖 15 。<圖 15>8.不要取消選區(qū)，在圖層 “水晶 -底 2”上再新建一層命名為： “水晶 -底 3” ，選擇：選擇 > 修改 > 收縮 數(shù) 值為： 3 如圖 16 。<圖 15><圖 16>

6、;9.在圖層 “水晶 -底 3”繪制漸變：漸變顏色：深綠( R:0 G:63 B:41 )白漸變，漸變方式：放射性漸變，漸變路線(xiàn)：由選區(qū)的右下角 按住 Shift 向左上角方漸變按 Ctrl + 取消參照線(xiàn)漸變效果如圖 17。<圖 18>10.雙擊 “水晶-底3”調(diào)出圖層樣式，選擇描邊，數(shù)值為1，顏色為黑色，透明度為25% ，在 “水晶 -底3”上面新建一層命名為： “水晶-內(nèi)陰影” 調(diào)出 “水晶 -底 3”的選區(qū)，（方法：用鼠標(biāo)點(diǎn)擊圖18紅色部分位置，下同）填充黑色。<圖 18>11. 選擇菜單：選擇> 修改 > 收縮 數(shù)值為： 3 再按 Ctrl + A

7、lt + D 羽化，數(shù)值為5，按刪除鍵刪掉選擇部分，取消選區(qū)（按Ctrl+D ）效果如圖 19。<圖 19>12. 在 “水晶-內(nèi)陰影”上新建一層命名為 “水晶 -內(nèi)發(fā)光 ”調(diào)出 “水晶 -底 3”的選區(qū)（方法參照第9 步下同），填充白色，選擇菜單：選擇 > 修改 > 收縮 數(shù)值為：3，再按Delete 刪除中心部分如圖 20。<圖 20>13. 選擇橡皮工具，設(shè)置如圖21 ，把白圈的部分地方擦除，效果如圖 22<圖 21><圖 22>14. 在 “水晶 -內(nèi)陰影 ”上新建一層命名為 “水晶 -底高光 ”調(diào)出 “水晶-底 3”的選區(qū)（

8、方法參照第9 步下同），用橢圓選取工具按住 ALT 鍵，在選區(qū)切出如圖 23 所示的選區(qū)，按Ctrl + Alt + D 羽化數(shù)值為3 ，再填充白色，取消選區(qū)，把圖層的透明度調(diào)為 30% 如圖 24 。<圖 23>< 圖 24>15. 在 “水晶 -底高光 ”上新建一層命名為 “水晶 -大光圈 ” ，按 Ctrl + 調(diào)出參照線(xiàn)，在中心繪制一個(gè)正圓填充白色，取消選區(qū)，把這層的透明度調(diào)為 10% 效果如圖 25 。<圖 26>16. 在 “水晶 -大光圈 ”上新建一層命名為 “水晶 -頂高光 ” ，按 Ctrl + 調(diào)出參照線(xiàn)，在中心繪制一個(gè)正圓填充白色，取消

9、選區(qū)，再添加蒙版如圖 26 。<圖 26>17. 選擇黑白漸變，方向：從上到下漸變，效果如圖27 。<圖 27>18.在 “水晶 -大光圈 ”上新建一層命名為： “水晶 -底高光 1” ， 調(diào)出 “水晶 -底 3”的選區(qū)， 選擇菜單： 選擇 > 修 改 > 收縮 數(shù)值為： 4,再用橢圓選區(qū)工具 按住 ALT 鍵切出圖 28 所示的選區(qū)，然后填充白色。<圖 28>19.取消選區(qū)，用鋼筆工具把尖角的地方勾出圓角,按 Ctrl + Enter 調(diào)出選區(qū)再按Delete 刪除選區(qū)部分。如圖 29,30 。<圖 29><圖 30>2

10、0. 取消選區(qū)，添加蒙版，用黑白漸變按圖31 所示方向漸變。<圖 31>21.在 “水晶 -底高光 1”上新建一層命名為： “水晶 -底高光2”, 用橢圓選取工具繪制一個(gè)小橢圓，填充白色如圖 32 所示，再按Ctrl + T 調(diào)出變形工具，把橢圓略向上傾斜,按 Enter 鍵應(yīng)用變形如圖 33 所示。<圖 32><圖 33>22 .在 “水晶 -底高光 2”上新建一層命名為： “水晶 -頂反光 1”, 用鋼筆工具繪制如圖 34 所示的圖形，按Ctrl +Enter 調(diào)出選區(qū)，再填充白色，然后按Ctrl + D 取消選區(qū)。< 圖 34>23 . 添

11、加蒙版，用黑白漸變按圖 35 所示方向漸變。<圖 35>24.在 “水晶 -頂反光 1”上新建一層命名為： “水晶 -頂反光2”, 用橢圓選取工具繪制一個(gè)小橢圓，填充白色,再按 Ctrl + T 調(diào)出變形工具，把橢圓略向上傾斜，按一下Enter 鍵，再把這層的透明度調(diào)為60 ，如圖36所示。<圖 36>25.按 Ctrl + J 把 “水晶 -頂反光 2”復(fù)制一層命名為 “水晶 -頂反光 2top ”,再回到 “水晶-頂反光2”這層，選擇菜單：濾鏡 > 模糊 > 高斯模糊 數(shù)值為 3.5 效果如圖 37 。<圖 37>26. 到這一步為止水晶部分

12、的效果就算完成了，不過(guò)有些不滿(mǎn)意的地方，我們自己可以適當(dāng)?shù)脑僬{(diào)整一下，盡量讓自己滿(mǎn)意。<圖 38>二 .文字部分的制作:1.在圖層的最上面新建一個(gè)圖層用文字工具打上"68ps"幾個(gè)字如圖39。<圖 39>2.雙擊圖層，調(diào)出圖層樣式依次進(jìn)行：投影、外發(fā)光、斜面和浮雕及描邊的設(shè)置，設(shè)置參數(shù)如下圖。<投影 ><外發(fā)光 ><斜面浮雕>描邊效果3 .刪格化圖層，并鎖定圖層，具體設(shè)置如圖。圖 404 .選擇漸變工具設(shè)置如圖 41,漸變方向如圖42。圖 41圖 425 .用噴槍工具，壓力為 20%左右，適當(dāng)?shù)挠煤谏桶咨珖姵鑫淖?/p>

13、的暗光和高光，整體效果如圖 43圖 43最后給整個(gè)按鈕制作一點(diǎn)小裝飾，最終效果就做好了！最終效果方形水晶按鈕1.新建一個(gè)300 * 200像素的文件，定義圓角矩形大小為 250 * 120。加 3萬(wàn)。o回角矩那選項(xiàng)。不要妁束O方形固定大小 W；匕5PX |出口20夕|H：對(duì)齊像素匕例 口從中心1新建一個(gè)300*200像素的文檔定義圓角矩形大小為250*1201a 一一=_ 2 .復(fù)制圓角矩形圖層并縮小度 V； 0.0W： 95X% ；S H；肛0%當(dāng)復(fù)制圓角一矩形圖層井縮小3 .給底部圓角矩形加個(gè)漸變疊加，這里具體顏色頭可以先不管，是同一色相調(diào)整不同明度就可以了郁圓前矩形加as漸變疊加卜這里具

14、體顏色都可以先不管,.一f c 苑是同T色相調(diào)亞不同明度就可以了H國(guó)口模式；正w*1J 100不透明度（呼漸變；匚二3反向®件式（D； |對(duì)薪的1|回與副妻對(duì)齊角度（酹;縮敢（今4 .這是是具體的簡(jiǎn)便顏色設(shè)置5.給上邊的矩形添加樣式50% ,操作如下圖6 .設(shè)置前景顏色為白色，用橢圓工具畫(huà)出如圖形狀并設(shè)置不透明度為6設(shè)置前景色為白色1用橢圖工具畫(huà)出如圖,7 .載入上部矩形為選區(qū)并新建圖層用白色描邊，并給該圖層添加一個(gè)蒙版用漸變工具作出下圖效果描述寬®® ； 15 M 顏色：1.位置內(nèi)畫(huà)(I)。居中K)居外山區(qū)叵面贏 選見(jiàn)板果 為邁蒙效形描壽圖 矩色I(xiàn)如 部百一加連

15、 生E添就熨層R箕>圖圖I<建一該變E亶漸<噂用營(yíng)口溜窗形狀2加寓 G不透明度叵圭工10C%期狀19OH,順帶看看圖層情況吧8 .隱藏背景圖層，蓋印圖層，并用自由變換工具做成倒影。8；隱臧背景圖層到口圖層. 并用自.由變換工具做成倒麴同掛給圖層流用蒙板作出漸變激果9.加上文字步加上包目喜歡的文寶匕皴荃本兆了10.最后添加一個(gè)色相飽和度可以調(diào)成自己喜愛(ài)的顏色L3最后流g今色相飽和度調(diào)整層想要你么顏色就包冠調(diào)回1/飽和度編段目;I全圖Ml色相：BHTB£WOd ；'rCr飽和度（山：|口Q 明度（D；|o0最終效果圖1、首先，填充一個(gè)淺灰的底，目的是為了突出按鈕

16、的高光位置，有其是邊緣的。我現(xiàn)在把文字和高光的圖 層給去掉了，只留下最重要的部分。這個(gè)圖層，就只有樣式，你看到的效果，全都是樣式做出來(lái)的?？吹?了嗎？都用了那幾種樣式？ps制作水晶長(zhǎng)形按鈕2、有了基本認(rèn)識(shí)，接下來(lái)，新建一個(gè)圖層，偶先畫(huà)了一個(gè)倒角的方形，偶比較喜歡倒角的，如果你喜歡其 它形狀，隨便畫(huà)好了。如果你不知道怎么畫(huà)，請(qǐng)看之前的教程。畫(huà)好后，隨便填個(gè)顏色，什么顏色都沒(méi)關(guān) 系。雙圖層，調(diào)出圖層樣式窗口。為了讓按鈕更明顯一些，偶先加了個(gè)描邊。一個(gè)像素就夠了，顏色選擇 黑色，透明一點(diǎn)。為什么不直接用灰色呢？那是因?yàn)榭紤]到以后應(yīng)用的時(shí)候，透明的黑色會(huì)更容易融入其 它環(huán)境的?；疑珪?huì)顯得很生硬，記住拉

17、，用半透明的黑色，更容易融入背景的。3、有了描邊，再加個(gè)漸變，好增加立體感，看看，怎么是正片疊加的？其實(shí)，你也可以用正常模式的，但 為什么偶要選擇正片疊加？先買(mǎi)個(gè)關(guān)子，等一下再告訴你吧現(xiàn)在先選擇好你喜歡的顏色先拉！加了顏色 后，先不急著調(diào)整，留待其它效果添加了再調(diào)整會(huì)容易很多的。PS制作水晶長(zhǎng)形按鈕海臺(tái)硬式【曲:|正好急里 工|不翌觸也#Him %漳競(jìng)IJFh F應(yīng)向出)牌式也)i廊3 F與勰老齊(1)度4、現(xiàn)在還差點(diǎn)什么呢？阿，對(duì)了，還欠個(gè)陰影。那么，我們給他加個(gè)陰影吧看偶的！夷？為什么不用陰影，而用外發(fā)光呢？怎么混和模式又不是正常的呢？呵， 別急，下一步告訴你為什么。先選好黑色的發(fā)光,表示

18、陰影吧5、好拉，現(xiàn)在看看效果怎樣？在一個(gè)陰影的基礎(chǔ)上，就僅僅是多了一條白色的線(xiàn)，但就因?yàn)檫@條小線(xiàn)，令按鈕突出來(lái)了，細(xì)節(jié)的東西，可不要忽略了阿。當(dāng)你發(fā)覺(jué)你做的東西不對(duì)勁的時(shí)候，要考慮一下，是否有某些細(xì)節(jié)給忽略了。港言選項(xiàng):氫汶h投影廠(chǎng)內(nèi)陰影廠(chǎng)$1而和苗髓L嫉理廠(chǎng)穎包我加 k漸支委項(xiàng) r圍輅加戶(hù)推選6、但現(xiàn)在的按鈕好像光的質(zhì)感還不夠，我再加一個(gè)內(nèi)發(fā)光！讓他在邊緣發(fā)光，這個(gè)也就只是一些細(xì)節(jié)，當(dāng)然，你可能不會(huì)一下子發(fā)現(xiàn)，你可以在到制作到后期的時(shí)候添加和修改也行的。PS制作水晶長(zhǎng)形按鈕r的發(fā)尤pflW澧合檀式（時(shí)：國(guó)i三）不透明凸 （60 一 %雜包（: 口J %| 命口門(mén) - "F確 口）：

19、3源；居中&）口法/®陰叁（口：白血%文小忖1 ffijR等荀作；L £.消除堀位（D范圖田）：r 心 t |50%/動(dòng)（占%7、加了個(gè)發(fā)光，效果好了點(diǎn)，但現(xiàn)在雖然有了金屬包邊的感覺(jué)，但還是覺(jué)得平凡了點(diǎn)。哈，加個(gè)斜線(xiàn)也是個(gè)流行的做法阿！關(guān)于斜線(xiàn)的制作，看這里 dispbbs.asp?BoardID=3&ID=188958 不要再問(wèn)偶了。但你加了斜紋后，可能會(huì)看不到？為什么？ ？ ？ ？嘗試修改混合模式吧然后調(diào)整透明度，讓斜線(xiàn)更自然的融入按鈕4、現(xiàn)在還差點(diǎn)什么呢？阿，對(duì)了，還欠個(gè)陰影。那么，我們給他加個(gè)陰影吧看偶的！夷？為什么不用陰影，而用外發(fā)光呢？怎么混和模

20、式又不是正常的呢？呵， 別急，下一步告訴你為什么。先選好黑色的發(fā)光,表示陰影吧5、好拉，現(xiàn)在看看效果怎樣？在一個(gè)陰影的基礎(chǔ)上，就僅僅是多了一條白色的線(xiàn)，但就因?yàn)檫@條小線(xiàn)，令 按鈕突出來(lái)了，細(xì)節(jié)的東西，可不要忽略了阿。當(dāng)你發(fā)覺(jué)你做的東西不對(duì)勁的時(shí)候，要考慮一下，是否有 某些細(xì)節(jié)給忽略了。6、但現(xiàn)在的按鈕好像光的質(zhì)感還不夠，我再加一個(gè)內(nèi)發(fā)光！讓他在邊緣發(fā)光，這個(gè)也就只是一些細(xì)節(jié)，當(dāng) 然，你可能不會(huì)一下子發(fā)現(xiàn)，你可以在到制作到后期的時(shí)候添加和修改也行的。7、加了個(gè)發(fā)光，效果好了點(diǎn)，但現(xiàn)在雖然有了金屬包邊的感覺(jué)，但還是覺(jué)得平凡了點(diǎn)。哈，加個(gè)斜線(xiàn)也是個(gè)流行的做法阿！關(guān)于斜線(xiàn)的制作，看這里 dispbbs

21、.asp?BoardID=3&ID=188958 不要再問(wèn)偶了。但你加了斜紋后，可能會(huì)看不到？為什么？ ？ ？ ？嘗試修改混合模式吧然后調(diào)整透明度，讓斜線(xiàn)更自然的融入按鈕PS制作水晶長(zhǎng)形按鈕圖案春塘混合羯式值）：|演性加海二J 不比明晚：口E%濡合選項(xiàng)；更%廠(chǎng)內(nèi)碣靜口外能艇P內(nèi)發(fā)送r斜面疝孝ntl等硝廣光定酸電叁腳片斯支我加制作網(wǎng)頁(yè)常用水晶按鈕水晶按鈕最終效果圖1、打開(kāi)PS,新建一個(gè)文件，在工具箱中選擇圓角矩形工具，如下圖所示設(shè)置：2、新建一個(gè)圖層后， 在畫(huà)布上拉出一個(gè)長(zhǎng)方形，就得到這樣的結(jié)果。（為了更好的給大家講解，這個(gè)圖放大了 400項(xiàng)示）如果大家得到這樣的結(jié)果。就需要將“對(duì)齊像素

22、”的選項(xiàng)給勾上。3、為這個(gè)圖層添加圖層樣式。得到結(jié)果如圖所示，順便在樣式調(diào)板中存儲(chǔ)著這個(gè)樣式。4、使用矩形選框工具，繪制出一個(gè)矩形的選區(qū)。5、新建圖層后，填充黑色到白色的徑向漸變。6、并將該圖層的混合模式改為：柔光，不透明度：60%7、新建圖層，再繪制出一個(gè)矩形選區(qū)。8、填充成白色。9、并將該圖層的混合模式改為：線(xiàn)性減淡，不透明度：30%10、使用文字工具寫(xiě)上要的文字，注意在這里要將字體的邊緣設(shè)置為：無(wú)。11、之前我們創(chuàng)建過(guò)一個(gè)樣式，還記得嗎，給文字應(yīng)用這個(gè)樣式就可以了。后面的工作就是換換顏色，改改文字就可以了。來(lái)源：站酷 作者：木可可最終效果11、新建一個(gè)500 * 300的文件，背景填充顏色：#242424深灰色。2、新建一個(gè)圖層，選擇圓角矩形工具，畫(huà)一個(gè)矩形，然后把前景顏色設(shè)置為：#007dee,背景顏色設(shè)置為：#023f78 , 選擇漸變工具，從左至右拉漸變。3、雙擊圖層1,調(diào)出圖層樣式，選擇