Topic awaiting preservation: Decay sig tut. (Page 1 of 2)

Someone asked me via email how I did the decay sig you see below this post. I wrote him a mini-tutorial (without pretty pictures, sorry) And I thought it might be a good idea to post it here too. Here goes nothing:

(Oh, by the way, everything is explained in itty-bitty detail, so somethings might be a little to overdone in places for some people. just ignore that.)

(before you start, make sure you have Imageready with your PS. it is included since PS version 5.5 .)

It is the best thing to start with the image you want 'decayed' on one layer, with a transparent background. for best results, the image (text, whatever) should be twice the size of how big you'd want the final animation to be.

It's also a good idea to save often. (CTRL-S)

[introducing: the noise filter]
make a new layer, and fill it with black.
then click [filter>noise>add noise] set it to 400%. gaussian or uniform shouldn't matter, and set it to monochromatic. press OK.

whoo. nice. as if you didn't set up your TV set. If you'd zoom in you'd see a lot of black and white pixels, and some gray pixels in between. Noise simply gives a pixel a random brightness, so there should be about as much black as white pixels.

Now click [image>adjust>treshold]. You'll see some box with lines. Treshold makes pixels either 100% black or 100% white.when you move the slider, more pixels will become black or white (depending on their brightness) but for now it's okay to set it precisely in the middle. Press OK.
If you zoom in now, you'll see that every pixel is indeed pure black or white.

Delete the layer with the noise. now press Q. you'll enter what they call 'quickmask mode' to put it simple, it makes selections. If you whip out a drawing tool (say, an airsbrush) you can draw with black or white (or grey colors). now it you draw with black, you'll see a slightly transparent color appear (most likely red). now, if you press Q again, you'll exit quick mask mode. now everything that you painted black is unselected, and the rest is selected. Press Q once again to get back to quickmask mode again, and your colored spot will be back.

Now, repeat the process what you did with the layer you first created. fill it completely with black. Run the noise filter, then use treshold. Then press Q again.

You'll propably have a lot of blinking mess on the screen; 50% of the pixels is selected, 50% is not. Now move to the layer with your picture on it, and select one of the selection tools in the toolbar. right-click, somewhere in the middle of your picture, and a menu should come up. (you might lose your selection. if that happens, click [select>reselect], it gets back the last selection you had.) when you get the menu, click [layer via cut]. now, everything that was selected is cut away to a new layer.

you now have two layers, most likely named [layer1] and [layer2]. if you click on the eye icon next to them, you'll see that half of the pixels are on one layer, and half of them are on the other. You'll have to repeat this procedure (quick mask, noise, treshold, exit quickmask, layer via cut) again on layer 1 and layer 2, so you'll have layer 1 'til 4 when you're done, each with 1/4 of all pixels. repeat the procedure again, now you'll have layers 1-8. the whole deal of this is that the effect would look best if every pixel fell down separately, but but what we're gonna do is letting 1/8th of the pixels (so, one layer) at a time.

Now comes the tedious part, animating. click on the downmost button of the toolbar to go to imageready. It has an arrow on it. If you're not sure, hover with your mouse over it to see if you've got the right one.

This might also be a good time to save your work again.

Imageready has a layout much the same as photoshop. The main difference is that it has an animation palette. If you can't see it, click [window>animation] to make it appear. right now you can only see one frame, it's a miniatrue version of the picture you have at the moment. If you click at the 'new frame' icon (it looks just like the 'new layer' icon in the layers palette) you see it creates a new frame, which would be next frame in the animation. Imageready remebers for every frame the position and the opacity of a layer. If you change a layer however (IE; you draw on it) the layer will change in every frame. What we now need to do is to move the 8 layers down, and reduce the opacity in steps. Right now, you have two frames. select layer 1 in the layers palette, select the move tool, and press the down arrow on your keyboard once. layer one has now moved down one pixel. now, make a new frame in the animation palette. with the move tool and layer 1 still selected, press the down arrow twice. Also, move layer 2 down one pixel. For the next step, create a new frame, move layer 1 down three pixels, layer 2 two pixels, layer 3 one pixel. See the pattern here? All the layers start falling, first slowly, then faster. You'll still need to do the rest of the work yourself, though. next step; move layer 1 down four pixels, layer 2 three pixels, layer 3 two pixels, layer 4 one pixel. Also, make the opacity of layer 1 80%. next frame, 60%, next frame 40% , then 20%, then make it invisible.

