Kartka kartka - CherubGallery

warsztaty
średni | film i pliki na CD
Photoshop CS4 | Illustrator CS4
tworzymy
animowaną, świąteczną kartkę e-mail
Boże Narodzenie, Wielkanoc czy Dzień Zakochanych to najpopularniejsze
święta, które skłaniają nas do składania życzeń najbliższym, pracownikom,
współpracownikom czy też znajomym. Świąteczna, animowana kartka email,
jest chyba jednym z najpopularniejszych sposobów przekazywania życzeń.
W przykładzie tym spróbujemy przygotować prostą animowaną kartkę świąteczną, zapisaną w postaci umożliwiającej przesłanie jej w treści wiadomości e-mail. Naturalnie w podobny sposób możemy budować
nie tylko kartki świąteczne, lecz także wszelkiego typu newslettery czy
graficzne wiadomości e-mail. Co ważne możemy w takim przypadku łączyć różne formy mediów. Animowany element graficzny wraz z treścią
możemy zamknąć w prostej tabeli, co pozwoli na bardziej atrakcyjną
formę prezentacji.
Do wykonania tego przykładu wykorzystamy łącznie trzy programy: Adobe Illustrator – w celu wstępnego przygotowania wektorowego
projektu, Adobe Photoshop – aby dodać prostą animację oraz Microsoft
Outlook – by przygotować finalną postać naszej e-kartki. Wybór tego typu narzędzi nie jest tu obligatoryjny. Jedynym istotnym programem jest
bowiem Photoshop, który nie tylko pozwala na utworzenie animacji, ale
także przygotowanie projektu w postaci gotowej do rozsyłania klientom
i znajomym. Wykorzystałem Illustratora dla wygody i łatwej edycji użytych elementów wektorowych. Nie jest on jednak konieczny, cały projekt od podstaw możemy zbudować za pomocą Photoshopa.
Często wiadomość prezentowana w atrakcyjnej formie graficznej
zwana bywa – mailingiem HTML. Niestety tworzenie tego typu wiadomości ma kilka istotnych ograniczeń, które warto poznać, zanim jeszcze rozpoczniemy projektowanie.
poznajemy i pojmujemy ograniczenia
Jednym z podstawowych błędów początkujących grafików jest próba
tworzenia animowanej kartki świątecznej za pomocą programu Adobe
Flash. Oczywiście sam program doskonale nadaje się do tworzenia grafiki okolicznościowej, wprowadzenia odpowiednich animacji, a nawet nastrojowego podkładu muzycznego. Na tym kończą się jednak jego atuty
(choć jest ich naprawdę wiele), a rozpoczynają problemy. Pierwszy jest
najbardziej istotny:
•
•
24
Nie ma możliwości osadzenia pliku Flash SWF w treści wiadomości e-mail. Ten problem w zasadzie całkiem skutecznie niweczy
pomysł tworzenia kartki świątecznej za pomocą Flasha. Co gorsze, w ten sposób rozumując, nie ma możliwości, by dźwięk zapisany w animacji Flash znalazł się łatwo w naszej kartce. Pamiętając o tych ograniczeniach, możemy oczywiście zdecydować się na
budowę animowanej kartki za pomocą Flasha, jednak finalną animację eksportujemy wówczas do postaci animowanego GIFA. Takie
postępowanie niesie ze sobą tak wiele ograniczeń i wyrzeczeń, że
trudno powiedzieć by użycie Flasha w tym przypadku było dobrym
pomysłem. Osobiście, pomimo niezłej znajomości zasad tworzenia
animacji Flash, kartki świąteczne zawsze buduję za pomocą Photoshopa (wcześniej Image Ready).
Kolejnym istotnym ograniczeniem naszej kreatywności jest brak
(racjonalnych) możliwości wykorzystania muzyki w treści naszej
kartki. Oczywiście istnieją sposoby, by to zmienić, jednak ich użycie zupełnie nie gwarantuje nam tego, że nasi docelowi odbiorcy
odsłuchają podkład muzyczny czy nasze życzenia.
•
•
Nie można zapomnieć także o niezwykle istotnej kwestii kolorystyki. Wprawdzie, praca prezentowana będzie na ekranie monitora w trybie RGB, jednak aby możliwe było dodanie stosownej animacji, konieczny jest zapis jej efektów w postaci pliku GIF.
Jednym z jego największych ograniczeń z punktu widzenia kreacji i grafiki jest niemożność użycia pełnej palety kolorów RGB.
Pliki typu GIF pozwalają zapisać wyłączenie do 256 kolorów.
Jest to niestety poważny problem.
Ostatnim, jednak niezwykle ważnym ograniczeniem jest waga całej animacji. Nie ma racjonalnych możliwości, by tworzyć
piękne, płynne animacje w postaci pliku GIF. Ten nie nadaje się
do zapisu filmów, doskonale zaś sprawdza się podczas budowy prostych animacji złożonych z kilku następujących po sobie ekranów. Mając to na uwadze, możemy przygotować naprawdę ciekawe animacje, dbając jednocześnie o ich odpowiednią wagę.
o czym należy pamiętać?
Wiadomość e-mail nie powinna być zbyt ciężka - to chyba oczywiste, jednak podczas projektowania nie można zapomnieć także o jej
rozmiarze. Kartka prezentowana będzie za pomocą jednego z popularnych programów do obsługi poczty a może nawet bezpośrednio w
oknie przeglądarki internetowej. Aby dać możliwość wyświetlenia jej
w całości, nie może być ona zbyt szeroka. Zwykle dobrym rozwiązaniem okazuje się przygotowanie kartki o szerokości około 500-700
px i długości dostosowanej do zawartości.
Projektując kartkę warto pamiętać o kolorach. Ograniczenie do
użycia jedynie 256 kolorów wymusza niejako rezygnację ze zbyt
wielu zdjęć jednocześnie. Dobrym rozwiązaniem może być także
(warto rozważyć to w praktyce) przygotowanie świątecznej kartki o charakterze wektorowym. Oczywiście tego typu grafika nie nie-
Rysunek 1. Prace rozpoczynamy od utworzenia dokumentu
Photoshopa o docelowej wielkości
.psd 01/2009 » www.psdmag.org
tworzymy animowaną, świąteczną kartkę e-mail
Rysunek 2. Podczas wklejania obiektów wektorowych
Illustratora, zwykle wygodnie jest wykorzystać opcję Smart
Object. Pozwoli to na późniejszą edycję grafiki w Illustratorze
sie takiej ilości ciepła i emocji jak fotomontaże, jednak z pewnością
lepiej się kompresuje (bez utraty jakości) oraz zwykle nie wymaga
ograniczeń co do użytych kolorów i ich ilości.
Do animacji wykorzystać należy niewielki element całej kompozycji. Zmieniające się obrazy, zbyt duże i jaskrawe animacje są często niezwykle irytujące.
Warto rozważyć także połączenie grafiki i tradycyjnego tekstu.
Dzięki użyciu tabel, możliwe jest przygotowanie kartki w postaci dopasowanej do naszych potrzeb.
tworzymy ogólny projekt kartki
shopa. W rezultacie wyświetlone zostanie okno Paste, które umożliwia
wybór odpowiedniej postaci wklejanej grafiki (rysunek 2).
W tym miejscu, najlepszym wyborem jest z pewnością wskazanie
opcji - Smart Object. Umieszczona w tej formie grafika nie traci swych
wektorowych właściwości. W każdej chwili możemy powrócić do Illustratora, by tam poprawić nasz projekt. Co niezwykle ważne, wszystkie
zmiany wprowadzone i zapisane za pomocą Illustratora zostaną automatycznie naniesione w docelowym dokumencie Photoshopa. Jest to
niezwykle ciekawy i wygodny sposób pracy – polecam.
Wspomniałem tu o możliwości przenoszenia całej pracy z Illustratora do Photoshopa, jednak nie zawsze jest to zasadne i konieczne. Niekiedy, dużo lepszym rozwiązaniem okazuje się kopiowanie jedynie pojedynczych elementów projektu, które wielokrotnie możemy wykorzystać w animowanej kartce.
Oczywiście, cały projekt kartki możemy wykonać także za pomocą
Photoshopa czy innego programu graficznego. Ważne jest, by ten znalazł
się w Photoshopie na osobnej warstwie lub warstwach. Ich ilość nie ma tu
bowiem żadnego znaczenia. Osobne warstwy ułatwiają przeprojektowanie kartki, wprowadzanie koniecznych zmian oraz dodawanie animacji.
dodajemy elementy animacji
Kolejny krok to wprowadzenie dodatkowych elementów, które mają być
animowane. Warto tu pamiętać, by znalazły się one na osobnych warstwach. Mimo że jest to dość kłopotliwe do wykonania, niezwykle uła-
Prace rozpoczynamy od utworzenia dokumentu Photoshopa o docelowej wielkości. W naszym przykładzie wykorzystam dokument o wielkości 600 x 266 px (rysunek 1). Takiej bowiem wielkości jest grafika przygotowana wcześniej w Illustratorze. Do budowy samej animacji, pokusiłem się o wykorzystanie projektu zeszłorocznej kartki świątecznej firmy IT Media – autoryzowanego ośrodka szkoleniowego Adobe (wykorzystana kolorystyka) przygotowanej w postaci wektorowej za pomocą
programu Adobe Illustrator.
W związku z faktem, iż do budowy projektu, w tym przykładzie wykorzystałem grafikę utworzoną wcześniej w Illustratorze, muszę przenieść ją do Photoshopa. W tym celu, otwieram projekt kartki w programie Illustrator, zaznaczam go, kopiuję, a następnie wklejam do Photo-
Rysunek 4. Płatki i inne elementy animacji rozmieszczamy na
osobnych warstwach
Rysunek 5. Paleta Animation pozwala na przejście w tryb animowanie elementów naszej pracy
Rysunek 3. Adobe Photoshop posiada całkiem pokaźną bibliotekę pędzli. Pozwalają one na uzyskanie wielu ciekawych efektów graficznych. W tym przykładzie, wykorzystane zostały płatki
śniegu oraz pędzle naturalne do utworzenia mgiełki oraz płatków
Rysunek 6. Do budowy animacji wykorzystujemy schemat.
Nowa klatka, następnie modyfikujemy widoczność, położenie
lub/oraz poziom krycia wybranych warstw projektu
.psd 01/2009 » www.psdmag.org
25
warsztaty
twi późniejsze wprowadzanie konkretnych animacji. W naszym przykładzie, kolejne płatki śniegu oraz świecące punkty na drzewkach dodane zostały na kilku osobnych warstwach za pomocą pędzla w programie
Photoshopa (rysunek 3).
WSKAZÓWKA
Adobe Photoshop udostępnia pokaźną kolekcję dodatkowych pędzli.
Aby skorzystać z różnych kształtów dostępnych w programie Photoshop, należy w palecie Brushes przejść do opcji i wskazać odpowiednią bibliotekę. Jeśli podczas dodawania pędzli użyjemy opcji
Append, kolejne pędzle dodane zostaną do istniejącej kolekcji. Wybór opcji OK zastąpi bieżący zestaw nową, wskazaną biblioteką.
Dla lepszych efektów wizualnych oraz aby ułatwić sobie pracę, możemy zróżnicować nieco poziom krycia (Opacity) dodanych elementów.
Pozwoli to na późniejszą ich animację w kolejnych klatkach naszej kartki (rysunek 4).
budujemy animację
Tworzenie animacji kartki świątecznej jest niezwykle proste. Wszystkie
konieczne działania wykonamy za pomocą dwóch palet: Animation oraz
Layers. W tym celu przechodzimy do menu górnego Window, otwieramy
paletę Animation i zaznaczamy widoczną w dolnej części opcję Convert
to frame animation (rysunek 5). Wybór ten pozwoli na tworzenia animacji poklatkowych charakterystycznych dla plików GIF.
W rezultacie mamy już gotową pierwszą klatkę animacji. Jej wygląd jest odzwierciedleniem bieżącego układu i widoczności warstw
naszego projektu. Aby dodać kolejną klatkę, użyjemy przycisku Duplicate Selected Frames widocznego w dolnej części okna Animation. W ten sposób wszystkie warstwy projektu przeniesione zostały
do drugiej klatki animacji. Tu jednak musimy wprowadzić kilka drobnych zmian.
Aby przygotować nasza animację, będąc w drugiej klatce pliku, modyfikujemy widoczność, położenie lub/oraz poziom krycia wybranych
warstw projektu. Pozwoli to uzyskać efekt animowania płatków śniegu, mgiełki w tle oraz lampek na drzewkach (rysunek 6). Aby podejrzeć
działanie animacji, wystarczy szybko klikać kolejno w pierwszą i drugą klatkę projektu. W ten sposób mamy wygodny podgląd wprowadzanych modyfikacji.
Wprowadzenie kolejnej klatki animacji wygląda niemal identycznie. Rozpoczynamy od przycisku Duplicate Selected Frome, a następnie modyfikujemy wygląd, położenie czy też widoczność niektórych
warstw naszego projektu. W podobny sposób dodajemy kilka (dosłownie kilka) klatek projektu godząc się z faktem, że nie ma technicznych
i praktycznych możliwości uzyskania efektu płynnie opadających płatków śniegu czy zapalania świateł na drzewkach (rysunek 7).
Liczby widoczne poniżej miniaturki podglądu określają czas wyświetlania kolejnych klatek animacji. W programie Adobe Photoshop możemy niezależnie określić czas trwania każdej klatki animacji. W tym celu należy rozwinąć menu widoczne tuż obok bieżącej wartości i wskazać
inną, odpowiednią wartość. Aby zmienić czas trwania wszystkich klatek
animacji jednocześnie, wystarczy zaznaczyć je wszystkie i dokonać odpowiedniej modyfikacji czasu (rysunek 8). Wprowadzone w ten sposób
zmiany dotyczą automatycznie wszystkich klatek.
tworzymy animację w pliku GIF
Rysunek 7. Gotowa animacja w naszym przykładzie złożona
jest jedynie z czterech klatek
Rysunek 8. Możemy szybko zmienić czas trwania wszystkich
klatek jednocześnie
Aby zapisać efekt animacji w postaci pliku GIF, konieczne jest wykorzystanie polecenia Save for Web & Devices z menu górnego File. Pozwoli to nie tylko na wskazanie odpowiedniego formatu zapisu naszej pracy, ale także na wybór liczby użytych kolorów i wykorzystanie dodatkowej kompresji.
W prawej części okna Save For Web & Devices wskazujemy
GIF jako format wyjściowy, a następnie (o ile to możliwe) redukujemy liczbę użytych kolorów animacji. Dzięki podglądowi pliku wyjściowego w dolnej części okna możemy precyzyjnie określić wymaganą liczbę barw naszej pracy. O ile waga pliku przekracza założone maksimum, możemy także wykorzystać dodatkową kompresję stratną. W tym celu przechodzimy do sekcji Lossy i określamy odpowiedni zakres kompresji. Niestety, stratna kompresja
w przypadku plików GIF prowadzi do bardzo znacznego pogorszenia jakości naszej pracy. Oznacza to więc, że należy korzystać z niej
z wielkim umiarem i wyczuciem. Jeśli jednak nawet kompresja nie pozwoli na zapis pliku GIF o założonej wadze, konieczne będzie usunięcie
niektórych klatek animacji i/lub zmniejszenie liczby wykorzystanych
kolorów. Podczas zapisu pracy w formacie GIF, warto zwrócić uwagę także na opcję Looping Options widoczną w dolnej części okna. W tym miejscu określamy sposób powtarzania animacji zapisanej w pliku GIF. Wybór opcji Forever pozwala na stałe zapętlenie animacji (rysunek 9).
Wprowadzone ustawienia potwierdzamy za pomocą przycisku
Save. Wskazujemy odpowiednie miejsce na dysku i nadajemy pracy docelową nazwę.
Uwaga!
Pliki przeznaczone do użycia w internecie nie powinny mieć nazw
zawierających spacje, polskie znaki czy inne znaki specjalne typu:
*, ;, „, @, # itp.
budujemy wiadomość e-mail
w programie Microsoft Outlook
Rysunek 9. Za pomocą polecenia Save For Web & Devices zapisujemy efekt naszej pracy w pliku typu GIF
26
Ostatnim krokiem przygotowania naszej kartki jest budowa odpowiedniej oprawy za pomocą klienta poczty internetowej. W naszym przypadku, wykorzystam najpopularniejszy program pocztowy, jakim bez wątpienia jest Microsoft Outlook. Pozwala on na tworzenie wiadomości email w formacie HTML doskonale spełniającym nasze potrzeby.
Za pomocą przycisku Nowa wiadomość pocztowa tworzymy
nowy, czysty dokument e-mail. Należy pamiętać, by był to e-mail
.psd 01/2009 » www.psdmag.org
Rysunek 10. W programie pocztowym tworzymy nową wiadomość e-mail w formacie HTML i dodajemy prostą tabelę
Rysunek 11. Cały projekt możemy od razu przygotować za pomocą Photoshopa. W tym przypadku w treści wiadomości znajduje się wyłącznie pojedynczy plik graficzny
w formacie HTML. Jedynie tego typu forma wiadomości pozwala na
budowę atrakcyjnych mailingów.
Aby nadać naszej wiadomości odpowiednią oprawę, proponuję wykorzystać prostą tabelę HTML, która pozwoli na budowę odpowiedniego układu naszej wiadomości. W tym celu za pomocą sekcji Wstawianie dodałem prostą tabelę złożoną z trzech rzędów i jednej kolumny. Teraz nie pozostaje nic innego jak tylko wprowadzić właściwą treść wiadomości. W tym celu przechodzimy do menu wstawianie i za pomocą polecenia Obraz dodajemy przygotowaną właśnie animację w pierwszym
rzędzie tabeli.
W środkowym wierszu tabeli, wprowadzamy właściwą treść wiadomości oraz odpowiednie życzenia świąteczne. W ostatnim wierszu
dodajemy zaś stopkę z danymi naszej firmy lub/oraz jej logotyp (rysunek 10).
O ile to konieczne, możemy także dostosować nieco wielkość, kolor i formatowanie tekstu, dodać delikatne obramowanie oraz wyśrodkowanie tabeli. W rezultacie powstaje nam całkiem atrakcyjna kartka świąteczna zbudowana za pomocą graficznych programów Adobe, w szczególności zaś chyba najpopularniejszego programu graficznego na świecie – Adobe Photoshop.
Animowana kartka świąteczna nie jest jak widać trudnym zadaniem.
inne możliwości
Naturalnie, możemy jeszcze bardziej uprościć nasze działania. Jeśli powiększymy obszar roboczy dokumentu Photoshopa, dodamy od razu
stosowny tekst oraz logo naszej firmy, gotową kartkę możemy w całości
umieścić w wiadomości email (rysunek 11). W takim przypadku nie ma
potrzeby, by dodawać tabelę czy też wprowadzać dodatkowe teksty. Cały projekt i animacje możemy wykonać za pomocą Photoshopa. Dowolny
program pocztowy pozwoli na przesyłanie jej w treści wiadomości.
Z najlepszymi życzeniami
Paweł Zakrzewski