Photoshop – Save for web (.gif Graphics)

Save for Web

I find that many people opt for full transparency when applying images/graphics to their forums. This is fine, if that image hasn’t got any curved areas or transparent areas. However, Opting for full transparency when dealing with curved images results in that image having a jaggy border showing around it which gives that image a rough taccy and sometime redundant colour around the edges. if you’ve not used the correct matte colour to compliment the background colour to which the image is being applied onto basically it’s going to look shit.

I find that using the matte dropdown menu in photoshop and picking the appropriate colour background that the graphic is being applied onto eliminates the rough graphic which has become more commonplace. Using this method, will result in smoother more higher quality displayed images whithout that redundant edge looking so nasty.

Lets Begin!!

You have your image/graphic completed, and you are ready to save and apply that image to your forum and/or website.

1. In Photoshop. Click File scroll down to Save For Web, Select and click.

saveforweb1a.png

2. Now that you are in the Save For Web menu. Follow the instructions showed in the screenshot. Bare in mind, that the color you choose for instruction no 2 is the colour of the background that the image is being applied onto (the background colour it’s being applied upon). Step 1 is your format selector which would only apply if you choose .gif. (Screenshot Below)

saveforwebpreviewni1.gif
saveforweb1b.png

An example in using .gif and saving it to a matte colour, rather than saving it as transparent, you’ll see the visual difference in quality. Correctly colour matted .gifs will look visually superior than transparent .gifs which results in jagged edges (around curved edges) and parts of the images being cropped.

saveforweb1c.png

Finished. You should now have a smoother, visually improved looking image applied onto your forum or website. Bare in mind, this applies to .gifs where .gif would be the preferred format over .png due to the icon containing animations which .png doesn’t support though .png does a better job with transparency and I would recommened using .png for static images.

Views: 25

2 thoughts on “Photoshop – Save for web (.gif Graphics)”

  1. andyrew dit :

    Thanks for this info, i was struggling with this very problem yesterday. I was making some images that were just text, but the edges were poor and they were showing bits of white around the coloured text edges.

  2. Shelley dit :

    Ah yes, same rules apply to text. I’m glad you benefited from the information. There’s nothing worse than redundant matting surround a beautiful image that would normally look terrible using the wrong matte.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

En savoir plus sur Un Papa Pro

Abonnez-vous pour poursuivre la lecture et avoir accès à l’ensemble des archives.

Continue reading