Usability w projektach Flex – prezentacja FlashCamp 2010 Warsaw from Robert Podgórski on Vimeo.

Ściągnij .pdf file
Ściągnij pliki Keynote

Character illustration step by step from Robert Podgórski on Vimeo.

Not Found

The requested URL /api/api.php was not found on this server.

Artykuł przedstawia historię pixel-art’u i 6 stronicowy tutorial o tworzeniu isometrycznych scenerii.

Zapraszam do lektury;)

Argentyński artysta Carlos Cabrera udostępnił serię napisanych przez siebie tutoriali (tworzonych dla 2DArtists Magazine) jako pdf’y i pliki video – do pobrania za darmo z jego strony (carloscabrera.com.ar).

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ć

Właśnie trafił do mnie nowy numer magazynu .PSD (11/2008)
Tak pokrótce napiszę co można w środku znaleźć (wraz z moimi zjadliwymi komentarzami).
Redakcja .PSD wykazała się niesamowitą szybkością (pewnie po nocach nie spali) – i zdaje się, że jako pierwszy branżowy magazyn zamieścił dość obszerną realację nowych funkcji Photoshop’a CS4.

Poza tym znajdziemy jak zwykle – całą masę tutoriali.

Niektóre są ciekawsze (np. bardzo dobry tutorial o sztuce fotomontażu “zagubiona”), inne mniej (tutorial o digital painting – opis zagmatwany, rezultat taki sobie, a mam wrażenie, że jak ktoś malowania nie “czuje” to i tak nie da rady tych porad wprowadzić w życie).

Szczególnie się ucieszyłem z tutoriala do Blender’a. Rezultat mógłbybyć lepszy – ale to, że open source się wybija cieszy. (jak w .psd dadzę tutorial z Gimp’a – to dopiero będzie szał).

Najciekawszym tematem numeru jest praca, która wygrała konkurs CGSociety “Sztuka przestrzeni”.
Szkoda tylko, że ten materiał jest wyjątkowo głupio zredagowany – ni to tutorial (gigantycznej ilości pracy wsadzonej w ten projekt nie da się pokazać na 4 stronach), ni to prezentacja pracy (jest jedno większe zdjęcie). Lepiej by było dać w tym miejscu wywiad z twórcą o tym co go zainspirowało, o jego warsztacie itd.

Wysoką cenę (30pln) w pewnym stopniu rekompensują dołączone płyty (video z warsztatami photoshopa i zdjęcia). Szkoda tylko, że płyta u mnie wyła jak piła mechaniczna przy cięciu lasu.

Zanim zaczniemy:
Ogólna uwaga na temat wklejania nowych obrazów jako nowej warstwy.
Po skopiowaniu tego co chcemy wkleić do schowka i wklejeniu (czyli po klasycznej operacjii ctrl+c – ctrl+v) wklejenie pojawia się w Gimpie jako “Floating Selection”. Aby przekształcić je na warstwę należy kliknąć ikonę utworzenia nowej warstwy.

Na początek wybierzemy tło dla naszej ilustracji – podstawą do niego będzie zdjęcie starego papieru.

Wycinamy z niego odpowiedni fragment

A następnie dodajemy warstwę z gradientem i ustawiamy jej krycie na “multiply”

Teraz zabierzemy się za naszą wróżkę.
Mamy odpowiednie zdjęcie modelki.

Wklejamy zdjęcie na nową warstwę i od razu robimy jej duplikat.

Wycinamy zdjęcie z tła przy użyciu pióra (Pen) – miejsca z włosami na razie możemy zostawić.

Do wycięcia miejsc gdzie mamy delkiatne, rozproszone włosy używamy techniki opisanej tutaj

Tak więc wyseparowaliśmy (wyszparowaliśmy) zdjęcie modelki z tła.
Umieszczamy wyciętą modelka na warstwie wyżej, a niewyciętej warstwie poniżej nadajemy krycie “multiply”. Dzięki temu cień jaki orginalnie był na zdjęciu pojawia się u nas.

Zabierzemy się teraz za skrzydła wróżki – wytniemy je ze skrzydeł motyla.

Rozdzielamy skrzydła na warstwy i wycinamy piórkiem.

Wycięte skrzydła (na warstawach nad wróżką) umieszczay tak aby sprawić wrażenie, że wyrastają z jej pleców. Ustawiamy ich alphę na 80%. Możemy też trochę podkręcić kolory przy pomocy krzywych (curves)

Częśc skrzydła musimy wyciąć. Aby wyglądało to w miarę realistycznie – na chwilę robimy warstwę skrzydła półprzezroczystą (alpha na 50%) – i wycinamy piórkiem fragment wzdłuż loków wróżki.

Dodajemy też cień skrzydła na plecach modelki. Na nowej warstwie rysujemy piórkiem kształt cienia, wypełniamy czarnym kolorem, dodajemy rozmycie gaussa (ok. 10-20px) i ustawiamy alphę na ok. 60%.

Tak samo rysujemy cień skrzydeł na podłożu (alpha może być trochę mniejsza)

Dodajemy kilka fantastycznych zawijasów (zrobione tym pędzlem)

Wróżka powinna mieć nieco bardziej niestandardowy kolor włosów – zmieniamy go na zielony.
Dodajemy nową warstę wypełnioną zielonym kolorem i maskujemy tak samo jak przy wycinaniu włosów. Następnie ustawiamy tej warstwie półprzezroczystość i krycie “overlay”.

W tym momencie zdecydowałem się na zmianę tła.
Karta papieru i żólty gradient zostały wywalone – zamiast tego na tło wybrałem beżowo-szary gradient.

Do tła dodane została nowa warstwa – gdzie z ciemnobeżowym kolorem wygenerowana została “mgła”.

