asked on

Make a smooth rounded button

I'm using Fireworks to create some images for my site.

I have 2 problems easy enough to solve for someone who is a better image create.

1) How do I make smooth rounded corners when exported for my webpage - mine always show up jagged
2) how do I export my image so that it looks like what I view in Fireworks - again my images always look worse than they do in design.

Thanks.

NG,

Philip_Spark

Can you post an example?

Do you do a save optimized comparison using the various options?

How are you saving them gif, png or jpg?

Philip_Spark

I forgot to add, what resolution?

xjdx

This isn't necessarily a rounded button, but it does give a great technique for achieving a smooth effect:

http://www.adobetutorialz.com/articles/2426/1/Smooth-Edges

The other way I would go about things is by using the rounded rectangle shape in Photoshop, setting a diameter of 5 pixels and drawing it out, that should give you a great shape :)

nike_golf

ASKER

Thanks for replying, I do have an example of what I'm trying to do.

I'll check the link...

NG,
button-login.png

nike_golf

ASKER

The thing that I notice if exporting the image as a .gif with a transparent background it looks terrible... I'm a bit green with Fireworks and image editing so any and all information is geatly appreciated.

NG,

ASKER CERTIFIED SOLUTION

xjdx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nike_golf

ASKER

Saving as a .png looks better on the site but the text still has changed from what is shown in Fireworks..

NG,

crittle1

xjdx is correct. Exported it as png. I used your sample and tested it with .png 32 and it looked fine to me.

Just some random info: Transparent png's are not supported in early IE browsers. They show, but the backgrounds will get a weird color fill. On the other hand, exporting as a png will also keep the color fields the same between safari and firefox, or using web safe colors. For instance, in jpgs you tend to see color inconsistencies between the browsers. It took me forever to figure that out.

Anyhow, what's it doing to your text using png? Making it jagged? It looked normal when I did it.

nike_golf

ASKER

When I look at the image that I uploaded here (above) the text looks fine but when I put it on the site the text was fuzzy... so I had to change the text in order for it look right.

I think saving the image as a .png helped for sure...

Showing my ignorance here, are there some fonts to stay away from? are they better ways to create buttons and images for the web that I'm missing, I'd like to make hi quality images but am lacking a bit in training.

Thanks.

NG,
login.JPG

SOLUTION

crittle1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial