Kliknij żeby zobaczyć coś więcej

W tym poście pokażę proces powstawania Lilly – małej, sprytnej piratki którą ostatnio narysowałem.

Zaczynamy od podstaw – szkicujemy głowę i szkielet, zaznaczając stawy w odpowiednich miejscach.

Następnie obudowywujemy szkielet ciałem. Ponieważ z założenia postać Lilly miała być kreskówkowa – możemy
odrobinę nagiąć anatomię.

Teraz przyszedł czas na ubranie i włosy.

Ręka, która początkowo miała opierać się na biodrze jakoś dziwnie wisiała mi w powietrzu.
Dołożyłem w tym miejscu rękojeść pirackiej szabli.

Kładziemy podstawowe kolory pod szkicem

A teraz będzie tzw. “efekt Adama Słodowego”.
Gdzieś po położeniu kolorów zapomniałem o trzaskaniu screenshotów – tak więc oto efekt końcowy ;).

kliknij aby powiększyć

Jakoś mnie ostatnio wektorowe ilustracje przestały bawić. Postanowiłem poszukać czegoś innego – i na podstawie jednego szkicu stworzyłem dwie ilustracje. Poniżej przedstawiam rezultat “eksperymentu”.

Zaczynamy od tego samego szkicu (nabazgrolonego dość szybko w przypływie nagłej potrzeby narysowania czegokolwiek – o dziwo wyszło nawet, nawet).

Na początek królik w stylu, w którym dotychczas robiłem postacie – rysowany we Flashu, wektorowy.

A teraz coś z zupełnie innej beczki. Eksperyment pod tytułem “malujemy w Photoshopie”.
Zupełnie szczerze powiem, że efekt przeszedł moje oczekiwania – i mnie osobiście ta ilustracja podoba się bardziej w tym stylu.

Sami napiszcie w komentarzach, który lepszy:)

Mimo, że Sketchbook nie jest nowy – ja go odkryłem dopiero parę dni temu.
W najprostszym skrócie – Sketchbook to wirtualny ołówek i kartka papieru.
Mimo, że Autodesk (wydawca Sketchbook’a w tej chwili) na swojej stronie pisze, że Sktechbook to “najbogatszy zestaw do malowania i rysowania”, to należy program traktować dokładnie tak jak się nazywa – jako szkicownik.
I jako szkicownik Sketchbook sprawdza się po prostu rewelacyjnie.
Odwzorowanie ołówka jest boskie, całość śmiga i fruwa.
Interface jest tak skonstruowany, że nie trzeba wypuszczać pióra z dłoni – bomba.
Dodajmy do tego obługę .psd – i w sumie więcej do szczęścia nie potrzeba:)

Sketchbook jest w raczej umiarkowanej cenie, ale nie należy do super tanich programów
(za wersję na Mac’a – $100).

Można w tym momencie zapytać, po co wydawać sto baksów na program, który robi tyle co kartka papieru i ołówek. Też tak na początku myślałem, ale zauważyłem jedną rzecz – fakt istnienia warstw, możliwości zapisu wersji i na koniec magiczna kombinacja cmd+z, powodują, że człowiek pozbywa się wszelkich lęków przed eksperymentowaniem.
Rysując szice ołówkiem na papierze nie raz docierałem do momentu “jest dobrze. nie rób nic więcej bo spierdolisz i trzeba będzie zacząć od nowa”. Cyfrowe szkicowanie zdejmuje takie ograniczenia – i można eksperymentować do woli. (co czasami okazuje się fatalne w skutkach – wtedy wywalamy warstwę i po kłopocie).

Mała prezentacja zabawy ze Sketchbook’iem- szkic Wrednej Fińskiej Wiewióry.
Całość w Sketchbook’u zajęła mniej więcej 1.5h

i na koniec (głównie po to, żeby większy traffic na blogu wygenerować) – szkic pólnagiej panienki.

30 dniowy trial Sketchbooka można ściągnąć ze strony producenta:

