Added: 8 August, 2007
Group: Photoshop
Create Web 2.0 Button
Author: Larry
page: 1

Create web 2.0 button

It’s popular. It’s stylish. Easy to create in Photoshop and every serious web site should have a nicely fitted button. You can use it for specifying categories on your site or just processing forms. It has multiple usage.


Tutorial Create web 2.0 button 1

We are going to be creating those web 2.0 buttons that have been all the rave somewhat recently.

Step 1. New document…

Tutorial Create web 2.0 button 2

Step 2. Use the rounded rectangle tool to create a button (black as a foreground is just fine).

Tutorial Create web 2.0 button 3

Tutorial Create web 2.0 button 4

Step 3. Right-click anywhere with the rounded rectangle tool still selected. Select “Make Selection” and then click “OK” in the opening windows/dialog box.

Now it is time to choose a color. What did you say? Yellow/Orange? Why sure, alrighty. For a yellow/orange theme select a slightly light yellow and a light orange.

Tutorial Create web 2.0 button 5

Tutorial Create web 2.0 button 6

Step 4. Dish out your gradient tool of course with the following settings…

Tutorial Create web 2.0 button 7

Tutorial Create web 2.0 button 8

Now, press “Ctrl+D” to deselect then create a new layer. “Ctrl+Click” on the old layer then Select > Modify > Contract, 2 px.

Tutorial Create web 2.0 button 9

Press “D” then “X” to get white as your foreground color. Make sure the gradient has the following settings then create a gradient from top to somewhere three quarters of the way down.

Tutorial Create web 2.0 button 10

Tutorial Create web 2.0 button 11

Press “Ctrl+D” to deselect then make a marquee selection like such:

Tutorial Create web 2.0 button 12

Press “Ctrl+Shift+I” to invert the selection, then press “Del” (to delete).

Step 5. Take this moment to rename your layers…

Tutorial Create web 2.0 button 13

Step 6. Create a new layer, rename it to “text”, then type in some text.

Tutorial Create web 2.0 button 14

Step 7. Now you can use the techniques learned in the tutorial “Web 2.0 Text” in order to completely finish your web 2.0 button.

Tutorial Create web 2.0 button 15

Tutorial Create web 2.0 button 1

Final.

GO to: Page 1 : Create web 2.0 button


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without author’s permission is illegal.
  • Photo retouch add makeup and create clear face in Photoshop
  • Create low poly house
  • Setting up FTP in windows XP
  • Creating a Flash Photo Slideshow Tutorial
  • Create shadow in Photoshop
  • Drop-Down Menu Tutorial
  • Learn how to create pool in 3D studio
  • Create a realistic chrome car rims
Join our RSS feed
Use our RSS feed to get the latest published tutorials directly to your news reader.
Add to Google
Best tutorials for maya 3d max photoshop and more