Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials


Software Tutorials

Featured Free Templates
View All Templates!
Preview  |  Download
Name: metamorph_flame
Downloads:
Preview  |  Download
Name: metamorph_skyandclouds
Downloads:
View All Templates!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
:: Free Website Templates
Preview  |  Download Preview  |  Download Preview  |  Download
Name: metamorph_sunset Name: metamorph_flower Name: metamorph_waterfall
Downloads: Downloads: Downloads:

Do You Like Our Website? Share With Others!
GoogleGoogle slashdotYahooMyWebDiggTechnoratiDelicious
Page: 12345678910111213141516171819202122232425

Welcome To WebDesignTutorials.net Photoshop Tutorials Area - Animated Fire

Author: Nathan Ng

For this tutorial, lets start off with a black background, you can put the end result on any background you like, but for visibility's sake, we'll use black.

Lets start with a 600x200 canvas, use the paint bucket tool and fill the background layer with black

Now create a new layer by clicking the the "Create New layer icon" at the bottom of the layers pallete.

Use the rectangular marquee tool to create a selection about 1/5th of the canvas size at the bottom, and fill it with WHITE, like so...

You can now deselect the selection by pressing CTRL+D.

Now apply this filter: Filter->Blur->Guassian Blur. enter around 10 - 15px.

Now duplicate this layer 3 times. To duplicate a layer, just press CTRL+J. So now you should have 4 white blur layers in total, hide the top 3 layers by clicking on the eye icon in the layers pallete, leaving only the bottom blur layer visible. Also, select this layer as the working layer.

Now in your toolbox, select the smudge tool

Set the brushsize to about 45 px SOFTEDGE brush, and set the strength to about 70%

Now use the smudge tool to smudge the white blur layer by click and drag from the bottom up, on your way up, curve to the left or right to create the wave effect of the flame.

Now repeat this until you've smudged the whole way from left to right. In between, you may want to switch to different (smaller) brush sizes to create flame waves of various sizes.

Now, hide this blur layer, and show the next layer up.

Now repeat the smudging step for this layer, try to keep the height of your flames similar to the previous layer.

Repeat this process for the remaining 2 blur layers. Remember to try and make the flames as similar to the previous as possible. This will create a smoother animation.

After this, you should have 4 layers of smudged white blurs, which supposedly resemble flames.

now move onto the animation part. If you are working with Photoshop 7 or older, then you need to switch to imageready to do the animation. In photoshop CS/CS2, if you dont have the animation palette open already, go to Window-> and check Animation.

You will then have an animation pallete like so...

On this first frame, we can leave as is, now lets create a 2nd frame, to do this, just click on the "new frame" icon (shown above), Now you should have 2 frames, exactly the same, but now, what we do on the 2nd frame will be different to the first frame, (hence the animation), so on the 2nd frame, hide the current displaying layer, and make 1 of the other layer visible.

So on frame 1, we have the top layer visible:

Then on frame 2, we have the 3rd layer visible:

Now create another 2 frames and disable/show alternate layers, so that each frame has a different layer visible. So now you should have 4 frames frames in the animation pallete, all different to 1 another... Just hit PLAY and you will see the animation.

This doesnt look like fire yet, lets add some colors, Click on the Adjustment Layers icon at the bottom of your layers pallete and select "Color Balance"

In the color balance settings, set the following:
Midtones: [ +60 ] [ 0 ] [ -15 ]
Shadows: [ +100 ] [ 0 ] [ -30 ]
Highlights: [ +50 ] [ 0 ] [ -30 ]

Make sure that this adjustment layer is at the very top on the layers pallete, if not, move it up there

Now, you have an animated fire effect. If you want to slow down the animation a little, you can set the delay between each frame by clicking on the down arrow at the bottom of each frame, and then select your delay time. 0.2 sec is ideal: You can also make more frames to create a smoother effect.

Now we have an animated fire, lets save it to file so we can use it on our website. Go to File->Save for Web

This will open a save for web dialog. Make sure you save it as a GIF file, then click "Save".

There you have it, an animated fire effect.
This tutorial is pretty long, so download my PSD file if you got lost somewhere:
DOWNLOAD PSD FILE

Author: Nathan Ng

Advertisements
Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software

Premium Partners
  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Photoshop Tutorials - Learn how to build stunning web pages using Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software. The step-by-step approach makes it so easy, that even beginners can produce great web pages. Get started with these tutorials covering everything from page layout to content tips.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.
Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website Templates  |  Privacy Policy  |  Contact Us
All Right Reserved by WebDesignTutorials.net