vB Easy Archive - Animation Tutorial

Pages: 1

Animation Tutorial
(Click here to view the original thread with full colors/images)

Posted by: Diggsy

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

Posted by: Diggsy

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

Posted by: Diggsy

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

Posted by: Diggsy

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

Posted by: Diggsy

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

Posted by: Diggsy

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

Posted by: Shroud

Very nice, GJ.

Posted by: cellj

Excellent Tutorial!!

Posted by: pako13

How Long Does This Take And D U Need 2 Download All 3 Programs

Posted by: Diggsy

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.

Posted by: Bengal313

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?

Posted by: galacticox4

excellent!!! i'm gonna give it a try.

Posted by: scr00ge

great work. its laskas turn now.

Posted by: Diggsy

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.

Posted by: Bengal313

I understand. Great tutorilal. Hey Laskas you should do one for the lake effect.

Posted by: scr00ge

hey diggsy. im having problems with logos that arent symetrical. sometimes i might have change the magnification on the text face texture to get it to fit right. and even when i do that it doesnt fit right completely. check my posts in the 240 x 320 thread to see what i mean.

http://www.howardforums.com/showpos...1&postcount=631

Posted by: Diggsy

Quote:

Originally Posted by scr00ge

hey diggsy. im having problems with logos that arent symetrical. sometimes i might have change the magnification on the text face texture to get it to fit right. and even when i do that it doesnt fit right completely. check my posts in the 240 x 320 thread to see what i mean.

http://www.howardforums.com/showpos...1&postcount=631

I have noticed this happens. It actually doesn't look too bad. All I can suggest is that when you are tweaking in Xara, adjust the depth of the bevel to hide the slight difference. You should find a depth of between 10-20 works very nicely.

Posted by: chris2403

Hi, im having problems selecting the background in illustrator, it doesn't seem to do anything and this is confirmed when i import it into x3d and it appears as just a rectangular block. any ideas whats going wrong?

Cheers, Chris

Posted by: Diggsy

Quote:

Originally Posted by chris2403

Hi, im having problems selecting the background in illustrator, it doesn't seem to do anything and this is confirmed when i import it into x3d and it appears as just a rectangular block. any ideas whats going wrong?

Cheers, Chris

Did you Expand the image before selecting the background? Make sure you do this as it is critical. Also, be sure to use the correct tool (magic wand) and select the white area very close to your image (within the blue boundary line) then simply press delete.

Posted by: tsaoe

Hey Diggsy, thanks for all the hard work, i appreciate it!

my friend sent me a an animated gif. background that exceeds the 240*320 dimension, can photoshop resize it for me? Everytime i open the gif in photoshop and just use image resize, it stops being an animated gif.

Help please?

(excuse my extreme noobage)

Posted by: Pipe Guy

Quote:

Originally Posted by tsaoe

Hey Diggsy, thanks for all the hard work, i appreciate it!

my friend sent me a an animated gif. background that exceeds the 240*320 dimension, can photoshop resize it for me? Everytime i open the gif in photoshop and just use image resize, it stops being an animated gif.

Help please?

(excuse my extreme noobage)

For resizing GIFs, you need a GIF ANIMATOR program such as ADOBE IMAGEREADY, or Ulead GIF ANIMATOR. They will open the file as a series of frames. You can then edit the picture size and save again.
I find that PHOTOSHOP only opens the first picture if a GIF then ignores the rest.

Posted by: Pipe Guy

Here ya go kids! My first ever video tutorial...

http://s142.photobucket.com/albums/...ametutorial.flv

Posted by: Pipe Guy

Quote:

Originally Posted by Pipe Guy

Here ya go kids! My first ever video tutorial...

http://s142.photobucket.com/albums/...ametutorial.flv

OOOOOPS! Sorry but did not realize photobucket only allows 5 minutes of video. I am currently finding other host options for my video and will re-post new link soon.

Posted by: Pipe Guy

Here is the NEW file location for download.

AVI VIDEO
http://www.sharebigfile.com/file/25...torial.avi.html

WORD DOCUMENT
http://www.sharebigfile.com/file/25...ns-101.doc.html

Posted by: Pipe Guy

Another video tut!

http://www.sharebigfile.com/file/27...-part1.avi.html

Posted by: nonna shamy

wow
how could u do that !!
great job guys
i'm new member and i'm enjoying reading what u write here
my e-mail is nshamy@gmail.com
please any one have info about samsung D820 ,
TEll Me !! SoOn
THANKS AGAIN

Posted by: jontran8

