Burts AIS, osCommerce & More Blog
New URL: www.osworld.biz

Monday, January 23, 2006

Graphics Tutorial - Metal Corners

Super-Simple Metal Corners Graphics Tutorial. Courtesy of Sam, who is the proprietor of Hampton Smith Design Studio
Question Just wondering what would be the best way to create this "metal corner" effect... Step One Open a new photoshop document. Create a gradient top to bottom for the area you want the nav bar. Step Two With the same selection; 1. Create a new layer and fill it with black. 2. With the selection still active, choose Select > Modify > Contract and choose 1 pixel to contract the selection by. 3. Delete the area covered by the new selection; you should have a perfect 1 pixel stroke around the whole nav bar. 4. Use the single pixel column selection tool (click and hold the standard marquee tool in the toolbox to reveal this option). Add a single column to create the area you want to become the corner. 5. Fill it with black again. Step Three 1. Ctrl + Click the top layer to get back the selection (unless it's still active). 2. Fill with a diagonal gradient from white to light blue. 3. Add a new layer and stick a single column pixel immediately to the left of the side of the button to provide the shadow. 4. Add a further stroke around the whole thing behind the gradient to provide the bevel. Step Four Add text and enjoy! A nice and simple tutorial for creating good looking buttons! Many thanks to Sam. Good looking accessible website design from www.hampton-smith.com

New URL: www.osworld.biz - thanks!


Post a Comment

<< Home

View Latest Posts

To View Newer Posts - Click Here!