Go on with every layer ontil all layers are invisible. Press the 'play' button in the animation palette, and marvel at your work.

Edit: the exporting stuff. Yes.

If you want a looping animation (so the sig falls apart and builds back up) you'll need to copy and reverse the frames.

select all the frames, and drag them to the 'new frame' icon. (all frames will be duplicated) Now click on the encircled arrow in the animation palette, (or an arrow button, it should give a dropdown menu) there should be an option 'reverse frames'.

If you're happy with the animation as it is now, specify a background color in the optimize window (if you can't see it, click [window>optimize]). It is called 'matte color' there. GIF doesn't support half-transparency, so a pixel is either transparent or not. the pixels that are not completely transparent are blended agains this color, so it shows up right on, say, a webpage. to save the animation, click [save>save optimized].

If you want to shrink down the animation to 50% of it's size (to make it look smoother or to preserve filesize) make your canvas a little bigger on the sides (click [image>canvas size]) and add a new layer above all others. now, make a border around the animation. the color or size doesn't matter, just make sure you can crop it out later on. (if you don't know the crop tool, refer to your manual or access the help files that came with your program) make sure the border is visible in all frames of the animation. Now, export it like you would export a regular animation (see above) save your PSD again, and close it. Now, open the GIF file of the animation. Every frame of the animation is now on a separate layer. The reason why I told you to make the border is this: if you shrink a layered image, sometimes inconsistencies appear. Right now every layer has a border, so every frame has the same heighth and width, so every frame will be resized in precisely the same way. Now, click [image>image size] and specify the size you want your shrunken image to be. 50% works best. Click [ok].

Grab te crop tool (or press C) and crop out the border, as we don't need it anymore.

Now, once again, specify the matte color, test your animation and save as optimized again. If you try to close the image, photoshop will ask if you want to save the file. If you click [yes] photoshop will save the layered PSD file of the animation.



[This message has been edited by mahjqa (edited 08-02-2002).]

mahjqa: Superb - can I add it to the FAQ?

___________________
Emps

FAQs: Emperor

I still can't figure it out.....guess I will have to play some more

Thanks mahjqa

Peace

but... but.... but... no pictures!

Well its understandable, but I agree pictures would be nice

I would take the time to do the tut w/ images if I could figure out how to get the tutorial is done. I followed your instructions but as for putting the text into it. I can't figure out that part. I would appreciate the help.

Peace

just because you people are too lazy to read???
every step is very precicely described so there's no need for pics.

Dude, that's like reading one of those grown-up books without pictures. Jeez. No one has that kind of attention span! =)

Sorry to but in .... but I started to hear GN in my left ear, Mahjqa ever want to make a tutorial of this/these great animations for GN?

Oh please... *hands and knees* please*

Just think they would be a great over there (if it sorts it self out over there that is ). I know it might take time to make, as I know as I've done some myself. But in the long term it would be great and you can just point poeple to it if they ask you "How do you make ******" qestion and saves time copy and pasting or typing it out again.

Just a thought , if you want to that is.


DS

Emperor; you can.
Indus; is there any part you don't understand?

quote:

---

but as for putting the text into it

---

what do you mean by that?
Darkshadow; consider this a test ride for a GN version, then. Is there anyone here who has some suggestions for clarifications in the tut? Don't go yelling for pictures unless you have something constructive to say like "I think a picture of [insert] would be nice on the place where you say [insert] since I think [insert]."

In short; Comments? Queries? Quibbles? Anything broken that needs fixing? So far I think everyone who has a basic understanding of PS and can read can follow this tut, it would be interesting to see someone proving me wrong.

And, if someone gives this a shot (I hope that happens) please post it here. If you don't have a hosting place you can even drop me a line (click on the button) and I'll put it up for you. What is most required however is comments to make it better.

mahjqa: Cool - I'll add it later.

Its an interesting approach to preparing a tutorial - the important thing is that it results in a tutorial (and with all the feedback from the inmates its sure to be a good one). I'll drop my comments in later (I'm just off out) and I'll post a note in the GN (if someone hasn't already) pointing people over here to throw their thoughts in).

I'm lookig forward to seeing this develop

___________________
Emps

FAQs: Emperor

I just plowed through that mini-tut in a very short amount of time.
Pictures/thumbnails really aren't required...... he described it pretty damn well.
Pay attention to what he says, and it should get off without a hitch.
Crafty work, Mahjqa.
I've passed along my very few comments about improving the tut, to Mahjqa already.
So, if anyone else wants to give this a shot.... it'd be quite helpful.

If you already did the tut, I've updated it (thank you, Michael) and I've explained the export part of the *.gif image now.

Mahjqa, you definitely have a gift for pixel animation. Good work again. After a quick read, I can definitely see the gist of the tutorial, and I must admit that it's another piece of brilliant insight. No comments on it at all. Very easy to read and easy to understand.

Hey, I've just created my first animated gif - really wouldn't have thought that it was so easy!

I didn't have any problems to follow your instructions, everything worked fine. Well, everything exept for the final size shrinking which made the image much darker - see:

Here's the original, big image (is has 160kb, I just couldn't get it smaller, sorry...):



And this is how it looks like after resizing it to 50% of its size:



Is there a way to prevent this effect, did I miss anything before resizing it?


kuckus (cell #282)

I dont think that I have it quite right.

Hmm didnt get it optimized either. 32k eeek!!


Back to the workshop.

Peace

[This message has been edited by indus2002 (edited 08-02-2002).]

Kuckus; it always gets a bit darker, as far as I know there's no way to prevent that.

Indus; for better effects you can always let the layers fall a little further before you let them fade out, that smoothes things out, most of the time.

I dont complaint.
I admire anyone that takes the time to write tut.
I know i have done some in past myself and it aint easy.
There is always someone that don't get it anyway.

That someone is me in this case.

I get to about here:
(1.Delete the layer with the noise.) now press Q. you'll enter what they call 'quickmask mode' to put it simple, it makes selections. (2.If you whip out a drawing tool (say, an airsbrush) you can draw with black or white (or grey colors). now it you draw with black, you'll see a slightly transparent color appear (most likely red)). now, if you press Q again, you'll exit quick mask mode. now everything that you painted black is unselected, and the rest is selected. Press Q once again to get back to quickmask mode again, and your colored spot will be back.

Now, repeat the process what you did with the layer you first created. fill it completely with black. Run the noise filter, then use treshold. Then press Q again.

You'll propably have a lot of blinking mess on the screen; 50% of the pixels is selected, 50% is not. Now move to the layer with your picture on it, and select one of the selection tools in the toolbar. right-click, somewhere in the middle of your picture, and a menu should come up. (you might lose your selection. if that happens, click [select>reselect], it gets back the last selection you had.) when you get the menu, (3.click [layer via cut]). now, everything that was selected is cut away to a new layer.

And then its dead stop.
Ok let me ask some questions.

1. (see the tut) should i actually delete the layer there, was it just some training to get it?
I didnt follow that quite, but i have tryied it both.

2. (see the tut) Why? Why am i whipping out the drawing tool and draw?
Should i do that in my picture or is just another trainging tool to see whats happening with the added noise?
And IF i should draw, where should i draw?

