OK. some people know I'm working at my first website. So far I'm done with the homepage design. It is done in photoshop.

I decided to use for navigation some round icons I designed (like buttons) to go to another pages in the website.

The problem is that when I hit save for web in photoshop, although there is no background in the psd file I designed the icons/buttons (white, red, etc.), the jpeg format automatically adds a white background. It is possible to save as gif or png BUT being round the image loses quality.

How should I save those round images so they can look good?

Is it ok if I add the icons to the psd file with the homepage (they will be placed on a gradient composed background) and then I crop a square with that icon and some of the background and then save for web as jpeg?

When the page will be coded clicking that jpeg link will make the margins of the image appear and people will know it is not round. Is there a css code for this to be avoid and what browsers support that?

 

10x

Image files are always rectangular. There are two ways to make a 'round' button. One is to fill the background with whatever background colour appears on your page. The other is to use transparency to mask off the corners. JPEG doesn't support transparency, though.. you have to use GIF or PNG. GIF files don't support levels of transparency (either a pixel is 100% transparent or it isn't) so the results can be quite jagged looking. PNG is better suited because you can have different levels of transparency, but IE6 and below don't support PNG use very well and you have to use a workaround to get them to show correctly.

forgot to mention: I have 2 icons. a normal one and a second one with some filters added in photoshop for rollover effect.

Open GIMP and create a new image (I chose 420×300), create a new layer (Layer > New Layer) called ‘color’, with fill type of transparency.

 

http://technomono.com/blog/make-a-button-w...ounded-corners/

 

follow the above url for the tutorials......