GIF Matte Setting in Photoshop’s Save For Web

Posted on Thursday 21st Apr 2011 by James Bavington 1 Comment



In this week’s video I re-visit the GIF Matte setting in Photoshop’s Save For Web feature. In the new video tutorial above, the demonstration of the ‘White Halo’ is much clearer with some detailed monster illustrations. In essence, the GIF Matte setting allows web designers to customize the ‘Matte’ colour that blends the edges in GIFs with transparent backgrounds.

The GIF Matte example from the video

Above left, you can see the first monster image that has been saved with the default, common ‘White Halo’. The second monster image uses the custom Matte colour as shown in the video demonstration.

Transparent GIFs Vs PNG-24s

Although web designers are starting to use PNG-24s instead of GIFs, it’s important to consider some of the plus-sides of using GIFs instead of PNG-24s.

  • GIFs can be saved with transparent backgrounds, like PNGs.
  • GIFs can be saved at lower file sizes compared to their PNG counterparts.
  • GIFs can be animated.
  • GIFs do not require any PNG fixes to work correctly in all browsers like IE6.

About James Bavington

Away from computers, James enjoys mountains, military history and has an insatiable appetite for film - particularly 90's classics.

See all of posts.

Add on James Bavington Google+

James Bavington's Tweet's

This entry was posted in Photoshop Tutorials, Web Design Videos and tagged , . Bookmark the permalink.

One Response to GIF Matte Setting in Photoshop’s Save For Web

  1. SamMclain says:
    June 23, 2011 at 3:53 pm

    Hello James this tutorial is pro but i cant make a animation like you becuaz i dont have wakame its like a electronic paper that you can use it in photoshop if you can please send the PSD of the GIF animation i need this basic or pro designs please….?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>