Fire in Photoshop – seamless animated loop

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 templateswebsite 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… fire_01.gif

3. In the Tools Paletter, set the Foreground to WHITE and the Background to BLACK:

fire_02.gif

4. In the Layers Palete dublu-click the Background layer

fire_03.gif

… a new window will open:

fire_04.gif

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:

fire_05.gif

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:

fire_06.gif

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:

fire_07.gif

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):

fire_08.gif

8-4. Shift together the two layers to the lef, so that the stitch line would reach about the middle of the canvas:

fire_09.gif

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,

fire_10.gif

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:

fire_11.gif

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… )

fire_12.gif

11-2. Right-click Layer 1 > Blending Options:

fire_13.gif

Press OK 11-3. In the Layers palette, set the Fill parameter for Layer 1 to 0 (zero) fire_14.gif

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):

fire_15.gif

12-2. Set the “Blending Mode” for Layer 2 to “Color Dodge”:

fire_16.gif

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))

fire_17.gif

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:

fire_18.gif

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:

fire_19.gif

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:

fire_20.gif

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”.

fire_21.gif

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:

fire_22.gif

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:


94 Responses to “Fire in Photoshop – seamless animated loop”


  • 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.

  • 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.

  • A student doing project..

    “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…

  • a student doing project

    “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 :D but damm man 39 times?! man, thats alot -_-…anyway thnx for the tut and finaly i can make my own fire animation :D

  • 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…

  • 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…

Leave a Reply