Transparent background images for the web?

[feri]

Okay so I have about 3 books on Photoshop and I still seem to be missing something. I would like to have a image with a transparent background on a webpage that has different colours. Now I know that there is a "export transparent image" menu under the help tab but this does all the work for me and I cannot see how this process is done. My image has layers on a transparent background and when I flatten the layer the transparency is not preserved when I use save for web. So what is the trick to have an image blend in perfectly with a gradient coloured webpage?
Thanx Guys........ and girls

 

[SPYDERIX]

Hi,

To save a transparent image you save it as a .gif by either going to save as or save for web. This will only save 256 colors so any gradations you have will not be perfectly preserved. As for getting them to look nice on a gradated background you will have to include part of the background in with the image, otherwise it will just look jagged.

If you only want this image to appear on the one site with the gradated background then just include part of the gradation on with the image and save it as a .jpg.

Hope this helps!

NATE
design@spyderix-designz.com

http://www.spyderix-designz.com

 

[feri]

Hi Nate... You responded to my message @ Tek-Tips in the photoshop forum. Well I had a good read of the forum and saw that you have responded to allot of the posts. In a small way I was hoping to have you reply to my post as your help always is pro. Anyway enough about that and on with the question. Before I posted in the forum last night I had a look @ your site and I was trying to figure out how you managed to make the menue bar at the top half of the page? Not the spider but how you managed to get it to all fit together as I noticed that the menue is all in small pieces. I would like to create the same type of menue but obviously with my own style buttons. I know that if one has a tiny pic and make it repeat itself to create one large one then download time decreases.I see that you are in the buisness of web design so without giving away too much....

Thanx for any help
Feri

 

[SPYDERIX]

Hi,

That is just a bunch of tables with little 1 pixel width images by X height that tiles to give the effect of a picture background. That was done with 3 different images, and then more images were over-layed over top, as well as the links. Just a combination of background images, tables, nested tables and foreground images.

Is that what you're looking for?

NATE
design@spyderix-designz.com

http://www.spyderix-designz.com

 

[bitterpants]

while we are on the subject of transparent gifs, i wonder if anyone has any idea why i might be having so much trouble with some of mine.

im creating transparent gifs w/text on them (for use as buttons on a site) ive tried every combination of Eurostile and EurostileExtended possible, between 11 and 14 pt font size. the problem seems to be less noticable when all the letters are capital, but the text still looks as if there are chunks taken out of it. when i save it as a gif transparency is checked, i have matte set to none, and ive tried several variations of diters, and still seem to get the same result.

for an example you can go here:

http://www.imbetterthanyou.net/tectest/newhay.html

the text buttons (in white) on the left have the problem, you can see it a bit better if you mouse over it as the background color changes. the black text in the center of the page has a colored background behind it so it looks fine. adding a background to the navigation images however, is not an option.

im hoping someone will have an idea of what im doing wrong here.

thanks
jen

 

[blueark]

Your text is aliased. To get the effect you want, you will need to give up transparency, as the GIF format doesn't allow the partial transparency that you need.

Looking at your code, I don't see why adding a background is not an option. Both your background and your buttons use absolute positioning, so it should be easy to create the same background behind the buttons and line it up properly. Also, instead of using the css hover style to color your buttons, use a JavaScript image swap instead.

 

[bitterpants]

maybe if i rephrase the question: how does the text become aliased? is it the font? is it because of the size of the text? the page you saw as my example is really just to give a visual representation of what the problem. im kinda looking for a solution to the actual problem, and not a way to work around it in one specific situation.
theres gotta be another way than slapping it all together in imageready.

-jen

 

[SPYDERIX]

Hi,

The solution to this (if I'm reading this correctly and seeing this correctly), is to simply add that section of your page background to the image. Then put your font over top, it will give the effect of the image being transparent over top of the background.

As for the aliasing of fonts, you may have changed a setting on the options bar. When doing fonts, on the option bar, there is a dropdown that you can select, NONE, SHARP, CRISP, STRONG, & SMOOTH. I amost always choose Sharp for my fonts, but it depends on what I am doing.

Hope this helps!

NATE
design@spyderix-designz.com

http://www.spyderix-designz.com