No Relation» Blog Archive » Photoshop “Glass Text” Tutorial: «As I have announced it before, I am going to be posting Photoshop tutorials on this blog. Some tutorials are old others are new and will be posted for the first time. So stay tuned!
Today I am going to start off with quite a simple tutorial that will show you how to achieve a glassy text effect .»
Web 2.0 how-to design style guide: «Web 2.0 how-to design guide»
Photoshop Tutorial: Create glossy button for web 2.0
Published December 27th, 2006 in Photoshop Tutorial.
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.
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
Create a new layer call ‘Glass’
Select Retangular marquee tool, make sure you are selecting ‘Button’ layer. HOLD your
Select ‘Glass’ button now, hold the
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.
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
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
You should get an image like this.
IRIS Design » Archive » Web 2.0 style buttons:
Nowadays Web 2.0 style becomes more popular. Every day tons of sites which has simple, bright and very interesting things, appear in Network. There are no standards about creating any Web 2.0 elements, but we have several typical features, for example and clean colors, many gradients.
Today I want to show you how to create Web 2.0 styled button using Adobe Photoshop CS2.
Now you got following button:
After changing different effects parameters, adding or changing elements, I got following buttons:
Updated: You can download PSD sources here.