如何利用Photoshop繪製含圖案的透明立體按鈕

不知道大家看到網頁上那些充滿立體感效果的三維立體按鈕，有什麼想法，大家肯定會和我有一樣的想法，認為雖然東西很小，肯定花費了製作人很大的功夫。那麼這些三維立體按鈕是如何被設計出來的呢？大家先看看下面的三維立體按鈕，如果覺得喜歡的話，歡迎繼續看下去。希望對您能有所啟發！

圖1

本教程在PHOTOSHOP7.0中實現，如引數設定面板有所不同，請參照7.0版本。

關注photoshop製作效果的網友們都知道，前段時間流行蘋果機的圖示，於是無論是會使用photoshop的還是追求真善美的朋友，都在自己的桌面掀起了一番應用蘋果機圖示風潮，其中應用最多數的數按鈕。當時的按鈕多數都是簡潔的三維立體按鈕加文字，並且顏色也偏向於素色。如：

圖2

如今，三維立體按鈕又發生了大變化!什麼大變化??先別擔心，技術上的變化不多，其實只是將素色加以發揮，向彩色傾移，並加上些色彩豐富的小插圖而已，留意文章開始的圖示示例就明白了。

好了，閒話少說，下面就讓我以製作我的論壇圖示為例子，一起進入三維立體按鈕製作的教程：

一、繪製過渡色的圓形

先開啟PHOTOSHOP7，按 Ctrl + N，新建一個 Width=48 pixels，Height=48 pixels 的空文件，設定選擇工具為"Elliptical Marquee Tool-圓形"選擇工具，雙擊滑鼠，在工具面板上部出現的屬性設定欄裡設定：Feather=0 px,Anti-aliased,Style=fixed Size,Width=45 px,Height=45 px。設定選區為直徑是45的圓。

圖3

移動滑鼠到畫布上，點選滑鼠左鍵，畫出一個固定大小的圓形選擇區。注意了，不是將選區置於畫布中間，而是按鍵盤上的方向鍵，向左向上各移動 2 pixels，目的為後面做按鈕陰影，突出按鈕立體感做準備。當然，做完了過渡填充再移動也可以，這個由個人習慣定。

圖4

任意選擇一種前景色，並設定背景色為同一色系中顏色較淺一種，如圖五：

圖5

在這裡多插入幾句可有可無的話，我們在選擇同一色系的顏色時，如果已經確定了前景色，想設定背景色，那麼雙擊背景色，彈出顏色拾色器-Color Picker，此時滑鼠形狀就會變成一個吸管，就可移動此形狀的滑鼠到各個可取色的面板去選擇一個喜歡的顏色，在此吸取前景色，這時拾色器自動選擇了前景色，那麼我們就可以在拾色器中快速地選擇到同一色系不同色深的顏色了。

選擇" Gradient Fill Tool -過渡填充工具"，在屬性工具條中設定過渡色為"Foreground to Background-前景色到背景色"，過渡模式為"Linear Grandient-線形過渡"，設定完成後屬性工具如下圖所示：

圖6

在選區中按"Shift"鍵，由上至下畫過渡色，此步驟完成如下圖：

圖7

二、繪製初步三維立體感

按"Ctrl + D"消除選區，雙擊此層應用層樣式"Add a Layer Style"，在"Layer Style-層樣式"設定面板中選擇"Drop Shadow-下拉陰影"，引數設定為：Distance=2，Size=2，其它為預設值。如圖八所示：

圖8

再勾選"Inner Glow(內部發光)"，引數設定為： Blend Mode=Multiply，其它為預設值。如圖九所示：

圖9

此步驟完成畫布上已經初步顯示出三維立體按鈕的基本模樣了，如下圖：