I'm not sure if this is the section to post this in (or even the forum). If it's not would someone point me to the correct forum? I know how to create rounded but everytime I do it, they are very jagged. What is the best way to create very smooth rounded corners? Like the ones in the attached image... Thanks, Scotty
The 'smoothness' of the rounded corners is created via what's referred to as 'anti-aliasing', where pixels of an intermediate color are added on corners to 'smooth' them out. AA on corners have SOME issues - if the backgrounds are not relatively uniform in color the anti-aliasing might make the resulting pixels stand out worse. This can be addressed by using alpha transparancy in the .png image format, but that is complicated to create, doesn't work in IE without hacks and definately doesn't work when trying to use an effect like background-position, USUALLY though, you can get away with 'close enough' an effect on the corners. There are usually anti-aliasing tools built into most paint programs like Paint Shop Pro, Photoshop or GIMP, but the result from those don't always line up and can often be too 'blurry' to be truly effective. Personally, I draw my rounded corner as a 1px normal 'jagged' edge, then I go through one pixel at a time with the 'smudge' tool set to 30% opacity, to 'smudge' the corners into the background and content. It's a bit more work to go one pixel at a time and not 'automate' the process, but the net result of hand tweaking the corners usually comes out smoother and more professional looking - and it REALLY doesn't take THAT long. I often tweak 'text as images' by hand too this way. Let's say you have a tan background, want a black border, with a yellow to red fade... First, draw the rounded corner using the 'add one' technique - start at the 'apex' of your corner, and give it a pixel on each side, then two pixels on each side, then three, then four... Like the first of three images below. Then you take your smudge tool at 30% opacity, and 'drag' from the black into the colored areas the same height as your black areas parallel to them - which is the second image below. Just to 'make sure' that the background matches, I then flood the remaining background area at 20% tolerance for color matching, with a completely outlandish background-color like magenta, and use that as a palette transparancy as in the third picture. This erases some of the less obvious anti-aliased pixels reducing the odds of it not quite matching right. usually with your anti-aliasing, you can get by without the alpha transparancy and use palette (aka single color) transparancy over more complex backgrounds if you can determine the 'uniform' background color. The easiest way to get that color is to do what's called a 'gaussian blur' (if available in your paint program of choice) set to maximum - that blur should turn the whole image into one uniform color - which is the ideal 'middle ground' on which to make your rounded corners. Oh, and this image is zoomed in 15x to make it easier to see what I did. I hope that's clear enough - out of curiousity what paint program are you using? I used the 'terminology' for paint shop pro above, photoshop is much the same - other paint programs I'm less familiar with... mostly because I often can't find simple filters like gaussian blur in GIMP or Pixel.
You likely can't find it in GIMP because you first need an image open, which will have a larger menu on top. Near the right, there's Filters, with all the goofy stuff underneath. Gaussian is first under Blur.