Photoshop - Save for web (.gif Graphics)

Discussion in 'Member Articles & Tutorials' started by Shelley, May 29, 2009.

  1. Shelley

    Shelley Regular Member

    Joined:
    May 26, 2009
    Messages:
    826
    Likes Received:
    61
    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.
     
    Last edited by a moderator: Aug 10, 2013
    2 people like this.
  2. Boss

    Boss Resident Silly Man

    Joined:
    May 23, 2009
    Messages:
    941
    Likes Received:
    23
    Location:
    California
    First Name:
    Alex
    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. :)
     
  3. Tyler

    Tyler The Badministrator

    Joined:
    Dec 23, 2007
    Messages:
    3,079
    Likes Received:
    63
    Location:
    Long Island, NY
    First Name:
    Tyler
    Great article, Shelly! Thank you for being our first user-submitted submission. :D
     
  4. plazzman

    plazzman Adept

    Joined:
    May 17, 2009
    Messages:
    180
    Likes Received:
    6
    Fantastic!
     
  5. Richard

    Richard Novice

    Joined:
    May 29, 2009
    Messages:
    40
    Likes Received:
    0
    First Name:
    Richard
    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.
     
  6. rmilwid

    rmilwid Newcomer

    Joined:
    Nov 5, 2009
    Messages:
    1
    Likes Received:
    0
    First Name:
    Rowan
    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.
     
    Last edited by a moderator: Aug 4, 2013
  7. Testing123

    Testing123 Regular Member

    Joined:
    Aug 4, 2013
    Messages:
    1
    Likes Received:
    0
    Location:
    Southern California
    First Name:
    Allen
    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).
     
  8. AWS

    AWS Administrator

    Joined:
    Feb 1, 2010
    Messages:
    1,611
    Likes Received:
    692
    Location:
    Joliet, IL U.S.A.
    First Name:
    Bob
    Can't do anything about missing pics that weren't uploaded here 4 years ago.
     
  9. GTB

    GTB Regular Member

    Joined:
    Jun 30, 2009
    Messages:
    1,792
    Likes Received:
    270
    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.
     
    Last edited by a moderator: Aug 5, 2013

Share This Page