Porady Grafikow Z Agencji Reklamowych PSD 01 2011

Pobierz wydanie za darmo.
Pliki rdowe do Pobrania z www
NR 01/2011 (59)
Porady grafikw z agencji reklamowych

we love design sposb na kampani wirusow w internecie zrb wasny posg w photoshopie jak si tworzy panoram stereograficzn
Francois chalet - bajkopisarz z krainy designu Tworzymy prawdziwy baner reklamowy we Flash poznaj sekerTy skuTecznego e-mailingu
Wygraj kredyty
Wygraj kredyty w Fot oliaF.opllia.pl w to
Konkurs
grafika z okadki
Kobieta ubrana w wod. Ireneusz Mazur, Apluz
fotografia cyfroWa
Drugi element kompozycji: WIATO czyli gdzie ustawi soce, by wietnych zdj robi tysice. Lidia Grabowska 45
Warsztaty
Barbie car kompozycja z elementami 3D. 13 Jacek Szotysek, Studio Bundle Baner reklamowy Infininty. Ena Creation Piotr Cywyski Reklama w Photoshopie wizerunek ukryty w warstwach. Jakub Wjtowicz, Royal Brand PR Wasny posg, czyli staroytna wersja nas samych. Tomek Adamek 21
rozmaitoci
Prezentacja zdj Royalty Free Zdjcia mona pobra ze strony www.psdmag.org/pl Ogoszenie konkursu Byle do wiosny
6 7
26
30
We love design- zaraamy wirusem mioci spoeczno internetow, czyli kampania wirusowa w Internecie. 40 Marcin Rojek, 2arts Panorama sferyczna jako planeta, ktra ubarwi layout kadej strony internetowej. Pawe Szroeder, adStone Projektowanie profesjonalnego newslettera krok po kroku. Barbara Byrska, Freshmail
49
54
alfabet designerW
C - Francois Chalet. Bajkopisarz z krainy designu. ukasz Smutek 37
Magazyn .psd jest wydawany przez Software-Press Sp. z o.o. Sp. K. z siedzib przy ul. Bokserska 1, 02-682 Warszawa Prezes: Pawe Marciniak Dyrektor Wydawniczy Ewa ozowicka ewa.lozowicka@software.com.pl Redaktor Naczelny: Anna Adamczyk anna.adamczyk@software.com.pl Asystenci redakcji: Rafa Szymkiewicz rafal.szymkiewicz@software.com.pl Katarzyna Wiekiera, Szymon Kowas
Kierownik Produkcji: Andrzej Kuca andrzej.kuca@software.com.pl Skad: Graphic & Design Eurodesign www.euro-design.info Grafika na okadce: Ireneusz Mazur, Apluz Projekt graficzny okadki: Dave Jones, Eurodesign Dzia reklamy: adv@software.com.pl, tel.: (22) 427 35 33 Strona magazynu: www.psdmag.org/pl
Wydawca: Software-Press Sp. z o. o. Sp. K 02-682 Warszawa, ul. Bokserska 1 e-mail: psd@psdmag.org, www.psdmag.org tel. (22) 427 37 59, fax (22) 244 24 59 Wyprodukowano w Polsce .PSD ukazuje si w jzykach: polskim, francuskim, niemieckim, angielskim. Redakcja dokada wszelkich stara, by publikowane w pimie i na towarzyszcych mu nonikach informacje i programy byy poprawne, jednake nie bierze odpowiedzialnoci za efekty wykorzystania ich; nie gwarantuje take poprawnego dziaania programw shareware, freeware i public domain. Uszkodzone podczas wysyki pyty wymienia redakcja. Wszystkie znaki firmowe zawarte w pimie s wasnoci odpowiednich firm i zostay uyte wycznie w celach informacyjnych.
.psd 01/2011 | www.psdmag.org/pl
Zdjcia royalty free

I
Udostpniamy do pobrania ze strony internetowej now porcj zdj pt.: Sporty zimowe. S to zdjcia w duej rozdzielczoci i moecie je wykorzysta w Waszych komercyjnych pracach graficznych oraz w konkursie Byle do wiosny, ktry jest ogoszony w tym wydaniu. Pobierzcie zdjcia, klikajc na button Pliki rdowe do pobrania na stronie www.psdmag.org/pl. www.fotolia.pl Na stronie internetowej magazynu .PSD znajdziecie te materiay rdowe do tutoriali.
I
I I I I
I
konkurs
Byle do wiosny
Konkurs na fotomonta ze zdj z Fotolii
DRODZy CZyTelNICy, Ogaszamy nowy konkurs na fotomonta do tematu Byle do Wiosny Zadanie konkursowe polega na tym, e ze zdj udostpnionych w plikach rdowych do .PSD 1/2011 naley stworzy grafik komputerow. Prace bdziemy ocenia ze wzgldu na zgodno z tematem, symbolik i estetyk wykonania.
Prace naley wgra do folderu: http://psdmag.org/pl/gallery/14/konkursy Wane by umieci je w zakadce byle do wiosny. Jeden uczestnik moe wysa jedn prac. Naley te dosa podgld pracy w maej rozdzielczoci 72 dpi wraz z danymi kontaktowymi (imi nazwisko, telefon, e-mail) na adres competition_psd@software.com.pl Nagrodami s kredyty na zdjcia w serwisie www.fotolia.pl Za pierwsze miejsce jest 150 kredytw; Za drugie miejsce jest 100 kredytw; Za trzecie miejsce przyznamy 50 kredytw. Prace zbieramy do 28 lutego 2011 r. Wyniki podamy do 15 marca 2011 r. CZeKAmy NA FOTOmONTAe I TRZymAmy KCIUKI ZA WygRAN.
grafika z okadki
Photoshop CS5 | atwy | Pliki rdowe do pobrania z WWW
KoBieta uBrana w wod
grafika z okadki
KoBieta
ubrana w wod
Przegldajc zasoby sieciowe, raz na jaki czas napotykamy na ciekawe kompozycje kobiety ubranej w wod, ld, farb itp. Jest to do efektowne i przykuwa uwag. Wikszoci osb wydaje si to skomplikowane do zrobienia. Nieliczni jednak wiedz, e efekt jest niesamowicie prosty. Wystraczy mie zainstalowany Photoshop i dysponowa dobrym zdjciem. Pokrtce postaramy si przybliy sposb na taki fotomonta.
Ireneusz mazur Reprezentuje Apluz Agencj Artystyczno-Reklamow z Torunia, ktra w swojej pracy stara si czy pasj oraz kreatywno z rozwizaniami psychologii postrzegania. Dowiedz si wicej o wizualnej stronie produktw, firm oraz instytucji odwiedzajc www.aplauz.media.pl
1: Wybr materiau i StWorzenie obSzaru roboCzego
Jeli dysponujemy odpowiednio duym budetem zlemy wykonanie sesji zdjciowej zaprzyjanionemu studio fotograficznemu a efekt bdzie zdecydowanie lepszy. W przypadku gdy nasze rodki s bardziej ograniczone posuymy si zdjciem wybranym spord bogatej oferty bankw zdj. Proponuje zakupienie zdjcia w jak najwikszym formacie gdy przy pomniejszaniu wszelkie nasze niedocignicia nie bd tak rzucay si w oczy. Pamitajmy by oryginalne zdjcie zawsze byo do dyspozycji jako jedna z dolnych warstw, z ktrej w razie potrzeby bdzie mona pobra niektre elementy jak np. okie.
grafika z okadki
2a
2: CzySzCzenie zdjCia
Pierwszym etapem bdzie pozbycie si ta. Najrozsdniej chyba bdzie posuy si narzdziem Pirko/Pen Tool [P] i wyci dany ksztat. Gow a w zasadzie wosy wycinamy w caoci gdy z nimi bdzie troch zabawy.
3: dorabianie CzCi Ciaa
Do usunicia odziey posuylimy si kilkunastoma fragmentami ciaa i kilkoma godzinami z tabletem w celu uzyskania odpowiedniej pozycji. Nie jest to zabieg trudny aczkolwiek czasochonny. Nowe ciao nie musi by idealnie dopracowane gdy zostanie niemal cakowicie zakryte.
10
grafika z okadki
4a
4b
4: tWarz i WoSy
W przypadku ciemnych wosw najprostszym sposobem bdzie wykonanie kopii warstwy [Ctrl]+[J] oraz posuenie si krzywymi Obraz> Dopasowanie > Krzywe (Image > Adjustments > Curves) [Ctrl]+[M] i wskazanie odnonika dla bieli. Nastpnym krokiem bdzie zmiana saturacji/nasycenia kolorw Obraz>Dopasowanie>Barwa/Nasycenie (Image>Adjustments>Hue/Saturation) [Ctrl]+[U] na -100 (usunicie koloru). Tak przygotowan warstw ustawiamy jako Mnoenie (Multiply) [Alt]+[Shift]+[M]. Na wczeniej skopiowanej warstwie tworzymy mask i narzdziem Pdzla (Brush Tool) [B] usuwamy zbdne elementy wosw. Mona posuy si Gumk (Eraser Tool) [E] ale nie bdzie mona nanosi wielu poprawek. Jeli chcemy to zrobi ciemne to, w zasadzie, wczone dwie warstwy bd oznaczay koniec zabawy z wosami.
Wod mona wykona na dwa sposoby. Pierwszy to dodatek RealFlow i 3DSMax za drugi to kilka zdj typu splash z banku zdj. Drugie rozwizanie jest zdecydowanie tasze aczkolwiek bdzie wymagao wstpnej obrbki w celu uzyskania przeroczystoci. Najprociej jest uy opcji Zaznacz > Zakres koloru (Select > Color Range) i wskaza to. W tym przypadku wszystko co jest bkitne zostanie zaznaczone. Tworzymy mask by odseparowa to i narzdziem Obraz>Dopasowanie>Barwa/Nasycenie (Image>Adjustments>Hue/ Saturation) [Ctrl]+[U] zmieniamy nasycenie kolorw a sam warstw ustawiamy jako Janiej (Lighten) [Alt]+[Shift]+[G]. eby poprawi wygld kropel proponuje uy wyostrzania Filtr>Wyostrzanie>Wyostrz (Filter>Sharpen>Sharpen). Tak przygotowan warstw kilkakrotnie duplikujemy [Ctrl]+[J] i uywamy do uoenia ksztatu sukienki. Zbdne elementy wymazujemy za pomoc Pdzla (Brush Tool) [B] i masek bd Gumk (Eraser Tool) [E]. Kilkanacie warstw powinno da nam cakiem przyzwoity efekt.
5: Sukienka
5a
11
grafika z okadki
W zalenoci od tego jak sukienka bdzie wygldaa w caoci mona pobawi si w popraw kolorystyki za pomoc krzywych Obraz>Dopasowanie>Krzywe (Image>Adjustments> Curves) [Ctrl] + [M], nasycenia kolorw Obraz > Dopasowanie > Barwa / Nasycenie (Image>Adjustments>Hue/Saturation) [Ctrl]+[U] bd popraw jasnoci niektrych miejsc narzdziem Rozjanianie (Dodge Tool) [O].
6: koloryStyka
7a
7: oStatnie Szlify
Pozostaje zadba o to by nasza pani miaa rce. W tym celu wycinamy odpowiednie fragmenty z oryginalnego zdjcia, ktre zawsze pozostawiamy jako rezerwowe, gdzie na spodzie. W zasadzie efekt mamy gotowy. Dzikuj za powicony czas :) Ireneusz Mazur
12
adobe illustrator, Cinema 4d, adobe Photoshop | trudny | Pliki rdowe do pobrania z WWW
Warsztaty
Kompozycja z elementami 3d
Chciabym zaprezentowa moliwo wspdziaania trzech rnych rodzajw grafiki w jednym projekcie. Pozwala nam to zaoszczdzi sporo czasu i daje moliwo lepszego zapanowania nad projektem oraz wprowadzania szybciej ew. korekt Klienta.
Najistotniejszym elementem ilustracji (poza przedmiotem reklamy oczywicie) jest w tym wypadku napis 3D. Problemem czsto bywa zbyt nadmierna cyfrowo elementu 3D a co za tym idzie dugi czas doprowadzania takiego elementu do podanego wygldu w samej aplikacji 3D oraz kompozycja z materiaami 2D. Co prawda dzisiejsze programy 2d jak Adobe Illustrator czy Adobe Photoshop maj moliwo ograniczonego tworzenia treci 3D, jednak tradycyjna aplikacja do tego zaprojektowana ma zdecydowanie wikszy repertuar narzdzi jak np. swoboda manipulowania kamer. Problem jest jednak ten sam - pozbycie si doskonaoci grafiki 3D bo nasze oko nie jest do niej przyzwyczajone. Tutorial ten pokazuje jak w przykadowy sposb uzyska podany przez nas efekt poprawnej kompozycji surowego materiau 3D z grafik wektorow i bitmapow 2D.
Jacek Szotysek Grafik zajmujcy si kreacj na potrzeby wszystkich rodzajw mediw. Waciciel studia Bundle. www.bundle.pl
13
KompoZycja Z elementami 3d
Warsztaty
1: NoWy DoKuMeNT
Rozpoczynamy prac od stworzenia napisu gwnego jako cieki wektorowej w Illustratorze. Tworzymy nowy dokument o wielkoci np. A4 z przestrzeni robocz RGB lub CMyK. Nie ma to dla nas znaczenia, gdy gotowy element napisu wyeksportujemy do programu 3D do wytoczenia.
2: NAPIS
Wybieramy interesujc nas czcionk lub sami tworzymy napis Barbie z krzywych Bziera. Ja wybraem czcionk Domingo. Wielko 46pt. Czcionk pogrubimy nadajc jej obrys 3pt oraz zaznaczamy Roun Join w palecie Stroke. Czcionk zamieniamy na krzywe Type>Create Outlines.
3: MoDyFIKACJA NAPISu
Nastpnym etapem bdzie modyfikacja napisu. Korzystnie bdzie popracowa nad czcionk aby mimo swojej gruboci nie pozbawi jej pierwotnej smukoci. Wyduamy grne ogonki oraz skalujemy w pionie poszczeglne czcionki tak aby te rodkowe byy
wysze od brzegowych. Moemy usun niektre wzy ogonkw narzdziem Delete Anchor Point Tool [-] aby atwiej uzyska gadsze linie. Nastpnie pozycjonujemy elementy napisu dodajc mu zwartoci. Cao pracy nada napisowi i caej przyszej kompozycji wyranej przestrzeni.
14
Warsztaty
4: MoDyFIKACJA NAPISu II
Koczc prac nad napisem przeksztacamy obrys w obiekt wypeniony Object>Path>Outline Stroke. Dwukrotnie rozgrupowujemy Object>Ungroup a nastepnie czymy wszystko funkcj Unite w palecie Pathfinder. Poczymy w ten sposb pierwotny dodatkowy obrys z materi czcionki w jeden obiekt wypeniony.
2 5: eKSPoRT Do PRoGRAMu 3D
eksportujemy grafik do dowolnego programu 3D jako plik .ai. W naszym tutorialu uylimy Cinema 4D ale nie ma to wikszego znaczenia, gdy bdziemy uywa funkcji dostpnych w kadej aplikacji 3D.
6: IMPoRT KRZyWyCh Do CINeMA 4D
Importujemy do Cinema 4D napis, potwierdzajc ew. wyskakujce okienka. W palecie Objects zaznaczamy grup liter i narzdziem Move [e]wybieranym z paska narzdzi, ustawiamy bezporednio nad lini wsprzdnych X, w palecie Coordinates zerujemy pozycje X i Z. otwieramy grup z literami, zaznaczamy dwie krzywe tworzce literk i i naciskajc prawy klawisz myszki wybieramy z menu podrcznego Connect+Delete.
Wstawiamy Objects>NURBS>Extrude NURBS. W palecie objects wrzucamy do niego grup liter. Zaznaczamy Extrude NURBS i w palecie Attributes otwieramy zakadk Object. W parametrze Movement Z wpisujemy 30. Zaznaczamy Hierarchical. W zakadce Caps parametr Start i End zmieniamy na Fillet Cap, Steps = 5, Radius = 1m. Dodajemy w ten sposb obrys oraz zaokrglamy brzegi.
7: WyTACZANIe
15
Warsztaty
Tworzymy kamer w menu Objects>Scene>Camera. Dodajc j korzystniej bdzie aktywowa okno w widoku Perspective gdy projekcja kamery domylnie zostanie ustawiona rwnie jako Perspective oraz dopasuje si do naszego widoku. okrelamy parametry obrazka Render>Render Settings w zakadce output wpisujemy w Width=2500, Height=1800. W zakadce Save okrelamy miejsce zapisu obrazka w formacie psd. Zaznaczamy Alpha Channel.
8: eleMeNTy SCeNy
2
W menu okna roboczego Perspective ustawiamy widok z naszej kamery Camera>Scene Cameras>Camera. W palecie Objects zaznaczamy nasz kamer i dwukrotnie klikajc na jej nazwie zmieniamy j na np. Kamera Barbie. Majc j nadal zaznaczon tworzymy klucz kamery w menu Animation>Record Active Object [F9]. W palecie Coordinates wpisujemy parametry pokazane na zdjciu nr 09a. Chodzi o takie kadrowanie widoku by obiektyw kamery by na 2/5 wysokoci napisu. Po kadej zmianie ustawienia kamery klikamy [F9] aktualizujc klucz.
9: uSTAWIeNIA KAMeRy
W palecie Objects wybieramy Extrude NURBS z napisem i naciskamy klawisz [C]. W ten sposb kada z liter otrzyma swj niezaleny modyfikator Extrude NURBS z wczeniej nadanymi parametrami. Rozwimy grup i nazwijmy kady modyfikator literk swojego waciwego odpowiednika dwukrotnie klikajc w dotychczasow nazw. Aby doda wikszej przestrzeni literom zaznaczamy kad z osobna i obracamy narzdziem Rotate Tool [R] na osi y. To nawet przy niewielkim wytoczeniu pozwoli nam zobaczy wyranie gboko liter.
10: uSTAWIeNIA NAPISu
10
11 11: TWoRZeNIe MATeRIAW

