home tutorials forums downloads contact-us
Broken Rubber Stamp Grunge Signature Glossy Content Box Electric Snowstorm Fresh Tutorials:
Last Update: 2.14.2007
Online: 125 Users
Advetise on For only $50 per month! Tutorials Web Layouts Tech Style Web Buttons

Tech Style Web Buttons

This tutorial will teach you how to create a simple tech style button, that works great for software applications, as well as web sites. The steps used to create this tutorial are fairly easy to follow, and geared towards new comers to photoshop who are interested in designing web sites with this powerful software package.
Go To Page: [ 1 2 ]

Page 1 of 2

Step # 1
Open an existing document of any size, or create a new one. I will be using a document that is 120x36 for this tutorial.

Set your foreground color to white (#FFFFFF) and use the flood fill tool (paint bucket) to fill the background with white.

Step # 2
Create a new layer by pressing CTRL + SHIFT + N and get out the rounded rectangle tool

Set the radius to 5 pixels

Create a Rectangle similar to the image below :

Step # 3
Double click this layer, and apply the following blending options:

Inner Shadow:

Bevel And Emboss:

Color Overlay:

You can use #d8ff00 or your own color choice whatever is appropriate.


Step # 4
Create a new layer by pressing CTRL + SHIFT + N on your keyboard and get out the single column marquee tool ()

Step # 5
Create a selection a place similar to the one pictured below:

Fill the selection with white (#FFFFFF) using the flood fill paint bucket.
Now tap the right arrow on your keyboard and fill the selection with black. (#000000) flood fill paint bucket.

Tip: You may need to zoom in to accomplish the flood fill, to zoom in hold down the CTRL key on your keyboard and press the + key on your keyboard to zoom in closely.

Step # 6
Press CTRL + D on your keyboard to de-select the selection
Drop the opacity of this layer down to 47 percent:

Step # 7
Hold the CTRL key on your keyboard and click once on layer 2 (the rectangular layer), this should make a selection of everything in that layer.

Now selection layer three and click on the layer mask icon:

Go To Page: [ 1 2 ]
Page 1 of 2
Tutorial Index

Author: Oliver
Discuss this tutorial on the Forums
Desktop Deck - Desktop wallpapers and graphic design tutorials graphics, tutorials, softwares, designing, free training, downloads
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page