Photoshop 制作綠色風(fēng)格半透明網(wǎng)頁(yè)按鈕
蘇打蘇塔翻譯 發(fā)布時(shí)間:2010-01-25 16:43:04 作者:佚名
我要評(píng)論

在這一篇教程中,我將教給你怎樣在photoshop中運(yùn)用一些基本的技巧,創(chuàng)建一個(gè)動(dòng)作按鈕。之所以叫做動(dòng)作按鈕,是想讓你的用戶來(lái)點(diǎn)擊這個(gè)按鈕,它一定連接到一個(gè)地址,比如說(shuō)RSS訂閱地址或者是評(píng)論按鈕等等。
好了,讓我們看看最后的效果圖
怎樣設(shè)計(jì)一個(gè)動(dòng)作按鈕
這個(gè)按鈕一定是放在合適位置上的,并且明顯的,這樣的話當(dāng)用戶瀏覽你的網(wǎng)站的時(shí)候可以第一眼就看到這個(gè)按鈕。這里羅列了5個(gè)好的動(dòng)作按鈕的標(biāo)準(zhǔn)。
1. 位置
用戶一定能很容易地找到這個(gè)按鈕,可以放置在頁(yè)面頭部,產(chǎn)品的旁邊,導(dǎo)航條上,或者是其他位置。但是要記住,一定要位置明顯。
2.顏色
這個(gè)按鈕的顏色一定是整個(gè)頁(yè)面的亮點(diǎn),顏色要抓住用戶的注意,可以選擇明亮和對(duì)比度稍微大一些的顏色。
3. 文字
這個(gè)用于你和用戶之間溝通的詞匯非常重要,像是免費(fèi)的(這個(gè)是最常用的),注冊(cè),下載,提交等等。嘗試用簡(jiǎn)單但是有效的詞匯,這樣用戶會(huì)更容易理解。
4. 尺寸
這是你的頁(yè)面上很重要的一個(gè)按鈕,毫無(wú)一味的,這也是你的頁(yè)面上可能被點(diǎn)擊次數(shù)最多的地方。如果你把這個(gè)按鈕設(shè)計(jì)的比其他地方的按鈕稍大一些,可能效果就會(huì)更加明顯。但是別忘記,并不是越大越好,還是要注意整體設(shè)計(jì)效果的。
5. 干凈
你的按鈕不可能寫滿了文字,或者是有很多元素。按鈕上的文字需要足夠的空間,這樣文字的可讀性會(huì)大一些。
好了,以上就是我們要注意的。
OK,讓我們開始吧
新建一個(gè)文檔 300 x 200 px。設(shè)置合適的背景色。我用的是灰色漸變背景。選擇背景色為#181818 ,前景色為#343434,選擇徑向漸變工具(圓心漸變),從你的畫布中間開始向一個(gè)角拖拽漸變。你會(huì)得到下面的結(jié)果:

選擇圓角矩形工具。(或者是你選擇一個(gè)你喜歡的自定義形狀)
在畫布的中間畫一個(gè)矩形。尺寸自定。
查看你的圖層面板,雙擊該圖層打開圖層屬性面板,或者是右鍵點(diǎn)擊圖層縮略圖,選擇圖層屬性。

然后添加圖層樣式,包括陰影,內(nèi)陰影,斜面與浮雕,漸變疊加和描邊。





好了,點(diǎn)擊確定,你應(yīng)該得到了下面的效果。
新建一個(gè)圖層,命名為bright,在浮動(dòng)工具欄中用圓形選區(qū),在按鈕上畫一個(gè)圓形。

填充白色。

按住shift+ctrl+alt鍵,點(diǎn)擊你的形狀圖層,這時(shí)候你將會(huì)得到一個(gè)選區(qū),點(diǎn)擊你的圖層brigh ,點(diǎn)擊刪除,然后設(shè)置圖層透明度為15%,這時(shí)候你將會(huì)得到下面的結(jié)果:

好了,這時(shí)候可以寫按鈕上的文字了:下載,免費(fèi),注冊(cè)等等。隨便填充一個(gè)顏色,然后設(shè)置圖層樣式-外發(fā)光和圖層漸變。


好了,這就是我們現(xiàn)在的結(jié)果。

你可以添加一些小的元素。像是下面的樣子:

好了,結(jié)束了。很容易吧。我希望你會(huì)喜歡這個(gè)教程。

怎樣設(shè)計(jì)一個(gè)動(dòng)作按鈕
這個(gè)按鈕一定是放在合適位置上的,并且明顯的,這樣的話當(dāng)用戶瀏覽你的網(wǎng)站的時(shí)候可以第一眼就看到這個(gè)按鈕。這里羅列了5個(gè)好的動(dòng)作按鈕的標(biāo)準(zhǔn)。
1. 位置
用戶一定能很容易地找到這個(gè)按鈕,可以放置在頁(yè)面頭部,產(chǎn)品的旁邊,導(dǎo)航條上,或者是其他位置。但是要記住,一定要位置明顯。
2.顏色
這個(gè)按鈕的顏色一定是整個(gè)頁(yè)面的亮點(diǎn),顏色要抓住用戶的注意,可以選擇明亮和對(duì)比度稍微大一些的顏色。
3. 文字
這個(gè)用于你和用戶之間溝通的詞匯非常重要,像是免費(fèi)的(這個(gè)是最常用的),注冊(cè),下載,提交等等。嘗試用簡(jiǎn)單但是有效的詞匯,這樣用戶會(huì)更容易理解。
4. 尺寸
這是你的頁(yè)面上很重要的一個(gè)按鈕,毫無(wú)一味的,這也是你的頁(yè)面上可能被點(diǎn)擊次數(shù)最多的地方。如果你把這個(gè)按鈕設(shè)計(jì)的比其他地方的按鈕稍大一些,可能效果就會(huì)更加明顯。但是別忘記,并不是越大越好,還是要注意整體設(shè)計(jì)效果的。
5. 干凈
你的按鈕不可能寫滿了文字,或者是有很多元素。按鈕上的文字需要足夠的空間,這樣文字的可讀性會(huì)大一些。
好了,以上就是我們要注意的。
OK,讓我們開始吧
新建一個(gè)文檔 300 x 200 px。設(shè)置合適的背景色。我用的是灰色漸變背景。選擇背景色為#181818 ,前景色為#343434,選擇徑向漸變工具(圓心漸變),從你的畫布中間開始向一個(gè)角拖拽漸變。你會(huì)得到下面的結(jié)果:

