PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Complete PC Layout Glossy Content Box Tech Site Layout Colorful Classy Text Fresh Tutorials:
Last Update: 2.14.2007
Online: 49 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com 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.

Stroke:





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 PhotoshopForce.com Forums
Affiliates:
Desktop Deck - Desktop wallpapers and graphic design tutorials SENKOURYU.NET FreeTimeFoto.com Kostenloses für den Webmaster Free online adobe Photoshop tutorials! Learn webdesign easy with our adobe photoshop CS2 and Adobe Photoshop CS tutorials You-Teach.com - photography and web design articles and tutorials
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page