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.
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.

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.

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.

 

Great article! I actually picked up this tip a few years ago from a friend who showed me how to get crispier gifs than the scruffy look I was getting.

 

Great article, Shelly! Thank you for being our first user-submitted submission.

 

Fantastic!

 

Great tip, really helps when one makes a custom smiley pack. I always save as PNG however, that's my preferred format...
However the Photoshop PNG files are usually very large, I always make sure to run a compression tool before saving it to my web server.

 

I have a Magento ecommerce website and I have a question regarding an issue I am having with .gif buttons. This may seem like a rather basic question (I'm not a developer nor a graphic designer):

The buttons that were added by my developer all work great. I have the original photoshop file from the developer and I recently tried to create my own for a new page. When I hover my mouse over the new button that I created the button disappears and I see the alt text. I compared the html code for the two and they are identical except for the .gif file name on the server, so I assumed I must have done something different when I created my .gif file.

Here's the test page with both buttons:
Availability Confirmation Required:

Does this have something to do with the .gif file? Is it something else?

Any advice would be greatly appreciated.

Thanks,
Rowan.

 

The pics in the article (1st post) for this page are not loading/showing. As such, one cannot follow the outline of the instructions since some/all pertinent info appears in the non-displayed pic (i.e. see #2 of the article).

 

Up to you of course? But seeing as article was showing images you needed to look at really, which are no longer their for viewing. If me, I'd delete the article, it serves no real usefulness without those images. Not even as though you can edit the post to still look OK, by removing the image links.