It shows that you are unregistered. Please register with us by clicking Here
Go Back   Blogring.net - The Premier Myspace & Xanga Community > Tutorials > Tutorials -Web Graphics

Tutorials -Web Graphics Traditionally tutorials that explain different file formats for the web, transparent images, saving for the web, etc. Also for web-specific graphics such as signatures, avatars, etc.

Reply
 
LinkBack (9) Thread Tools Display Modes

Ps/ IR: [ Smooth Animated Falling Snow ] by Dreamstar7
Old 12-15-2005, 10:58 PM   9 links from elsewhere to this Post. Click to view. #1 (permalink)
I got 1,500 posts!

 
dreamstar7's Avatar
 
dreamstar7 is offline
Join Date: Jan 2005
Location: somewhere between heaven and hell
Posts: 2,157
dreamstar7
Points: 2,323.00
Ps/ IR: [ Smooth Animated Falling Snow ] by Dreamstar7

Tutorial Written by: [Only registered and activated users can see links. ]

Adobe Photoshop 7+, Adobe ImageReady
Difficulty: 6/10

Hmm. I remember a long time ago, someone asked me if I could teach them to use ImageReady, and how to do the snow effect. I didn't know how, so I messed around for a while. Now I'm writing a tutorial on it. How weird.

Okay! So. This tutorial will teach you how to make smoothly animated falling snow in Photoshop and ImageReady. Sorry if there's already a tutorial out there, but I did search for one, and didn't find any.


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 top. 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 bottom.



.............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. ^_^

----------------------------------------------------------------------------------
tutorial copyright dreamstar7 @ blogring.net

ONLY POST IF YOU HAVE A QUESTION, ANSWER, OR SUGGESTIONS IN ADDITION TO THE TUTORIAL.
You may also post your results from this tutorial.
__________________
Something tells me I've been on this forum for way too long.

Last edited by standing ovation; 11-09-2006 at 12:33 AM..
  Reply With Quote
Sponsored Links

Old 12-19-2005, 06:23 PM   #2 (permalink)
I got 1,500 posts!

 
sweet serenity is offline
Join Date: Apr 2005
Posts: 10,111
sweet serenity is an unknown quantity at this point
Points: 10,328.00
It's animated. Step 11 didn't make sense since if you moved it, it wouldn't be exactly the same thing, now would it? XP Everything else works. Good job, Zeph. ^_^
  Reply With Quote

Old 12-20-2005, 06:46 PM   #3 (permalink)
I got 1,500 posts!

 
dreamstar7's Avatar
 
dreamstar7 is offline
Join Date: Jan 2005
Location: somewhere between heaven and hell
Posts: 2,157
dreamstar7
Points: 2,323.00
No, it would be.......... since you have two of the same exact "snow" formations placed one on top of the other in the same layer.

Like.... your layer would look something like this.

snow
snow

Except only the bottom "snow" would be seen. When you move the layer down, only the top "snow" will be seen. But it'll look exactly the same because the two "snow"s are identical.

...........Is that confusing?
__________________
Something tells me I've been on this forum for way too long.
  Reply With Quote

Old 12-24-2005, 06:04 PM   #4 (permalink)
Junior Member
 
randomsh0ts_x is offline
Join Date: Aug 2005
Location: New York City
Posts: 13
randomsh0ts_x
Points: 13.00
It's animated.
I lost track at step 11. When you said 'move it down', do you mean just the frames? Or the layers?
__________________
[Only registered and activated users can see links. ][Only registered and activated users can see links. ]

PENGUiN OVERLORD.
CALLED BOB.
OWNS A PENGUIN S.W.A.T TEAM.
ISH VERY KEWL.
  Reply With Quote

Old 12-25-2005, 05:23 AM   #5 (permalink)
I got 1,500 posts!

 
dreamstar7's Avatar
 
