Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Business/Corporate Style Button
rss

Business/Corporate Style Button

Author: Crunked-Designs.com More by this author


1) Create a new document, pick any size you want. I used 330 x 60 for this tutorial. 2) Make a new layer. Use the Rectangular Marque Tool and make a square selection like below:

Use the gradient tool and set these gradients below and then click top to bottom on the button to apply the gradient:





3) Make a new layer and now lets use the Line Tool. We want to make 3 lines, one on the bottom of the button and 1 on left and 1 on the right, no line on the top. I used 1px width line with this color:

#B6CBD7

Note* Make sure your line layer is above all the layers.



4) Done the lines, cool. Now lets add the layer style to the gradient button layer. Right click the layer and go to Blending Options and use these settings:



5) Use the Polygonal Lasso Tool to make a corner selection like below, make a new layer and fill it in with a green, I used #79B916:





6) So now we got 4 layers, the top layer is lines, the second is the greet corner, third is the gradient, 4th is the background. Select the green corner layer and apply these blending options:



7) Make another new layer and select the Line Tool again. Make a angled line like below, I changed the line width to 2px:



Duplicate the layer and move the line down but parallel to the other line:



8) Click the top white line layer we just created and press CNTRL+E to merge the 2 layers together. Now use the Rectangular Marque Tool to clean up the sides and bottom:



9) Change the Opacity Setting of the white lines to around 60%-70%:



Sweet were done!

Business/Corporate Style Button Tutorial: Final Result



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Business/Corporate Style Button"