3. (see the tut) This is where it dosn't work.
Ok i have the transparent background, i have a layer with txt (also transparent xept the txt, and i have the layer with added noise (tryied both with and without drawing in the layer(edit: and i even tryied within quickmask edit.)) now if i select the text layer and select the marque, when i rightclick in the picture (anywhere) i DONT get [layer via cut] it is grayed out, no matter what i do.
I lost selection once and went to select/reselect but most time i had it intact.
Nothing helps.

Spellbinder.




[This message has been edited by Spellbinder (edited 08-05-2002).]

You don't need the first black layer for your final image, it's just being created to show you how to use the noise filter and treshold command. Same goes for drawing in quickmask mode, that's only a demonstration of how things work there.

What you need to do is: Select the layer with your text, press Q and *then* fill it with black (everything should appear red then). Now apply the noise filter and treshold, exit quickmask mode and you have 50% of the pixels selected. Everything else should work fine if you follow mahjga's tut.

kuckus (cell #282)

Aha that explains alot.
Thx a bunch.

Back to tut

Spellbinder.

Great job mahjqa. Its a very well written tutorial. Hes right, you don't need any thumbnails.

Ok it was one thing i had forget.
And be aware (not you oldies) you that tryies text.
REMEMBER TO RASTERIZE!!!

He well now that is cleared out (this was why i got greyed out layer via cut)
lets look at my result.

[url]http://podway.cstrike.org/baht/spell6.gif[/IMG]

(breaking the link)
(another try )

Since im not use to work with gif's i failed with the backgroundcolor.
I choosed the color in the palett but thats obviasly not how i do it.
Well i got the anim right anyway i think.

Spellbinder.

Edit:Now thats wired, didn't see that coming, i thought it was going to be all black.



[This message has been edited by Spellbinder (edited 08-05-2002).]

[This message has been edited by Spellbinder (edited 08-05-2002).]

[This message has been edited by Spellbinder (edited 08-05-2002).]

[This message has been edited by Spellbinder (edited 08-05-2002).]

That looks graet on a white BG, great job!! http://podway.cstrike.org/baht/spell3.gif


[This message has been edited by Wakkos (edited 08-05-2002).]

So this is the finished thing.
I can only hope i thought of everything now.

I read somewhere that the middle color of the both bgr on here was #2B0404.
So lets hope that is so then.
Btw how do you figure out the avarage between 2 colors like that?

Ok here it goes, its only 102k so i think no one gets mad on me for posting it (looks nervously around).



(is good to remember the adress to your site :þ

Spellbinder.



[This message has been edited by Spellbinder (edited 08-06-2002).]

Just have to try the other bgr.



Spellbinder.

Just thought I'd add this , its nothing special.

But if you create an action to:
select all
copy merged
new image
paste
resize

you dont really need Image ready, you could use something simpler, its just im sure those features Threshold and Noise go back to at least version 4 but I dont actually know.

Only thing that I would suggest for a GN tute: a nice sample image for foo's to work with. Preferably .png! =D Good job Mahjqa. I remember writing tutes for people like that. I saved a flash4 one that was about 3 pages long (rough estimate). The guy following it made almost the exact same thing following along! I was suprised. But just for those who are much more visually inclined, and those who are looking for something pretty to look at, some images would be nice. Images aren't needed in this rough draft, but at the moment, it's a bit lengthy. I think you could use an image here or there to take out a number of sentences, or even groups of sentences. imho of course.
PS: I started school last monday, and I've been trying to install my new motherboard for the past few days. I miss talking to you Mahjqa! =( I'll catch up with you soon.

Shine and shine.

As always, great work. Weird thing is, I was thinking about that sig the other day, and hadn't yet seen this thread. So, thanks for prognosticating that for me.

quote:

---

Preferably .png! =D

---

More like preferably .gif, but I know mahjqa would use a .gif. Btw, great tut. Not only do you teach people about noise, threshold, quick mask, AND the layer via cut tools, but they also get a very nice image out if it. New tools + new ideas + new techniques = a good tutorial. Nice work, mahjqa

Edit: yeesh, JUST when I thought I could make a post without editing it.. I had to go and spell "ideas" wrong Since I am editing my post, you can turn this into a real quick action (the "quick mask -> noise -> threshold -> normal mode -> layer via cut" portion). Make your layer active and start recording. A real time saver as you don't have to make 20 clicks. When (not if ) you submit this to GN, I'd suggest adding that as an addendum (sp) at the end.

But let people record their own

[This message has been edited by Raptor (edited 08-08-2002).]

Yeah im allready working on a action, actually i did the quickmask-fill-treshold-quickmask-layer via cut allready.

But i need to learn how to make it possible for anyone to put in their own txt or picture.
Haven't got that far yet
Search around a bit and haven't found how to make inputs like that.
Im thinking to extend it to image ready if its possible.

I could of course start recording after i did a pic or text.

Spellbinder.

Damn, I remember when Mahjqa was the new punk kid flaunting his flame sig and we were still figuring out how to pronounce his handle. Wow, man, major props to you Mahjqa, maybe I'm just impatient, but taking the time to write up a tutorial for a guy with a question, and then following up all these questions, that's just awesome. You've got a magic eight ball and everyside of the little blue pyramid on the inside says, "You will go far." I've seen some awesome work from you, and you always have the patience to explain how you did it when anyone asks the question, that's what this forum is all about and you prove it. So thank you, and godspeed, or something, I've gotta try some of these methods someday. Did you ever put out the method for the water ripple over the dolphin sig? I just found out for early Disney work, such as in the Little Mermaid and Pinnochio that they achieved underwater ripple effects by inserting corrugated glass between the cells. Fun stuff.


[dis]contempt+[.org]

quote:

---

water ripple over the dolphin sig?

---

If I'm not mistaken, he said he airbrushed it.

This is a spiffy tecnique, mahjqa.
Kudos, and thanks.
On the image thing, yea , for the GN pictures might be a good thing. Visual aids improve learning rate, and retention for most people. Just to reinforce that the tut-taker has done the right thing. For instance, when the noise layer is done ( to show distribution), and maybe the IR pallettes, for those unfamiliar with them..Like that.

I found it well written. If you follow your directions, it works fine. Only problem I had was counting.


Cell245

mahjqa: Add the mini-tutorial to the FAQ (it is turning into a nice little animation, painting masterclass area over there ):
http://faq.ozoneasylum.com/724/

I think db is on the money that when you transform this into a tutorial for the GN some pictures of the various stages would be good - as well as being a good educational technique they help to break up large blocks of text which seems to give some people cold sweats (naming no names).

___________________
Emps

FAQs: Emperor

hmmmm, looks a little sketchy on the edges. is that a result of down sizing it or because all of the straight edges are at an angle? any sugestions before this thread burns up? BTW nice tutorial majhqa i havent had that much fun in a while.

EDIT-had to delete [IMG], host ran out.

[This message has been edited by punchdrunk (edited 08-31-2002).]

other bg just for kicks

EDIT-had to delete [IMG], host ran out.

[This message has been edited by punchdrunk (edited 08-31-2002).]

I think I got it. I did cut a few corners, though.




[This message has been edited by warjournal (edited 09-07-2002).]

Just a thought, but would a polar coordinates version be possible? Or would the filter distort the pixels too much to be effective?

I may have to try that sometime, if I ever decide to get off my lazy as and do it

Shit, Raptor, you had to open your mouth, didn't you?

Yes, possible. Lot's of grunt work and I suggest getting to know "Record Again".


[This message has been edited by warjournal (edited 08-19-2002).]

If I didn't think of it, you would've eventually I'll give it a go sometime later. IF (big if) I get anything interesting I'll show it.