[Tutorial] - by Michael.

[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!

Edited August 28, 2009 by M|chael

[Wonderbro]

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]

 

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]

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.

[coin-god]

This is awesome, good work!

[M|chael]

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]

 

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.

Edited June 3, 2009 by M|chael

[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]

 

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

Edited June 3, 2009 by M|chael

[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]

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]

 

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

Edited June 9, 2009 by M|chael

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

[M|chael]

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

Yes.

It just makes it easier for Inkscape to 'find the edges' of the shape to trace.

You dont need the textured image for now. As I mention in the tutorial, you can overlay that later in Xara.

[Wolf68k]

I just did the first part of this tutorial and it took me a good long time missing with many things you don't mention to get it to look right.

I think it would have worked right and I would have gotten it right if you have given more details to everything. You summed up each step too much. The idea of a tut is for the reader to get the same result you did.

In this case how to make the square from the Wingdings to be narrow like yours. Also to Shadow Options and uncheck Shadow. Adjusting the color settings. Which of the Bevel settings you used for this tut. Then your step of importing the texture wasn't quite clear to me, it took a bit understand that while in the Texture Options to first select Text Face then click Load Texture and select the file from the top of the tut, made even more confusing when the screen shot is of the Animation Options.

 

I first ended up with this

I figured out how to resize the thickness of it by accident.

 

Next toying with the colors I got this

I still couldn't figure out the big blob around it.

 

After more toying with the colors I got this

*DING* The shadow! Ok now how to get rid of it...

 

Found it

But it still has some jacked up white edge, how to fix that.

 

More messing with colors and

 

What really worried me and I really wish this had been explained was while doing the test run with in the program the BBC texture bends and also happens when you're spinning it around but as soon as you let go of the mouse it's fine again.

But when you save the animation it's fine. Then there the fact that when you turn the square to it's back side the texture is loaded on the front so in this case the BBC logo is backwards but again this doesn't show up in the animation.

 

Might also wise to make sure first timers know to pay attention to the display in the lower right corner:

The first 2 being the size of the image in it's current state. Next is the angle in degrees left and right. Followed by the angel of the tilt; top and bottom (make sure that's at 0). The last is the angle of the "camera", holding shift+ctrl other than that I haven't really figured out the usefulness of it.

 

I do wish there was a way to have more than one texture on the 2 different faces.

For something like this if I could figure it out in Photoshop then I know I could do exactly that, hell I could make a cube and have something on all 6 sides if I wanted.

 

 

I haven't tried the second part yet.

[M|chael]

I did say to 'play with the bevel, extrusion, and colour' options.

The tutorial is meant to be a basic example. The screenshot was an example of a graphic after i'd 'played with those options'.

I said in the original tutorial before i reformatted it to make the background a blue colour, so that any bits left over would be deleted, but removed it becuase i wanted the tutorial to be generalised, so anyone could use it. If i told people to use a blue / dark background then people pasting the graphics onto white backgrounds would see a blue/black trace of colour outlining the thing.

Admittedly I didnt tell you how to remove the shadow becuase once again, in some cases, people may use it. i guess I should relate everything to my example though. Ill change that now.- and the other things you mentioned

 

I didnt explain everything in THAT much detail becuase for the most part I would have thought it was obvious. Xara is an extremely simple programme.

 

About the bending thing. Ive noticed it too. Idk why it happens. I think maybe xara doesnt bother properly assigning the texture to the object for preview purposes, as ive said its a really basic programme.

 

-Edit- Added a little bit under each section explaining how to get the same result as me.

I want the tutoruial to be a generalised example. The screenshots are so people know they are on the right track.

Edited June 9, 2009 by M|chael

[.Rafto]

Ok, I did the thing with Inkscape and saved it as emf. and opened with Xara but it comes up as on oval shape (the original shape is a circle) What's wrong now?

 

Sorry for all these quetions.

[M|chael]

 

Ok, I did the thing with Inkscape and saved it as emf. and opened with Xara but it comes up as on oval shape (the original shape is a circle)

Ive just added another step for this little issue.

You need to change the graphic type to 'text'. Its the menu on the extreme left

This will mean the graphic is put, on its own. Like text. With no boarder or 'oval' block surrounding it.

 

 

Sorry for all these quetions

By all means continue. it exposes the little bits of weakness in my guide which I can fix.

[.Rafto]

One more question. After I have saved the animation as a Gif. from Xara3D then is it a must to edit it once more in like PS>? Because I got a bit worried when I uploaded the Gif. into PS it looked quite bad. What is teh problem now. And when I upload the Gif. with for example Tinypic, mien doesn't have animation, it is only a static pic:

[M|chael]

The problem is , once youve imported it into Photoshop and made it transparent/cropped it, your not exporting it as an ANIMATED gif.

my guess is you just chose GIF.

Idk how it works in PS but in Fireworks (Ctrl + Shift + X) opens the export wizard. Its a helpful feature becuase it allows me (like my screenshot shows) to select Animated Gif from 'Export file type', then choose a 'transparent colour'- which I will select as the background, and then export, all in one step.

[.Rafto]

Okay, my father just bought Fireworks for me and I've installed it. So now for example...If I have my animation in Xara and I've exported it as a Gif. and now open it up in Fireworks, what should be my next step to get a good quality animation.

[M|chael]

 

Okay, my father just bought Fireworks for me and I've installed it. So now for example...If I have my animation in Xara and I've exported it as a Gif. and now open it up in Fireworks, what should be my next step to get a good quality animation.

He bought you fireworks just for this? i hope not

Anyway, like my tutorial states, Change the Canvas Size to 64x64

Then Like I said in the above post, press (Ctrl + Shift + X).,

Choose Animated Gif, and select the transparent colour (the background,-which should be the gtaf blue which you have already set in xara)

using this button

 

Once that is done, click export and your finished.

Edited June 12, 2009 by M|chael

[.Rafto]

 

He bought you fireworks just for this?

No, he needed it himself too (I have no idea why). Okay so i did what you told me to but there is one problem. When I expert the file from Xara as a Gif. and import it into Fw, and try to *Ctrl+Shift+X* It says request cannot be made. What's the problem now?