dreamstar7 is offline
Join Date: Jan 2005
Location: somewhere between heaven and hell
Posts: 2,157
dreamstar7
Points: 2,323.00
Just the snow layer. To make the snow "fall."

Editing. ^_^ Thank you for pointing that out.
__________________
Something tells me I've been on this forum for way too long.
  Reply With Quote

Old 01-27-2006, 12:26 AM   #6 (permalink)
Junior Member
 
lovelydove is offline
Join Date: Dec 2005
Posts: 5
lovelydove
Points: 5.00
When we do the canvas size, how do we get rid of "canvas size extension color" on the bottom of the Canvas size window?
  Reply With Quote

Old 01-30-2006, 10:10 PM   #7 (permalink)
I got 1,500 posts!

 
dreamstar7's Avatar
 
dreamstar7 is offline
Join Date: Jan 2005
Location: somewhere between heaven and hell
Posts: 2,157
dreamstar7
Points: 2,323.00
.... I don't know about that. Mine is kind of grayed out, like it's not a choice. I think that's because my background color (of the canvas) is transparent. Yours is probably white or black or whatever.
__________________
Something tells me I've been on this forum for way too long.
  Reply With Quote

Old 02-02-2006, 06:23 PM   #8 (permalink)
Junior Member
 
lovelydove is offline
Join Date: Dec 2005
Posts: 5
lovelydove
Points: 5.00
.....I don't know why, after step 7 (resize the canvas, anchors and stuff...) my orginal picture doesn't come back. The only thing is there is the color canvas. Please reply my question! Thank you so much.
  Reply With Quote

Old 02-05-2006, 05:36 AM   #9 (permalink)
I got 1,500 posts!

 
dreamstar7's Avatar
 
dreamstar7 is offline
Join Date: Jan 2005
Location: somewhere between heaven and hell
Posts: 2,157
dreamstar7
Points: 2,323.00
Did you make sure it was anchored in the right places? Or maybe you moved the wrong layer on accident........ hmm........... there's a lot of things that could have happened.
__________________
Something tells me I've been on this forum for way too long.
  Reply With Quote

Old 06-17-2006, 09:59 PM   #10 (permalink)
Junior Member
 
Skyxsanctuary's Avatar
 
Skyxsanctuary is offline
Join Date: Jun 2006
Posts: 2
Skyxsanctuary
Points: 2.00
I dont get it..
i made one but the purple part shows..
__________________
Watch out for fangirls and Yaoi they're EVERYWHERE!
OMG Cuccos
When life gives you lemons.....SHOVE IT IN ITS EYE!
  Reply With Quote
Reply

LinkBacks (?)
LinkBack to this Thread: http://blogring.net/forum/tutorials-web-graphics/84647-ps-ir-smooth-animated-falling-snow-dreamstar7.html
Posted By For Type Date
Free Artists' Resources - Page 2 - The PokéCommunity Forums This thread Refback 01-13-2008 09:11 AM
^The One Above - Page 568 - The PokéCommunity Forums This thread Refback 12-23-2007 03:21 PM
^The One Above - Page 568 - The PokéCommunity Forums This thread Refback 12-23-2007 09:32 AM
^The One Above - Page 568 - The PokéCommunity Forums This thread Refback 12-23-2007 05:40 AM
^The One Above - Page 565 - The PokéCommunity Forums This thread Refback 12-17-2007 01:24 PM
^The One Above - Page 565 - The PokéCommunity Forums This thread Refback 12-17-2007 04:03 AM
Free Artists' Resources - Page 2 - The PokéCommunity Forums This thread Refback 12-11-2007 07:25 AM
aznxc0nfused: Tutorial Index [PS, PSP, & IR] This thread Refback 01-07-2007 01:13 PM
wHeN tHe SnoW mEltS, WhAt d0eS iT b3cOmE? This thread Refback 01-07-2007 09:19 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On




All times are GMT. The time now is 02:46 PM.



Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0