Thursday, December 25, 2008

Create web buttons

1. The first thing we need to do is create a new document with the dimensions of 810×800. You can make it larger if you wish.



2. Next we want to us our paint bucket tool to fill our background with #000000.


3. Now, we want to go ahead and create the box that will house our content. Lets go to our tools pallet and choose our rounded rectangle tool and set the radius to 15px and make a rectangle like the following



4. The next thing we want to do is to create a little navigation panel for our box. To do so, use your rounded rectangle tool to make a rectangle similar to the following



5. Make sure you have that rectangle below your content area in the layers pallet and then input the following blending options onto its layer








6. You should now have something that looks like this



7. Next we want to make a heading for our navigation panel. To do so we want to use the rounded rectangle with the radius set to 15px yet again and make a rectangle similar to the following



8. Now insert the following blending options onto its layer







9. You should now have something that looks like this




10. Now we want to add a shine to our rounded rectangle. To do so, CTRL+CLICK on your heading layer to select it



11. On its own layer, fill it with #FFFFFF and then use your rectangle marquee tool to clear out the bottom half of it



12. Go ahead and set its blending options to Overlay, and then lower the opacity to 20%



13. Now just name your header and your done with that. Then use a font like Helvetica to add some links. By each link I made a square using my rectangle marquee tool filled with #0c6aa2



14. Now all you need to do is repeat the same steps for the right side and add some content and you’ll have something that looks like this


No comments: