I needed, at some point, a “fire animation” that would be:
1. looping seamlessly
2. horizontally tile-able
I googled and I googled, in vain – I couldn’t find anything but a small tutorial about blending modes. So I took on doing it myself and with some Photoshop scribbling, I got what I wanted – something like this:
How can you too do something like this? Perty simple, just follow the steps in my tutorial:
(Romanian version here)
Note: I just launched a new design-related site, with a dedicated blog (I also copied and translated in English all my tutorials there). The site is called Templatix.org and is dedicated to providing all sorts of free resources, the most important being the free templates, ofcourse. Templatix is all about free templates – website templates, css templates, you name it. But that’s not all. I give you an intelligent search tool and a collection of well described templates, enabling you to search and find exactly what you need, quicly and without having to browse through thousands of pages. You’ll also find a great, easy to use online banner maker, a comprehensive collection of the best online free fonts out there – well categorized, previewable in any text you like and ready for download.Color is important too. A template’s color space says a lot, and you’ll find an exclussive online tool to preview how a template would look in different colors. In the end, if you feel the need for help, I’m here for you, ready to answer your questions, to directly help you re-design, re-code or to completely transform a template, alongside useful tutorials on our blog. I’m permamently thinking of new ways of making your web-designer life easier, designing new tools and utilities for you. So I invite you to visit Templatix every once in a while and check for news and updates. Enjoy your search!
Part One: The Flames
1. Open Photoshop 2. Create a new file: File > New…
3. In the Tools Paletter, set the Foreground to WHITE and the Background to BLACK:
4. In the Layers Palete dublu-click the Background layer
… a new window will open:
give a new name to the layer, then press OK (this will unlock our layer, which is going to help us later) 5. With the new layer selected, go to the main menu and choose: Filter > Render > Clouds. This will fill our canvas with something like this:
6. Duplicate our layer (right-click it > Duplicate Layer… > in the new window give it another name – I chose “background fix” this time) 7. With the new layer selected, press CTRL + F (this will repeat the Clouds effect used earlier, since we’re going to need 2 different patterns to add realism to the flames). The layers palette will now look something like this:
Next there’s a series of steps that we’re going to repeat for each of the 2 layers, with the purpose of making them seamlessly tile-able. I’m going to explain these steps for the “background mobil” layer first, but you’re going to repeat them for the “background fix” layer too, afterwards 8-1. Hide the other layer, by pressing the “eye” icon in the left, to see what going beneath it:
8-2. Duplicate the “background mobil” layer (you should already know how, by now) 8-3. Shift the new layer to the right, sso that the two would stick precisely at the right edge of the canvas (if you press the “Shift” key while dragging, you’ll make sure that the move will be limited to the horisontal/vertical – we’re interested in the horisontal – to ensure a proper alignment of the layers):
8-4. Shift together the two layers to the lef, so that the stitch line would reach about the middle of the canvas:
8-5. Once the stitched perfectly aligned, merge the two layers into a new one, selecting thwm with “Shift” and then pressing CTRL+E 8-6. Now you KNOW for sure that whatever starts on the left continues on the right. But we still have that nasty-looking stitch line To make it dissapear, I suggest you use the “Stamp” tool,
with proper brush sizes, chosen to achieve an unnoticeable, smooth stitching at the half of the canvas (I’ll just assume you DO know how to use this tool) 9. Repeat the steps 8-1 through 8-6, only this time for the “background fix” layer (this, ofcourse, after re-making it visible) 10. Select again the “background mobil” layer and create above it 3 new layers, by pressing the “create new layer” button:
Let’s take care now of these 3 new layers (before anything, though, hide again the “background fix” layer so you can see what’s going on beneath it): 11-1. Fill Layer 1 with White (Edit > Fill… )
11-2. Right-click Layer 1 > Blending Options:
Press OK 11-3. In the Layers palette, set the Fill parameter for Layer 1 to 0 (zero)
Note: We created here a gradient that will define later what’s dark and what’s visible flame. You can always use the brush and define other shapes, for instance an isolated flame, if you wish. It’s all up to your immagination. 12-1 Fill Layer 2 with the HEX color ffa800 (R:255; G:168; B:0):
12-2. Set the “Blending Mode” for Layer 2 to “Color Dodge”:
13-1. Like in step 12-1, fill Layer 3 with the HEX color ff7e00 (R:255; G:126; B:0) 13-2. Like in step 12-2, set the “Blending Mode” for Layer 3 to “Color” 14-1. We’re getting again to layer “background fix”. First of all, right-click it and choose “Blending Mode…”, and in the open window go to “color overlay”, set “Blend Mode” to “Darken” and the color to a pure yellow (HEX ffff00 (R:255; G:255; B:0))
14-2. Like in step 12-2, set the “Blending Mode” for the layer to “Color Burn”
Goood, we’re now through with the first (static) part of the tutorial. If you followed through correctly you should now have something like this:
If you want to see it animated, shift a bit the “background mobil” layer up and down, and you’ll see the flames catch life. With a CTRL+Z put the layer back – we still have work to do with it.
Part Two – The Animation
To create the feeling of a rising flame, we’re going to have to move the “background mobil” layer upwards, on an exactly 2-canvases distance, in order to get a complete loop. For this, we’re going to have to repeat, with some differences, the steps 8-1 – 8-6, only this time on the vertical: 15. Start by hiding all the other layers:
16. Duplicate our layer and move it upwards, (always keeping the “Shift” key pressed, for alignment), exactly to the point where the stitching line between these two layers would be on the top margin of the canvas. 17. Select the 2 layers and bring them down together, with the stitching line at about the half of the canvas, to make sure they’re perfectly stitched and aligned:
18. Selecting the duplicate layer, flip it upside-down (Edit > Transform > Flip Vertical). You’ve just got yourself a nicer, perty fine stitch between the two, much finer than before the “flip”.
19. Merge the two layers into one (select them together with the “Shift” Key, then press CTRL+E) 20. Duplicate again the newly obtained layer and repeat the “stitching” – one layer on top of the other. We should now have a 4-canvases-high layer, something like this:
If you start moving this long layer up and down, you get the exact feeling of rising/falling flames. Find the file with everything we worked on, so far, here; I’ve also created an Actions set for you which, played in Photoshop, will pretty much take you step by step through all the above (get it here). If you want to save a looping animation from this, I have a couple of tips for you: 1. Given that you’re never going to use such a BIG animation, I suggest you start from this file and make a smaller one – say about 200x200px (Image > Image Size…) 2. Align the bottom layer to the TOP + LEFT margins of the canvas 3. Save the image 4. Shift upwards the “background mobil” layer with 10 pixels (SHIFT + up-arrow) 5. Save the new image 6. Repeat steps 4-5 several times, till you get all the necessary files (2 canvases height) (at a 200px height and a 10px step you’ll need the first image plus 39 times the steps 4-5) Once again, here’s what you’ve been sweating for:
Wow nice, best fire tut i have ever seen 🙂
..
thanks, David 🙂
Woha! Great tut man!
actually.. i still don’t get it and i still not get the result like what you did….
jimmy: well you still have the finished file ready for download… other than that, without you giving more details of what you actually did, I don’t know what to tell you…
😀 nice one dude!
hmmm… i got all the pics saved as jpg (61 in all for a full loop).
what do i do now? i mean, how do i make an animation out of the pics?
thanx,
franco
errrr… never mind my question, already found what i was doin’ wrong.
i just never knew it was possible to see animations in photoshop…
and you’re right… it only takes 40 pics for a seemless fluid animation.
thanx,
franco
francozero: good work, man! I’m glad I was explicit enough 🙂
well i did get the final product and i got the images saved, but how do i connect them into an animation???
never mind i figured it out, looks great though
hey, I still dont understand very well what to do at the end. I mean, I don’t understand what you mean with “save the image” and how to loop it
Leo: an “animation” is made up of a sequence of frames, right? What you need is this sequence of images, saved individually one after another (pretty tedious, I know…) (something like frame01.jpg, frame2.jpg… frame40.jpg) and then you’ll need to assemble all these frames into a single animation in a program like ImageReady or Flash
ImageReady works great, although when you have each image on a new layer and try to animate it, i found that for some reason all the images become skewed and off center, so i had to go back and realign all 83 frames by hand!!! took me 6 hours but it looks great…
zyn: quick tip: create in Photoshop another action that would only do one thing: move the “background mobil” layer by the desired number of pixels; assign a shortcut key to that action. from there on, all you have to to is to repeat these 2 steps: A. call that action; B. Save with an incremented name…
i cant seem to know how to make it loop…can anyone tell me wat image wat top ut after the last one…
keke – I reccomend you ImageReady / Flash / any other program capable of taking an image sequence and make an infinite loop out of it… There are plenty of tutorials on this… This tutorial was about Photoshop effects – a matter for more advanced users… If you still don’t know how to make an animated gif, then perhaps you should try some tutorials for beginners first, then come back again 🙂
lmao i know how to make some animations…and im using image ready…and i was just asking wat image should i use for the last part to loop it…>.
This is abosolutely amazing.
keke: “trial and error” is the name of the game… 🙂
You spelt pretty “perty”!?!?!?!?!
What. The. Fork! nOOb!
Urrrgh you disgust me.
Yep, “perty”. I’m a teacher of English as a foreign language, so I can afford to make whatever “poetic licence” I want, in what I write. I was hoping for some feedback on the tutorial though, not on this 🙂
Crazy good man!
wou beautiful tut and very well explained!!! It took me less than 1 hour to finish it…
great work you continue like that grazie bambino 🙂
grazie dalila, è un piacere rittrovare anche degli italiani fra i miei lettori 🙂
yo dawg that is off the heezie
word up jagger yo da man LOL
Nice. Thank you.
What a load of old Crud. I cant understand a word of this. Can someone please translate the ramblings of this polish TARD?
Kip: what are you talking about?
Hai thnx its worked but
i couldnt get the animation….
i didnt get u these 8-2, 8-3 options pls tel me
Worked out great! Good idea. Just using save for web made it suit what I wanted… nice. Thanks
Thanks….
I is very Natural look
baba: I edited the explanations a bit, this should help… read carefully
battlesound, vaelumani: thanks for the kind words 🙂
Well, my question is this: when you finish a tuto in image ready what is the next… i mean how can i use it?
If a save it as a gift in image ready what can a i do to use it for example in power point with the animation?
Gracias David excelente tuto…
Janet, sorry but you’re completely OFF-topic
1. The tutorial is about how to CREATE, not HOW TO USE. I won’t make tutorials about how to use the computer either…
2. Who the fuck is David? Did you even read my name?
Eros,
I’m not very experienced with PS but am determined to complete this great tutorial with a little help. At present i’m stuck on 8-3, I pressed ‘shift’ and doubled clicked on the new layer but when I drag it over to the main canvas to line it up it dissappears when i drop it.
I know I’m doing something realy stupid and a quick tip would set me off again. Thanks.
swog: it is only NORMAL for that second layer to dissapear.
If you check the image below 8.3, you’ll notice that the square labeled “2” is grayed-out. what does this mean: it means that the new square is outside the canvas – hence, invisible.
You’ll also notice next, in point 8.4, that I suggest you should move the two layers to the left, together.
How to accomplish this: in the Layers palette, select both these layers (just like selecting files – with CTRL or SHIFT and click); then, in the Tools palette, select the Move tool, and drag both layers to the left. You’ll see the second layer appearing from the right 😉
If you still have questions, leave them here and I’ll try to respond as fast as possible
Just seen your reply, Eros.
Firstly thanks for your quick answer to my problem and for doing so in an easy to understand way. I understand much better now and can’t wait to get going again.
Cheers mate. 🙂
swog: you welcome, man, glad to help 🙂
I am feeling vewr well
This flash fire effect is incredable effect in flash.Thanks Mallimapatti, M.Velumani.
This fire effect is incredable in flash to me. M.velumani, Malliampatti.
This fire effect is incredable in photoshop to me. M.velumani, Malliampatti
Eros,I managed to follow your instructions in an hour or two, bringing me to the animation section. The following instruction have got me stuck:
2. Align the bottom layer to the TOP LEFT margins of the canvas.
Does it mean align to the Top and then the Left or the Top Left.
Either way, not being Red Hot with PS if you have the time to expand on this final section (has you did for me earlier) with maybe a screen grab, I would be forever grateful. I’m on the final leg now and want to see the finished result.
Swog. 🙂 🙂
swog: the “bottom” layer is the one with a height 4 times the height of the canvas, right? So, in theory, if you “pan / slide” this layer, vertically, you have 4 canvas lenghts for it to slide. This sliding gives the “animation” effect. What you need to do is to “record” (save) the “frames” of this “animation”.
For this purpose, I suggested you aligned the top-left corner of the “bottom” layer to the top-left corner of the canvas (a kind of “starter” position), then save the image, then shift the “bottom” layer upwards with 10 pixels (SHIFT UP ARROW), then save the image again etc – until you finish saving all the frames. Hope this helps…
I’m with you now, getting going again.
Thanks Eros.
you welcome man 🙂
please show me what you used it for, when you’re done 🙂
yaar i am through with all the steps and i get the flames right but i cant animate them though its easy in after effects and premire but i wanna still wanna do this in photoshop/image ready
hussain: photoshop is NOT an animation program, but, if you save all the frames correctly, you can later assemble them in any animation-capable program. Hint: did you try to use the “Animation” Palette? More recent versions of Photoshop include this, too…
i know but cant we animate it through image ready?
Great tutorial, the output looks really good!
FYI, steps 8-2 to 8-5 can be done in one step with the Offset tool. You don’t need to manually offset the layers and join them back together.
Choose Filter -> Other -> Offset… and type 400 into the horiz box and 0 into the vertical. Ensure that the radio button “Wrap around” is set and press OK. Obviously the same thing can be applied to the vertical axis.
hussain: feel free to 🙂
good fire but horrible tut didnt walk it throgh very well
matt: I’m always open to criticism. what would you change in this tut to make it less horrible? I worked on it an entire morning, trying to illustrate and explain every step as well as I could. I did start from the idea that the people trying to walk through this tutorial have a minimum of Photoshop knowledge – it’s not a simple one, after all…
so… tell me pls how you see this one improved.
[…] « razbunarea spammerului Fire in Photoshop – seamless animated loop […]
Excellent Work…!
hey i dnt get what you want 2 say at the end.you dnt explain how you get the last result.things are not cleare. we start doing with full enthusiasm but at the end you all mess it.its irretating. plz dnt submit tutorial untill you give full steps.
you should provide image of steps to clearify the steps.you left last steps images which are most confusing. verbly we can stand but after seeing we know we are heading towards right or not…
i animate what you tell through animation in photoshop. but the sad part is that is not working like yours. its playing as slide is playing.
woho, slow down roops! I’m here, trying to figure out what you need help with. so please try to be more specific and to explain what’s going wrong, ok?
now finaly with full R&D i think last steps can be made more simple…animate it in photoshop and open in it emage ready.things can be bit simple.but still ddnt get animation like you.
roops: my tutorial was less about animating, and more about obtaining a set of frames. what you use to turn those frames into an animation is your decision, and there are plenty of options available.
again, let me highlight: it’s more about the visual efect than about animation techniques. I hope that, at least from this point of view, my tutorial helped you.
yaaa……. its looking nice.:).its realy nice.actaully its not working the way i want thats why i loose patience. now things r fine n keep working.. good job, also tell us good,new technique in animation.
good to hear that, roops 🙂 keep it up
hi!!!can u help in sorting one of my problem.i have a pic, that I’m not able to attach in that pic thumbnail and full view is different of the same pic.. Can u tell me how it can be done…
roops: do you even understand what you wrote there? I understand that you’re not a native english speaker, but in order for me to help you, please revise your question and ask it again giving more details of what you actually want.
see i want to ask that i have an image and of that image thumbnail view and open view is different.I tried to attach that image but here is not posible. i tried to do it in Exifer, but still not happening. can you give me any of your ID I’l send you that image then you will understand what I’m trying to say.
roops:
1. the generation of a thumbnail is the responsability of the program you are using to view the images with (Explorer / ACDSee / Irfan View etc.)
2. Each program has its own algorythms for creating thumbnails
3. Generally the thumbnails are stored in hidden-file-databases, separate from the files themselves. so you cannot alter the thumbnails manually
this is what I currently know about thumbnails…
yes it can be changed.I have one image like that.thats y I’m saying give me any E-mail ID I’l send you dat image.Paste in any folder and then view the tumbnail and open view.And u will see wthat i’m trying to say.
dude it didnt work
BAD INSTRUCTOR
u got to explain more and try to put more detail in what to do
guy: this tutorial is not intended for firs-time-photoshoppers. it takes you step by step, with dozens of illustrations, following each step. it’s NOT the purpose of this tutorial to teach you how to use photoshop, but instead it’s aimed at helping existing photoshop users to accomplish something a bit more special.
p.s. don’t expect others to “put more detail” when you yourself don’t care enough to ask more specifically… other readers asked more to the point and I did help them – you should see this in the previous comments…
take care now.
really nice tut, but haven’t tried it yet. 🙂 do u use flash too? beside imageready
Great tutorial, this is exactly what I was looking for.
It looks nice and I like how you can control the shape of the flames by editing the overlay gradient layer.
I used a regular layer with a gradient, and set it to color burn, not a layer effect like in this tutorial, but works the same.
Thanks!
5721: you can see that I used Flash to assemble the image-sequence, not IR
Gabe: you welcome, man. it makes my day to know my little tute helped somebody 🙂
“Purty”, dude, but does not tile well horizontally. You can see the seems on this page. You need to make the right and left edges of your image match
Sorry
Luis
Luis: I took care of the horizontal seaming too, if you read carefully you’ll understand where… you’re really the only one who says that so far…
Dear David,
There is sum thing missin in your tutorial coz when i tried it in photoshop 7 version, first of all if the canvas is of 800 x 800, then how could u place both layers side by side, then comes about the image which u have shown in 12-1 in which u show us use Edit-Fill_color option in that, that also i didnt get it there and also right. Then when did u rotate the canvas and bring it to the vertical position. Then also please tell me that total how many layers are u workin with as i am hereby find very fond of fire and will be working this as a theme for my next website. So if you please tell me how to work it out with less complication. it would be better from your end. Thank you in advance to this tutorial.
“20.Duplicate again the newly obtained layer and repeat the ‘stitching’ – one layer on top of the other. We should now have a 4-canvases-high layer, something like this:”
can you give me a more specific explanation??
having trouble understanding…
“Duplicate again the newly obtained layer and repeat the ‘stitching’ – one layer on top of the other. We should now have a 4-canvases-high layer, something like this:”
how do you do the step 20?
kinda confuse here…?
thx!
Can you just make a video of yourself doing this plz. I’ve read the directions and other people’s posts, but I still can’t *shift* the layer or whatever.
very nice tutorial and i like the effect of the fire and i kinda understand the loop for the imageready 😀 but damm man 39 times?! man, thats alot -_-…anyway thnx for the tut and finaly i can make my own fire animation 😀
Vijay: First of all, who is David? My name is Eros.Now, sorry, if you didn’t get at least THAT clear, I tend to believe that you skipped a few steps and explanations in the tutorial. And all steps are important, since skipping one makes all the rest useless. So, my advise to you is: try re-doing it, this time paying more attention. Come on, so many others got it, you will too!
“student project”: at step 17 I explained how to “stitch” 2 layers (visally), in order to get, from those 2 layers, a single layer in step 19. Then, in step 20, I just explained how, starting from this resulting layer, you should repeat the operation from steps 17-19, in order to get a single, tall layer, as the one in the image at step 20.
Shock: you’re not the first one to propose this idea to me: I just plain suck at live (or recorded, for that matter) presentations, that’s why I never made this a video-tutorial in the first place 🙂 Shifting a layer, in my vocabulary, means Tilting it, or moving it sideways. This can be accomplished better by holding down the SHIFT key whyle moving it – this ensures you’re moving it straight, keeping it in line, either horisontally or vertically, so that at the end of the operation the object remains aligned to it’s original position.
skullrage: i’m so glad you got it 🙂 and yes, 39 (40, including the original position) times in this case… for a faster flame, you could divide this and get to 19 (20 including the original) or even 9 (10 with the original). The idea is: halve the frames > double the distance between their positions. This means that, if for 40 frames you shifted each frame by 10 pixels, for 20 frames you’d shift them by 20 pixels and for 10 frames by 40 pixels… You get the idea…
yea
Hey, I’ve made an animation in PS CS3, how can I loop it? When I save as gif there a bottton which loops number, but it doesn’t seem adjustable, What am I missing, any ideas?
Cheers,
Seba.
This was a great help mate thanks, i followed everything but got stuck on step20. (sad) fortunately the file was there to download…
i need to save all the individual images for the animting, how do i create aan action to move the background mobil?
also my next step is to add this to an image to give the effect of something burning, do you have any tips…?
Hi, I tried to post also on Templatix, but no luck. I see the blog is no more updated but I try anyway 🙂
I was able to complete the tutorial and the result is absolutely stunning!
I have a couple of questions
1. is there any way I can have a transparent background rather than a black one?
2. can I shape the flames in any way? I’d like to have the flames to be taller on the left side and shorter on the right side
Again, thanks for this great resource. You should keep adding more stuff!
THE best fire tut i have ever seen !!!!!!!!!!!!!!!!!!!!!!!!! GOOD JOB DUUUUUUUUUUUUUUUDDDEEEEEEEEEEEE
@levani: LOL DUDE, you’re officially the most enthusiastic commenter, so far!!
Some steps are TOO explicit, while others aren’t explicit enough. Your tutorial assumes we don’t know how to “hide” a layer, but that we do know how to use the Stamp tool. It’s inconsistent and makes it difficult to follow. When people ask for you to be more specific, your reply is to re-read the directions (along with a patronizing “come on, other people got it, you’ll get it too!”). I read the directions: it says, “use the stamp tool”. So I just used a different method of seamless tiling altogether.
You’re right, some steps are too explicit, some not quite. But that’s because you can’t make a tutorial that will fit EVERYBODY like a glove. Plus, as I mentioned from the very beginning, this tutorial adresses the somewhat experienced user of Photoshop. Sorry about the patronizing tone, it must have been a bad day for me when I commented that 😉 If, in the end, you did manage to get what you needed, I’m happy.
Thank you very much! It worked after I did it 3 times!
Nice!!!
This is good but not understandable easily ….u must describe it like that a baby step so that every one will able to understand this. .. this is mainly for expert people….
\\\\\ thanks
@Johnny – you welcome!
@pradeep: I started the article saying that this tutorial is for the people with an average experience in Photoshop…