Adobe Photoshop Web Button
with
Isaac Brody
You don't have to be a graphic designer to make your Website look professional. Use Adobe Photoshop tools to create custom buttons that differentiate your site from its competition and encourage user interaction.
Transcript: Adobe Photoshop Web Button
Hi, I'm Isaac Brody for About.com Computing.Today I'll teach you how to create web buttons in Photoshop for use on websites. Let's create a new document by going to File, New. I'll select preset 800 X 600 to make things easy. And click OK.
Choose Web Button Size in Photoshop
Now click on the rectangular marquee tool on the left hand tool-bar. On the top bar, change the style to fixed aspect ratio. And insert 160 for width, and 30 for height. And drag a rectangle on the screen. I'll make mine big for you to see. We can always size it down later on for our website.Color Web Button in Photoshop
Click on the create a new layer icon on the layer palette. Now click on the gradient tool on the left hand toolset. We need to change the foreground color. Click on the foreground color box. This brings up the color picker. Under the color number box type in 33366 and click ok.Now click the gradient box on the top bar to change the gradient. This brings up the gradient editor. We're going to change to change the gradient rectangle at the bottom of the box. It currently goes from blue to white, but we want it to go from blue to white in the middle and then back to blue at the end. Click on the color stopper on the right side of the rectangle and drag it to the middle of the rectangle. Now we'll click on the far right bottom side of the rectangle to create a new color stop.
After creating it double click on it. This brings up the color picker again. Once again we'll fill in the color number box with the number 33366 and click OK. And click OK again.
Now we re ready to create a gradient inside our rectangle. With our gradient tool selected click on the left side of our rectangle, and drag towards the right side of the rectangle. To drag a straight line hold down the shift key when clicking and dragging. Release the mouse on the right side of the rectangle edge to create a gradient rectangle. That looks pretty good.
Stylize Web Button in Photoshop
Now press down Ctrl + D on a PC, cmd + D on a mac to release the rectangle.Now right click on our button layer in the layer palette or cmd click on a mac to select blending options. Click on stroke on the bottom blending options. Make sure stroke is highlighted so you can adjust settings. Click on color in the settings. Under color number type in 999999 and click ok.
Raise the size to 10. And click ok.
Add Text to Web Button in Photoshop
Now click on Horizontal Type tool on the left-hand toolbar, and position the tool in the middle of our button. I'll type the word HOME to make a home website button. You may have to adjust the text and move it around.Finalize Web Button in Photoshop
Now select the rectangular marquee tool on the left-hand toolbar. Under style select normal. And draw a rectangle around the button. Make sure the rectangle hugs the button closely.Now go to Image, Crop, to isolate our button. If you want to resize the button for web, go to Image, Image Size, to specify your own size.
Once you save this button you can import it into whatever website program you use.
Thanks for watching. For more information, please visit us online at Computing.About.com