選擇圓角矩形工具。(或者是你選擇一個(gè)你喜歡的自定義形狀)

在畫布的中間畫一個(gè)矩形。尺寸自定。

查看你的圖層面板,雙擊該圖層打開圖層屬性面板,或者是右鍵點(diǎn)擊圖層縮略圖,選擇圖層屬性。

然后添加圖層樣式,包括陰影,內(nèi)陰影,斜面與浮雕,漸變疊加和描邊。





好了,點(diǎn)擊確定,你應(yīng)該得到了下面的效果。

新建一個(gè)圖層,命名為bright,在浮動(dòng)工具欄中用圓形選區(qū),在按鈕上畫一個(gè)圓形。

填充白色。

按住shift+ctrl+alt鍵,點(diǎn)擊你的形狀圖層,這時(shí)候你將會(huì)得到一個(gè)選區(qū),點(diǎn)擊你的圖層brigh ,點(diǎn)擊刪除,然后設(shè)置圖層透明度為15%,這時(shí)候你將會(huì)得到下面的結(jié)果:

好了,這時(shí)候可以寫按鈕上的文字了:下載,免費(fèi),注冊(cè)等等。隨便填充一個(gè)顏色,然后設(shè)置圖層樣式-外發(fā)光和圖層漸變。


好了,這就是我們現(xiàn)在的結(jié)果。

你可以添加一些小的元素。像是下面的樣子:

好了,結(jié)束了。很容易吧。我希望你會(huì)喜歡這個(gè)教程。
相關(guān)文章
- 今天的教程是教給大家做一個(gè)非常有圣誕氛圍的圣誕快樂按鈕,充滿濃濃的圣誕節(jié)日氣息,小伙伴們還不快快打開PS一起來(lái)學(xué)習(xí)2021-06-16
ps2021怎么做漂亮的漸變按鈕? ps按鈕樣式的設(shè)計(jì)方法
ps2021怎么做漂亮的漸變按鈕?ps中想要設(shè)計(jì)一款領(lǐng)券的按鈕,如果添加漸變色會(huì)更加顯眼,該怎么設(shè)計(jì)漸變色按鈕呢?下面我們就來(lái)看看ps按鈕樣式的設(shè)計(jì)方法,詳細(xì)請(qǐng)看下文介紹2021-05-27如何設(shè)計(jì)藍(lán)色金屬按鈕?用PS設(shè)計(jì)藍(lán)色科技金屬質(zhì)感按鈕教程
很多人人物游戲按鈕只能用AI才能設(shè)計(jì),其實(shí)不然,一些按鈕不只可以用AI設(shè)計(jì),PS照樣可以,今天我們就教大家制作一個(gè)藍(lán)色科技金屬質(zhì)感的“play”按鈕,一起來(lái)學(xué)習(xí)吧2021-05-18ps怎么設(shè)計(jì)配色干凈扁平化按鈕? ps按鈕矢量圖的設(shè)計(jì)方法
ps怎么設(shè)計(jì)配色干凈扁平化按鈕?很多時(shí)候我們會(huì)看到各種按鈕,想要設(shè)計(jì)一款顏色干凈清爽的扁平化按鈕,該怎么操作呢?下面我們就來(lái)看看ps按鈕矢量圖的設(shè)計(jì)方法,需要的朋友2021-04-08- 怎么用PS制作按鈕形狀效果?下面這邊文章主要為大家講述了用PS制作按鈕形狀效果的教程,感興趣的小伙伴來(lái)學(xué)習(xí)吧2020-12-15
ps怎么設(shè)計(jì)圓形的不銹鋼金屬按鈕圖標(biāo)?
ps怎么設(shè)計(jì)圓形的不銹鋼金屬按鈕圖標(biāo)?ps中想要設(shè)計(jì)一款圓形的按鈕,該怎么設(shè)計(jì)這個(gè)按鈕矢量圖呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2019-06-30- PS怎么設(shè)計(jì)可愛的按鈕?ps中想要設(shè)計(jì)一款可愛的按鈕,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看ps設(shè)計(jì)按鈕的教程,需要的朋友可以參考下2018-10-30
ps怎么設(shè)計(jì)逼真的玻璃質(zhì)感按鈕?
ps怎么設(shè)計(jì)逼真的玻璃質(zhì)感按鈕?ps中想要設(shè)計(jì)一款漂亮的玻璃按鈕,該怎么設(shè)計(jì)逼真透明的玻璃按鈕呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-09-23ps怎么設(shè)計(jì)創(chuàng)意的圓形按鈕?
ps怎么設(shè)計(jì)創(chuàng)意的圓形按鈕?ps中想要設(shè)計(jì)按鈕,該怎么設(shè)計(jì)創(chuàng)意的按鈕圖標(biāo)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-08-09- PS怎么設(shè)計(jì)左右輪播圖的按鈕?網(wǎng)頁(yè)中經(jīng)常能見到多張圖片輪播的效果,會(huì)有左右按鈕,該怎么設(shè)計(jì)這個(gè)按鈕呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-08-09