How to make rotating pictures of your figures?

This article was created by Tim Davis and his 360 Spin Tutorial material and at the request of many people interested in self creating a rotating photos. I have included here only my additional thoughts, experiences, comments and minor changes. In addition, I show how I made "device to rotate the figures".

Ten artykuł powstał dzięki Timowi Davis i jego materiałowi 360 Spin Tutorial oraz na prośbę wielu osób zainteresowanych samodzielnym stworzeniem obrotowych zdjęć. Zawarłem tutaj tylko moje dodatkowe przemyślenia, doświadczenia, uwagi oraz niewielkie zmiany. Dodatkowo pokażę jak wykonałem "urządzenie do obracania figurki".

Update 23.02.2023

This tutorial has become obsolete because the Reel plugin is no longer supported. However, I leave this blog entry as stories and as an example of how complicated it was to create moving galleries many years ago. Since then I have also removed any galleries using this plugin.

Ten tutorial stał się nie aktualny ponieważ plugin Reel przestał być wspierany. Pozostawiam jednak ten wpis na blogu jako historie i jako przykład jak wiele lat temu skomplikowane było tworzenie ruchomych galerii. Od tej chwili usunąłem również wszelkie galerie uzywające tego pluginu.

I am not a programmer and I have no knowledge of web design but first we need to discuss some theories. The solution put on the website of rotating images figures is based on an Open Source solution called reel and does not require any additional software (and it seems to me a huge advantage):

Nie jestem programistą i nie posiadam wiedzy na temat tworzenia stron internetowych ale najpierw potrzebujemy omówić trochę teorii. Całe rozwiązanie umieszczania na stronie internetowej obrotowych zdjęć figurek oparte jest o rozwiązanie typu Open Source o nazwie reel i nie wymaga żadnego dodatkowego oprogramowania (i to jest według mnie ogromna zaleta):

"Reel is an established jQuery plugin which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. It is the premier alternative to Flash, Java or Quicktime and is trusted by government agencies and big brands like BMW, Nikon, O2, Blackberry or The New York Times."

Below is the java script ready to put on your website or blog. This script can not work on Internet forums, because very often they block the ability to put HTML code in posts. Paths leading to Image Shack are used for example..

Poniżej znajdziesz gotowy skrypt java do umieszczenia na swojej stronie lub blogu. Skrypt ten może nie działać na forach internetowych, bowiem blokują one bardzo często możliwość umieszczania w postach kodu html. Ścieżki prowadzące do Image Shack są użyte przykładowo.

COMMENTS TO THE SCRIPT:

The text marked in red has been modified by me. The change is to provide the addresses for the official source jQuery library and reel. In this way, theoretically, they should always act and should always be run in the latest version.
Text in blue requires a self-modification and includes the path to the point where additional photos are stored forming a full rotation presentation. This operation is labor intensive, but if you have your own server where your blog is located will be facilitated. You have full control over the paths to files and their names. Unfortunately, free photo hosting services such as Image Shack generate random images names.
Text marked with pink color requires self-modification and contains the path to the image you want to display first when loading into memory all the other pictures. In this case, it is just the first picture in the presentation.

UWAGI DO SKRYPTU:

Tekst oznaczony kolorem czerwonym został zmodyfikowany przeze mnie. Zmiana polega na podaniu adresów do oficjalnych źródeł bibliotek jquery i reel. W ten sposób powinny one teoretycznie zawsze działać i powinny zawsze być uruchamiane w najnowszej wersji.
Tekst oznaczony kolorem niebieskim wymaga samodzielnej modyfikacji i zawiera ścieżki do miejsca, w którym są przechowywane kolejne zdjęcia tworzące całą obrotową prezentację. Ta czynność jest pracochłonna, ale jeśli posiadasz własny serwer, na którym znajduje sie Twój blog będzie ułatwiona. Masz wówczas pełną kontrolę nad ścieżkami do plików i ich nazwami. Niestety darmowe serwisy hostujące zdjęcia jak np Image Shack generują losowe nazwy zdjęć.
Tekst oznaczony kolorem różowym wymaga samodzielnej modyfikacji i zawiera ścieżkę do zdjęcia, które ma się wyświetlać jako pierwsze podczas ładowania do pamięci wszystkich pozstałych zdjęć. W tym przypadku jest to po prostu pierwsze zdjęcie w prezentacji.

But to use the submitted script, we have photos of our figures. The number of pictures is optional and defines it in the script parameter frames: 33, which I marked in green. However, remember that the more photos will be taken, the smoother animation will be. I am doing 33 photos which provides a decent finish.