I've seen all of these animated wallpapers and wanted to learn how to do them. I got the programs and started to work on them. Problem is in Illustrator, I don't have the toolbar on the top, how do I pull it up?

Posted by: soccer4life1980

hi there. first of all, great tutorial, thanks so much for making it diggsy.

i got all of these programs and i successfully made an animation (120x160), but now i want to put the animation onto a (240x320) background. for example an ac milan logo (which i made) on the background of the san siro (their home ground). much like what has been done on the #3 post of this thread

could anyone help me?

thanks in advance,
david

Posted by: pogee

Original photo

Here is a result (you can choose any color you want):

Press D on your keyboard,
so we could get default foreground and background colors.
This time we gone use very powerful tool for selection-
Quick Mask. You can simply press on Q on your keyboard or choose Quick Mask button:

Double click on Quick Mask button to get to tool's options. Choose
Selected Areas,
so our selected areas will be in pink.

Now choose Brush tool,
set it's size to 5-10 pixels and choose all the areas that you want to repaint.

If you have selected too much(i got too much of a headlight)- don't worry, simply choose
Eraser tool, and erase unwanted areas.
Make sure that you foreground and background colors are default black and white.

To select some small areas don't hesitate to use Zoom tool:

Finally all areas that we want to repaint are in pink.

Press Q on your keyboard, and you'll see such selection.
If you have some spots, press Q again and select them with Brush tool.

Press Ctrl+J, to duplicate layer via copy,
and it's time to repaint our car!
Press Ctrl+D to deselect our selection.
Image-Adjustments-Hue/Saturation.
In Hue/Saturation window click on Colorize,
and choose any color you want.
I took yellow one:

Here you go! Got a different car!

Posted by: pogee

Original picture

Result:

Let's continue Photoshop tuning of Lada-2112. In this tutorial we'll learn how to change bodykit. Like in the previous tutorial, we'll take some parts from "Porsche":

Take Rectangular Marquee tool
and set it's mode to
Normal.

If you side skirt is not rectangular, use
Polygonal Lasso tool

Select Porsche's sideskirt:

Edit-Copy,
click on the picture of Lada-2112 and press
Edit-Paste:

Looks good, but it's too short. Let's fix it! :0) Right click on the side skirt, and in the drop down menu choose
Free Transform.
Go ahead and resize your side skirt.

Press Enter on your keyboard. Now we should match colors:
Image-Adjustments-Hue/Saturation.

Match color with three sliders. First choose color with the upper slider (in my case it's blue), and then move two others until you match colors. Don't forget to activate
Colorize!

Here is what I get:

Now take
Smudge tool

zoom in your picture and begin to click and drag like on the picture:

Looks good already!

So, let's work on the front bumper. Use
Polygonal Lasso tool

to select Porsche's bumper.
If your side skirt is still selected, you should deselect it first:
Select-Deselect
or press Ctrl+D on your keyboard.

Once your bumper is selected, press
Edit-Copy,
click on Lada-2112 picture and paste it:
Edit-Paste.

Resize it in the same way as side skirt: right click on the bumper and choose
Free Transform.

And resize it the way you want:

Press Enter. Now we should match colors as well:

Image-Adjustments-Hue/Saturation
Don't forget to click on Colorize.

Looks better:

Now it's a smudge time! :-)
Smudge

Now select rear bumper in the same way as the front one:

Copy it, then paste into Lada-2112 picture, resize and colorize:

Use smudge if needed.

Let's add a spoiler!

Do everything in the same way:

Beautiful! I want to blur some areas a little bit:

Take
Blur tool

Now you have the tuning car. If you want then you can put some tattoos or other design to the car

Posted by: soccer4life1980

hi pogee, these tutorials you made are great. but which program did u use. photoshop?

Posted by: bigman204

Thanks Diggsy for posting a great tutorial. My first effort is below.

Posted by: Mild

Excellent job! Thanks you very much! May happiness around you always for this kind help...

Posted by: Sweetcorn

can u do animations with out photoshop and all the others

Posted by: bud760

Thank you for sharing your knowledge with these tutorials!!!

Posted by: benchoxy

thank you very much for this tutorials..... newbie here and started learning new stuffs...

Posted by: Diggsy

Sorry guys, I realise the images may come and go now as my Pro subscription has expired and I am not renewing it this year.

Posted by: L3D

Excellent..Good Job...Handy and a helpful tutorial

Posted by: defcon888

it says the images have been moved or deleted in the tutorials. Can you direct us to where they are now?

Posted by: Damageinc333

Quote:

Originally Posted by defcon888

it says the images have been moved or deleted in the tutorials. Can you direct us to where they are now?

I second this motion.