I need help - gif - website - so confused!

[taygull]

Below is the first pass of what my new website is going to look like.

I am building my new site with an obvious background and will want to use some cutouts from images. I also want to create rollover text for the menu buttons. I am unclear on what format to save these in as I prep them in photoshop. It is my understanding they need to be a gif file because if I save them as a jpeg the background will not be transparent on the jpeg?

There seems to be an abundant amount of options when saving a gif file. What I is the background of the text and the cutouts to be transparent.

The problem I’m having is when I save the text as a gif and bring it into dreamweaver it seems to alter the look of the text. Maybe I am not using the proper settings in PS to save the items as a gif?

Here is the rough draft of the home page.

Notice you can see I left the "HOME" button enhanced to what I want it to look like when you roll the cursor over the top. The other buttons are what they normally would look like prior to rollover.

http://img467.imageshack.us/img467/7742/web2newsitehomepagemp7.jpg

Here is the SoundHole Page with the cutouts.

http://img401.imageshack.us/img401/9484/websoundholepagebx3.jpg

I'd appreciate any feedback or thoughts on the look and feel. I'm just trying to clean it up a bit.

[Mathiau]

use gif, and the option really just depends on the quality of the final image, the smaller the gif files the better as faster loading, but often the lesser quality, your best bet is to try out the settings saving them each time to see the difference for yourself.

[taygull]

What about png files, it was suggested I use them as the quality is better? I am not so worried about file size because it is moslty text and they will be pretty small?

[Mathiau]

png will work as well, i beleive all browsers support PNG now.

[ImagineTNT]

Correct me if I'm wrong but it sounds like you want to have a background and have rollover images appear over the background? And you want those rollover images to have transparencies?

If this is what you want to do the only realistic way to do this and have everything look good is using Flash (you could use PNG's but browser support for that is still spotty).

Here's a quick rundown on the TWO predominant Web formats (read-don't use any other formats as they're not supported across different browsers):

GIF - use this for images with not many colors (less than 256 or so). Perfect for vector type art. This format supports transparency.

JPEG - use this for photo-realisitc images. Does not support transparency.

[taygull]

Thanks guys,

I'm getting some conflicting reports but....I'm 99.99% sure flash is still a bit in the future due to skill level of my programmer and my budget.

I think we are going to try png and do a test in the the 3 main browsers.

The image above showing the word "home" lit up is what I want the rollover to look like as compared to the other text.

[Mathiau]

if you want an easy way of using flash check out swish , it doesnt get much easier then that :D

[ImagineTNT]

Here's a good article to read if you're going to go with PNG's: http://www.alistapart.com/articles/pngopacity/

It is a litle technical. If you think most of your users aren't using IE 4/5 then you can probably just skip the article and go with straight PNG's. Just remember those browsers don't support PNG transparency.

[taygull]

Here's a good article to read if you're going to go with PNG's: http://www.alistapart.com/articles/pngopacity/

It is a litle technical. If you think most of your users aren't using IE 4/5 then you can probably just skip the article and go with straight PNG's. Just remember those browsers don't support PNG transparency.

What do you think on the users? What % are still using 4/5?

[ImagineTNT]

% of IE 4/5 users is very small. Probably under 15% of total usage but you really have to figure out if those are the kinds of users that are going to be visiting your site. These are the kinds of people who probably have old computers and aren't very computer savvy... it depends if these are the people who make up a decent share of your money market.

[taygull]

Thanks,

I would suspect most of my clients and potential clients have newer stuff.

Thanks for the info....I've sent it to my web guy......I sure thought this would be easier than it is! LOL

How would you do the site in the first post? I'd love to hear your thoughts.

[ImagineTNT]

Thanks for the info....I've sent it to my web guy......I sure thought this would be easier than it is! LOL

How would you do the site in the first post? I'd love to hear your thoughts.

Hahaha, yup. Web sites can be quite frustrating (and I've been doing it for a decade now!)

Hmmm, I still don't know if I truly understand what you're trying to do. But any time I'm trying to do things that have transparent graphics I try to do it all in one graphic and switch that graphic out for another one. That's really the easiest way to do it. Trying to layer a graphic that has a transparency on top of another can become a cross-browser nightmare (not to mention usability, etc). A lot of Web sites are moving towards simpler, "standards-based" designs.