當前位置:米奇創意網>設計創意>設計教程>

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

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

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


圖1

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

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

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

圖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的圓。

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


圖3

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

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

圖4

任意選擇一種前景色,並設置背景色為同一色系中顏色較淺一種,如圖五:

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

圖5

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

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

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

圖6

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

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

圖7

二、繪製初步三維立體感

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

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


圖8

再勾選"Inner Glow(內部發光)",參數設置為: Blend Mode=Multiply,其它為缺省值。如圖九所示:

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

圖9

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