[M|chael]

Producing 3d Spinning Avatars in Xara 3d

Since ive recieved many PM's about this (and im sure others have too, namely CCPD), I think it would be beneficial to produce a tutorial on how it's done.
Making these logos may seem tricky, becuase Xara wont import raw bitmap images to be extruded.
Fortunately, there are many ways around it. Here are two working examples of how it's done. in simple steps!

Required Programmes

Xara3d (A very simple programme for what it is. This tutorial works on expoliting it) -Very Cheap
Inkscape (An open source alternative to Illustrator) - Free
An image manipulation programme. (Photoshop, Fireworks, or the open source Gimp!)

--------------------

Method 1. Animated graphics from fonts

Since Xara3d allows the user to animate text, producing a logo can be as simple as finding a custom 'dingbat' font - (a font made up of images/symbols)from the internet, and 'typing' this directly into the programme, and overlaying a textured bitmap. This exploit can come in handy when producing simple 3d shapes.

	For this example I will be working with this resource
Step Number	Explanation	Screenshot
Step 1	Download 'Dingbat' font containing desired logo shape	Click
Step 2	Open Xara3d
Step 3	Open 'Font Tools' and type letter which corresponds to logo using the correct font	Click
Step 4	Go to 'Texture options' and import original bitmap as overlay	Click
Step 5	Play with the Bevel/Lighting/Animation options.
Step 6	Save as Animated Gif. Make size 15px or so larger than intended
Step 7	Open image manipulation software and import the Gif
Step 8	Crop down to 64x64 to eliminate 'blank' edges
Step 9	Open Export Wizard (Ctrl + Shift + X) OR 'Save for web' (PS) and index the transparent background colour using the eyedropper tool	Click -> Click -> Click
Step 10	Upload to image host for usage!

For the final result to look exactly like mine. Make sure the total animation frames is set to 35, and FPS to be set at 90.
Extrusion is set at 5. The bevel style I used is 'Squared', and thickness is set around 10
The extrusion type is 'gloss' to give it a shiny effect.
For use on the GTAF's, I also chose the background texture to be a sample of the forum background. This will ensure that when made transparent, any little bits of blue left over will be unnoticable.
Finally, I have removed the default shadow, from shadow options. This only messes up transparency when producing graphics for forum use.

--------------------

Method 2. Animated graphics from vector images

This is where it gets a little trickier. Although it does require some extra packages.
Here we will be utalizing Xara's ability to import vector files instead of typing in text. This meathod should be used when you cannot find a 'dingbat' font containing your image.

	For this example I will be working with this resource
Step Number	Explanation	Screenshot
Step 1	Open image manipulation software
Step 2	Create solid coloured silhuette of desired logo	Click
Step 3	Save as bitmap
Step 4	Open vector manipulation software
Step 5	Import bitmap
Step 6	Path -> Trace to find edges and convert to a vector image	Click -> Click
Step 7	Save as .wmf or .emf
Step 8	Open Xara3d
Step 9	Import Emf/Wmf & Change graphic type to 'text'	Click
Step 10	Repeat steps 4-10 of previous meathod

To illustrate the veriety that can be achieved in Xara, for this example, I changed the animation from 'Rotate' to 'Swing', & instead of uselessly applying the black texture, I simply chose the colour face to be a solid colour. I later altered this colour to orange for effect.
Furthermore, the extrustion type is 'matt', and not 'gloss' here. So there is no , -'shine effect', and more of a smooth transition of light.

--------------------


Easy, huh?
Now no more PM's!

This post has been edited by M|chael on Friday, Aug 28 2009, 13:12

[atsike7]

Really good tut, Michael!

[Superb]

Very nice tutorial, I was waiting for something to explain how to make those rotating avatars.

Now I've just got to acquire Xara..

[M|chael]

QUOTE (Superb @ Jun 2 2009, 19:56)

I've just got to acquire Xara..

It's only around £15.
Xara3d is an extremely basic programme meant to give text a '3d' effect. This tutorial exploits it to its limits.