Przechodzimy do fazy wykańczającej ilustrację.
Dodałem wróżce kosmyk pomarańczowych włosów (rysowany tak samo jak cień) i kilka dalszych zawijasów. W tle pojawiły się stworzone dynamicznym pędzlem Vine (w pakiecie z Gimpem) liście (na nowej warstwie).

Warstwę z liściami przerobiamy na maskę – i maskujemy nią żółto-czerwony gradient.

Dodajemy na nowej warstwie jeszcze więcej liści i ponownie tworzymy z nich maskę dla gradientu
(innego niż ten pierwszy).

Pędzlem Sparks (przychodzi razem z Gimpem) dodajemy kilka robłysków.

Ostatnim elementem jest dodanie nieco “grunge’owych” elmentów, które zarysują nam płaszczyznę na jakiej znajduje się wróżka. (tym pędzlem)

Ilustrację można uznać za skończoną:)
(kliknij na zdjęciu poniżej, żeby zobaczyć większą wersję)

Jeżeli ktoś chce obejrzeć jak wygląda .xcf – można go ściągnąć tutaj.

Powyższa ilustracja jest opublikowana pod licencją Creative Commons – można ją wykorzystać w prywatnych i komercyjnych projektach.

Zdjęcie przed:

Zdjęcie po:

Plik wideo w wyższej rozdzielczości można ściągnąć tutaj.

Konkretnie – będzie to kalkulator, z nastawieniem na kolorową i ciekawą oprawę graficzną – użyjemy trybu chrome okna (czyli okno będzie miało niestandardowy kształt).
Głównym celem tego posta jest pokazanie jak tworzyć aplikacje z chrome’owanymi oknami oraz przechwytywać eventy z klawiatury i myszki.

Projekt

Możemy zaprojektować interface naszego widget’a od razu we Flashu lub zaimportować dowolny plik graficzny (np. z Photoshopa). W tym przypadku wszystkie elementy zostały narysowane bezpośrednio we Flashu. Tworzenie grafiki odbywa się dokładnie w ten sam sposób co “regularne” tworzenie Flashowych treści.
(przy okazji – projekt kalkulatora jest rozpowszechniony zgodnie z licencją Creative Commons – można całość lub dowolne elementy wykorzystać w prywatnych i komercyjnych pracach – to samo dotyczy kodu).

Klasa Calc

Stworzymy klasę, która będzie odpowiadała za operacje kalkulatora.
Jest to odrobinę strzelanie z armaty do wróbli:)
Poniżej kod klasy:

package{
public class Calc{
public static function sum(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 + liczba2;
return wynik;
}
public static function deduct(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 - liczba2;
return wynik;
}
public static function multiply(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 * liczba2;
return wynik;
}
public static function divide(liczba1:Number,liczba2:Number):Number{
var wynik = liczba1 / liczba2;
return wynik;
}
}
}

Kodowanie kalkulatora

Poniżej omawiam kod kalkulatora (najciekawsze elementy). Pełen kod z komentarzami jest do ściągnięcia na koncu posta.

import flash.desktop.NativeApplication;

Tego potrzebujemy aby obsługiwać nasze chromowane okno.


var myCalc:Calc = new Calc();

Tworzymy nowy obiekt klasy Calc.


function calculateResult()
{
...
}

Funkcja wykorzystująca obiekt Calc i obliczająca rezultat.


function removeTrailingZeros()
{
...
}

Funkcja do usuwania zer na końcu wyniku.


function calculatorInterface(action:String)
{
...
}

Interface kalkulatora – czyli akcje powiązane z odpowiednimi klawiszami.


function reportKeyDown(event:KeyboardEvent):void
{
trace(String.fromCharCode(event.charCode))
...
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

Listener’y dla eventów związanych z klawiaturą.
Kiedy na klawiaturze zostaje naciśnięty klawisz – jego kod jest przekazany do funkcji interface’u.


theCalc.moveButton.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
function moveWindow(event:MouseEvent):void {
//przesuwanie okna
stage.nativeWindow.startMove();
}
theCalc.calcCloseButton.buttonMode = true;
theCalc.calcCloseButton.addEventListener(MouseEvent.MOUSE_DOWN, closeWindow)
function closeWindow(event:MouseEvent):void {
//zamykanie okna
NativeApplication.nativeApplication.exit();
}
theCalc.minimizeButton.buttonMode = true;
theCalc.minimizeButton.addEventListener(MouseEvent.CLICK, minimize_CLICK);
function minimize_CLICK(event:MouseEvent):void
{
//minimalizacja okna
stage.nativeWindow.minimize();
}

Kod odpowiedzialny za zamykanie, przesuwanie i minimalizację okna.
Jako, że nasz widget ma chromowane okno – musimy te akcje dorobić sami.

Tworzenie pliku AIR

Do tej pory stworzyliśmy najzwyklejszy w świecie plik Flash oparty na AS 3.0 – czas zamienić go w aplikację AIR.
Najpierw wybieramy menu File – Publish Settings. Pod tabem “Flash” wybieramy opcję “Version” na “Adobe AIR 1.0″.
Następnie z menu Commands wybieramy opcję “AIR – Application and Installer Settings”.

W tym oknie możemy określić parametry tworzonego installera.
Na razie większość opcji pozostawiamy w domyślnym ustawieniu – poza “Window Style”, które zmieniamy na “Custom Chorme (transparent)”.

Ostatnim krokiem jest wskazanie pliku z certyfikatem. Certyfikat należy kupić – np. na stronie Adobe. Nie jest niezbędny do tworzenia plików AIR – ale użytkownicy mogą bardzo podejrzliwie podchodzić do aplikacji bez certyfikatu.

Download

Pliki:
Instalator kalkulatora
Źródła .fla i .as

Zapraszam do komentarzy:)