Welcome Guest
[Log In]
[Register]
- RealEmotion
- →
- Tutorials
- →
- Graphic Tutorials
- →
- Animation
- →
- Smoothly Animated Falling Snow
| Welcome to RealEmotion. We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Smoothly Animated Falling Snow | |
|---|---|
| Topic Started: Apr 18 2006, 03:45 PM (23,845 Views) | |
| dreamstar7 | Apr 18 2006, 03:45 PM Post #1 |
Battle of the Sexes Winner!
|
Remember a while ago, there was the Freestyle Animation SOTW, and people said they could never get their snow to fall smoothly? Here's a tutorial on it (which I copied and pasted from the one I submitted at Blogring.Net because I'm lazy. XD) PART I: SNOW [1] Open up the document you want to have the snow on in Photoshop. Find out what size your document is. I will be using this banner, sized 475px by 175px:  [2] Make a new document that is exactly the same size as your original document. Fill in the background layer black. This is for visibility issues; there won't really be any black in your animated snow. Now take your brush tool. Select the default 17px soft brush (it looks like this. If you can't find the brush, then in your Brushes palette, click on the little arrow in a circle on the right side and click "Reset Brushes"). In your brushes palette (windows >> brushes), change the options as thus: Shape dynamics (checked) -Size jitter: 100% -Everything else: 0% / unchecked Click for screenshot. Scattering (checked) -Scatter: 1000% -Count Jitter: 100% -Everything else: 0% / unchecked Click for screenshot. Other dynamics (checked) -Opacity jitter: 100% -Everything else: 0% / unchecked Click for screenshot. Everything else you can leave as default. [3] On the new document with the black background, make a new layer. Take your brush and brush gently over the canvas. MAKE SURE THAT NONE OF THE "SNOW" IS TOUCHING ANY OF THE SIDES. This is very important. If any of the snow is touching the sides, it will no longer be smoothly animated. Try to get the snow as close as possible to the sides without actually touching the sides. Mine turned out like this:  [4] On the snow layer, hit Ctr+A to select all, then Ctr+C to copy all. Go back to your original document and paste the "snow" layer on top of everything else. If you have a border on a separate layer, it's okay if you paste the snow just underneath the border layer. Now change the blending style of the snow layer to "soft light."  [5] Now for the slightly tricky and time-consuming part. Go to Image >> Canvas size and make the height of the document two times the height of the original document. For example, my banner is 175px high, so I'll make the new height 175+175=350px high. Anchor the document to the bottom center (see circled squares on screenshot).  So now, mine looks like this:  (Disregard the purple background; that's just the color layer I put on the banner.) [6] Okay. This is why this part is annoying and time-consuming. Go back to canvas size and resize it again, but this time, the height should be the original height of the document, and the anchor should be at the top (see circled squares in screenshot).  Now paste (ctr+v) the same exact "snow" on a new layer on top of the first snow layer. Change its blending mode to "soft light" as well. So now mine looks all purple with snow, like this:  [7] We're going to resize the canvas again. Go image >> canvas size and make the document two times in height, anchored at the bottom. Just like step 5.  .....and mine looks weird again, like this:  [8] Resizing canvas again. Image >> canvas size one more time and make the document the original height, anchored at the top.  .............and now mine is back to normal. Yours should be too. The purpose of these last four steps, with all the canvas resizing, is to space two identical "snow" sections evenly apart. Whenever you paste something, it is always pasted into the center of the document. Since we want two "snow" sections to flow smoothly into one another when we animate it, we resized it to make sure that that is what will happen. (If you didn't get that paragraph just above, don't worry about it. It's not that important.) [9] Merge the two "snow" layers together (ctr+e). Now duplicate (ctr+j) the layer twice. If you feel your snow is too bright, then you can lower the opacity of the top "snow" layer, or make only one copy of the original snow layer. Link all of the snow layers together by clicking the boxes next to the eye (see screenshot).  ..........And now we're ready to animate! At the bottom of your tools palette (windows >> tools), click the  button to switch to Image Ready. If you can't find that button, don't worry. Just save your document somewhere, open up ImageReady (start >> all programs >> adobe >> image ready) and open your document up in ImageReady.PART II: ANIMATION [10] In ImageReady, you'll need two palettes: the Layers palette (windows >> layers) and the Animations palette (windows >> animations).  In your Animations palette, duplicate the first frame by clicking the "duplicates frame" button at the bottom of the palette. (click for screenshot) [11] Now, get your move tool and, by holding down the "down" arrow key, move the snow layers (only the snow layers!) down until the top of the layers are close to the top of the document. You could also use the move tool to move the layer by hand, but by doing so, you risk moving the snow off-center, which will make a break in the animation.  If you can't see those blue lines, that's okay. The two frames in your animations palette should look identical. To check, click on the first frame on the animations palette. Then, keeping your eyes on the screen, click on the second frame. If nothing changes, then you've got it right. (If you're trying to do that and the blue lines are messing with your vision, then select some other layer besides the snow layer, and click back and forth between the two frames.) [12] At the bottom of your Animations palette, click the "Tween button." (click for screenshot). Use the following settings (with the exception of "Frames to Add"):  The number of frames you add depends on how fast or how smoothly you want your snow to fall. If you want your snow to fall relatively fast, add less frames. If you want it to fall slowly and more smoothly, add more frames. For mine, I added 30 frames, which gives me a pretty good speed. It's not too slow and not too fast, and the animation is smooth and not choppy. Be warned: If you add too little frames, the animation will look jerky and awkward. After you've entered the number of frames you want to add, click "OK." [13] Your Animations palette should now look something like this:  You're almost done! Just a few details you should pay attention to. First of all, make sure that your animation is going to keep going on forever. In the image above, at the bottom left hand corner, there's a dropdown menu with the word "Forever" circled. That shows how long your animation will keep going. For this effect, we want it to go on forever. If it doesn't say that, then click on the dropdown menu and select "Forever." Secondly, since the first and last frames are exactly the same, you're going to have two identical frames, causing a break in the animation. To get rid of this, delete the very last frame in the Animations palette. (To delete a frame, click the trash can button just to the right of the "duplicates frame" button.) For me, I deleted frame 32. And that's it! You have made smoothly animated falling snow! Here's my final product (size down because the original size made the file too big to upload to ImageShack):  (I hope it's animated. I can't see it because my computer is messed up and won't let me see animations. Just tell me if it's not.) I hope this tutorial was clear and easy to understand. Feel free to ask questions if you don't understand something. 
|
 |
 
|
| Miss. Housewife | Apr 18 2006, 08:25 PM Post #2 |
I AM LILIAN
|
I lvoe this tutorial...but I dont quite get the um..canvas size part..do I duplicate the snow layer then do canvas size? |
|
|
|
| +Kitzutsuita | Apr 19 2006, 02:09 PM Post #3 |
|
.-|-.
|
Oh wow!!! I love this tutorial 
|
|
|
|
| Miss. Housewife | Apr 19 2006, 04:23 PM Post #4 |
|
I AM LILIAN
|
I used it not so long ago..but the animation got messed up...I am too lazy to fix |
|
|
|
| dreamstar7 | May 11 2006, 07:47 PM Post #5 |
|
Battle of the Sexes Winner!
|
You don't have to..... I normally do the canvas resizing first so that I won't mess up and misalign the duplicated layers on accident. (If you get what I mean.) It's up to you, though. I'm not exactly clear as to what you're asking. The only time you need to duplicate the layers is to make the snow more visible. There isn't really any duplicating layers around the canvas resize section. |
|
|
|
| +hao. | May 11 2006, 11:34 PM Post #6 |
I love w-inds.
|
Oh, wow. Lovely tutorial!! Seems complicated. Haha..super nice results! |
|
|
|
| Tidus | May 16 2006, 06:37 PM Post #7 |
|
nice tutourial u go there.. |
|
|
|
| MoonPixel | May 19 2006, 04:07 PM Post #8 |
 
|
Nice Tutorial, long, but works well... |
|
|
|
| polishwizard | Jun 1 2006, 06:18 PM Post #9 |
|
great tutorial, i used it and this was the final result. i added an extra layer of the snow behind the main pic to give it more depth.
|
|
|
|
| Kay247 | Aug 16 2006, 12:04 PM Post #10 |
|
Unregistered
|
I have yet to try this tut but I can already see that its a lot better than the other falling snow tut I have tryed on another website.Thank you very much for putting this tut up
|
|
|
|
| pinkfate | Oct 27 2006, 07:27 PM Post #11 |
|
Hi, firstly would like to comment that you have a really great guide.. I managed to make 1 siggy with it and its really nice  Was wondering if you can help me here as I can't seem to make it work from step 6 onwards when I tried to do it the second time. During step 6:   From the screenshot it seems like my background disappeared. Did I made a mistake somewhere cos when I tried to proceed to step 7 which is a repeat of step 5, I got the following.  And the result  
|
|
|
|
| ColorBlind//JasonXiao | Dec 7 2006, 06:44 PM Post #12 |
|
Hey, this is a fantastic guide! I got it to work but I have a few questions that I thought I could ask here since its where the guide is! I want the snow effect to be on my webpage at http://colorblind.clanservers.com and I suck at this design stuff, so i was wondering if soemone could tell me how to get the snow effect on the site?! Also, after I make a picture with the snow effect, I can only save it in .psd and I was wondering how to get it into a .gif or soemthing
|
|
|
|
| NESS | Dec 12 2006, 04:47 AM Post #13 |
|
thanks dreamstar7 nice stuff
|
|
|
|
| MysteryProne | Jan 4 2007, 09:52 AM Post #14 |
|
I simply loved this tutorial Thanx a lot
|
|
|
|
| shadesinzs | Jan 6 2007, 09:33 AM Post #15 |
|
can anybody tell me where to download the programme or software used to make the snow?? |
|
|
|
| xYunaxFantasiesx | Jan 6 2007, 12:46 PM Post #16 |
|
My avie pwns yours.
|
You can use Adobe Imagready, it comes with Adobe Photoshop 7 and up. It's not a freeware program but you can download the trial at adobe.com |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Animation · Next Topic » |
| Track Topic · E-mail Topic |
 3:48 AM Nov 25
|
Skin created by Valleri. Find more great skins at the ZB Theme Zone.