[Superb]

QUOTE (M|chael @ Jun 2 2009, 20:00)

QUOTE (Superb @ Jun 2 2009, 19:56) I've just got to acquire Xara.. It's only around £15. Xara3d is an extremely basic programme meant to give text a '3d' effect. This tutorial exploits it to its limits.

And I also need Inkscape? This is free isn't it?

[Chunk]

Excellent guide mate.

This deserves a pin.

[goin-god]

This is awesome, good work!

[M|chael]

QUOTE (Superb @ Jun 2 2009, 20:05)

QUOTE (M|chael @ Jun 2 2009, 20:00) QUOTE (Superb @ Jun 2 2009, 19:56) I've just got to acquire Xara.. It's only around £15. Xara3d is an extremely basic programme meant to give text a '3d' effect. This tutorial exploits it to its limits. And I also need Inkscape? This is free isn't it?

Yes its open source. I think I mentioned it somehwere in there, didn't I?

[El Zilcho]

Nice work mate, top notch info for aspiring designers.

[M|chael]

QUOTE (El Zilcho @ Jun 2 2009, 20:10)

Nice work mate, top notch info for aspiring designers.

yeah, i hope it helps. When i first started trying to work out how it was done, I found nothing on the internet, and had to figure it all out myself.

This post has been edited by M|chael on Wednesday, Jun 3 2009, 14:37

[Wolf68k]

Ok that's a bit more easier to understand than what you told me before.
Links to the programs would be a nice/needed touch

[M|chael]

QUOTE (Wolf68k @ Jun 2 2009, 20:33)

Ok that's a bit more easier to understand than what you told me before. Links to the programs would be a nice/needed touch

I seem to have overlooked that for some reason I would have thought I'd have initially remembered to put that in,
Added.

Edit: Updated the whole thing
Everything redone
hope it houses a little more necessary info now, and is easier on the eye

This post has been edited by M|chael on Wednesday, Jun 3 2009, 11:00

[NikoB]

Thanks man! Now i can for sure do it myself!

[.Rafto]

Thank you so much M|chael. I've searched all over the web for tutorials exactly like this but no goal. M|chael, you truly are ne spirited person.

[Chunk]

Just seen the new layout, much neater than the original.

I hope to see more helpful guides from you, mate.

[M|chael]

QUOTE (Chunk @ Jun 8 2009, 22:36)

Just seen the new layout, much neater than the original. I hope to see more helpful guides from you, mate.

thanks.
I really couldnt stand it how it was before i changed it. I went to bed that night and realised I could put it all into tables, and visualised it all out in my mind with a little columb for screenshots etc...
i couldnt sleep so i got up and changed it all.

[Tommy-Vercetti19]

Your a F*cking legend M|cheal, Really.

[.Rafto]

Sorry to interrupt but I'm having trouble with Inkscape in method 2. I can't get the nodes on. It only allows me to make a rectangular selection, nothing else.

What's wrong?

[M|chael]

QUOTE (.Rafto @ Jun 9 2009, 00:53)

Sorry to interrupt but I'm having trouble with Inkscape in method 2. I can't get the nodes on. It only allows me to make a rectangular selection, nothing else. What's wrong?

Click on the shape. It must be a solid colour.
Go to Paths->Trace Paths
A menu will pop up. Click trace. If its traced the shape will turn back and white in the little preview box, as it overlays a black vector over the top of the solid coloured shape. Click Ok.
It will not have the Dots around it. My screenshot shows that only to illustrate how the shape has become a vector.
If you want to view the dots at this stage. Click this button, under the main cursor

& if you still don't get it,-
Ive added an additional screenshot to the tutorial.
I admit thats the one most complicated step really, and its wasn't explained all that well

This post has been edited by M|chael on Tuesday, Jun 9 2009, 07:39

[.Rafto]

Thanks for the advice.

EDIT*

Does that mean that I have to make the shape fully 1 color on a photo manipulation program and then open it on Inkscape?