How To Create Rounded Corners?

Hi, Could anyone teach me the step by step on how to create a rounded corner in photoshop and arrange this in table in html? Helps are very much appreciated!

Comment/Reply (w/o sign-up)

I just want to show you a basic curve:

[0][1][2][3][4][5]
[1][5][5][5][5][5]
[2][5]
[3][5]
[4][5]
[5][5]

[ ] = 1 pixel
0 is the lightest 5 is the base colour or darkest. 0 is most likely white.

Try this with black, you can extend the numbers, just set your pencil to opacity 20% and with each pixel apply the number in the brackets the amount of times suggested, when you zoom out you should notice a curved corner.

This is pretty much as basic as you can get, from there, it's just applying the right amount of lightness to darkness to produce the type of curve you want.

I'm sure others will have better ways, I just use this method when creating small images like icons.

Cheers,


MC

Comment/Reply (w/o sign-up)

If you are trying to draw a rectangle with rounded edges, then what you will need to do is, in your toolbox (the window with all the tools on the left) find the rectangle tool, and right click on it. It should then give you a drop down of different shape tools. Select the tool called "Rounded Rectangle Tool". Then goto your image, and click and drag to your heart's desire!

Comment/Reply (w/o sign-up)

In photoshop I personally use the vector took to make my rounded corners on anything, gives me nice clean lines and edges. About putting it up with HTML, I dont know that much but I am positive that it is super easy with CSS. I saw it on some website, Ill try to find it later and post it here...that is if you still need it!

Comment/Reply (w/o sign-up)

Just a random note, but I was surfing around, and here's a link to a site that teaches you how to do rounded corners with CSS, don't need the graphic at all...

Might be useful to some of you CSS-lovers...

Comment/Reply (w/o sign-up)

Yeah i use photoshop aswell (it's really easy to use), but good find chiiyo, i never knew you could do that in css, well i suppose i gotta keep on studying html and css

Comment/Reply (w/o sign-up)

Here's a little mini-tutorial on how to arrange the rounded corners in a table. Since no one has really answered that part of the question yet.

1. First, you should have your corners ready as gifs or jpegs, whichever is smaller. I'm assuming you have four corners, as in you want a rounded rectangle. You can either use the vector method, or draw a rounded rectangle and just grab the rounded corners from there. What I usually do is draw a circle on my background colour, and fill it with the colour of my rectangle, and then cut it up into quarters to make my four rounded corners. Like so.
[attachment=172:attachment]

2. Anyway, the table is going to look something like this:
[attachment=173:attachment]
I've labelled the nine different cells for better understanding. 1, 3, 7 and 9 are for putting the four rounded corners, 2, 4, 6 and 8 are to complete the border (and to give a nice padding effect) and 5 is where you put your content.

I'm using rounded corner gifs that are 20px by 20px, so I know exactly what is the width of my border.

3. So let's start with the code.


That should work... change the colours around, change the dimensions, stuff like that. Using CSS would help a lot, I think a lot of the code is non-XHTML-compliant... I put height=1px for the rounded corners cells because from past experience, it's kinda hard to force the height down to a small size. Specifiying the image's dimensions should force the cell to enlarge to just perfectly that size.

Of course, using the CSS method I wrote above might work a lot better, or at least mixing CSS and tables would work better than plain no CSS...

 

 

 

Comment/Reply (w/o sign-up)

I've always wanted to create rounded rectangles but although there are many tutorials for doing that with Photoshop on the Internet, there is a lack of such information for GIMP which I happens to use. Can anyone shows how to do that with GIMP?

Thanks

Comment/Reply (w/o sign-up)

i dont know...from the looks of it...all you guys are doing is setting a cell background to make the table look like a rectangle with rounded corners (right?) but you dont HAVE to use photoshop for this (not that i dont love photoshop because i LOVE photoshop and i use it for almost everything for my website) but if you dont have photoshop you can use other programs...like paint (easy, fast, and fun...nuttin like sittin down at the computer and creating pixel art ) but all youd really have to do is just make a circle using the circle tool in w/e program you are using (now a days pretty much all programs will have the basic features like the pencil tool and the rectangle tools....ect...) square off the corner....basicly making the picture that everyone else has shown you already....save it...rotate it 90 degrees 3 times...saving it each time...so that you have each of the 4 corners....and set the pictures for your cell backgrounds...for the sides...just set the cell color to the same color as the corners...you can use color select tool to get the exact color....as to setting up the table....use frontpage or dreamweaver...dont type html in notepad (that takes too long and there are too many codes that you have to memorize to customize your page to get the look you want)

anyways...just thought id post my opinion

Comment/Reply (w/o sign-up)

Can't you just use the Pen Tool and drag out your curves? Fireworks or Illustrator?

Comment/Reply (w/o sign-up)