Signature Image

[hambil]

Okay, It's clearly not a site issue per-say, but I can't think of a better place to ask and I'm really confused.

When I upload a nice signature picture (either via url or browse) it turns to crap. Transparency is lost and the resolution goes bad. It's small enough to not get resized, so I don't think it's that.

I've seen some other people with gorgeous signature images so I know it's possible. What am I doing wrong?

Here is a gorgeous sig image Shelley_c uses:

But when I save and try to open it in Photoshop to see the settings used, it says "Could not complete your request because the file format module cannot parse the file".

[AHealthForum]

Not sure, i just uploaded one with no problems?

[hambil]

Success! I had to save (from photoshop) using Local (Perceptual) palette. Not even sure what that means, but thank god for graphics artists

[Shelley_c]

Originally Posted by hambil

Success! I had to save (from photoshop) using Local (Perceptual) palette. Not even sure what that means, but thank god for graphics artists

This may get moved due to the thread being more of a graphic orientated issue than anything else. Anyway, just pointing out that you still haven't got it right. I used a different format which does transparency a lot better than .gif (which is what your using.

If you notice. You'll see that the curved areas around your images are jagged and not smooth which they should be. What I do, is use the matte feature in photoshop (Save for web). You simply select the colour (hex value) matting to the same colour that your applying the graphic onto. Pending on what style your using to view simply take a screenshot and use the eyedropper tool to get the hex value and then use the hex value for your matte and you'll see the difference in quality.

Alternatively, Use .png.

__________________________________________________ __________________________________________________ ___________

This will definetely get moved but here's a more thorough answer to your issue if you feel you need to use .gif as your preferred format. This was a brief tutorial I wrote for someone a while back but thesame rule still applies to your issue.

------------------------------------------------------------------------------------------------------------------------

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

[hambil]

Since I can't rep or thank that, I'll just have to reply and say thank you, very much. Excellent information. Perhaps it should get copied into the articles section.

[Shelley_c]

Originally Posted by hambil

Since I can't rep or thank that, I'll just have to reply and say thank you, very much. Excellent information. Perhaps it should get copied into the articles section.

Well I'll take any kind of rep it's got to be better than an infraction. Or would I? I'll have to start holding off on the informative posts otherwise I'll gain a reputation in actually being helpfull. Anyway, your welcome and if you need any additional help throw me the source file over and the style your using to view it on and I'll do the mating for you but you should be able to do it yourself it's really that easy.

[KevinL]

LOL!! funny haha

See I learned something. I always messed it up and didn't save it as matte. I always saved them as transparent.

Thank you...(or maybe I shouldn't have said that?haha)

[Shelley_c]

The trials and tribulations of loving vbulletin and providing support. Or should I re-phrase that with. Support love vbulletin, english bad vbseo support please I love you. Huh? Sorry for the bad english, I'm english.

what she say?