1. Creating the base

Fire up a new canvas and adjust the following settings (marked in yellow)   according to the image below. The rest should come as default. You might want to   double check with the defaults too.

Create a new layer call ‘Button’

On layer ‘Button’, select the Rounded rectangle tool

give it a radius of 7px

and draw a rectangle similar to the image below.

2. Red button

Right click on the Blending Options for ‘Button’ layer

and tweak the following settings for

Drop Shadow

   

Inner Shadow

   

Bevel and Emboss, and

   

Gradiant Overlay

   

Your button should look something like this

3. Glossy and a little tweak

Create a new layer call ‘Glass’

Select Retangular marquee tool, make sure you are selecting ‘Button’ layer.   HOLD your <ctrl> key and click on layer ‘Buttons’’s layer thumbnail. Your   button should now be highlighted.

Select ‘Glass’ button now, hold the <Alt> key with Retangular marquee   tool selected. Draw(cut) across the lower half of the button like the image   below.

Fill the selected area with white color #ffffff using Paint Bucket Tool

Adjust the opacity to 18%

and you should have glossy button looking like this.

4. Pattern Overlay

Lets give the button some slight pattern overlay. I’ll be using the custom   stripe5px created earlier. Click here to read “How to create custom pattern”

Create a new layer call ‘Pattern’ in between ‘Button’ and ‘Glass’ and proceed   with Blending Options.

Select Pattern Overlay, choose Stripe5px (or any pattern you’ve created) and   click OK then close the dialogue.

Make sure you are still on Rectangular Marquee tool, hold <ctrl> and   click on Button’s layer thumbnail to get the buttons shape. Fill up the selected   area in ‘Pattern’ layer with Paint Bucket tool and adjust the layer opacity to   5%.

5. Inserting Text

I’ll throw in some random text in white #ffffff color with the following   settings

and the following blending effects on my text’s layer.

Drop Shadow

   

Output

You should get an image like this.

more..

glossy-button01.zip

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

Call up the Blending Options of ‘bg01‘ and adjust the following styles:

 
• Opacity: 40%
   
• Distance: 0px
   
• Spread: 0%
   
• Size: 6px
  

 
• Color stop: 0%, #d00031
   
• Color stop: 100%, #ff2b5d
  

Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

Create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg02′ to launch up the Blending Option and tweak the following style.

Gradiant Overlay

 
• Color stop: 0%, #c6002f
   
• Color stop: 100%, #c6002f
  

Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

 
• Rounded Arial Bold
   
• 150pt
  

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

 
• Opacity: 25%
   
• Distance: 0px
   
• Spread: 0px
   
• Size: 5px
  

 
• Opacity: 10%
   
• Distance: 0px
   
• Choke: 0
   
• Size: 10px
  

 
• Depth: 1px
   
• Direction: Down
   
• Size: 0px
   
• Softten: 0px
   
• Highlight Mode Opacity: 32%
   
• Shadow Mode Opacity: 32%
  

 
• Color Stop:0% #d2d2d2
   
• Color Stop:100% #f0efef
  

Button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like the image below.

more..

web20-button-tut.rar

Tweak the Blending Options of ‘bg01‘ and ‘bg02‘ will give you more interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously - Create Glossy button for Web 2.0

more..

web20+button-example.rar

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

2.影像>調整>亮度/對比 [或圖像>調整>亮度/對比度] 設定為5/10

塗抹要恢復的部分

完成圖如下！很簡單吧！

當然你也可以做些其他的變化，加些其他物件或是美化！

轉載請註明 http://fall-leaf.net

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

more..

6000.rar

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。