How To Export Transparent Gif (Avy)

[wizard of heaven]

[url="http://www.uwec.edu/help/PhotoshopCS2/transpimgs.htm#Existing"]http://www.uwec.edu/...gs.htm#Existing[/url]

this will tell you how to make the background of an image transparent and also export as transparent GIF with photoshop.

[color=#00BFFF]Shadowseeker: Note, below are some more tutorials. Including mine which is for GIMP, which is a free program.[/color]


[color=#00BFFF]Please note that its NOT the magic wand that you should use![/color]

Edited August 20, 2011 by Burns

[Muratus del Mur]

Please note that its NOT the magic wand that you should use!

Do like this:

Set background to that creme color in the sample. Select the black/white artwork then apply what is called in Fireworks (Adobe) "Convert to alpha" filter, or equivalent in your program. This will turn all white into transparency without cutting it. Magio wand won't work because it will cut the drawing very ugly and will not make transparent the interior white spots.

With convert to alpha applied, export as transparent gif with the creme bg set as transparent color.

This should generate the perfect export
I saw some tried cutting the white spots, its not working and looks very ugly.

Hope it helps.

here is link :
http://www.ehow.com/how_2257364_apply-convert-alpha-effect-fireworks.html

[Shadowseeker]

I made a short tutorial how to make that using GIMP 2.6

http://www.gimp.org/

In the tutorial I also used a jpg as a base and turned it into a gif first for the avatar makers. You may skip that if you already have a gif, but at times you cannot choose the transparency option depending on your settings.

It only shows the "how to do transparency part", I hope you can get the background right yourselves..if not, ask.

http://www.youtube.com/watch?v=FS__c4V1YyE

Any more questions, feel free to ask. Pinned this topic, on offtopic note.

Edited April 22, 2010 by Shadowseeker

[Prince Marvolo]

I have Photoshop CS3 Extended and used Ctrl+Alt+2 (so it selects all white) and then delited the white.
Does that work too?

[Shadowseeker]

That by default should create transparency pixels...you need to put the background in though, which is mentioned in the sample.

Edit: In photoshop, I add another layer with the needed color, and put the transparent thing over it, so it shows up.

Edited April 22, 2010 by Shadowseeker

[Aurinia]

Ok, I might be slow or you are going too fast on the you tube how-to for GIMP ^^

I saw jpg-> gif
And than it went too fast :S
Could you say it here step by step how to add the alpha layer?

[Shadowseeker]

I'll redo the video making it slower when I get back.."this is a spam message to remind me to repost it here"

[Blackwoodforest]

[quote name='Aurinia' date='23 April 2010 - 12:15 AM' timestamp='1271974538' post='58445']
Ok, I might be slow or you are going too fast on the you tube how-to for GIMP ^^

I saw jpg-> gif
And than it went too fast :S
Could you say it here step by step how to add the alpha layer?
[/quote]

menu: layer ==> transparency ==> add alpha channel

now choose

layer ==> transparency ==> add color to transparency

worked?

[Shadowseeker]

Or that..I was gonna post a similiar guide up here.

[Mhilael]

finally. a guide i can understand =))

*reworks*

[Blackwoodforest]

Why, cant the Avatars be PNG format, because the quality would not suffer that much. At least the download sample is png. I dont see any reason for them to be gif format.

[freelancer]

For the people who have trouble with converting your drawings to alpha channel, I found this pretty easy to follow guide that would show you how to do it using photoshop.
[url="http://www.davidchess.com/words/pngalpha.html"]http://www.davidchess.com/words/pngalpha.html[/url]
I know this guide is about making PNG image and not GIF, but doing the alpha channel is all the same.. just export the image as a GIF file at the end instead of saving as PNG.
Hope this helps.

[Yoshi]

Yeah uh, I got bored and made a tutorial video for a friend to successfully upload the avatars they made. Apparently it works so... enjoy.

The description explains what to do.

http://www.youtube.com/watch?v=yfyiBkMHApE

[XinHun]

Is there any tutorial for SAI, or can I use one of photoshop?
If it's possible to use Sai for that. (not very much experience with it.

[(Zl-eye-f)-nea]

I have been asked to write a tutorial for GIMP, its a bit different to Shadow's, so here we go:

- Download GIMP (the picture editor, not the desktop buddy...)
- file>new
- Set the size width 100, height 160, click ok
- drag and drop your image from your desktop (or file) into the main (middle) GIMP window
- on the right menu, there are two items - your image and the background. Make sure the image is the highlighted "layer" it will have a blue band (this will turn grey when you click the main window).
- Right click over the image in the main window, layer>scale layer
- 100 width, click the chain so it unlinks, 160 height, click scale
- Go to the right menu bar and right click the image, choose add alpha layer
- Still in the right menu bar, highlight the background layer
- Still in the right menu bar, right click the background layer and choose add alpha layer
- In the main window at the top, click colours>colour to alpha>ok
- Highlight the image in the right menu bar
- In the main window right click>select>by colour
- Click the background colour you want to make transparent
- Right click>edit>cut
- File>save as> myfilename.gif
- Click ok on any following requests and you should be done.
[spoiler](- cover in leather and put a ball gag in its mouth to finish-)[/spoiler]

Z

Edited June 9, 2010 by (Zl-eye-f)-nea

[apophys]

^ steps I would add:


- Image -> Mode -> Grayscale (to remove colors; a scanned image is often a little blue)
- Image -> Mode -> RGB (to allow coloring)
- Colors -> colorify -> custom color - html notation F1EFD6 (noted by Mur on the "Upload avatar" page)


This goes just before Select -> by color in your list.

Edited June 9, 2010 by apophys

[(Zl-eye-f)-nea]

No, there's no extra step, how I've written it is exactly how I do it.

Z

[apophys]

[quote]
Background transparency color should be (RGB = 241.239.214, Hex #F1EFD6)
[/quote]

This is found on the "Upload avatar" link.

[(Zl-eye-f)-nea]

It is indeed, but I don't use it, and if you use my method, you don't need to use it unless you want to check what your avy will look like on the MD background and edit it before then removing it again.

Z

[Ravenstrider]

Oh, the Gimp tutorial is all wrong... With that you'll get a really bad GIF...

Just do

Layer-> Transparency-> Add Alpha
Layer-> Transparency-> Color to Alpha (Set your background color... depending on the scan quality you may have to play a bit with contrast and brightness to achieve a clean white background...)
Image-> Scale (Set to 100x160)
Filters-> Web-> Semi flatten (before you do this, set background color to the one Mur specified... in the palette... not on the drawing)
File-> Save As -> type name.gif, select Convert to Indexed using default setings (You can convert to indexed before you save, it's up to you)

And you have a perfect gif... It took me 3 hrs till I figured out I had to use the Semi Flatten option... x.x I hope I saved someone some time.

Edited March 1, 2011 by Ravenstrider

[The Great Wanderer]

[quote name='Yoshi' date='26 April 2010 - 06:24 AM' timestamp='1272281077' post='58634']
"Yeah uh, I got bored and made a tutorial video for a friend to successfully upload the avatars they made. Apparently it works so... enjoy.

The description explains what to do."



[s]I know there will be a lot of sighing a banging of heads when others read this, but I had to get help. I am trying to use Adobe Fireworks to convert my avatar and I followed the tutorial Yoshi made, (Don't get me wrong, it was really helpful), but my final product still looked like something on a piece of paper, just with different shading. Yoshi's "yoshi" was noticeably transparent and mine is not. I am not sure what to do, but if anyone has any helpful ideas at what is not going right, please respond. The following attached images are the drawing and then the "converted in fireworks" image. (Thank you for any patient people who take the time to help me.) [i](My drawing skills are limited, so lets not make fun.)[/i][/s]

This issue has been resolved, special thanks to those who made tutorials and gave advice.

Edited August 20, 2010 by The Great Wanderer

[Magnus X]

none of these tutorials seem to work.

using a macbook, i opened a png file with Gimp (wont allow me to drag and drop the image into Gimp window.) working with one layer, i follwed Ravenstrider exactly, set the right rgb colour. below is the result:

first image is semi-flaten. the second one is not.

[Mr Mystery]

umm, your paper is not white. Its either that pic is scanned with a non whiteish paper, or you took a picture of it. If the drawing isnt drawn on white paper, it will complicate things, and would require extra steps, and would not look as nice as its suppose to look as, due to the color. The same as taking a picture, as lighting affects.


I can help you with your first few avatars, just to see if its on white paper/any other issues, so that we could say that it is the drawing at fault and not, the program. Pm, any questions and ill help out.


I use Fireworks btw.

[(Zl-eye-f)-nea]

[url="http://i415.photobucket.com/albums/pp238/zleiphneir/magnusx.png"]link[/url]

Thats the best I could manage - needs some contrast adjustment still. You have the same problem I have with turning your images digital, and alas so far not a single person has come up with a decent solution other than upping the resolution and darkening the lines on the original.

Z

[Magnus X]

its definitely on white paper. i did took a photo of the work as i dont have a scanner. yes i agree, i could use a better lighting taking the photo.
also a darker, more gradual shading of the drawing would help, yes.

after tinkering with the program with the same image, i came up with the one below:

i will rework the drawing and make some adjustments using the software.
thanks guys for the help!