round button image for web

**atouck** · 05-22-2008, 11:20 AM

I am building my first website and I had an idea with the navigation in the home page.
I want it to be made from round icon/buttons which lead to the other pages.
So i designed in photoshop some round buttons/icons. they are 5 in total. EACH have a variant with an effect added for rollover. So when a visitor will hover the mouse over the button the button will change color. This is what I had in mind. When I wanted to save for web as a jpeg an white background was added. Not cool. If i save as gif or png the quality will be affected and I don't want that. The psd file with the website design hasa gradient in the area where the round buttons will go. I can place them there and then I can crop a square with that gradient background and save for web as a jpeg. But if I do that will not the visitors notice when they will click that button that is actually a square and not a circle? can this be avoided? Do I have to give up that rollover variant? any help is appreciated. 10x

**LadynRed** · 05-22-2008, 08:55 PM

Quote:

If i save as gif or png the quality will be affected and I don't want that.

Gif will be lousy, PNG24 will be really good, but if there's any transparency around the button, IE6 won't display it properly w/o forcing it with some javascript.

So, save the button as a transparent PNG-24, and it will display properly on the gradient. You'll have to use the scripting to make IE6 display it correctly. You dont' have to abandon the rollover effect.

**friend2** · 05-22-2008, 11:23 PM

Use PNG, it will be more attractive that what you intended.

**atouck** · 05-23-2008, 04:46 AM

Quote:

Originally Posted by LadynRed

Gif will be lousy, PNG24 will be really good, but if there's any transparency around the button, IE6 won't display it properly w/o forcing it with some javascript.

So, save the button as a transparent PNG-24, and it will display properly on the gradient. You'll have to use the scripting to make IE6 display it correctly. You dont' have to abandon the rollover effect.

I don't know javaScript ... is there a standard universal code for this?

**LadynRed** · 05-23-2008, 12:04 PM

You don't need to know JS, you just need the right files

http://www.twinhelix.com/css/iepngfix/