: GIF background texture not blending well to page background texture On my portfolio site at http://samnorris.co.nz I have an animated .gif image - the astronaut with the heading underneath: "Protecting
On my portfolio site at samnorris.co.nz I have an animated .gif image - the astronaut with the heading underneath: "Protecting the galaxy one pixel at a time"...
I'm not sure if it's just me and my monitor or not, and it is only very, very subtle but I can notice the background texture is not blending very well to the background texture on the page (which uses the same texture) and at some resolutions, and especially while scrolling I can see a visible square-like 'halo' around the image, as if the texture on the gif is slightly lighter than on the page or something.
I have tried various Photoshop export settings including Perceptual, Adaptive and Selective and quality: bilinear, bicubic ect. but nothing I have tried so far seems to solve it.
Incidentally, I was using a different background texture before which didn't seem to suffer from the problem, so maybe the problem just lies with the (complexity of?) the texture itself? or is there some way I can make sure the background texture in the .gif blends perfectly to the pages' background?
Here is the actual image itself:
and the background texture used on the page, if it helps at all:
It only seems to be a problem with the GIF and none of the other JPEG's or PNG's on the same page/section which use the same background texture either.
More posts by @Sarah814
2 Comments
Sorted by latest first Latest Oldest Best
Another way: create 3 images and use it like it's video postproduction
first - static png,
second - gif with only animated area
third - png with mask of animated area
Description of masks - www.html5rocks.com/en/tutorials/masking/adobe/
The "square-like" halo is simply the .GIF file's raster showing. The transparency of .GIF files is binary by design. Therefore, if you're looking for a smooth alpha channel try 24-bit .PNG format instead. No animation, but that's the trade-off.
Alternately, try incorporating the .GIF's binary transparency style into the style of your graphic. Photoshop has fun options for translating fading alpha (a.k.a. transparency) into different "diffusion types" during Save for Web.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.