01.24.03

HTML Rounded Boxes

Posted in Unfiled at 12:44 pm by James

In photoshop,

1. Use the rectangular marquee tool to create a rectangle box.
2. Perform a gaussian blur for 3 pixels (4-5 for more rounded corners)
3. Adjust levels by moving the white to the black (all will be far left)
4. bevel and emboss for a more realistic effect
5. cut out the corners, the right and bottom shadings.

Notes: Some care need to be taken to ensure the dimensions will match up on the html page. If the topleft corner is 10×10, then the topright corner needs to be 10pix tall too.

Its very important to make sure the dimensions of the shadow edges batch up with the shadowed corners.

Permalink