Żeby jednak użyć przedstawionego skryptu, musimy mieć zdjęcia naszej figurki. Ilość zdjęć jest dowolna i określamy ją w skrypcie parametrem frames: 33, który oznaczyłem kolorem zielonym. Należy jednak pamiętać, iż im więcej zdjęć wykonamy tym płynniejsza będzie animacja. Ja wykonuję 33 zdjęcia co zapewnia przyzwoity efekt końcowy.

Now for some practical information.
A very important element at the time of shooting is to maintain exactly the same lighting for each shot. So here is the perfect artificial lighting. It is also important to figure stably rotate in one axis. even a small shift figures in one picture can spoil the effect. Unfortunately, at this moment, not the end I manage to meet these two conditions. Another important issue is have a single color background, such as white or black (on black background is much easier to make a good image color fidelity).

Teraz trochę praktycznych informacji.
Bardzo ważnym elementem w czasie robienia zdjęć jest zachowanie dokładnie takiego samego oświetlenia dla każdego zdjęcia. Idealne jest więc tutaj sztuczne oświetlenie. Ważne jest również to aby figurkę obracać stabilnie w jednej osi. nawet drobne przesuniecie figurki na jednym zdjęciu może zepsuć cały efekt. Niestety, na tą chwilę, nie do końca udaje mi się spełnić te dwa warunki. Kolejna ważna sprawa to zastosowanie jednolitego kolorystycznie tła, białego lub np. czarnego (na czarnym tle znacznie łatwiej jest zrobić dobre zdjęcie odwzorowujące rzeczywiste kolory).

And now I will show you how I made "device" to rotate the figure. There is nothing complicated and it is rather a makeshift solution, but works well (thanks to the GOŁY for idea!).

A teraz pokażę jak zrobiłem "urządzenie" do obracania figurki. Nie jest to nic skomplikowanego i to raczej prowizoryczne rozwiązanie ale sprawdza się doskonale (dzięki GOŁY za pomysł!).

This diabolical machine was made from the old hard drive 3.5 ". Graven on the outer plate marker scale for the 33 images and using Blu-Tack attached the closure of a deodorant. Closure serves as a pedestal for the statues, and should ideally be fixed in the axis of the plate.

Ta diabelska maszyna została wykonana ze starego dysku twardego 3,5". Na zewnętrznym talerzu wyrysowałem markerem podziałkę dla 33 zdjęć i za pomocą Blu-Tack przymocowałem zamknięcie od dezodorantu. Zamknięcie pełni funkcję piedestału dla figurki i powinno być przymocowane idealnie w osi talerza.

The hard drive enclosure have said characteristic point. Have said the same color point on the plate. In this way you can tell easily when we made a full turn and exactly 33 photos.

Na obudowie dysku twardego zaznaczyłem charakterystyczny punkt. Tym samym kolorem zaznaczyłem punkt na talerzu. W ten sposób łatwo można się zorientować kiedy wykonaliśmy pełen obrót i dokładnie 33 zdjęcia.

The hard drive has one great advantage of this solution - plates are very well bearings and small enough to force them to rotate. In this way, there is little chance that the rotation of the pedestal to accidentally move the "device" and get a photo frame shifted relative to the others.

Dysk twardy ma jedną, ogromną zaletę w tym rozwiązaniu - talerze są bardzo dobrze łożyskowane i wystarczy niewielka siła żeby je obrócić. W ten sposób istnieje niewielka szansa na to, żeby przy obracaniu piedestału przypadkowo przesunąć całe "urządzenie" i uzyskać przesunięte w kadrze zdjęcie względem pozostałych.

And it looks like the whole installation (right yellow pool of my daughter :)). The pedestal is so small it fits in my "Soft Box" for pictures. The camera is mounted on a tripod or put the book right thickness. Remember when take time series of images to rotate only the pedestal so that the camera, soft box and a device for rotating the figure remained motionless.

A tak wygląda cała instalacja (po prawej żółty basen mojej córki :) ). Piedestał jest na tyle mały, że mieści się w moim "Soft Boxie" do zdjęcia. Aparat montuję na statywie lub kładę na książce odpowiedniej grubości. Pamiętajcie, żeby w czasie robienia serii zdjęć obracać tylko piedestał, tak aby aparat, soft box oraz urządzenie do obracania figurki pozostało nieruchome.

Ask in the comments if you have any doubts and have fun with rotating photos of your figurines!

Pytajcie w komentarzach jeśli macie jakieś wątpliwości i miłej zabawy z obrotowymi zdjęciami Waszych figurek!

ARBAL
Have fun painting

Pages

Saturday, July 28, 2012

How to make rotating pictures of your figures?