Jeżeli jesteś zainteresowany tworzeniem animacjii – mało jest książek, które przydzą się bardziej niż “Cartoon Animation” Preston’a Blaira.
Zmarły w 1994 roku Blair pracował jako animator dla Disney’a (między innymi przy Bambi) i MGM.
Książka jest kopalnią wiedzy o tworzeniu animacji – od cykli chodu po budowanie nastroju sceny przez dynamikę i kompozycję.
W tej chwili można ją jedynie dorwać gdzieś na eBay’u lub amzonie – nie została nigdy wydana w Polsce.
(tutaj można zobaczyć kilka stron z książki)

Ilustracja jest do darmowego wykorzystania w projektach prywatnych i komercyjnych.

Ściągnij pliki (.fla + .ai – za .ai nie ręczę, bo z flasha jest eksportowane).

Zestaw jest dostępny jako plik .fla i .ai.

Zapraszam do ściągnięcia go tutaj.

Ilustracja dostępna jest pod licencją “zrób z tym co chcesz”.
Autor (czyli ja) zezwala na wykorzystywanie jej w prywatnych i komercyjnych projektach.
(byłoby miło, gdybyście napisali w komentarzach w momencie kiedy to gdzieś wykorzystacie).

Zacznijmy od szkicu – w naszym przykładzie zrobimy małego, miłego misia – nazywa się Teodore (odkrywcze ;)

Tak więc importujemy Teddiego do Flasha (możemy wykorzystać każdy inny program do grafiki wektorowej – jak Illustrator czy Inkscape).

Teddy jest zrobiony z prostych kształtów. Każdy element wykonamy osobno – zaczniemy od oczu.

Każde oko jest wykonane z trzech okręgów. Potrzebne jest jedno czarne koło jako podstawa i dwa białe koła jako refleksy. Możemy dodać wypełnienie gradientowe na bazę, aby nadać oczom bardziej realistyczny wygląd.

Przejdźmy do brwi. Zaczniemy od prostych prostokątów (w sumie – raczej ciężko byłoby zacząć od krzywych prostokątów ;) – a następnie zaokrąglamy brzegi.

Przechodzimy do robienia uszu.
Każde ucho zbudowane jest z dwóch prostych elips. Wykorzystujemy wypełnienie gradientem, aby uwypuklić kształt ucha.

Przyklepnijmy misiowi jedno ucho (spuścizna dzieciństwa ;).
(odetniemy kawałek ucha, przeniesiemy na warstwę powyżej, zmieniamy kolor na coś jasnego i obracamy).

Czas na twarz (moglibyśmy nawet powiedzieć mordę) i tułów misia – zrobimy je ponownie przy użyciu elips.

Twarz wykonujemy z dwóch elips.

Aby zrobić nos stawiamy pionową linię na środku elipsy (porada: przekształć linię w Movie Clip’a, a następnie skorzystaj z opcji ułożenia (align)).Nos wykańczamy dwoma zagiętymi liniami.

Tors jest wykonany z dwóch elips (teraz już powinno być jasne, dlaczego ten post nazywa się “Robienie kreskówki z prostych kształtów”). Elipsy są wypełnione radialnym gradientem aby podkreślić bryłę misia.

Na koniec dorobimy misiowi nogi.
Po obrysowaniu stopy elipsą, wyrysowujemy podeszwę przy pomocy narzędzia Pen (tutaj jest dobry tutorial jak tego narzędzia używać). Wszystko wypełniamy radialnymi gradientami.

I to by było na tyle – miś Teddy gotowy:).

Bez problemu możecie ściągnąć i sprawdzić .fla z naszym misiem.
Zezwalam na wykorzystanie misia w dowolnych projektach (jak go gdzieś wykorzystacie dajcie info w komentarzach)

Książki zdecydowanie warte polecenia.

W tym krótkim tutorialu chciałbym pokazać, jak radzę sobie z animowaniem chodzenia (wcale nie musi to być takie trudne).

Tutorial jest pisany pod Flasha, ale zasadnicze założenia można wykorzystać w każdej animacji.

Poznajcie Jo & Mo

Tych dwóch przemiłych kryminalistów zrobi co może, żebyście zrozumieli jak opracowana jest animacja ich chodzenia.
Istnieje wiele sposobów przedstawienia postaci w czasie chodu – postaram się naświetlić klika z nich.
Zacznijmy od tego co jest najłatwiejsze do osiągnięcia (jednocześnie daje zadowalające rezultaty)

