home tutorials forums downloads contact-us
Vortex Effect Tornado Effect Simple Blog Layout Tech Site Layout Fresh Tutorials:
Last Update: 2.14.2007
Online: 53 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
graphics, tutorials, softwares, designing, free training, downloads FREE Photo Shop Tutorial - photography and web design articles and tutorials Photoshop Family :: Great photoshop tutorials!
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page