Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Graphics Articles
Save for Web (Saving .gif Graphics.)
Shelley_c's Avatar
Shelley_c
Join Date: Jan 2006
Posts: 1,992

Currently suffering from an acute form of demencia. What's my name again?

United Kingdom
Show Printable Version Email this Page Subscription
Shelley_c Shelley_c is offline 09-14-2009, 10:00 PM

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 tacky 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 without 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. (Screenshot Below)






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 recommend using .png for static images.
Reply With Quote
  #2  
Old 09-15-2009, 08:01 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks for sharing :up:
Reply With Quote
  #3  
Old 09-15-2009, 08:04 PM
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Location: Google Kansas
Posts: 4,678
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

nice tutorial Shelley!
Reply With Quote
  #4  
Old 09-16-2009, 11:51 AM
Trip's Avatar
Trip Trip is offline
 
Join Date: Mar 2008
Location: Eastern Canada
Posts: 199
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Very slick, thanks Shelley.
Hopefully, some day we'll have a format that supports animations and transparency together.
Reply With Quote
  #5  
Old 10-18-2009, 08:45 PM
Trasion Trasion is offline
 
Join Date: Sep 2009
Location: New York
Posts: 178
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Wow Shelley. Very nice, thank you!

I always personally just never had transparency, I just filled the background of the image with whatever color the background would be that it'd be on. But I guess this would be so much better for backgrounds with multiple colors and such.

Thanks a lot Shelley!
Reply With Quote
  #6  
Old 10-23-2009, 03:05 AM
tafreeh tafreeh is offline
 
Join Date: May 2008
Location: Canada
Posts: 536
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

wooww. thanks allot.. i always wonder how do you give your graphic matte looks..

thanks allot
Reply With Quote
  #7  
Old 11-12-2009, 12:29 AM
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
Posts: 541
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks for sharing these tips
Reply With Quote
  #8  
Old 11-17-2009, 10:34 AM
NakedAlien's Avatar
NakedAlien NakedAlien is offline
 
Join Date: Feb 2009
Posts: 82
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yeah this is what I do, but what sucks is that we have the ability for users to customize their profiles and it looks really bad when someone has picked dark backgrounds etc and the images have white matte. But I just have to deal with it And wait for the day when I can use PNG without it looking bad for some people
Reply With Quote
  #9  
Old 11-23-2009, 09:27 AM
Shelley_c's Avatar
Shelley_c Shelley_c is offline
 
Join Date: Jan 2006
Location: United Kingdom
Posts: 1,992
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by NakedAlien View Post
Yeah this is what I do, but what sucks is that we have the ability for users to customize their profiles and it looks really bad when someone has picked dark backgrounds etc and the images have white matte. But I just have to deal with it And wait for the day when I can use PNG without it looking bad for some people
You can always use the replacement variable manager and do what I do and have the .gifs parse to .png format which has worked well for me. Almost all .gifs in vb3 are replaced with pngs without the need for template editing. I'm surprised people don't use this much though we don't have to worry about the format in vb4.
Reply With Quote
  #10  
Old 09-18-2010, 04:38 AM
as7apcool as7apcool is offline
 
Join Date: Feb 2009
Posts: 194
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks 4 good work !
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:41 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04223 seconds
  • Memory Usage 2,282KB
  • Queries Executed 23 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (10)post_thanks_box
  • (2)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete