Page 1 of 3 1 2 3 LastLast
Results 1 to 15 of 41

Thread: Animation Tutorial

  1. #1
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0

    Animation Tutorial

    Okay, having had several requests from the 240*320 thread for a tutorial, here it is....

    Software required :- [Mod's Note: The software listed is what Diggsy uses for making his Animations. There are other software available that may be substituted if they can do everything needed to make them as well.]

    1 - Adobe Photoshop
    2 - Adobe Illustrator
    3 - Xara 3d


    OKAY, PART 1

    1 - Find an image. I find Google is good for this...


    2 - Open the image in Adobe Photoshop...


    3 - Check the image mode. If it is not RGB, change it...


    4 - Create a duplicate layer...


    5 - Accept the default setting...


    6 - Select and delete the original layer...
    Last edited by Moderator HF 18; 08-13-2006 at 07:11 PM.

  2. #2
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    PART 2

    7 - Select the Magic Wand tool...


    8 - Using the Magic Wand, select the background...


    9 - Having selected all the background, simply press the delete key to remove it.

    10 - Now, time to resize the image to suit...


    11 - For the 240*320, make sure to resize the width to 240. Ignore the height...


    12 - Hover over the preview in the layer window. Hold Ctrl and press the left mouse button to select only the image...


    13 - Create a new layer...

  3. #3
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    PART 3

    14 - Accept the default layer setting...


    15 - Now, go get the paintbucket tool...


    16 - Make sure the new layer is selected, then fill it with black paint from the bucket...


    17 - Save the image for Web...


    18 - Set to PNG24 format...


    19 - Check the transparent box, then save...

  4. #4
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    Part 4

    20 - Hide the top layer, then save for web again, using the same PNG settings as before...


    21 - You have now finished with Photoshop, time to open Illustrator. Now open the black PNG image you created...


    22 - Press the Live Trace button on the toolbar...


    23 - Adjust the threshold and minimum areas to better match the original. I find 160 for threshold and 0 for minimum work best...


    24 - Press the Tracing Options button on the toolbar and fine tune. I would suggest only changing Path Fitting from 2px to 1.2 or 1.4px. Then press Trace...


    25 - Press the Expand button on the toolbar...

  5. #5
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    PART 5

    26 - Grab the Magic Wand tool and select the background. Now press the Delete key...


    27 - Export the image...


    28 - Select WMF format and save...


    29 - Okay, you are finished in Illustrator, time to move on to Xara 3d. Open Xara and select the Text Only option...


    30 - Now, select all the text and delete it. Go to file and import...


    31 - Choose WMF format and locate your file and open it...

  6. #6
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    PART 6 - THE FINAL PART

    32 - Choose the Texture button and then select Text Faces, then press Load Texture. Now locate your second PNG that you saved from Photoshop (the one with all the colours intact) and open...


    33 - Having opened the texture, now select the Colour button and adjust background, light colours etc. to your own taste...


    34 - Press the Show Lighting button on the toolbar and now move the lights around to highlight the parts of the logo the way you prefer...


    35 - Press the Show Lighting button again to maximise the image in the screen again.

    36 - Now Choose the Animation Options button and set the options to suit. For rotating images, I suggest 10 frames, 20 per second (25 if using front face only) and loop 9999 times (For some silly reason Xara won't allow indefinate loop). Next choose whether to have Front Face Only or not and press the Start Animation button on the toolbar to see it in action...


    37 - Once you are happy, Go to File and Export Animation...


    38 - THIS IS THE LAST STEP!! - Adjust the output settings to suit the phone, 240*320, optimized palette, 64 colours and diffused work best in my opinion...




    This was a lot of work for me , so I hope you guys get a lot of use out of it. Enjoy

  7. #7
    Join Date
    Jan 2005
    Posts
    251
    Device(s)
    HTC Touch Pro (Fuze)
    Carrier(s)
    AT&T
    Feedback Score
    0
    Very nice, GJ.

  8. #8
    Join Date
    Aug 2005
    Posts
    2,533
    Device(s)
    iPhone 3G & 2G Jailbreak/Unlock
    Carrier(s)
    T·Mobile
    Feedback Score
    0
    Excellent Tutorial!!

  9. #9
    Join Date
    Aug 2006
    Posts
    18
    Feedback Score
    0
    How Long Does This Take And D U Need 2 Download All 3 Programs

  10. #10
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    Quote Originally Posted by pako13
    How Long Does This Take And D U Need 2 Download All 3 Programs
    Depends how good you are with each program. I can do one from start to finish in approx 3-5mins, but I have been using them for a while.

    Oh and yes, you need all 3, unless you know of other software that does it.

  11. #11
    Join Date
    Apr 2003
    Location
    Michigan
    Posts
    136
    Device(s)
    Apple Iphone
    Feedback Score
    0
    Do you really need Illustrator? Could you just cut out the image in CS and save out with a transparent BG and then import the png. gif or tif into Xara?
    "Knowledge Speaks But Wisdom Listens"

  12. #12
    Join Date
    Mar 2006
    Posts
    8
    Feedback Score
    0
    excellent!!! i'm gonna give it a try.

  13. #13
    Join Date
    Jan 2004
    Location
    East Flatbush, Brooklyn/ Hampton, Georgia
    Posts
    928
    Device(s)
    Apple iPhone 5
    Carrier(s)
    At&t (I can't wait to switch back to Tmo)
    Feedback Score
    0
    great work. its laskas turn now.

  14. #14
    Join Date
    Jan 2005
    Posts
    232
    Device(s)
    Samsung E900
    Feedback Score
    0
    Quote Originally Posted by shakim
    Do you really need Illustrator? Could you just cut out the image in CS and save out with a transparent BG and then import the png. gif or tif into Xara?
    Yes,unfortunately the image needs to become a vector (made up of lines) rather than a normal pixelised (made up of dots) image. That is what the live trace in Illustrator does, converts from dots to lines.

  15. #15
    Join Date
    Apr 2003
    Location
    Michigan
    Posts
    136
    Device(s)
    Apple Iphone
    Feedback Score
    0
    I understand. Great tutorilal. Hey Laskas you should do one for the lake effect.

Page 1 of 3 1 2 3 LastLast

Bookmarks