Stwrzmy materiay dla naszych liter - Fill>New Material. Dwukrotnie klikajc na materiale otwiera si okienko edycji. Nazywamy go Front. ustawiamy Color R= 235, G=0, B=139. odznaczamy parametr Specular. Zostawiajc okienko edycji zaznaczamy nasz materia i naciskajc [Ctr]+[C] oraz [Ctr]+[V] powielamy go. Zmieniamy nazw materiau na Boki. Kolor zmieniamy na R= 255, G= 255, B=255. Zamykamy okno.
16
Warsztaty
Zaznaczamy oba materiay i wrzucamy na grup zawierajc litery. Pierwszym materiaem powinien by Boki. Zaznaczamy ikonk materiau Front i w palecie Attributes, zakadce Tag opisujemy parametr Selection jako C1. To samo robimy z materiaem Boki, ale wpisujemy R1. Rozmieszczamy w ten sposb kolory na elementach z ktrych si skada wytoczona litera.
12: NADAWANIe oBIeKToM MATeRIAW
12
13
13: To
Z menu Objects>Scene wybieramy Background. Tworzymy dla niego nowy materia wg powyszych wskazwek. Nazywamy go Tlo. Nadamy mu kolor biay. Materia przecigamy na Background. W finalnej kompozycji grafiki biaa otoczka, ktra pozostanie na krawdziach napisu po odciciu go kanaem alpha nie bdzie nam tak przeszkadza jak czarna.
14: ReNDeR
W zakadce Objects zaznaczamy grup liter i klikajc prawym przyciskiem myszy wybieramy Cinema 4D Tags> Compositing. Zaznaczamy nowo wybrany tag i w palecie Attributes i zakadce Tag zaznaczamy Compositing Backround. Ta funkcja spowoduje brak cieniowania obiektu. Testujemy wygld obrazka renderujc okno podgldu kamery wybierajc Render>Render to Picture Viewer lub naciskajc [Shift]+[R]. Jeeli wszystko jest w porzdku i otrzymalimy zadowalajcy wynik przechodzimy do Photoshopa.
14
15
15: PhoToShoP
otwieramy nowy dokument File>New o parametrach jak na zdjciu nr 15. otwieramy plik .psd z wynikiem renderingu tutorial_napis_ barbie. W palecie Channels z wcinitym klawiszem[Ctr] klikamy na kana Alpha 1. Przechodzimy do palety layers i wciskamy kombinacj
[Ctr]+[J]. Nowo powsta warstw z napisem przenosimy do naszego gwnego pliku roboczego. Nazywamy j napis_barbie. otwieramy plik tutorial_auto i przenosimy warstw z autem do naszego dokumentu i zmieniamy nazw na auto. Skalujemy obie warstwy.
17
Warsztaty
16
Przechodzimy teraz do najwaniejszego etapu zmaga z napisem 3D. Tworzymy nad warstw napis_Barbie now warstw ktr nazywamy pedzel_Barbie_1. Zmniejszamy jej przeroczysto do 40%. Z paska narzdzi wybieramy pdzel Brush Tool [B] o okrgej kocwce, wielkoci 50px i twardoci 95%. Naciskajc klawisz [Alt] wybieramy kolor rowy znajdujcy si na napisie. Pdzlem malujemy obszar obok liter nie przejmujc si, e zamalowujemy rwnie brzegi napisu. efekt ma wyglda jak malowanie pdzlem po cianie.
16: MAloWANIe
17
Po skoczonej pracy tworzymy selekcj napisu klikajc warstw napis_Barbie z wcinitym klawiszem [Ctr] i usuwajc efekt malowania na napisie klawiszem Delete. Pozostaje tylko pomalowany obszar wok. Tworzymy nastpn warstw pedzel_Barbie_2 o przeroczystoci 30%. Tym razem malujemy boki napisu. Rwnie nie przejmujemy si, e pdzel przy okazji nachodzi na poprzednio malowane miejsca. Powtarzamy zabieg z kolejn warstw pedzel_barbie_3 o przeroczystoci 50%. Malujemy boki napisu.
17: MAloWANIe II
18
Po skoczeniu pracy usuwamy nadmiar farby gumk Eraser Tool [E]. Szczeglnie pieczoowicie usuwamy farb z biaych obwdek wok rowych frontw liter. Narzdziem gumki moemy posugiwa si na wszystkich trzech warstwach z farb celem dodania charakterystycznych niedorbek przy malowaniu prawdziwym pdzlem.
18: ReTuSZ PDZlA
18
Warsztaty
19
Tworzymy warstw gradient_ciemny bezporednio nad warstw z napisem. Wybieramy okrgy pdzel o wielkoci ok. 40px i twardoci 90%. Zmieniamy warto Opacity pdzla na 10%. Wybieramy kolor R=193,G=0,B=14. Narzdziem Magic Wand Tool [W]
19: CIeMNy GRADIeNT FRoNTW NAPISu
zaznaczamy na warstwie z napisem kolor rowy frontu. Zaczynamy malowanie na nowo utworzonej warstwie zaczynajc od dou liter a koczc blisko rodka. Najwicej powtrze robimy na dole i tam kolor bdzie najciemniejszy. Ma powsta wraenie rcznie malowanego gradientu. Nie przesadzajmy jednak z intensywnoci.
20
Tworzymy now warstw gradient_jasny. Zmieniamy kolor na np. R=255, G=196, B=231. opacity pdzla moemy zmniejszy do 5%. Malujemy tak samo jak w poprzednim kroku tym razem zaczynajc od gry. Na koniec grupujemy warstw napisu z warstwami malowanych gradientw. Grup nazywamy Napis_Barbie.
20: CIeMNy GRADIeNT FRoNTW NAPISu
21
otwieramy pliki tutorial_podloze, tutorial_motyle, tutorial_sciana. Przenosimy zawarte w nich warstwy do kompozycji. Podoe jest grafik wykonan w Illustratorze i naoon na paski element a nastpnie wyrenderowany w Cinema 4D. umieszczamy t warstw pod warstw auto i skalujemy. Warstwy z motylami skalujemy i komponujemy z reszt. Warstw ze cian umieszczamy na samym dole. Nad ni tworzymy warstwy dopasowania Curves oraz Black & White z menu Layer>New Adjustment Layer>wybrana warstwa. Wszystkie trzy warstwy grupujemy zaznaczajc je i klikajc [Ctr]+[G].
21: DoDATKoWe eleMeNTy
19
Warsztaty
22
Narzdziem Burn Tool z zakresem Midtones i Exposure na 100% malujemy na warstwie ciana wok i pod literami tak aby powstao wraenie cieniowania napisu na tym podou. Nastpnie nadajemy warstwie Curves wartoci takie aby przejaskrawi warstw ze cian.
22: CIANA
Warstwie Black & White pozostawiamy wartoci domylne. Dla grupy z warstw ciany tworzymy mask klikajc ikonk Add layer mask z dou palety Layers. Duym pdzlem z minimaln twardoci maskujemy warstw aby zostay tylko obszary wok napisu oraz z bokw/ rogw obrazka.
Zaznaczamy cay obszar [Ctr]+[A] i kopiujemy cay widok edit>Copy Merged. W Illustratorze otwieramy nowy dokument i wklejamy do niego zawarto schowka. Na grze liter narzdziem Ellipse Tool [L] rysujemy mae kka w rnych rozmiarach symbolizujce byski. Zaznaczamy wszystkie keczka i kopiujemy [Ctr]+[C]. Przechodzimy do Photoshopa i wklejamy [Ctr]+[V] nad warstw z napisem. Dopasowujemy. Wracamy do Illustratora, rysujemy due koo w kolorze ciemno szarym, nad nim nieco mniejsze, nierwno uoone i klikamy Minus Front w palecie Pathfinder.
23: eleMeNTy IlluSTRAToRA
23
24
okrg przenosimy do Photoshopa i skalujemy. umiejscawiamy go nad grup zawierajc cian. Zmniejszamy krycie do ok.40%. Duplikujemy [Ctr]+[J] , obracamy i troch zmniejszamy. Pozycjonujemy za autem. Pod autem stwrzmy jeszcze cie malujc go na nowej warstwie kolorem ciemno rowym oraz rozmywajc Filter>Blur>Gaussian Blur. Na samej grze dodajemy Layer>New Adjustment Layer> Hue/Saturation i zmniejszamy saturacj o 25%. Ilustracja zakoczona. Nauczylimy si w prosty sposb osadza elementy 3D pozbawiajc je jednoczenie cyfrowej surowoci. Jacek Szotysek
24: WyKoCZeNIe
20
flash CS3, action Script 2.0, flash Player 9.0 | trudny | Pliki rdowe do pobrania z WWW
Warsztaty
infiniti
Agencja Interaktywna ena Creation Piotr Cywicki istnieje od 2002 roku. Jej zaoyciele wsptworzyli jeden z najwikszych polskich portali internetowych, zdobyli take nagrod grand Prix Komputer expo za innowacyjny produkt w kategorii B2B. Wiedza oraz zdobyte dowiadczenie postanowilimy wykorzysta pod wasn mark koncentrujc si na rynku reklamy interaktywnej.
Baner reKlamowy
21
Baner reKlamowy infinti
Warsztaty
1: uTWoRZeNIe NoWeGo DoKuMeNTu
Tworzymy nowy dokument o wymiarach 750x200 i ustalamy prdko animacji na 25 fps.
Wybieramy narzdzie Rectangle Tool (R) i rysujemy prostokt. W panelu Window>Properties ustawiamy jego pozycj x oraz y rwn 0 i nadajemy mu wymiary dokumentu. Wybieramy Window>Color gdzie zmieniamy typ wypenienia na linear z przejciem od koloru biaego (#FFFFFF) do jasnoszarego ( #D9D9D9). Narzdziem Gradient Transform Tool (F) ustawiamy gradient w poziomie, tak aby ciemniejszy kolor by na dole. Na nowej warstwie narzdziem Text Tool (T) wpisujemy haso reklamowe czcionk o kolorze #761B6D.
2: WyKoNANIe eleMeNTW WeKToRoWyCh
3: IMPoRT eleMeNTW GRAFICZNyCh
W celu zaimportowania plikw graficznych do dokumentu tworzymy now warstw i wybieramy z grnego menu File>Import>Import To Stage gdzie wskazujemy interesujcy nas plik Samochod.png. Tworzymy now warstw i powtarzamy czynno tym razem wybierajc plik logo.png. Grafiki zostay przygotowane wczeniej w Photoshopie i zapisane w formacie png na przezroczystym tle. Samochd ustawiamy troch na prawo od rodka dokumentu a logo w prawym dolnym rogu.
22
Warsztaty
4: PRZyGoToWANIe oBIeKTW Do ANIMACJI
Aby mc animowa nasze obiekty musimy przeksztaci je w odpowiedni symbol. W tym celu klikamy na samochodzie prawym przyciskiem myszy i wybieramy polecenie Convert To Symbol... W nowym oknie zaznaczamy opcj Graphic i klikamy OK. Czynno t powtarzamy z naszym hasem. obiekty s gotowe do animacji.
5: ANIMACJA oBIeKTW I
Na linii czasu, w warstwie z samochodem, w klatkach 30, 120 i 150 tworzymy klatki kluczowe. W tym celu klikamy prawym przyciskiem myszy na konkretnej klatce i wybieramy polecenie Insert Keyframe. Przechodzimy do klatki 1 i przesuwamy samochd w prawo, poza obszar roboczy, z kolei w klatce 150 przesuwamy go w lewo poza ramy dokumentu. Klikamy prawym przyciskiem myszy na klatce 1 i wybieramy polecenie Create Classic Tween tworzc przejcie midzy klatk 1 i 30. Powtarzamy czynno w klatce 120.
6: ANIMACJA oBIeKTW II
W przypadku naszego hasa postpujemy podobnie, tworzymy klatki kluczowe w 30, 120 i 150 klatce animacji. W pierwszej i ostatniej klatce klikamy na nasz tekst i w panelu Properties ustawiamy Style na Alpha o wartoci 0%. Tworzymy przejcie animacji w klatce 1 i 120. Na warstwach z logo i tem klikamy w klatce 150 prawym przyciskiem myszy i wybieramy polecenie Insert Frame. Teraz nasze logo i to bd widoczne przez cay czas trwania animacji.
23
Warsztaty
7: DoDAWANIe eleMeNTu CAll To ACTIoN I
Na nowej warstwie, za pomoc narzdzia Rectangle Tool (R) rysujemy prostokt o wymiarach 185 x 40 px i wypeniamy go kolorem #761B6D a nastpnie przeksztacamy go w Movie Clip. Klikamy dwukrotnie na utworzonym obiekcie aby go edytowa. Klikamy prawym przyciskiem myszy w 9 klatce animacji warstwy z prostoktem i wybieramy polecenie Insert Frame. Tworzymy now warstw, nad warstw z prostoktem. Narzdziem Text Tool (T) wpisujemy tekst naszego Call To Action i zmieniamy jego kolor na #FFFFFF.
8: DoDAWANIe eleMeNTu CAll To ACTIoN II
Zmieniamy nasz napis w Movie Clip i tworzymy klatki kluczowe w klatce 5 i 9. W klatce 5 klikamy na nasz napis i w panelu Properties w sekcji Filters przypisujemy obiektowi waciwo Glow. Zmieniamy kolor efektu na #FFFFFF i wartoci Blur x oraz Blur y na 10 px. Moemy te zmieni jako efektu (Quality) z domylnego Low na High. Klikamy prawym przyciskiem myszy pomidzy klatkami kluczowymi warstwy z tekstem i wybieramy polecenie Create Classic Tween.
24
Warsztaty
9: DoDANIe WARSTWy KlIKAlNeJ (BuTToN)
Wracamy na gwn o czasu. Tworzymy now warstw pooon najwyej i rysujemy na niej prostokt o wymiarach obszaru roboczego oraz pooeniu x i y rwnym 0. Przeksztacamy go w obiekt Button, aby stworzy przycisk, i wchodzimy w jego edycj. Na linii czasu w klatce 4 tworzymy klatk kluczow po czym usuwamy obiekt z klatki 1. Przycisk bdzie teraz niewidoczny. opuszczamy edycj i otwieramy okno z Akcjami (Window>Actions), gdzie wpisujemy skrypt podany w specyfikacji interesujcego nas portalu.
Zanim wyeksportujemy plik musimy okreli takie parametry jak wersja Action Script oraz wersja Flash Player. W tym celu z grnego menu wybieramy File>Publish Settings. W zakadce Formats nowo otwartego okna zaznaczamy format SWF. Przechodzimy do zakadki Flash, w ktrej w polu Player moemy wybra wymagan przez portal wersj Flash Playera oraz wersj Action Script w polu Script. Gdy ju wszystko ustawilimy, klikamy przycisk Publish i gotowe.
10: WyeKSPoRToWANIe PlIKu Do PoSTACI FINAlNeJ
10
25
Photoshop | redni | Pliki rdowe do pobrania z WWW
Warsztaty
reklama
wizerunek ukryty w warstwach
Kreacja reklamy prasowej w programie Adobe Photoshop to temat bardzo zoony i nie istniej adne uniwersalne rozwizania na stworzenie dobrej reklamy. Reklamy prasowe rni si kolorystyk, form, rozmiarem, technikami realizacji, a przede wszystkim pomysem, poniewa to od niego zawsze zaczyna si dobra kreacja.
Przed przystpieniem do pracy naley dokadnie zapozna si z grup docelow i podanym przekazem reklamy oraz przeprowadzi analiz oczekiwa Klienta i zebra niezbdne materiay. Niezmiernie wane jest take zapoznanie si z wymaganiami technicznymi redakcji, w ktrej reklama ma by opublikowana, a take papier i jako druku. Trzeba pamita o tym, e pikna i skomplikowana kreacja na papierze gazetowym bdzie po prostu plam farby drukarskiej. W tym konkretnym przypadku pokaemy jak stworzy reklam wizerunkow na 25 lecie firmy publikowan w magazynach o tematyce zwizanej z dekoracj wntrz.
w Photoshopie
Jakub Wjtowicz Zaoyciel i dyrektor kreatywny agencji Royal Brand PR. od 2007 roku wraz z zespoem realizuje strategie komunikacyjne dla firm z wielu bran.
26
reKlama w photoshopie
Warsztaty
1: PRZyGoToWANIe MATeRIAW
Zaczynamy od dobrania odpowiedniego zdjcia aranacyjnego. W naszym przypadku zdjcie nie wymagao retuszu, ale w razie potrzeby dokonujemy standardowych poprawek zdjcia Image>Adjustments>Auto levels lub Image>Adjustments>levels potem Shadow/highlight jeeli zdjcie jest przejaskrawione rdami jasnego wiata (np. lampkami) korygujemy warto highlights, w przeciwnym wypadku pozostawiamy highlights na 0%. Shadows ustawiamy na warto ok. 20% - jeli przesadzimy zdjcie bdzie za mao kontrastowe. W razie potrzeby zmieniamy jasno i kontrast zdjcia Brightness/Contrast. Naley pamita, e zazwyczaj zdjcia do druku powinny wydawa si nieco za jasne na ekranie monitora wtedy jako oddania kolorw jest najlepsza. Najczciej stosuje si warto Brightness od 0 do +10 oraz Contrast od 0 do + 7.
2: TWoRZyMy eFeKT SePII
Kolejnym etapem bdzie przygotowanie naszego zdjcia do zoenia we waciwym projekcie reklamy. Na pocztku musimy dokona lustrzanego odbicia zdjcia Image>Rogate Canvas>Flip Canvas horizontal. Nastpnie duplikujemy warstw ta klikamy prawym przyciskiem myszy na warstwie Background i klikamy Duplicate layer. Teraz potrzebujemy zmieni kolorystyk zdjcia na sepi lub odcienie szaroci. Jest na to wiele metod. Moemy zmieni nasycenie i odcie kolorw Image>Adjustments>hue/Saturation. Klikamy Colorize i ustawiamy wartoci hue na 31 i Saturation na 25 lub inne w zalenoci jaki odcie chcemy uzyska. Moemy te zamieni obraz na odcienie szaroci Image>Adjustments>Desaturate oraz naoy na zdjcie filtr nadajcy mu odcie sepii - Image>Adjustments>Photo filter i wybra z listy np. Warming Filter (85) i ustawi gsto Density na 25% lub Deep yellow i ustawi gsto Density na 25%.
27
Warsztaty
3: PoSTARZAMy ZDJCIe
Nastpnym krokiem bdzie dodanie do zdjcia rys i zagi charakterystycznych dla starych i zniszczonych zdj. Potrzebny do tego bdzie zestaw pdzli paperdamage, ktry mona pobra ze strony. Poniewa maksymalny rozmiar pdzla, ktry wybierzemy moe by za may musimy obej ten problem. Tworzymy now warstw i wybieramy Brush Tool (B). Nastpnie z menu narzdzia wybieramy zestaw pdzli paperdamage i wybieramy odpowiadajcy nam pdzel ustawiajc jednoczenie maksymaln warto Master Diameter (2500px) pamitajmy, eby Foreground Colour by ustawiony na biay. Klikamy jeden raz wybranym pdzlem na nowo utworzonej warstwie. Teraz zostaje nam tylko rozcignicie warstwy do odpowiednich rozmiarw przy uyciu Move Tool (V) z zaznaczon opcj Show Transform Controls oraz nadanie jej przezroczystoci zmieniajc warto opacity na ok. 55%. Tak przygotowane i postarzone zdjcie cieniujemy do zdjcia pierwotnego. Z palety layers wybieramy warstw zdjcia w sepii i klikamy Add Vector Mask z menu poniej. Nastpnie wybieramy Gradient Tool (G) i przecigamy po stworzonej masce od lewej do prawej (wybrany musi by prosty gradient od bieli do czerni). T sam mask musimy zastosowa do warstwy z rysami. Duplikujemy warstw z sepi i mask, a nastpnie przecigamy mask duplikatu warstwy na warstw z rysami, a duplikat warstwy usuwamy. efekt przejcia tonalnego midzy starym zniszczonym zdjciem a nowym jest gotowy, ale przed dalsz prac naley go spaszczy layer/Flatten image uprzednio zapisujc kopi naszej pracy z moliwymi do edycji warstwami w pliku psd.
4: TWoRZyMy STRuKTuR ReKlAMy
Tworzymy nowy dokument o wymiarach 232 x 142,5 mm i rozdzielczoci (Resolution) 300 pixels/inch i przecigamy utworzone wczeniej zdjcie na obszar nowego dokumentu. Za pomoc narzdzia Move Tool (V) z zaznaczon opcj Show Transform Controls dostosowujemy rozmiar nowej warstwy w pionie i ustawiamy j po prawej stronie kreacji. Aby nie zmienia proporcji przy zmienianiu rozmiaru warstwy trzymamy przycinity klawisz Shift. Tworzymy now warstw i za pomoc pirka Pen Tool (P) rysujemy now prost o dwch punktach mniej wicej w jednej trzeciej szerokoci rysunku od lewej. Nastpnie za pomoc narzdzia Convert Point Tool zmieniamy prost w lekko zakrzywion krzyw klikajc i odpowiednio przecigajc punkty zakoczenia prostej. Krzyw moemy dalej edytowa stosujc narzdzie Direct Selection Tool (A). Pamitajmy, aby ustawi koce krzywej poza obszarem rysunku. Wybieramy narzdzie Brush Tool (B) i ustawiamy twardy pdzel podstawowy o redniej gruboci (np. Master Diameter 25 px i hardness 100%). Za pomoc narzdzia Path Selection Tool zaznaczamy nasz krzyw i z menu podrcznego dostpnym po klikniciu prawym przyciskiem myszy wybieramy Stroke Path pamitajc, aby opcja Simulate Pressure nie bya zaznaczona. Krzyw usuwamy, a nastpnie tworzymy now warstw i rysujemy kolejn krzyw tym razem w poprzek rysunku. Ponownie wybieramy Stroke Path, usuwamy krzyw i otrzymujemy podstawow struktur naszej reklamy.
28
Warsztaty
Tworzymy now warstw i umieszczamy na niej zdjcie zniszczonego, starego zota momy je cign z WWW. Klikamy warstw z pierwsz krzyw i za pomoc narzdzia Magic Wand Tool (W) zaznaczamy cz rysunku po lewej stronie krzywej. Nastpnie tworzymy mask warstwy przy uyciu zaznaczonego obszaru (Add layer Mask w palecie layers). utworzon mask klikamy prawym klawiszem myszki i z menu podrcznego wybieramy Add layer Mask To Selection. Tworzymy kolejn warstw i zaznaczony obszar wypeniamy czarnym kolorem (edit > Fill lub Shift + F5). Ponownie dodajemy mask warstwy tym razem bez zaznaczenia - i za pomoc narzdzia Gradient Tool (G) tworzymy pionowe przejcie tonalne od czerni (na dole) do bieli (na grze) na nowej masce i uzyskujemy efekt przejcia pomidzy czerni i starym zotem na warstwie niej. Teraz zaznaczamy warstw z poziom krzyw i zaznaczamy obszar poniej krzywej za pomoc narzdzia Magic Wand Tool (W). Dodajemy now warstw, wypeniamy zaznaczony obszar czarnym kolorem (edit > Fill lub Shift + F5) i podobnie jak w poprzednio tworzymy mask warstwy i wypeniamy j gradientem - Gradient Tool (G) - od czerni
5: WyPeNIAMy GWNe eleMeNTy KoMPoZyCJI
po lewej do bieli po prawej. Warstwie nadajemy przezroczysto opacity ok. 65%. Teraz duplikujemy t warstw layer > Duplicate layer i na palecie layers mask duplikatu przecigamy na warstw z poziom krzyw, a nastpnie zduplikowan warstw usuwamy layer > Delete > layer - jest to jeden ze sposobw na szybkie uycie tej samej maski do dwch rnych warstw.
6: DoDAJeMy STyle WARSTW
Wybieramy z palety layers warstw z pionow krzyw i wypeniamy j gradientem za pomoc stylw warstwy layer > layer Style > Gradient overlay ustalajc kt (Angle) na 90 st. Wybieramy gradient Gold 1 z palety Gold.grd, ktr mona cign z WWW. Nastpnie podobnie postpujemy z warstw zawierajc krzyw poziom ustalajc kt (Angle) na 180 st. i wybierajc gradient Gold2. Wybieramy warstw z poziomym wypenieniem i podobnie jak poprzednio wybieramy z pobranej palety gradient Gold3. oczywicie gradienty moemy sami modyfikowa lub tworzy wasne w zalenoci od tego jaki efekt chcemy osign. Przechodzimy do nadania warstwie cienia layer > layer Style > Drop Shadow ustalajc wartoci, przezroczystoci na 75%, kta na -70 st. (opcja use Global light powinna by odznaczona), odlegoci (Distance) na 18 px i rozmiaru (Size) na 50 px. Przechodzimy do warstwy z pionowym wypenieniem i nadajemy warstwie podobny cie uywajc kta 180 st. i rozmiaru (Size) ok. 35 px. Po nadaniu odpowiednich stylw warstwom pozostaje tylko wycicie
i umieszczenie w projekcie produktw, dodanie loga firmy oraz sloganu, a na kocu spaszczenie warstw layer > Flatten Image i zapisanie projektu w postaci gotowego do druku pliku TIFF. Pokazalimy jak stworzy podstawow kompozycj reklamy przeznaczonej do druku w prasie kolorowej i osign kilka ciekawych efektw za pomoc warstw w programie Photoshop. Potencja jaki kryj warstwy i ich style jest ogromny, zatem nie bjcie si eksperymentw i wasnej wyobrani. Pamitajcie jednak o pewnych ograniczeniach jakie posiada druk i dokadnie czytajcie wymagania techniczne wydawnictw przed przystpieniem do pracy. Najwaniejsz lekcj bdzie zawsze dowiadczenie ogldania Waszej gotowej i wydrukowanej reklamy, a zapoznanie si z dokadnymi specyfikacjami przygotowania projektw pozwoli cieszy si z osignicia podanego efektu nie tylko na ekranie monitora, ale take w druku. Jakub Wjtowicz
29
Photoshop CS5 | redni | Pliki rdowe do pobrania z WWW
fotomonta
30
Wasny posg
czyli staroytna wersja nas samych
Tomek Foxhunt Adamek Jestem Graphic Designerem, ktry ju od kilku lat zajmuje si projektowaniem graficznym. Gwnie wykonuje projekty stron internetowych, sklepw czy portali jednak rwnie czsto trafiaj si zlecenia, gdzie to zaprojektowania mam logo, identyfikacj wizualn czy materiay reklamowe jak ulotki, plakaty, reklamy prasowe itp. Do kadego zlecenia podchodz indywidualnie co pozwala mi wydoby maksymaln dawk kreatywnoci. efekty mojej dotychczasowej pracy zarwno jako grafika jak i webmastera mona zobaczy na www.foxhunt.pl
fotomonta
Wstp
myl, e wielu z nas chciaoby by zapamitanym przez histori. Jednym z wielu sposobw aby osign owy cel jest postawienie nam pomnika czy posgu. O ile mao prawdopodobne jest, e to wanie nasza posta zostanie uwieczniona w kamieniu czy innym surowcu, o tyle sami moemy przekona si o tym jak wygldalibymy za kilkaset lat jako posg. Z pomoc przychodzi nam oczywicie Photoshop. Czego potrzebujemy, aby samemu stworzy nasz wasny posg? Tylko i wycznie naszego zdjcia. Dodatkowo dla uatwienia zadania moemy postara si o zdjcie jakiego zdewastowanego przez upyw czasu muru czy ciany. Krtko mwic, bierzemy aparat w rce i idziemy szuka odpowiedniej paszczyzny lub korzystamy z jakiego zdjcia znalezionego w internecie. majc ju zdjcie wasne oraz muru, moemy przystpi do tworzenia wasnego posgu.
31
wasny posg cZyli staroytna wersja nas samych
fotomonta
1: PRZyGoToWANIe ZDJCIA oRAZ oBSZARu RoBoCZeGo
Na pocztku rzecz oczywista, czyli przygotowujemy obszar, na ktrym bdziemy pracowa. Wciskamy [Ctrl]+[N], ustalamy wielko obszaru, ja wpisaem Width 700 px Height 900 px, Resolution 72, natomiast Backgrounds Contents ustawiamy na Transparent i klikamy oK. obszar roboczy mamy gotowy, teraz zajmiemy si przygotowaniem zdjcia do dalszej pracy. Tak wic otwieramy w Photoshopie zdjcie chopaka. Aby zdjcie byo gotowe do dalszej pracy musimy zrobi dwie rzeczy. Po pierwsze odpowiednio wyci posta z ta, a po drugie dorysowa czubek gowy, poniewa jak widzimy posta nie zmiecia si w kadrze. Proponuje chwyci lewym przyciskiem myszy zdjcie chopaka i przecign do drugiego okna, na nasz przygotowany obszar roboczy. Zdjcie jest o wiele za due, wic odpowiednio je skalujemy. W tym celu zaznaczamy warstw z chopakiem i wchodzimy w zakadk edit -> Transform -> Scale i w wartociach W: oraz h: w grnej czci ekranu wpisujemy zarwno w jednej jak i drugiej pozycji 45%. Posta jest ju odpowiednio pomniejszona do naszego obszaru roboczego. W dolnej czci zdjcia widzimy kartk papieru dlatego przesuwamy posta w d aby kartka schowaa si pod doln krawdzi naszego obszaru roboczego. Teraz przystpujemy do wycinania postaci z ta. W tym celu, aby wycicie byo dokadniejsze proponuj powikszy nasze pole dziaania do 1200%, osiem razy wciskamy kombinacje klawiszy [Ctrl]+[+] zdjcie jest powikszone. Wybieramy narzdzie eraser Tool wciskajc [E]. Teraz gdziekolwiek na obszarze roboczym
klikamy prawym przyciskiem myszy i wybieramy wielko narzdzia na 4px. Dokadnie i powoli obrysowujemy posta. Gdy ju skoczymy, ponownie wciskamy prawy przycisk myszy, wybieramy wielko narzdzia na znacznie wiksz np. 36 px, wciskamy rwnie kilkakrotnie [Ctrl]+[-] aby pomniejszy spore powikszenie i pozbywamy si reszty ta bez wikszego ryzyka, e uszkodzimy wycinan posta. W tym momencie posta mamy ju odpowiednio pomniejszon oraz wycit. ostatni rzecz jest dorysowanie brakujcego kawaka gowy. W tym celu znw powikszamy posta wciskajc kilkukrotnie [Ctrl]+[+], ustawiamy obszar tak aby widzie to co nas interesuje czyli gow. Zaznaczamy warstw z chopakiem i tym razem uywamy narzdzia Clone Stamp Tool wciskajc [S]. Prawym przyciskiem myszy ustawiamy wielko narzdzia np. na 9 px. Trzymajc wcinity klawisz [Alt] pobieramy prbk obrazu ktry chcemy klonowa. Najlepiej pobra j tu przy ucitym fragmencie gowy. Prbk pobieramy klikajc lewym przyciskiem myszy w wybranym miejscu, oczywicie cay czas trzymajc wcinity klawisz [Alt]. Gdy ju pobierzemy prbk, puszczamy klawisz [Alt] i zaczynamy rysowa trzymajc oczywicie lewy klawisz myszy. Nie musi to by zrobione bardzo dokadnie. Wane, aby dorysowa w miar okrgy fragment gowy. Moemy nawet narysowa wicej ni potrzeba, potem za pomoc narzdzia eraser Tool [E] wymazujemy to co niepotrzebne, aby gowa bya realistycznie zaokrglona. Gdy gowa jest ju odpowiednio dorysowana mamy ju wszystko gotowe, i moemy rozpocz tworzenie efektu posagu.
32
fotomonta
2: PRZeRABIAMy oCZy I uBRANIe
Podstawowe przygotowania mamy ju za sob. Zdjcie jest odpowiednio pomniejszone, posta wycita, a gowie nic nie brakuje. Teraz zajmiemy si odpowiednim dostosowaniem ubrania oraz oczu dla osignicia lepszego efektu. Zanim jednak to zrobimy, pozbywamy si kolorw. Bowiem nikt chyba nie widzia kolorowego, kilkusetletniego posgu. Tak wic, zaczynamy od kolorw. Zaznaczamy warstw chopakiem i wchodzimy w zakadk edit -> Adjustments -> Desaturate lub klikamy kombinacj klawiszy [Shift]+[Ctrl]+[U]. Jak widzimy pozbylimy si w ten sposb kolorw. uzyskana tonacja w pewnym stopniu przypomina kolor staroytnych posgw, ale to jeszcze nie to o co nam chodzi. Teraz jednak zajmijmy si oczami. Powikszamy mocno nasz obszar dziaania wciskajc kilkukrotnie klawisze [Ctrl]+[+] np. powikszenie 600%. ustawiamy widok tak, abymy widzieli dobrze to co nas w tym momencie najbardziej interesuje czyli oczy. upewniamy si, e mamy zaczn warstw z postaci chopaka i korzystamy z narzdzia lasso Tool wciskajc na klawiaturze [L]. Nastpnie obrysowujemy (zaznaczamy) dokadnie oczy. Najpierw zaznaczamy jedno, a nastpnie trzymamy wcinity klawisz [Shift] i rozpoczynamy obrysowywanie drugiego oka. Gdy skoczymy puszczamy klawisz [Shift]. Widzimy teraz zaznaczenie ktre przed chwil wykonalimy. Wybieramy teraz narzdzie Gradient Tool wciskajc [G]. upewniamy si, e gradient jaki wykorzystamy jest przejciem z koloru czarnego do koloru biaego (czyli standardowy gradient). Nastpnie ustawiamy kursor
niewiele poniej linii oczu i trzymajc lewy przycisk myszy przecigamy w gr, tym razem niewiele powyej grnej linii oczu. Powinnimy uzyska efekt jak na obrazku 2. W tym momencie oczy mamy ju przygotowane do dalszej pracy. Teraz zajmijmy si napisem na ubraniu ktrego nie chcemy. Pozbywamy si wic naszego zaznaczenia oczu wciskajc kombinacj klawiszy [Ctrl]+[D]. Przechodzimy w doln cz naszego obszaru roboczego, tam gdzie znajduje si napis na bluzie. Tutaj z pomoc znw przychodzi nam, narzdzie Clone Stamp Tool. Tak wic wciskamy [S]. Powikszamy obszar do okoo 400% za pomoc kombinacji klawiszy [Ctrl]+[+]. Postpujemy analogicznie jak przy dorysowywaniu gowy, a wic przytrzymujemy klawisz [Alt] i klikamy lewym klawiszem myszy w odpowiednie miejsce (tu przy napisie na bluzie ) pobierajc prbk obrazu. Nastpnie puszczamy klawisz [Alt] i rozpoczynamy zamalowywanie napisu na bluzie. oczywicie raz pobrana prbka koloru nie wystarczy. Naley co pewien czas pobiera now prbk w miejscu ktre w danym momencie zamalowujemy. W ten sposb efekt bdzie bardziej realistyczny. Przy wykonywaniu tej czynnoci nie naley si spieszy. Im dokadniej to zrobimy tym lepszy bdzie efekt kocowy. Gdy ju uda nam si pozby napisu na bluzie moemy przej do dalszych czynnoci.
33
fotomonta
3: uKAMIeNoWANIe
Teraz zajmiemy si nadaniu naszej postaci bardziej posgowego wygldu. W tym celu wykorzystamy kolejne narzdzie jakie daje nam Photoshop, a mianowicie Dodge Tool. Najpierw owym narzdziem potraktujemy brwi, rzsy oraz wosy naszej postaci. Nastpnie zajmiemy si jej ubraniem, ale po kolei. Wybieramy wyej wymienione narzdzie wciskajc na klawiaturze [O]. Dla wygody proponuj powikszy nieco nasz obszar dziaania np. do 400%. Gdy ju mamy powikszenie, zaznaczamy posta chopaka i wykorzystujemy wybrane wczeniej narzdzie Dodge Tool. Jednak zanim zaczniemy go uywa, naley je odpowiednio ustawi. Dlatego w jego opcjach (w grnej czci ekranu) wybieramy z rozwijanego menu Midtones oraz exposure ustawiamy na okoo 30%. Gdy ju to ustawimy malujemy owym narzdziem o wielkoci np. 12 px po brwiach, rzsach oraz wosach. Gdy skoczymy z gow przechodzimy do ubrania. T sam czynno wykonujemy na ubraniu. Najlepiej w danym miejscu kilkukrotnie uy tego narzdzia. Tak aby uzyska efekt podobny do tego na obrazku 3. Gdy skoczymy z ubraniem z rozwijanego menu w grnej czci ekranu wybierzmy zamiast Midtones to Shadows, moemy rwnie minimalnie obniy warto exposure do okoo 20%. Tak zmodyfikowane narzdzie wykorzystujemy na konierzu, oraz pod pachami postaci. Gdy skoczymy przychodzi czas aby wykorzysta nasze zdjcie dodatkowe, a mianowicie to przedstawiajce popkany mur. otwieramy owe zdjcie w Photoshopie, chwytamy lewym klawiszem myszy i przecigamy do okna gdzie mamy nasz przerabian posta. Zdjcie jest oczywicie zbyt due, dlatego znw uywamy opcji skalowania jak to miao miejsce w przypadku pomniejszania postaci chopaka. Tak wic zaznaczamy warstw z pknitym murem i wchodzimy w zakadk edit -> Transform -> Scale i w wartociach W: oraz h: w grnej czci ekranu wpisujemy zarwno w jednej jak i drugiej pozycji 45%. Warstwa odpowiednio si pomniejszya jednak jest niepoprawnie uoona. Chcemy aby bya ona zorientowana w pionie, a nie poziomie. W tym celu upewniamy si, e mamy ow warstw zaznaczon i wchodzimy znw w zakadk edit -> Transform -> Rorate 90 CW. Nastpnie po raz kolejny wchodzimy w zakadk edit -> Transform ->Flip horizontal. W tym momencie mamy warstw z pknitym murem odpowiednio pomniejszon i odwrcon. Teraz musimy j odpowiednio uoy. W tym celu zmniejszamy na chwil jej opacity ze 100% np. do 60%. Dziki temu zabiegowi spod warstwy z murem przewituje nam posta chopaka. Moemy teraz dokadnie uoy warstw z pkniciem tak aby pknicia na niej nakaday si na posta chopaka jak najbardziej realistycznie. Myl, e uoenie jej widoczne na obrazku 3a jest jak najbardziej odpowiednie. Co wcale nie znaczy, e nie moemy wyprbowa innego jej uoenia. Gdy ju odpowiednio ulokujemy ow warstw moemy przywrci na chwile jej opacity na 100%. Teraz czas naoy ow warstw na nasz wycit posta. W tym celu zaznaczamy warstw z pkniciem trzymamy wcinity klawisz [Ctrl] i klikamy lewym klawiszem myszy na ikonk warstwy poniej (posta chopaka). Naszym oczom powinno automatycznie ukaza si zaznaczenie (obrys) naszej postaci. Gdy tak jest tworzymy z tego mask klikajc na ikonk maski (trzecia od lewej) w prawym, dolnym rogu Photoshopa. Gdy to zrobimy powinnimy otrzyma efekt widoczny na obrazku 3b. Teraz warstwie z pkniciem naley nada odpowiedni barw. W tym celu klikamy w zakadk Image -> Adjustmenst -> hue/Saturation i dla hue wybieramy warto 150 natomiast dla Saturation warto -80. Nastpnie zmieniamy tej warstwie mieszanie z Normal na Multiply. efekt jaki powinnimy uzyska w tym momencie widoczny jest na obrazku nr. 3c. Nastpn czynnoci ktr powinnimy wykona to lekkie rozjanienie uzyskanego do tej pory efektu za pomoc levels. Zaznaczamy warstw z postaci chopaka, a nastpnie wchodzimy w zakadk Image -> Adjustments -> levels. Przesuwamy bia barw w lewo. Jej warto z 255 powinnimy ustawi w okolicach 200. Podobnie postpujemy na warstwie z pkniciem. Zaznaczamy ow warstw, znw uywamy opcji levels [Ctrl]+[L] i rwnie przesuwamy bia barw w lewo w okolice wartoci 200. Kolejn czynnoci jak powinnimy zrobi jest zduplikowanie warstwy z pkniciem. Tak wic zaznaczamy j, klikamy na niej prawym przycskiem myszy i wybieramy Duplicate layer. utworzon kopi warstwy z pkniciem przesuwamy na sam gr i zmniejszamy jej opacity na okoo 35%. Nastpnie wyostrzamy t warstw wchodzc w zakadk Filter -> Sharpen -> unsharp Mask i ustawiajc Amont na 100%, a Radius na 2.0 px. Tak sam operacj wykonujemy na pierwszej warstwie z pkniciem, ustawiajc tam Amont na 60%, a Radius na 1,5 px. Dla lepszego efektu proponuj usun pewien fragment warstwy z pkniciem, a mianowicie zaznaczamy zduplikowan warstw z pkniciem, klikamy na jej mask, wybieramy narzdzie Bursh Tool, na klawiaturze [B] i czarnym pdzlem o wielkoci okoo 65 px malujemy fragment gowy na lewo od ukonego pknicia biegncego od krawdzi gowy do ucha. Zbliajc si powoli do koca moemy uy raz jeszcze opcji hue/Saturation na pierwszej/oryginalnej warstwie z pkniciem. W tym celu wchodzimy w zakadk Image -> Adjustmenst -> hue/Saturation i dla Saturation wybieramy warto -35. Natomiast na warstwie z chopakiem uywamy wyostrzenia wchodzc w zakadk Filter -> Sharpen -> unsharp Mask i ustawiajc Amount na 70%, a Radius na 6,2 px. Powinno to wyglda mniej wicej tak jak na obrazku 3d.
3a
3b
3c
3d
34
fotomonta
4: MAA DeKoRACJA
Teraz przyszed czas na lekk dekoracj uzyskanego efektu. Mam tutaj namyli jak to czsto bywa w przypadku staroytnych greckich posgw pozbawienie naszej postaci rk oraz lekkiego przycicia tuowia. Aby nam si lepiej pracowao proponuj poczy ze sob wszystkie warstwy. W tym celu wciskamy kombinacj klawiszy [Shift]+[Ctrl]+[E]. Nasze warstwy poczyy si i mamy teraz tylko jedn, ktr przesuwamy na rodek obszaru roboczego, aby atwiej nam byo j przyci. Myl, e najlepiej spisze si przy tworzeniu tego efektu narzdzie Polygonal lasso Tool dostpne pod klawiszem [L]. Wybieramy je i tworzymy zaznaczenie na krawdziach naszej postaci jak na obrazku 4. Gdy zaznaczenie jest ju gotowe wciskamy klawisz [Delete]. W ten sposb pozbawilimy nasz posta rk. Podobn operacj naley wykona przy dolnej krawdzi chopaka. Jednak dla uzyskania lepszego efektu po zaznaczeniu odpowiedniego obszaru nie bdziemy go usuwa jak to miao miejsce przy rekach, tylko w owy zaznaczony obszar wkleimy nasz obrazek pomocniczy z pknitym murem. Tak wic otwieramy raz jeszcze w Photoshopie obrazek z pkniciem, i pomniejszamy go w analogiczny sposb jak to robilimy wczeniej. Nastpnie wracamy do naszego okna z posgiem. uywamy narzdzia Polygonal lasso Tool tworzc zaznaczenie tak jak to wida na obrazku 4a. Gdy zaznaczenie jest gotowe, przechodzimy z powrotem do pomniejszonego przed chwil obrazka z pkniciem wchodzimy w zakadk edit -> Copy. Nastpnie wracamy do okna z posgiem, wchodzimy w zakadk edit -> Past Into. W ten sposb w stworzone zaznaczenie na posagu wkleilimy kopiowany obrazek z pkniciem. Przy okazji utworzya si nowa warstwa wchodzimy w jej opcje klikajc na niej dwa razy lewym przyciskiem myszy, uaktywniamy efekt Inner Shadow. Jego Blend Mode pozostawiamy jako Multiply, Distance ustawiamy na 7px, Size na 8 px i klikamy oK. Powinnimy uzyska efekt podobny do tego na obrazku 4b. Przechodzimy do warstwy z naszym posgiem, na niej rwnie klikamy dwukrotnie lewym przyciskiem myszy, uaktywniamy efekt Inner Glow. Blend Mode powinno by wybrane Normal, opacity 26%, Size 23 px, natomiast na dole obszarze Quality zaznaczamy Anti-aliased i wybieramy Contour pierwszy z prawej w grnym rzdzie.
4a
4b
35
fotomonta
Na koniec powinnimy dla lepszego efektu stworzy odpowiednie to dla naszego posgu. Co w stylu muzealnej gabloty czy tym podobnej wystawy. Znw czymy ze sob warstwy. Tym razem mamy tylko dwie. Nasz posag powinnimy lekko pomniejszy ustawi mniej wicej na rodku obszaru roboczego. Tworzymy now warstw za pomoc klawiszy [Shift]+[Ctrl]+[N], przesuwamy j pod nasz warstw z posgiem, a nastpnie za pomoc narzdzia Rectangle Tool [U], rysujemy na owej nowej warstwie biay prostokt na caym obszarze roboczym. Nastpnie wchodzimy w jej opcje klikajc na niej dwa razy lewym przyciskiem myszy. uaktywniamy efekt Gradient overlay, wybieramy przejcie kolorw od czarnego do ciemno szarego (RGB: 65, 65, 65) i location koloru czarnego ustawiamy na okoo 60%. Dodatkowo zaznaczamy opcje Reverse. Powinnimy uzyska efekt jak na obrazku 5. Teraz tworzymy kolejn warstw. ustawiamy pomidzy posgiem, a przed chwil stworzonym tem. ustawiamy kolor gwny na biay, wybieramy narzdzie ellipse Tool [U] i rysujemy spaszczone koo tak jak to wida na rysunku 5a. Zmniejszamy jego opacity na 15%, a nastpnie wchodzimy w ustawienia warstwy klikajc na ni dwukrotnie lewym klawiszem myszy. uaktywniamy opcj outer Glow. Blend Mode ustawiamy na Normal, opacity 100%, kolor wybieramy biay, natomiast Size ustawiamy na okoo 30 px i zatwierdzamy przyciskiem oK. Tworzymy kolejn warstw pomidzy posagiem, a przed chwil narysowanym biaym koem. Ponownie uywamy narzdzia ellipse Tool [U], jednak tym razem rysujemy spaszczone koo nieco mniejsze i przede wszystkim w kolorze czarnym. Wchodzimy w opcje nowo utworzonej warstwy, uaktywniamy efekt outer Glow i ustawienia tworzymy dokadnie tak samo jak warstwy z biaym koem, z t rnic, e zamiast biaego wybieramy oczywicie kolor czarny. efekt powinien by taki jak na obrazku 5b. Tworzymy kolejn, tym razem ju ostatni w tym tutorialu warstw. Warstw umiejscawiamy jako pierwsz, czyli nad posgiem. Wybieramy jako kolor gwny kolor czarny, nastpnie wybieramy narzdzie Rectangle Tool [U] i rysujemy niewielkich rozmiarw prostokt. Tak jak to wida na obrazku 5c. Nastpnie tworzymy na nowo powstaej warstwie mask wchodzc w zakadk layer -> layer Mask -> Reveal All. Przechodzimy na utworzon mask i wybieramy narzdzie Gradient Tool z przejciem kolorw z czarnego do przeroczystoci. Przecigamy odpowiednio Gradient od gry do dou. Powinnimy uzyska efekt podobny do tego jak na obrazku 5d. Nastpnie chwytamy ow warstw i przecigamy do gry tak aby dolna krawd prostokta pokrywaa si z doln krawdzi naszego posagu. Gdy ju umiejscowimy ow warstw w odpowiednim miejscu duplikujemy j dwukrotnie wchodzc w zakadk layer -> Duplicate layer. Powinnimy uzyska efekt jak na obrazku 5e. Dla uzyskania bardziej realistycznego efektu moemy pokusi si o stworzenie rda wiata ktre bdzie owy posg owietlao od gry. W tym celu zaznaczamy nasz warstw na ktrej znajduje si posg, wchodzimy w zakadk Filter -> Render -> lighting effects. Naszym oczom ukae si okno z opcjami do ustawienia. Proponuj aby ustawienia wyglday tak jak na obrazku 5f. Gdy wszystko ustawimy jak naley zatwierdzamy przyciskiem oK. Gratuluje wanie wykonae swj pierwszy w yciu posg.
5: TWoRZyMy To
5a
5b
5c
5d
5e
PoDSuMoWANIe
Gwnym celem tutorialu jest ukazanie jak z wasnego zdjcia stworzy realistyczny, staroytny posg nas samych. Jednak nie jest to jedyny cel, tworzc krok po kroku owy posg poznajemy poszczeglne moliwoci jakie daje nam Photoshop. Wystarczy to poczy z wyobrani i otrzymujemy niczym nie ograniczone moliwoci tworzenia grafiki. Wystarczy dobrze si zastanowi, gdzie jeszcze moemy wykorzysta umiejtnoci tworzenia staroytnego posgu? Chociaby przy tworzeniu krajobrazu miasta zniszczonego przez wojn. Zdjcie przedstawiajce zwyk ulice z domem czy kamienicami mona w bardzo prosty sposb przerobi na zrujnowany krajobraz po bitwie. Tak czy inaczej dzikuje za uwag i mam nadziej, e komu przyda si ten tutorial. Jeli kto chciaby zobaczy inne moje projekty, gwnie stron internetowych to zapraszam na www.foxhunt.pl Tomek Foxhunt Adamek
5f
36
alfabet designerW
W 2008 roku Francois Chalet sportretowa francusk reprezentacj piki nonej
c - francois chalet
ukasz Smutek Autor animacji i instalacji multimedialnych. Z grafik i projektowaniem zwizany zawodowo ukoczy wydzia artystyczny uniwersytetu Marii Curie-Skodowskiej w lublinie, w pracowni grafiki projektowej i serigrafii. obecnie prowadzi zajcia w ramach Koa Naukowego Sztuki Mediw Cyfrowych na macierzystej uczelni. Kontakt: lukaszsmutek@gmail.com
bajkopisarz z krainy designu

do niezalenego artysty przyjmujcego zlecenia od takich klientw jak MTV czy harpers Bazaar. Styl Szwajcara szybko sta si jego znakiem rozpoznawczym, inspirujcym designerw na caym wiecie. Pozornie prosty, przy pierwszym kontakcie wrcz naiwny, kolorowy i zabawny - idealnie wpasowuje si w beztrosk narracje tworzonych przez Chaleta storyboardw, komiksw i animacji. To, e kreowane przez niego postacie wygldaj tak, a nie inaczej, tumaczy pitnem, jakie wywaro na nim uczszczanie do klasy matematycznej. To std wzio si zamiowanie do podstawowych ksztatw symetrycznych wieloktw, odcinkw czy okrgw. Reszty dokonao ogldane w dziecistwie Tex Avery i czste wypady do Japonii w pniejszym okresie (Francois jest wielkim fanem japoskiego designu). Tyle o sobie mwi sam Chalet. Niektrzy wizualn surowo jego prac wol zrzuci po prostu na karb szwajcarskiej dokadnoci, ktra objawia si naduywaniem cyrkla i linijki. Tak czy owak, kwadratowe lub okrge ludziki to tylko element wikszej caoci powstaj na potrzeby wyimaginowanego castingu, ich zadaniem jest odegranie konkretnych rl w opowiadanych przez Chaleta historiach i przede wszystkim maj poprawi nam humor.
Zanim Francois Chalet zosta jednym z najbardziej rozpoznawalnych designerw, w rodzimej Szwajcarii zajmowa si rysowaniem komiksw i szeroko pojt ilustracj. Jego inwencja fabularyzowania projektw i dopisywania do nich scenariuszy, pozwoliy na awans z podrzdnego projektanta ulotek i okadek pyt nikomu nieznanych zespow
37
francois chalet
alfabet designerW
Artystyczna dziaalno Francoisa Chaleta wykracza daleko poza ramy standardowo pojmowanego designu. W poszukiwaniu coraz to nowych rodkw wyrazu i sposobw narracji zainteresowa si teatrem i formami taca nowoczesnego, najnowszymi technologiami i sztuk interaktywn. Wraz z Thomasem Duchateletem, tancerzem i choreografem wsppracujcym z Pina Baush stworzyli projekt bdcy fuzj muzyki, ruchu i sztuk wizualnych trwajcy ponad godzin spektakl From Zero To Eternity, podczas ktrego tancerze wystpuj na tle skonstruowanych specjalnie do tego celu bardzo dugich ekranw projekcyjnych. Chalet jest take cenionym w rodowisku VJ-em. Wsppracujc z projektantem Patrickiem Jouinem i artyst multimedialnym Du Zhenjuem, opracowali wyprodukowany przez Didiera Fusilliera spektakl pt: Serial Killer wzorowany na brutalnej, francuskiej opowieci Berbe Bleue. Serial Killer na uwag zasuguje przede wszystkim ze wzgldu na zastosowane w nim eksperymentalne techniki rzutnikowania. Cienie tancerzy s miksowane na ywo z dwikiem i wchodz w interakcje z obrazem z projektora. Towarzysz temu widowisku gigantyczne gowy postaci wykreowanych przez Chaleta, wywietlane na wielkich pikach. Aktywno Chaleta na polu sztuki multimediw zaowocowaa
zaproszeniem projektanta do udziau w wystawie D-Days w Centre Pompidou, gdzie kada z piciu grup artystw miaa za zadanie wylosowa jeden z ywiow i zwizualizowa go na ekranie w formie trzyminutowej animacji. Grupa Chaleta, ktra wylosowaa powietrze, opowiedziaa zwiedzajcym histori miosn latajcych smokw. oczywicie Francois Chalet poza prac twrcz przyjmuje take zlecenia komercyjne. Jak sam mwi, robi to po to, eby si utrzyma i mc finansowa wasne projekty artystyczne. Wsppracowa m.in. z Mitsubishi, MTV, oP vodka. ostatnio coraz wicej czasu powica na zgbianie tajnikw kreatywnego czenia obrazu i dwiku. od niedawna zajmuje si take dziaalnoci pedagogiczn - prowadzi warsztaty dla VJ-w i animatorw w Centrum Sztuki i Nowych Technologii (ZKM) w Karlsruhe, uczy te animacji na tamtejszym uniwersytecie Sztuki i Projektowania (hFG). Wydaje si, e design by dla niego tylko przystankiem na drodze ku nowym moliwociom, nowym sposobom opowiadania historii. A to Francoisa Chaleta zawsze interesowao najbardziej.
lINKI
http://www.francoischalet.ch/ - oficjalna strona projektanta.
Typowi bohaterowie plakatw, przedstawie i animacji - kwintesencja stylu Chaleta
Jedn z najwczeniejszych form wypowiedzi Francoisa Chaleta by komiks
38
francois chalet
alfabet designerW
Kadr ze spektaklu From zero to etrnity (2005)
Instalacja Air wystawiona w Centre Pompidou (2004)
Kadry z przedstawienia Serial killer (2005)
Wizualizacje prezentowane przez Chaleta w trakcie jego warsztatw dla VJ-w
39
Photoshop CS5 | atwy | Pliki rdowe do pobrania z WWW

http://www.we-love-design-ci-web-print-pack-photo-and-any-sport-tea-travel.pl/
Warsztaty
love design
- zaraamy wirusem mioci spoeczno internetow, czyli kampania wirusowa w Internecie
Kampania reklamowa, dobrze zaplanowana ma swj cel oraz zaoenia strategiczne, opakowana kreatywn form graficzn/muzyczn, zainicjowana ciekawym pomysem daje rewelacyjny efekt w postaci przycigania. Kampania wirusowa, to nic innego jak zaraanie jak najwikszej iloci uytkownikw do dziaania interakcji. Tak te kampani sprbujemy zatem zaprojektowa a pniej opublikowa online.
marcin Rojek Autorem tutoriala jest Marcin Rojek, designer, ktry 10 lat temu odkry moc narzdzia Photoshop (wtedy 5.0 :) i zakocha si w nim a do dzi. obecnie prowadzi inspirujce studio 2arts gdzie jako designer specjalista od wizerunku kreuje marki na nowo. Stara si dziaa w myl A good beginning makes good advertising, dlatego w swoje prace wlewa tyle mioci ile jest to moliwe. Zawsze moesz do niego napisa m.rojek@2arts.pl
we
40
we love design
Warsztaty
1a
2a
1b
2b
2c
tak tak, dobrze zaplanowana kampania wymaga oprawy, tak jak dzieo wybitnego malarza jest oprawione w ramy, czsto pozacane i same warte fortun, tak samo kreacja wymaga czego wicej ni samego ksztatu, koloru, kroju. Celem kampanii jest przedstawienie tego co robimy czyli naszej mioci do designu, fotografii, kreacji, pytanie zatem jak to pokaza? Zadanie wcale z pozoru nie jest proste, wszyscy maj przecie swoje portfolio, to proste, my jednak chcielimy pj dalej, stworzy co innego, zainteresowa uytkownika do czego wicej, skoni go do interakcji. Zaoylimy i jeli sami pokaemy swoj mio do kreacji, fotografowania, i pozwolimy innym pokaza to co dla nich jest istotne wane w yciu, to stworzymy ciekawy microsite gdzie portfolio bdzie drugoplanow czci ale jednoczenie jego oryginaln form. Do tego uylimy celowo maksymalnie dugiego adresu www by w jednym zdaniu zakreli nasze zamiowania: www.we-love-design-ci-web-print-pack-photo-and-any-sport-tea-travel.pl/ Nakrelilimy sobie cele, przystpujemy do pracy czyli wycinanki, zdjcia, szkice ktre pomog nam przenie koncepcje z papieru, gowy, do komputera a pniej wiata wirtualnego Internetu (rys 1a, 1b).
1: ZACZyNAMy oD STRATeGII, Celu, PoMySu, SZKICu, KReACJI...
2d
Rysowanie serca rozpoczynamy od uycia narzdzia do ciekowania w Photoshopie (P), tworzymy w ten sposb warstwy wektorowe Shape (rys 2a, 2b). Kadej warstwie nadajemy dodatkowo gradient w opcjach warstwy Blending Options (rys 2c, 2d). Proponujemy aby serce otrzymao ciekawy charakter zmienia parametry cieniowania na poszczeglnych warstwach. Dodatkowo na koniec filtry na warstwach zostay przeksztacone w warstw (rys. 2e) i dodalimy efekt szumu filter->noise->add noise. (rys 2f, 2g)
2: SeRCe, JAKo GWNy eleMeNT KoMPoZyCJI
2e
2f
2g
41
we love design
Warsztaty
3a
3b
Zakadamy i microsite bdzie rozwija si na szeroko poprzez dodane przez uytkownikw kolejne wpisy. Wysoko strony z kolei ustawiamy na 720px, wszystko poniej bdzie duplikowanym tem. To podstawowe tworzymy przez zastosowanie wzorka tzw. pattern, do tego celu stworzymy nowy dokument o formacie kwadratu 17px x 17px wypeniony kolorem #bdccd3. Z prawej strony malujemy jednopixelowy pionowy pasek w kolorze #cbd7dc (rys. 3a). Zaznaczamy cay obszar (wczeniej pamitajmy aby go spaszczy wszystkie warstwy do jednej), ctrl+A, kopiujemy ctrl+C, i definiujemy zaznaczony obiekt wzorem define pattern. Nazywamy zdefiniowany wzr jako gwne to i przechodzimy do obszaru roboczego.Tutaj definiujemy warstw z wzorkiem ktry przed momentem zdefiniowalimy jako wzr gwne to poprzez funkcje: blending options pattern overlay (rys 3b) Wstawiamy zdjcie z modelem oraz wycinank ktr wczeniej metod hand made przygotowalimy. Poniewa zdjcie jest robocze, wymaga korekt typu: poprawienie okrgw, wyczyszczenie palcw modela, rozmazanie prawej rki modela, stworzenie maski.
3: BACKGRouND CZylI JAKIe I GDZIe To
Miejsce w rodku zaczernilimy okrgiem, tam wstawiamy nasze serce oraz tworzymy to wewntrz. Zaczynamy od ciekawych efektw wietlnych, tutaj posuymy si gotowymi pdzlami brush ktre mona znale na serwisie http://www.brusheezy.com/ - wpisujc haso abstract znajdziemy wiele ciekawych propozycji, pniej wystarczy wgra pdzle do Photoshopa i nimi czarowa (rys. 3c). Z prawej strony kka wida drobne elementy, nazwalimy je jako warstwa explosion, powstay one w wyniku pokrojenia naszego serca na kilka kawakw (rys. 3d), a pniej rozmazania efektami typu blur lub motion blur, wstawilimy warstw trybem mieszania ustawionym na Overlay przez co otrzymalimy cakiem interesujcy efekt kocowy na ktry to naoylimy nasze serce z kroku 1 (rys. 3e). Dodatkowo wstawilimy zduplikowane serce w duym powikszeniu ustawiajc tryb mieszania warstwy tzw. blend mode na Screen. (rys. 3f). Ta cz tutoriala odkrywa wiele moliwoci, proponujemy tutaj prby wasnych kompozycji, bo przecie na tym polega kreatywno by odkrywa swoje cieki. My uylimy wielu gradientw, efektw mieszania warstwy, cieni, pdzli, liczymy jednak na wasze nieograniczone moliwoci, zapraszamy do prb!
3c
3d
3e
3f
42
we love design
Warsztaty
4a
4b
4: We loVe DeSIGN BAWIMy SI TyPoGRAFI
Przejdmy na chwil do Illustratora, gdzie bdziemy tworzy typograficzn cz naszego tutoriala, dokadnie tekst we love design. Wybieramy narzdzie do tworzenia cieek [P] i tworzymy lini 0,5mm stroke napis (rys. 4a). Zaznaczamy wszystko (ctrl+A) i kopiujemy kresk (ctrl+C) a pniej przesuwamy o kilka pikseli w d i lewo nadajc jej niebieski kolor (rys. 4b). Funkcje kopiowania i przesunicia powtarzamy, jedynie kolor zmieniamy na rowy. W taki oto sposb otrzymujemy napis We love design, ktry to wklejamy do naszej grafiki w Photoshopie.
5a
Skupimy si na jednym szkieku i jego kreacji, kade kolejne s kopi pomysu. Zaznaczamy zatem selekcj (L) jakiego ksztatu bdzie szko. (rys 5a). Nastpnie selekcj kopiujemy to (pamitajmy aby byo spaszczone czyli mona zrobi to na duplikowanym dokumencie) i dodajemy rwnie mask o tym samym ksztacie, ktr rozczymy (rys 5b). Zaznaczon warstw modyfikujemy poprzez funkcj transformacji (ctrl+T), wybr opcji znieksztacenia/krzywizn WARP (grna ikonka w menu) oraz dobieramy opcj wybrzuszenia Inflate z maksymaln si dziaania 100 Blend (rys 5c.png). uzyskalimy w ten sposb efekt powikszenia, ktry wystpuje przy wszelkich powierzchniach szklanych/soczewkowych. Na to wszystko nakadamy element z naszego ju popularnego serca, ustawiamy opcj trybu mieszania warstwy na Screen 70% oraz dodajemy efekty cieniowania Drop Shadow oraz bliku szklanego za pomoc efektu bevel and emboss (rys 5d). ostatnim krokiem jest dodanie bysku, najprociej uy jest pdzla z kocwk rozwietlenia/bysku, pozostae szkieka tworzymy na podstawie powyszych zaoe w sposb rnorodny tak by uzyska oryginalny efekt kocowy (rys 5e).
5: GlASS SZKIeKA W PhoToShoPIe
5b
5c
5e
5d
43
we love design
Warsztaty
6a
6b
6c
6d
6: eFeKTy DoDATKoWe
Aby cao zamkn kompozycyjnie, dodajemy ostatnie obiekty, dopieszczajc wynik kocowy. Ksztat serca wklejamy zarwno u gry jak i na dole (rys 6a). Dodajemy chmurk, jest to pdzel pobrany z strony www.brusheezy.com (rys 6b) oraz tworzymy warstwy wektorowe, promienie wychodzce od serca (rys 6c oraz 6d). Tutorial ma przede wszystkim nakreli i pomc w poszukiwaniu ciekawych kreatywnych rozwiza poprowadzenia czasem standardowych form promocji, kampanii reklamowej. Chcielimy otworzy drzwi do nowych cieek ktre mog by rwnie ciekawe i interesujce, a przede wszystkim odmienne ni dotychczasowe formy dziaa. liczymy e nam si to udao, ocecie sami, lub po prostu wecie udzia w naszej kampanii: www.We-Love-Design-Ci-Web-Print-Pack-Photo-andany-Sport-Tea-Travel.pl/inspired by 2arts.pl
44
fotografia cyfroWa
drugi element kompozycji: wiato

czyli gdzie ustawi soce by wietnych zdj robi tysice.
39 .psd 01/2011 | www.psdmag.org/pl
lidia grabowska jest fotografem, ktry do swoich zdj wprowadza specyficzny nastrj ulotnoci. Najprawdopodobniej jako jedyna na wiecie wypracowaa sobie atwo operowania magi dymu i czsto wykorzystuje j do malowania postaci, rolin, wiatru,... Gwne motywy jej prac to pikno przyrody, architektura, dzieci, mao i krucho czowieka w otaczajcym go wiecie. KoNTAKT: lIDDDIA@GMAIl.CoM
fotografia cyfroWa
Fotografia to z greki wiatem rysowanie. Bez niego nie istniaoby fotografowanie. Dziki rnym wzgldem wiata ustawieniom Moesz, np. nakaza wyj z ukrycia cieniom:
najbardziej lubi gdy wiato wchodzi do pomieszczenia. tyle tajemnicy jest w tych wiato-cieniach:
46
ludzkie sylwetki te ciekawie si prezentuj gdy jako ciemne na wietlnym tle si maluj:
fotografia cyfroWa
gdy chcesz by na zdjciach mocne akcenty byy, Wysokie kontrasty wyrane cienie znaczyy. twrz gdy Soce wieci i brak jest zachmurzenia. ostre wiato oznacza mocne kontury cienia.
jeeli promienie Soca czym rozproszymy do sonecznego dnia chmury zaprosimy agodne wiato otrzymamy w sposb ten. rozmyte cienie... magia... jawa to czy sen?
47
fotografia cyfroWa
gdy nasza planeta w kosmosie wdruje gwiazda - Soce - rnej wielkoci cienie maluje. dugie s nad ranem i gdy wieczr ju blisko. Widzimy, e Soce nad horyzontem jest nisko.
Cienie krtkie zblione do modela powstan Pomidzy porami: wieczorem i rano gdy poudnie wskazuj zegary w ok Ciebie. a Soce osiga szczyt - najwyej jest na niebie.
Soce 20 stopni nad horyzontem lub do jego linii ju pod mniejszym ktem daje przez chwil zociste owietlenie Przykad takiego w poniszej z parku scenie:
temat wiata w fotografii tylko poruszyam. mam nadziej, e do sesji ze Socem przez to zachciam. lidia grabowska.
48 .psd 01/2011 | www.psdmag.org/pl
autopano giga 2, adobe Photoshop | redni | Pliki rdowe do pobrania z WWW
Warsztaty
panorama sferyczna jako planeta, ktra ubarwi layout kadej strony internetowej
Obecnie coraz trudniej jest stworzy ciekawy projekt graficzny strony internetowej, ktry w peni zadowoli klienta, a co wicej stanie si inspirujcym przykadem dla innych designerw. Na wartoci zyskuj koncepcje bazujce na wasnym materiale fotograficznym. Tutaj wane jest indywidualne spojrzenie autora na dany temat i uchwycenie sceny w odpowiedni kadr. Z pomoc przychodzi zastosowanie fotografii panoramicznej, a jeszcze ciekawsze efekty daje tzw. planeta, czyli rzut stereograficzny. Wykorzystanie go w projekcie moe da zupenie odmienne spojrzenie na ca stron www. Sprbujmy wic razem, od podstaw stworzy wanie tak koncepcj.
Pawe Szroeder Grafik w poznaskiej Agencji Reklamowej adStone. Fotografi i projektowaniem graficznym zainteresowany od kilku lat. Przez ten czas stale rozwija swoje umiejtnoci, nabierajc dowiadczenia, dziki ktremu obecnie moe uczestniczy w realizacji profesjonalnych projektw dla znanych marek. kontakt: p.szroeder@adstone.pl
49
panorama stereograficzna planeta, ktra ubarwi layout kadej strony internetowej
Warsztaty
1: SPRZT FoToGRAFICZNy
Aby wykona samodzielnie profesjonaln panoram sferyczn niezbdny jest odpowiedni sprzt fotograficzny. Dziki niemu moliwe jest rwnie stworzenie tzw. wirtualnego spaceru. Wymagana jest lustrzanka cyfrowa, a take obiektyw najlepiej szerokoktny. W wiczeniu wykorzystany zosta Canon eoS 500d oraz obiektyw typu Fisheye Samyang 8mm. Dodatkowo potrzebny jest stabilny statyw wraz ze specjaln gowic panoramiczn. Jest to dedykowany sprzt, dziki ktremu mona obraca aparat wok punktu nodalnego, co w efekcie umoliwia szybkie i sprawne poczenie zdj w cao.
2: PRZyGoToWANIe MATeRIAu
Posiadajc odpowiedni sprzt mona uda si w miejsce, gdzie zostanie wykonana fotografia. Naley ustawi statyw zgodnie z poziomic, a nastpnie wykona 6 zdj w poziomie co 60 stopni oraz zdjcie zenitu i nadiru. Dziki gowicy panoramicznej bez problemu wykonamy takie zdjcia w kilka sekund. Powinnimy pamita aby miejsce podoa, gdzie wykonujemy zdjcia byo moliwie jak najbardziej jednolite lub powtarzalne. To uatwi nam pniejszy retusz fotografii. Zdjcia nocne, jak w przykadzie, najlepiej robi z kilkusekundowego samowyzwalacza, ustawiajc dugi czas nawietlania, dziki czemu unikniemy porusze.
50
Warsztaty
Wykonany materia fotograficzny naley zoy w jedn cao przy pomocy odpowiedniego oprogramowania - w wiczeniu wykorzystany zosta program Autopano Giga 2. otwieramy nasze zdjcia File>Select Images. Nastpnie zaznaczamy wszystkie fotografie z utworzonej grupy i klikamy na ikon Image Properties. ustawiamy tutaj ogniskow obiektywu Focal Lenght na 8mm oraz typ obiektywu Lens type na szerokoktny Fisheye. Po wprowadzeniu danych klikamy na ikon Detect. W tym momencie po prawej stronie widzimy podgld zoonej panoramy. Aby zapisa plik wciskamy Render panorama. uzyskalimy w ten sposb plik wyjciowy dla panoramy stereograficznej.
3: ZoeNIe FoToGRAFII
4: STWoRZeNIe PlANeTy
Stworzon podczas wczeniejszych krokw panoram otwieramy w programie Adobe Photoshop. obracamy obraz o 180 stopni Image>Image Rotation>180. Teraz moemy w bardzo prosty i szybki sposb utworzy tzw. planet poprzez zastosowanie filtra Filter>Distort>Polar Coordinates. Z dostpnych opcji tego narzdzia wybieramy Rectangular to polar, a nastpnie zatwierdzamy. uzyskalimy w ten sposb rzut stereograficzny. Jak wida w centralnej czci pozosta widok statywu oraz jego cie, przez co zdjcie nie daje w peni oczekiwanego efektu.
51
Warsztaty
Aby pozby si niechcianych elementw w centralnej czci, musimy dokona odpowiedniego retuszu fotografii. Z pomoc przyjdzie tu narzdzie Polygonal Lasso Tool. Zaznaczamy odpowiednie kawaki powierzchni i poprzez funkcj kopiowania wklejamy je w miejsce statywu. Aby zgra krawdzie podoa uywamy narzdzia Spot Healing Brush Tool. Podobnie postpujemy z cieniem rzucanym przez statyw na podoe. Chcc uzyska zblion jasno podoa uywamy narzdzia Dodge Tool oraz Burn Tool, w zalenoci od potrzeb. Po kilku minutach otrzymujemy w peni zadowalajcy rzut stereograficzny.
5: ReTuSZ
Przygotowan planet moemy wykorzysta w dowolnym layoucie strony internetowej. Warto przy tym pamita o pewnych zasadach, ktre uatwi stworzenie poprawnego projektu. Tworzymy nowy plik File>New o wymiarach 1920px na 1000px. W jego centralnej czci ustawiamy pomocniczy kontener o szerokoci 950px. Dziki
6: NoWy lAyouT
temu kady uytkownik niezalenie od przegldarki i rozdzielczoci poprawnie zobaczy nasz projekt w sieci. Przydatne okaza si mog linie pomocnicze View>Show>Guides. Pierwsz z nich ustawiamy na wartoci 485px, a drug na wartoci 1435px - wszystko przy pomocy narzdzia Move Tool, przecigajc wcinity kursor myszy od lewej miarki projektu, a upuszczajc na konkretnej wartoci.
52
Warsztaty
7: PRZyKADoWe eleMeNTy GRAFICZNe
Za pomoc Rectangle Tool moemy wstawi jako to nowy ksztat, rozcigajc go na caym obszarze projektu. W opcjach tej warstwy moemy nastpnie ustawi gradient Layer>Layer style>Gradient Overlay, gdzie pierwsz wartoci koloru bdzie #6e4f37, drug natomiast #392617. Moemy dodatkowo wstawi belk dla menu poziomego. Przy uyciu Rectangle Tool umieszczamy prostokt, a w opcjach warstwy Layer>Layer Style>Blending Options wczamy dla niego Stroke z wartociami: Size: 1px oraz Color: #f9d343, a take Gradient Overlay z trzema wartociami kolorw: #f9d346, #ebe250, #dfac2d. Dodatkowo poniej moemy wstawi pole tekstowe za pomoc Rectangle Tool z kolorem #6b5544 o wartoci Fill: 60%. opcjonalnie zamieszczamy rwnie teksty.
W naszym projekcie powyej warstwy ta wklejamy zdjcie panoramy sferycznej. Dopasowujemy jej rozmiar i przesuwamy na najkorzystniejsze miejsce w caym projekcie za pomoc Edit>Free Tranfsorm. Na zakoczeniach widoczne s kontrastowe ramki naszej fotografii. Aby je usun zastosujemy mask dla warstwy Layer>Layer Mask>Reveal All. Nastpnie przy pomocy narzdzia Gradient Tool, na masce tworzymy agodne przejcie pomidzy zdjciem a tem. Po uzyskaniu odpowiedniego efektu zatwierdzamy zmiany Layer>Layer Mask>Aplly. Czynno t wykonujemy dla kadego z bokw zdjcia. efekt kocowy to dopasowana panorama do projektu strony www.
8: WKoMPoNoWANIe PANoRAMy
W wiczeniu dowiedzielimy si jakiego sprztu fotograficznego potrzebujemy, abysamodzielnie wykona panoram sferyczn w rzucie stereograficznym oraz jakie naley podj kroki, w celu uzyskania efektu finalnego. Zaprezentowane przykadowe zastosowanie tego typu fotografii w prostym szablonie strony internetowej, moe by podstaw do tworzenia bardziej rozbudowanej kompozycji opartej na gwnym motywie zdjcia, co nada oryginalnoci caemu layoutowi. Pawe Szroeder
53
projektowanie profesjonalnego newslettera krok po kroku

Codziennie do naszej skrzynki pocztowej trafiaj mailingi od wielu rnych firm. Jak przebi si z naszym komunikatem?
Na sukces newslettera pracuje kilka czynnikw. Przede wszystkim dobry temat, nadawca, odpowiednio posegmentowana baza, czy personalizacja. Jednak prawdziwym dowodem na skuteczno naszych dziaa jest CTR, czyli ilo osb, ktra klikna w przygotowan przez nas kreacj. A kiedy ten wskanik jest wysoki? Oczywicie, jeeli grafika chwyta oko, jest jasna, prosta i ma odpowiednio wyrniony call to action. Wydaje si banalnie proste. Jednak w praktyce, wymaga od osoby projektujcej mailing wiedzy nie tylko na temat strony estetycznej newslettera, ale take technicznej.
Warsztaty
Barbara Byrska Media manager i e-mail marketing specialist w firmie FreshMail. odpowiada za strategi dziaa marketingowych i zarzdzanie wszystkimi kanaami komunikacji. FreshMail specjalizuje si w kompleksowej obsudze dziaa z zakresu e-mail marketingu, a w szczeglnoci: budowaniu i zarzdzaniu bazami danych, przeprowadzaniu kampanii e-mail marketingowych, doradztwie w zakresie strategii, kreacji, a take analizie efektw kampanii mailingowych. Gwni klienci: Neckermann, ThomasCook, Maspex, umbro, Timberland, Puma i wiele innych. Pracujemy dla ponad 300 marek w Polsce. Kontakt e-mail: info@freshmail.pl www.freshmail.pl
Musimy pamita, e mailing projektuje si inaczej ni stron internetow. odbiorcy maj bardziej emocjonalny stosunek do wiadomoci, ktre trafiaj bezporednio na ich skrzynk. Nie mona te pomija zupenie odmiennych warunkw technicznych w przypadku newslettera mamy tylko zwyky dokument hTMl z ograniczonymi stylami CSS. adnych animacji, rozwiza typu Ajax, czy Flash. Stanowczo naley odej rwnie od mylenia o newsletterze jako o jednym wielkim obrazku. obecnie tego rodzaju kreacje bardzo czsto s klasyfikowane przez filtry antyspamowe automatycznie, jako spam. Dlatego jak najwicej zawartoci mailingu musimy zamieni na hTMl/CSS. Najwaniejsze zalecenie dla grafikw, ktrzy maj za zadanie stworzy newsletter jest jedno gwnym celem kreacji jest zachcenie do kliknicia. Przyzwyczajenia internautw s znane nie czytamy tylko skanujemy, a w przypadku naszego mailingu, mamy na przekonanie do kliknicia zaledwie kilkadziesit sekund. Dlatego tak kluczowym elementem mailingu jest wyrany call to action. Newsletter to nie serwis internetowy, ale jego przeduenie Taki sposb mylenia wiele nam uatwia. Kreacja musi nawizywa bezporednio do naszego stylu, kolorystyki musi by spjna, zwiza, klarowna. Dzielmy te wszystkie elementy na sekcje. Innymi sowy, uatwiajmy skanowanie, nie zmuszajmy do czytania. Newsletter zawsze posiada stae sekcje Na przestrzeni lat, przyjy si tak zwane dobre praktyki projektowania
54

kreacji do newslettera. Na samej grze wiadomoci powinien zawsze znajdowa si podgld maila w przegldarce (w rodzaju: Jeeli masz problem z wywietleniem tego mailia, kliknij tutaj). To jednak nie wszystko. Bardzo wanym elementem prawidowo przygotowanej kreacji jest umieszczenie w niej linku rezygnacji, po ktrego klikniciu uytkownik zostanie wypisany z listy adresowej. Nie warto go jednak ukrywa, rozmywa, rozjania powinien by zauwaalny. Dziki temu, masz pewno, e jeeli kto chce zrezygnowa z mailingu nacinie wanie ten przycisk, a nie zgo spam, ktry moe wyrzdzi nam duo wicej szkody. Trzymajmy si zasady, e lepiej mie 5% wypisanych odbiorcw, ni 5% zgosze o spamowaniu. Musisz dba o swoj reputacj, poniewa na takiej zasadzie dziaaj zabezpieczenia antyspamowe jeeli bdzie duo zgosze w przyszoci Twoje wysyki mog zosta nawet zablokowane. Nie zapomnij o stopce, ktra sprawi, e kreacja bdzie wyglda wiarygodnie i budzi wiksze zaufanie. Im wicej informacji w niej umiecisz, tym lepiej dla Ciebie. Social media, czyli efekt buzz Przygotowae doskona kreacj, ktra si klika nie zapomnij doda elementw, ktre sprawi, e jego odbiorcy bd mieli moliwo si ni pochwali w serwisach spoecznociowych. Zawsze dodawaj takie buttony, jak: podziel si na Facebooku (lub innych np. Blip, Twitter) lub przelij do przyjaciela. Zwikszysz tym samym swoje pole raenia. miksowanie grafiki z tekstem daje najlepsze efekty Wydaje si, e jestemy w sytuacji bez wyjcia due obrazki bd blokowane przez poczt, a nadmierna ilo tekstu sprawi, e nikt nie przeczyta naszego mailingu. Jest jednak sposb umiejtne przeplatanie tekstu z grafik. Warto rwnie si zabezpieczy przed ewentualnym blokowaniem obrazkw poprzez stosowanie atrybutu AlT (tekst alternatywny, w ktrym moemy zamieci zachcie do pobrania obrazkw). Moemy rwnie poprosi naszych odbiorcw o dodanie nas do zaufanych, dziki czemu wysyki od nas bd zawsze trafia do skrzynki odbiorczej, a nie kosza. Co mwi badania Dziki analizie eye trackingowej newsletterw, wiemy, e nie warto rozprasza odbiorcy zbyt du iloci maych elementw graficznych. Zazwyczaj wiksz uwag przyciga widok ludzkich twarzy, a take grafiki o nietypowym rozmiarze, ksztacie. Nie zapominajmy o umieszczeniu logotypu swojej firmy, w kocu zaley nam take na budowaniu marki. Jeeli zastanawiasz jak wyrni call to action miej na uwadze dowiadczenie e-marketerw, ktre jednoznacznie pokazuje, e lepiej sprawdzaj si graficzne buttony, a nie drobne linki tekstowe. Filtr antyspamowy twj gwny przeciwnik Wiemy na co te sprytne programy zwracaj uwag. Stosunek objtoci tekstu do grafiki musi by rwnomierny, kade odchylenie od normy moe by podejrzane. Pamitaj te, e filtry s wyczulone na pewno sowa kup teraz zawsze zamieszczaj w formie graficznych buttonw, wtedy nie bdzie moliwy do przeczytania przez roboty. Nie pisz tylko wielkimi literami, nie uywaj czerwonych, boldowanych czcionek. unikaj tzw. spamerskiego stylu. Idealne wymiary Zakadamy, e nasi odbiorcy posiadaj monitory standardowej rozdzielczoci (1024x768 lub 1200x800 pikseli), dlatego optymalna szeroko newslettera w tym przypadku wynosi 500-600 pikseli. W wikszoci programw pocztowych okno podgldu pokazuje nam prostokt o wymiarach 600x250, std zalecenie aby nie tworzy mailingw duszych, a tym bardziej przewijanych w bok (co kci si z podstawowymi zasadami usability). Warto zadba o umieszczenie call to action w takim miejscu, ktre bdzie widoczne ju na podgldzie. Pamitajmy, e to jeden z najwaniejszych elementw naszego przekazu.
Warsztaty
Kilka porad odnonie kodowania szablonu i tworzenia samej grafiki najczciej popenianie bdy Pamitaj, e Twoi klienci prawdopodobnie korzystaj z rnych programw pocztowych do odbierania poczty, a take otwieraj mailingi w zwykej przegldarce internetowej, a czasem nawet w telefonie. Kady z tych programw inaczej interpretuje kod, co moe spowodowa, e jeeli nie poznasz odpowiedniej specyfikacji, mailing bdzie wyglda w kadym programie inaczej. Podstawowy cel podczas tworzenia mailingu powinien brzmie niezalenie od miejsca wywietlania mailingu ma on wyglda zawsze tak samo. Poniej krtka ciga z najwaniejszych zalece odnonie tworzenia i kodowania mailingu: Kodujemy w standardzie ISo-8859-2 (tzw. latin-2). Pozostae kodowania Windows-1250 oraz uTF-8 s zdecydowanie bardziej problematyczne, dlatego zalecamy korzystanie z tego pierwszego. Szablon musi mie form tabelaryczn sformatowan za pomoc stylw CSS. Szeroko maila, ktr rekomendujemy to ok. 600 px. Zazwyczaj, moemy poleci przedzia pomidzy 500 a 600 pikseli. Wiksze kreacje u uytkownikw, ktrzy korzystaj z ekranw o mniejszej rozdzielczoci, mog wymaga przewijania w poziomie, a jak wiadomo jest to niezgodne z utartymi zasadami uytecznoci i projektowania. Konieczne, przy zaczaniu w e-mailu elementw graficznych, jest stosowanie tagu alt, z odpowiednio przygotowan treci, przekonywujc do pobrania grafiki, gdy jest ona automatycznie blokowana (np. Pobierz grafik i zobacz co przygotowalimy dla Ciebie). Do kadego obrazka dodajemy border=0 i display:block. Marginesy najlepiej okreli za pomoc margin (cell Margin, padding (cellPadding) wyznaczajc w komrkach odpowiedni warto wyraon w pikselach (TABle cellMargin-10 cellPadding=5>). Trzeba jednak pamita, e padding moe by niepoprawnie odczytywany przez programy typu lotus. Najlepiej stosowa czcionki Verdana, Tahoma, Arial lub Times New Roman z okreleniem ich wielkoci. Zalecamy te aby nie uywa atrybutu <style> w sekcji heAD. Grafiki powinny mie rozszerzenia: JPG, JPeG, GIF, PNG (IMG src=obrazek.gifalt=Pobierz grafik, aby zobaczy ca tre wiadomoci>). Grafika z pynnymi przejciami kolorw powinna mie format JPG, ta skadajca si z kilku kolorw powinna mie format GIF lub PNG (8 bit). Grafiki umieszczane w tle (<table> <td> lub <tr>) mog by niepoprawnie wywietlane w niektrych programach pocztowych. Dlatego te zalecamy uycie atrybutu bgcolor i umieszczanie edytowalnego tekstu na tle o jednolitym kolorze. Wiadomo e-mail powinna posiada link rezygnacji. eby go wstawi wystarczy aby w stopce dokumentu zamieci link poprzez znacznik $$resignlink$$ lub zapisujc dowolny tekst pomidzy znacznikami <resignlink> i </resignlink>. Wszelkie bloki dokumentu zawierajce kod powizany z jzykiem Javascript lub Flash s przewanie pomijane przez wikszo popularnych programw pocztowych. Import wasnego szablonu do systemu Freshmail polega na spakowaniu plikw dokumentu w formacie ZIP. Struktura takiego katalogu po rozpakowaniu powinna zawiera plik gwny z rozszerzeniem .html, oraz pliki graficzne w dowolnym formacie wskazanym w dokumencie.
55
Warsztaty
Wiadomo nie powinna mie wicej ni 100 kB aby nie zapycha skrzynek Twoich klientw:-) Zamiast <p> lepiej uy znacznika <span>. Sprawia mniej problemw. Paddingi nie zadziaaj. Wszelkie przestrzenie uzyskujemy tylko poprzesz zakodowanie pustych komrek tabel o okrelonych szerokociach. Wszystkie szerokoci tabel i komrek w nich zawartch musz zgadza si co do piksela i musz by okrelone (choby hTMl-owo). Im wiecej w newsletterze tekstu, tym lepiej. obrazki nie zawsze otwieraj si domylnie. Czasami trzeba klikn Pobierz obrazki, eby je zobaczy. Text widzimy od razu. Dlatego mailing, ktry powsta w oparciu tylko o obrazki to nie jest dobry pomys. Nie mwic ju o tym, e zbyt due obrazki (rozmiarowo/wagowo) najprawdopodobniej spowoduj, e newsletter wpadnie w spam. Jeeli taka sytuacja si zdarzy, trzeba je poci na mniejsze. Atrybut line-height jest bardzo trudny do kontrolowania. W kadym kliencie pocztowym interpretowany jest nieco inaczej. Dlatego nie zaleca si projektowania kreacji newsletterw, w ktrych wystpuj boksy otoczone borderem z zaokrglonymi rogami. Tych ostatnich nie da si bowiem skodowa czystym hTMl- em, czy CSS- em. Wstawianie borderw, jako grafiki jest z kolei bardzo ryzykownym przedsiwziciem. Testowanie kampanii przed wysaniem jak sprawdzi czy stworzona kreacja zadziaa? Zanim jednak wylesz swoj dopracowan do granic moliwoci kreacj do odbiorcw, bdziesz mia moliwo gruntownego przetestowania jej w systemie. Dlaczego to jest takie wane? FreshMail powie ci ju na etapie przygotowa np. e kreacja nad ktr pracowae dwie noce jest mniej skuteczna od tej stworzonej w midzyczasie albo popenie bdy podczas kodowania i niektrzy uytkownicy poczty mog jej nie zobaczy poprawnie.
Test antyspamowy Aby mie pewno, e Twoja wiadomo nie zostanie omykowo zakwalifikowana, jako spam, stworzylimy modu antyspamowy, ktry jest dostpny w trzecim kroku tworzenia kampanii, czyli Testach. SpamAssasin to program, ktry filtruje nasz mail zanim ten trafi do skrzynki odbiorcy, skanuje nagwki i tre wiadomoci, szukajc pewnych treci wskazujcych na spam. Jeeli tylko zostanie speniony jaki warunek, program przyznaje wiadomoci punkt. Po przekroczeniu pewnego progu punktw (domylnie jest to 5), wiadomo otrzymuje status spamu. Dziki temu prostemu, a bardzo skutecznemu narzdziu, unikniesz problemw z wpadaniem w spam. Dokadnie, krok po kroku, bdziesz wiedzia jak poprawi wiadomo, eby nie trafia do kosza. Krtkie podsumowanie tego, co moesz zrobi testujc wiadomo w module antyspamowym: dowiesz si, czy Twj mailing jest bezpieczny, zobaczysz, ktre elementy Twojego mailingu bd kwalifikowane, jako spam, bdziesz wiedzia jak te bdy poprawi. ScreenTest Zanim wylesz kampani, Screen Test pokae ci, jak Twj mailing wywietli si w rnych programach pocztowych. W ten sposb, zobaczysz, czy jest czytelny i poprawnie skodowany. Screen Test moemy wykona za kadym razem, gdy przygotowujemy nasz kampani. W sumie, moesz skorzysta z podgldu w 19 programach. W pierwszej czci, moesz sprawdzi webmaile od takich dostawcw skrzynek pocztowych jak: onet.pl, Gmail. com, o2.pl, wp.pl, Interia.pl oraz jak wyglda nasz mail na Gmail.com i o2.pl jeszcze przed pobraniem obrazkw. Cz webmaili domylnie pobiera obrazki, w tym przypadku domylnie s blokowane. Czasami moe si zdarzy, e prawidowy schemat maila jest na tyle atrakcyjny, e odbiorca od razu bez pobierania obrazkw np.: kliknie w odpowiedni link. Nie zapomnielimy rwnie o klientach desktopowych, takich jak: Thunderbird, outlook express, outlook 2007, outlook 2003, The Bat!, czy opera Mail. Dla wygody naszych Klientw dodalimy niedawno cztery nowe programy pocztowe, ktre zyskuj na coraz wikszej popularnoci: outlook 2010 Beta, lotus Notes 8, entourage 2008 i Apple Mail.
TeSTy A/B KReACJI
Testy A/B kreacji maj za zadanie sprawdzi, ktry szablon jest bardziej efektywny. Dziki nim, moesz znaczco poprawi open rate swoich mailingw. W przypadku testw A/B kreacji najwaniejszym wskanikiem efektywnoci powinien by wskanik CTR, czyli kliknicia w linki znajdujce si w kreacji. Dziki temu dokadnie wiemy, ktra kreacja wywouje lepszy call to action. W praktyce wygld to tak: tworzymy dwa szablony - pierwszy z nich wysyamy do mniej wicej 10% naszych subskrybentw, drugi do innych 10% odbiorcw. FreshMail mierzy w zadanym okresie czasu, w ktry szablon odbiorcy klikaj chtniej, a nastpnie do pozostaych 80% wysya wanie t kreacj.
Zwr rwnie uwag na wykres przedstawiajcy programy pocztowe, z ktrych najczciej korzystaj Twoi odbiorcy. Jeeli np. adna z tych osb nie posiada The Bat, nie ma sensu dostosowywa newslettera pod jego ktem. Freshmail Inspektor Dziki temu narzdziu dostpnym w pierwszym kroku tworzenia kampanii, bdziesz mg na bieco sprawdzi czy stosujesz si do najwaniejszych zasad tworzenia mailingu, czyli: nie uywasz Flasha ani JavaScriptu, zamiecie link rezygnacji,
56
Warsztaty
odpowiednia dodae tekst, a nie skopiowae go z MS Word (lub innego edytora tekstu), czy uye AlTw po obrazkami, czy stosujesz poprawne style CSS (wicej o nich moesz przeczyta w naszym raporcie pt.: Technologia CSS w aplikacjach pocztowych. Wytyczne dla programistw http://freshmail.pl/public/pdf/raport_css_2010.pdf i wiele innych. Jak wgra skodowany mailing do systemu Freshmail? Moliwoci jest kilka. W zalenoci o Twoich zasobw, moliwoci i czasu, moesz wybra najlepsz dla siebie opcj. W kroku pierwszym kampanii oznaczasz, ktr metod wybierasz, a masz do wyboru kilka ciekawych drg.
Jak spakowa pliki do formatu ZIP? Najpierw upewnij si, e masz zainstalowany program, ktry umoliwi ci ich kompresj, np. WinZip. Nastpnie, zaznacz wszystkie pliki, ktre maj zosta spakowane, nacinij prawy przycisk myszy i kliknij pole Dodaj do archiwum. W kolejnym kroku, zobaczysz okno w ktrym bdziesz musia wybra format archiwum (wybierasz oczywicie .ZIP). I gotowe. Wybierasz opcj Z lokalnego komputera. Wgrywasz uprzednio spakowany w formacie .zip plik.
I gadko przechodzisz do kolejnego kroku, czyli edytora w ktrym moesz jeszcze co poprawi.
Jeeli masz przygotowany szablon w formacie hTMl, moesz wgra go do swojej biblioteki szablonw i z niego skorzysta. Musi by jednak spakowany w formacie ZIP (nie pakuj caego katalogu, tylko zaznacz pliki szablonu, tak aby plik index.html znajdowa si na wierzchu).
Moesz te pobra szablon z dowolnej lokacji w Internecie. W tym wypadku wpisujemy adres uRl. Ta opcja pozwala take na przeprowadzenie wysyek cyklicznych, czyli takich w ktrych FreshMail sam w zadanym terminie bdzie pobiera z danego adresu waciwy szablon, a nastpnie wyle ca kampani. Po klikniciu Dalej zostaniesz przeniesiony na stron z niezbdnymi parametrami, ktre musisz ustali. Nastpnie, wgrywasz list odbiorcw i wykonujesz standardowe testy o ktrych pisalimy wyej. ustawiasz czas wysyki i gotowe newsletter leci w sie. Podsumowanie Stworzenie grafiki w systemie FreshMail zajmuje kilka chwil. Poznanie podstaw merytorycznych, podstaw kodowania, ju troch wicej. Jednak jak mwi stare przysowie przezorny zawsze ubezpieczony. FreshMail oferuje ci ca gam narzdzi do testowania, wic moliwo pomyki maleje niemale do zera. Dziki takim narzdziom, nie musisz si martwi rwnie, e szablony zostan z jakiego powodu utracone wszystkie Twoje kreacje bd dla Ciebie dostpne online. Pamitaj, e podczas tworzenia samej kreacji obowizuje kilka dobrych praktyk. Staraj si jak najprociej formuowa przekaz zawsze warto miksowa tekst z obrazkami (co rwnie jest podyktowane wymaganiami programw antyspamowych). Co wicej, uatwiaj skanowanie rozbijaj na bloki, akapity, planuj, testuj. Postaraj si take o odpowiednie wyrnienie call to action, czyli przycisku, ktry nakania do dziaania. I pamitaj nie odstraszaj mieszank krzykliwych kolorw. Jak pokazuj nasze dowiadczenia, stosowanie kilku barw, spokojny charakter newslettera i dobrze wyrniony call to action to nierzadko klucz do sukcesu w e-mail marketingu. Barbara Byrska, konsultacja: Pawe Sala
57

Porady Grafikow Z Agencji Reklamowych PSD 01 2011

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Porady Grafikow Z Agencji Reklamowych PSD 01 2011

Uploaded by

Copyright:

Available Formats

Pobierz wydanie za darmo.

Pliki rdowe do Pobrania z www

Porady grafikw z agencji reklamowych

Wygraj kredyty w Fot oliaF.opllia.pl w to

.psd 01/2011 | www.psdmag.org/pl

Zdjcia royalty free

.psd 01/2011 | www.psdmag.org/pl

KoBieta uBrana w wod

.psd 01/2011 | www.psdmag.org/pl

1: Wybr materiau i StWorzenie obSzaru roboCzego

.psd 01/2011 | www.psdmag.org/pl

KoBieta uBrana w wod

3: dorabianie CzCi Ciaa

.psd 01/2011 | www.psdmag.org/pl

KoBieta uBrana w wod

.psd 01/2011 | www.psdmag.org/pl

KoBieta uBrana w wod

.psd 01/2011 | www.psdmag.org/pl

.psd 01/2011 | www.psdmag.org/pl

.psd 01/2011 | www.psdmag.org/pl

6: IMPoRT KRZyWyCh Do CINeMA 4D

.psd 01/2011 | www.psdmag.org/pl

10: uSTAWIeNIA NAPISu

11 11: TWoRZeNIe MATeRIAW

.psd 01/2011 | www.psdmag.org/pl

12: NADAWANIe oBIeKToM MATeRIAW

.psd 01/2011 | www.psdmag.org/pl

18: ReTuSZ PDZlA

.psd 01/2011 | www.psdmag.org/pl

19: CIeMNy GRADIeNT FRoNTW NAPISu

20: CIeMNy GRADIeNT FRoNTW NAPISu

21: DoDATKoWe eleMeNTy

.psd 01/2011 | www.psdmag.org/pl

23: eleMeNTy IlluSTRAToRA

.psd 01/2011 | www.psdmag.org/pl

.psd 01/2011 | www.psdmag.org/pl

Baner reKlamowy infinti

1: uTWoRZeNIe NoWeGo DoKuMeNTu

Tworzymy nowy dokument o wymiarach 750x200 i ustalamy prdko animacji na 25 fps.

2: WyKoNANIe eleMeNTW WeKToRoWyCh

3: IMPoRT eleMeNTW GRAFICZNyCh

.psd 01/2011 | www.psdmag.org/pl

Baner reKlamowy infinti

4: PRZyGoToWANIe oBIeKTW Do ANIMACJI

.psd 01/2011 | www.psdmag.org/pl

Baner reKlamowy infinti

7: DoDAWANIe eleMeNTu CAll To ACTIoN I

8: DoDAWANIe eleMeNTu CAll To ACTIoN II

.psd 01/2011 | www.psdmag.org/pl

Baner reKlamowy infinti

9: DoDANIe WARSTWy KlIKAlNeJ (BuTToN)

10: WyeKSPoRToWANIe PlIKu Do PoSTACI FINAlNeJ

.psd 01/2011 | www.psdmag.org/pl

Photoshop | redni | Pliki rdowe do pobrania z WWW

.psd 01/2011 | www.psdmag.org/pl

2: TWoRZyMy eFeKT SePII

.psd 01/2011 | www.psdmag.org/pl

4: TWoRZyMy STRuKTuR ReKlAMy

.psd 01/2011 | www.psdmag.org/pl

5: WyPeNIAMy GWNe eleMeNTy KoMPoZyCJI

6: DoDAJeMy STyle WARSTW

.psd 01/2011 | www.psdmag.org/pl

Photoshop CS5 | redni | Pliki rdowe do pobrania z WWW