Photoshop Basics

66
rate or flag this page

By sepiroth

Making a simple web button

Here's a simple tutorials but works fine. Have Fun...

Step 1: Open the Adobe Photoshop, Click on File, then New

In the dialog box, set the following... width = 200, height = 50, resolution leave it as default
In the dialog box, set the following... width = 200, height = 50, resolution leave it as default

Step 2: On Layer window, Add a new Layer as shown on image

click on the mark, in the lower left before the trashcan logo, you will notice that a new layer has been added, "Layer 1"
click on the mark, in the lower left before the trashcan logo, you will notice that a new layer has been added, "Layer 1"

Step 3: Click on the Set forefround Color

Click on the Set fore ground Color, at the left side...
Click on the Set fore ground Color, at the left side...

Step 4: Locate the following color in the pallet

Locate the color, or type it BDFA5E
Locate the color, or type it BDFA5E

Step 5: After setting the color, Right Click on Paint Bucket tool, then select Gradient Tool

Step 6: At the Toolbar above, Click on the drop down button of the Gradient Picker as shown on label A.

After clicking on Gradient picker, select the "Set to Foreground Color" as shown on Label B
After clicking on Gradient picker, select the "Set to Foreground Color" as shown on Label B

Step 7: Use Gradient Tool to fill Color

Click and drag to fill Gradient Color...
Click and drag to fill Gradient Color...

Step 8: After Filling the Gradient Color, Select a Marquee Tool

Marquee Tool is located in left side of the Toolbox. Select the Rectangular Marquee tool
Marquee Tool is located in left side of the Toolbox. Select the Rectangular Marquee tool

Step 9: Draw A Rectangular Selection using the Marquee Tool

Draw a marquee exactly as shown on Image below.
Draw a marquee exactly as shown on Image below.

Step 10: Change Color to white, then select the Gradient Tool again

You can press "D" then "X" in the keyboard to change the Foreground Color to white as shown on Label A, select the Gradient Tool Afterwards as shown on Label B
You can press "D" then "X" in the keyboard to change the Foreground Color to white as shown on Label A, select the Gradient Tool Afterwards as shown on Label B

Step 11: Use Gradient Tool, Drag from bottom to Top as shown on Image

Step 12: Your Image is look exactly lihe this

Step 13: Now let's Add some Text, Select the Text Tool

Step 14: Add text, In this example I add "Photoshop Basic"

Step 16: Put line to make it looks nice.

Put Line on Bottom and on the left side, as shown on image
Put Line on Bottom and on the left side, as shown on image

Step 15: Now let's add some art on this button, Select the Line Tool

If Line Tool is not selected, Right click on the tool as shown on image then select Line Tool
If Line Tool is not selected, Right click on the tool as shown on image then select Line Tool

Step 17: Rasterized the Lines and set opacity to 30.

Right click to a Shape Layer(A) then select Rasterized(B) Set the Opacity to 30%(C)
Right click to a Shape Layer(A) then select Rasterized(B) Set the Opacity to 30%(C)

Now your Done, You can put this in your Web Designs

Have Fun...
Have Fun...

Is this Tutorials Works?

RSS for comments on this Hub

Peter M. Lopez profile image

Peter M. Lopez  says:
2 years ago

great hub. very informative. I had to bookmark it.

crazycat profile image

crazycat  says:
2 years ago

Good tutorial. Keep it up!

saint sinner  says:
18 months ago

nice tutorial...

very very very ........good tutorial  says:
14 months ago

hai

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites


working