I'd like to get this logo spinning.

http://mixedmatt.co.uk/villaringheim/images/logo.png

http://mixedmatt.co.uk/villaringheim/

I've tried looking for scripts can't find something that works!

Thanks

Make it into a animated GIF

Been searching about how to do this in gimp. I can only find old tutorials. Any pointers?

Thanks for your help

http://www.gimp.org/tutorials/Simple_Animations/


And there are lots of "walk throughs" on YouTube if you like that kind of thing.

Hello Matt,

I know what you are looking for and I believe it was a JavaScript with a spinning logo, the bad news I can't find it now. I will keep looking though.....

Did find this current tutorial for Gimp:

How to Make a Spinning GFX in Gimp

Here's an old tutorial for Photoshop and Paint Shop Pro putting a spin on a globe, which might give you some ideas:

Putting a spin on the World

You could try HTML5

http://www.vectorlight.net/html5/tut..._an_image.aspx

Gif animation won't give you the transparency you probably want.
I would do it with APNG, but of course not all browsers read it (Chrome and IE for example) and file size is greatly increased.

You can do it with javascript.
Set fixed height to your logo and just animate width to 0 and back.

http://jsfiddle.net/miki86/qqzpG/1/

Gif animation won't give you the transparency you probably want.

????

GIF supports transparency.

Sure it does.



Notice the white color around the edges?
That's single color, gif transparency can't be compared to png.

Yep I know that, and had you qualified your statement to make it accurate I would not have made the comment.
So saying;

Gif animation won't give you the alpha|gradient transparency you probably want.

would have been better as it is then clear you are not refering to the "indexed colour transparency" that GIF encoded images DO support.

Being precise with what you say and making statements that are free from ambiguity and thus not open to mis-interpretation may seem pedantic, but it prevents others from being misled now and in the future.

AND PNG-8 format images ALSO only allow for indexed color transparency so can suffer from the same problem of leaving "artifacts" in the transparent areas and where colours are "dithered".

Well done Miki, very very nice JavaScript!!

Matt, I tried that Gimp link tutorial I supplied you with, the results weren't that great, in fact just awful, perhaps you might have better luck. And I am not a newbie working with animation......

Nice example Miki showing the difference between a gif and png.

Chris i agree with you but you forgot that im not English

Thanks Giselle.
Another good example here:
http://www.instantfundas.com/2009/07...mated-png.html

Give it a shoot with APNG, im guessing the file size will be over 100kb with logo of that size.

Thanks all. I've been trying to use jsfiddle as I believe javascript would be a better option then image editing.

However, How do I go about putting that javascript code into the index.html. With a copy and paste it doesn't work. I know there must be something else to it. Sorry for asking a basic question!

If you are trying my code, which is written in mootools framework, you need to include it in your html.

http://mootools.net/download

Ahh i see you already have jquery, there's gonna be a conflict.

Either use "no conflict" or write the code with jquery.

I download mootools with compatability. Upload to root and my inserted javascript in the index.html should look like whats attached?

Thank you,

Yes but you need to set the HTML to look like mine.
Trick is to wrap the logo image with a div which has text-aligned to center, otherwise your logo won't "spin" correctly.

http://jsfiddle.net/miki86/qqzpG/

Don't mean to butt into your conversation on the coding Matt and Miki....

I just had to say a big thank you Miki for supplying the link on those APNG tools! This was a new one on me and bookmarked the url. This means when all the browsers will accept an APNG, one won't have to worry about a patterned/texture background, one can forget the dithering baloney and hoping the animated graphic looks half way decent as a gif.

I shall look forward to seeing your website Matt with the spinning logo in place.....

So much hassle!

Just use this: code.google.com/p/jqueryrotate/

Even supports IE6

You are welcome.

Originally Posted by NewEra

how do you want to spin it ?? if you want to rotate it then you could use this version 3, there is a white bar at the bottom of the interface that controls your Keying information. Pretty easy...

1. Select your logo.
2. Hit the "animate" button so that it turns red.
3. Move to the end of your animation.
4. Rotate your logo. (any amount will work, just need it to set the key.)
5. Go down to the white bar at the bottom and right click on the key (little ellipse looking thing) and change the amout of rotation to 360.
6. Done.

In version 2.5, you'll have to open Track View. It is at the top of the screen. Find your logo in the menu, find rotation and adjust the keys manually.

Version 2.5 of what?

I'm sorry guys I can't get anything to work. I apologise for being such a idiot! Anyone make this any simpler? or have files I can just download and tweak to make this work?

Thank you,