gif img crusty edges on gradient gb
- Started
- Last post
- 17 Responses
- geffen
When i type something out in photoshop or fireworks. i put it on a transparent background, I save as a gif. when i import the image to dreamweaver on the Gradient html background, they text image is pixelated with with white stuff round it... !!!! its killing me. i dont understand what the deal is. what can i do to fix this. putting the text image on a gradient bg with clarity. thanks a bunch guys!
please w.b
- blackspade0
try a exporting as a PNG from fireworks
only bummer is older browsers cant handle it
- geffen0
when i try exporting in fireworks, it ends up being on a white bg instead of transparent. i have used png 8 , 24 & 32. is it something i am doing wrong ?
- kevinv0330
hmm. in ps u need to set the matte color to the bground of your page.
- blackspade0
in fireworks, make sure your canvas colour is transparent.
then when you export, select Alpha transparancy, under PNG 8
in Dreamweaver it will still look like it hastn worked, but once you look in a browser it will be transparent
ie:
http://webdev3.otago.ac.nz/~phut…
:)
- ********0
you need to adjust the matte to the bg colour it will be placed on..
goodluck!
- blackspade0
have a try what I said dude, it should work fine
- geffen0
give it a shot guys.... brb
- geffen0
giving it..............
- corin0
you could try taking the anti-aliasing off your text, but the text will then look crunchy unless its one of those pixelly bitmap fonts. Your'e problem comes from the the fact that your text image has blurry edges so that it blends the edges of the text in with the background colour , but GIF transpency only has two settings (on/off) so it can't replicate that blurring effect on the baclground because it doesn;t know what colour the background is. Photoshop has a setting to use a matte background (which just puts a selected backfround colour edge around the text to fix the problem, depending on the severity of your gradint you may or may not be able to use this effectively(if your gradient is to small the matte colour will bleed over to different colours and create the same 'crappy' look around the edges. Your best bet is PNG although their are issues with older browsers. But PNG has 24-bit alpha transperency, which means that it can blend into any background regardless and retain the anti-aliasing that stops text looking crunchy.
- blackspade0
you will struggle to match a gif to a gradient background, because the gif will make the gradient 'blocky' and shit, it depends on the size of the text image really. if its tiny you might get away with it.
- blackspade0
transparent PNG...
http://webdev3.otago.ac.nz/~phut…
- geffen0
Blackspade, it almost worked. it did the opposite, in dw, it looked cool but in the browser very faded, i am thinking i have the overtweaked the fireworks defaults.
- blackspade0
which browser are you looking at it in?
I find safari seems to fuck with the colours when using PNG's.
strange, it never displays them properly in DW for me :?
- geffen0
its real weird. in IE it does not show for sh*t but in mozilla it's perfect. it does exactly what i want it. isnt Png 8 universal ? or is there a workaround for all of em.
- blackspade0
hmm i dunno man, i find Explorer displays them fine... IE:
http://webdev3.otago.ac.nz/~phut…
the title text 'southern traverse otago' is a PNG, & the background image displays under the PNG text
- corin0
http://www.youngpup.net/?request…
youngpup's answer to the png problem
- gabe0
just use a GIF. if it's on a gradient background, find the median color of the gradient and use that as the matte.
i.e. if you have a gradient, use the color that is at the middle of the image as your matte color. does that make sense?