梦中残景 / 网站元素 / Design Glossy Web 2.0 Button In Photosh...

0 0

   

Design Glossy Web 2.0 Button In Photoshop

2011-12-09  梦中残景

output Design Glossy Web 2.0 Button in Photoshop

Looking to design some glossy looking Web 2.0 button? Here’s a simple Photoshop tutorial that gives you step by step how to get a nice looking red glossy button.

Step 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.

newcanvas Design Glossy Web 2.0 Button in Photoshop

Create a new layer call ‘Button’

create new layer Design Glossy Web 2.0 Button in Photoshop

On layer ‘Button’, select the Rounded rectangle tool

select rr tool Design Glossy Web 2.0 Button in Photoshop

give it a radius of 7px

radius7px Design Glossy Web 2.0 Button in Photoshop

and draw a rectangle similar to the image below.

raw button Design Glossy Web 2.0 Button in Photoshop

Step 2 – Red Button

Right click on the Blending Options for ‘Button’ layer

select blending Design Glossy Web 2.0 Button in Photoshop

and tweak the following settings for

Drop Shadow

b drop shadow Design Glossy Web 2.0 Button in Photoshop

Inner Shadow

b inner shadow Design Glossy Web 2.0 Button in Photoshop

Bevel and Emboss

b bevel and emboss Design Glossy Web 2.0 Button in Photoshop

Gradiant Overlay

b gradiant01 Design Glossy Web 2.0 Button in Photoshop

b gradiant02 Design Glossy Web 2.0 Button in Photoshop

Your button should look something like this

red button Design Glossy Web 2.0 Button in Photoshop

Step 3 – Create Glossy Effect

Create a new layer call ‘Glass’

create glass layer Design Glossy Web 2.0 Button in Photoshop

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.

cut button Design Glossy Web 2.0 Button in Photoshop

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

paint bucket tool Design Glossy Web 2.0 Button in Photoshop

Adjust the opacity to 18%

opacity18 Design Glossy Web 2.0 Button in Photoshop

and you should have glossy button looking like this.

glossy button Design Glossy Web 2.0 Button in Photoshop

Step 4 – Pattern Overlay

Let’s 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.

b patternoverlay Design Glossy Web 2.0 Button in Photoshop

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

b patternoverlay2 Design Glossy Web 2.0 Button in Photoshop

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%

Step 5 – Inserting Text

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

textsetting Design Glossy Web 2.0 Button in Photoshop

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

Drop Shadow

b drop shadow2 Design Glossy Web 2.0 Button in Photoshop

Step 6 – Final Output

You should get an image like this.

output Design Glossy Web 2.0 Button in Photoshop

Download this tutorial.

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多