Mobile app version of vmapp.org
Login or Join
Sarah814

: 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

@Sarah814

Posted in: #AdobePhotoshop #Background #Gif #Images #Texture

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Sarah814

2 Comments

Sorted by latest first Latest Oldest Best

 

@Sherry646

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/

10% popularity Vote Up Vote Down


 

@BetL875

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme