Regarding Web Publishing in Illustrator

Three problems solved, new question raised regarding animation, Tutorial for initial problem included.

New Question:
What is ideal [simple & high quality] for animation regarding lighting: C4D, Illustrator, After Effects, or Photoshop?

I'm attempting to teach myself how to make a shine/sparkle effect; here are my attempts using Photoshop in chronological order. I used 15 frames for these.

[^Post #11 has an explanation on how to do this^]
The stroke around it was meant to be an outer glow, but im guessing since it saves as .gif it failed. Is there a way to publish animation as a .png24 instead of .gif?


Neither of these are what I'm after, but ill keep playing with it...any advice is greatly appreciated. I'm not exactly sure where to start if I want to make sparkles come off of it; but I'm thinking of having some sort of spray grow, get lighter, then turn opacity to 0%
Initial Problem:
I want to publish a picture to web so it has no background, change it white, and also so it appears as I see it in illustrator. but it gets butchered when I go to save it for web and devices..

Here's what it looks like in Illustrator:



And here's what i've gotten it to look like with various save settings:
.Gif:
,
.Jpg:


Needless to say it's undesirable.

SOLUTION TO INITIAL PROBLEM:
This one is much cleaner... It was a matter of saving it as .png-24 instead of a .gif. :3 Use .png-24 because it contains 16m colors whereas .png-8 has 256.
:|

As for the color; it was a matter of changing the 2nd color while using the pen tool..

The letters in-between the stroke didnt really show up; so I turned the opacity with the text tool to 100% and the opacity with the selection tool to 50%


RESOLVED: I'm thinking my problem stems from not being able to see what I'm using and what is background- is there a way to make the background checkerboard like in Photoshop?
Solution:

Any advice is greatly appreciated!​

 

save as png or a pdf

 

The .png-24 is the best transparent quality you will be able to save it as.

 

As Karma stated, the .PNG-24 will probably have the highest amount of quality along with transparency.

 

Thanks for restating that, you three.

Does anybody know if it is possible to make the background in Illustrator checkerboard instead of solid white?

 

no not that i know of but ill look in to it an if i find a way ill let you know

 

found it ( that dident take long lol)
go to: View > show transparency grid

 

Ah, Thank you! You saved me some time :]

I'm also wondering about Zippy's siggy.. I'm suspecting it's made in C4D- but is it also published in it? or would it be better to move it from C4D and publish it for web in Illustrator?

I dont have any experience with C4D so this is probably a simple question. My laptop barely handles it. :[

And if a person wanted to make sparkles/shines ontop... would that be done in Ad0be After Effects?

I'll move this question to the OP too for more exposure..

 

The main text in my signature was modeled, then rendered in Cinema4D R13 as a .png file. After I make the text I open it in photoshop and spice it up with color corrections, effects, extra text etc.

 

to make sparkles the eases way would be to get a stock of it or create you own. for the shines most of them are created in c4d with reflection.

 

Very insightful, a big thanks to both of you! I aim to try the shine/sparkle effect soon. If C4D doesnt lag out too bad that is. I Think i might even be able to make it happen in Photoshop using the animation function... not nearly as good as C4D of course but it might have to do.

I'm just going to try Photoshop because I know how, I'll take a shot at animating in Illustrator too, soon. Hopefully I'll be able to post some progress tonight.

Edit:Holy shit why have I never tried this before?


It's not how I want it in the end, I'll aim for the sparkle effect and a far better shine effect; but this is a good start for like 30 mins of studying.

The process I used:
I wrote "bump" in Illustrator, moved the vector image into Photoshop, created a clipping mask for the vector image, made a white line on the clipping mask, then made a tween across the image with the clipping mask.

Lets be honest, it's pretty shitty. I'll mess around with the layer options in Photoshop and see if I can get a look that doesnt make it look like its being scanned >.<
And the stroke around it was meant to be an outer glow, but im guessing since it saves as .gif it failed. Is there a way to publish animation as a .png24 instead of .gif?

Edit: Here's a better attempt. It was simply a matter of changing the lighting on the embevel and emboss option on two layers then tweening them together. :]
I'll try toning down the light a bit and make it so it doesnt do a 360 lol

 

on the first one try to make the shine wider an softer an make the gradient bigger an lower the opacity just a bit not too much tho.

 

Heres a new one, I like it a lot better with the barbershop effect. but its not quite right, im thinking either the opacity of the stripes needs to be lower or solid. Slowly learning.