Sposób 1 – Ministerstwo Głupich Kroków

Czasami nie ma czasu na tworzenie skomplikowanej animacji, lub też budżet na kreskówkę jest za niski – jednym słowem animator musi znaleźć sposób jak stworzyć scenę z chodzącą postacią bez spędzania nad tym tygodnia pracy.
Rozwiązaniem jest sparodiowanie chodzenia. Daje to dobry, żartobliwy efekt, jednocześnie cała animacja jest prosta do wykonania.

Przykład:
Mo chciałby się niepostrzeżenie podkraść. Robi mnóstwo małych, szybkich kroków – sztuczka polega na tym, że jego nogi wcale się przy tym nie zginają.
Zobacz animację

Jak to jest zrobione:
Potrzebny jest tułów i nogi – wszystko jako osobne MC (MC = Movie Clip).

Tworzymy prostą animację opartą na tweenie – kiedy jedna noga wsuwa się pod tors, druga się spod niego wysuwa.

Sposób 2 – Styl Misia Jogi

Pamiętacie stare kreskówki Hanna-Barbera z misiem Jogi? Jogi chodził w charakterystyczny sposób – nie poruszał nogami, tylko “obracał” nimi, jak gdyby nie miał stawów.
Zobacz animację

Jak to jest zrobione:
Potrzebujemy korpusu i czterech nóg (można wykorzystać nogi z poprzedniej sceny).
Tworzymy z nóg dość makabryczna “krzyżówkę”

Teraz musimy stworzyć animację obracających się nóg pod korpusem (potrzebujemy tylko 1/4 obrotu).

Ten sposób jest dobry dla postaci z dużym tułowiem i małymi nogami (nogi gdzieś się muszą “schować”).

Sposób 3 – dla Twardych

Do tego sposobu potrzebny będzie cykl chodzenia jako referencja. Najlepszy jaki znam to cykl chodu stworzony przez Preston’a Blair’a w książce “Animation – Hot to Draw Animated Cartoons” (raczej nie do dostania w Polsce, na całe szczęście można go legalnie ściągnąć tutaj).
Więc – kiedy mamy już cykl chodzenia, Joe zaprezentuje jak uzyskać dość zadawalający efekt z minimalnym nakładem pracy.

Zobacz animację

Jak to jest zrobione:
Kluczem jest podzielenie nogi na trzy fragmenty – stopę, łydkę i udo. Następnie tworzymy animację opartą na tween’ie zgodnie z cyklem chodu.

Miejsca gdzie elementy są ewidentnie rozłączone “klajstrujemy” odpowiednim kolorem. Efekt nie jest najgorszy, ale to jeszcze nie to.

Sposób 4 – tak to robi Chuck Norris

Przechodzimy do części dla prawdziwych twardzieli. Jeżeli Sposób 3 jest dla ciebie za sztywny – czas na tradycyjną animację klatkową.

Zobacz animację

Nie ma tutaj żadnych skrótów czy uproszczeń – musimy każdą klatkę sekwencji kodu narysować osobno (we Flashu można rysować same nogi – tułów, głowę i resztę można oprzeć na MovieClip’ach – pamiętajcie tylko, że w czasie chodzenia głowa i tułów obniżają się z każdym krokiem, a ręce również powinny wykonywać jakieś ruchy – naprzemienne do nóg).

Przy tym sposobie dobry cykl chodu jako referencja jest twoim najlepszym przyjacielem.

Żeby ułatwić sobie pracę warto skorzystać z widoku “onion skin” we Flashu.

Rezultat zależy od tego jak bardzo przyłożyłeś się do rysowania klatek (moje mogłyby być lepsze – ale z drugiej strony narysowanie chodzącego Joe’a zajęło mi 10 minut).

Mam nadzieję, że tutorial przypadł wam do gustu:)
Jeżeli ktoś chciałby nauczyć się więcej i zanalizować .fla zaprezentowanych animacji – może je sobie stąd ściągnąć.