Wchodzimy w piąty rok naszej obecności.

W międzyczasie z dwumiesięcznika staliśmy się miesięcznikiem, wydaliśmy parę specjalnych numerów Extra, jeszcze więcej wydań Starter Kita, zorganizowaliśmy liczne konkursy, poznaliśmy wielu utalentowanych, ciekawych ludzi, którzy swoją pasją i wiedzą chcieli podzielić się z nami na łamach .psd. Jednym z nich jest Paweł Zakrzewski – ojciec chrzestny tego wydania. Zaraził on nas pomysłem stworzenia numeru, w pełni poświęconego premierze najnowszego pakietu Adobe Creative Suite 4. Na produktach tej firmy zna się jak nikt inny w Polsce – jest w końcu założycielem i managerem Adobe User Group, która zrzesza entuzjastów oprogramowania Adobe. Wspólnie z Pawłem i członkami Adobe User Group zapraszam więc do wycieczki po nowym, doskonałym świecie programów Photoshop, InDesign, Illustrator, Dreamweaver, Fireworks. Skąd ta pewność, że doskonałym? Skrót do doskonałości – to przecież hasło najnowszej premiery. Nie zapominajmy o wszystkich pozostałych twórcach tego numeru. Anna Owczarz-Dadan podpowie Ci, jak odnaleźć się w nowym, zmienionym interfejsie Photoshopa, Katarzyna Sadło, Cali Rezo, Mariano Villalba oraz Tomasz Gądek podzielą się z Tobą sztuczkami, których używają przy tworzeniu efektownych grafik, a Krzysztof Kopciowski zaprasza na drugą część multimedialnego kursu instruktażowego o video Photoshop Extended. Nie zapomnij też o naszym konkursie, w którym wygrać można naprawdę świetne nagrody! Miłej lektury i do zobaczenia za miesiąc, Marysia Dąbrowska, Redaktor Prowadzący

4

.psd 06/2008 » www.psdmag.org 01/2009

spis treści

grafika z okładki
ostatni anioł
Mariano Villalba

10

warsztaty
gdzie się podziały moje zabawki?!
Anna Owczarz-Dadan

16 20

sprzęt dla grafika
artykuł powstał we współpracy z firmą HP

koncert rock&roll
Tomasz Gądek

HP Elite Book 8730w dla mobilnego grafika 70

tworzymy animowaną, świąteczną kartkę e-mail
Paweł Zakrzewski

fotomontaż
londyńska ulica mlekiem płynąca
Katarzyna Sadło

24 28 32 40 44 48 54 60 64 66

72

nowość – Content-Aware Scale
Paweł Zakrzewski

recenzje/testy
Fotografia cyfrowa. Edycja zdjęć
Paweł Kołodziej

animacja 3D w... Adobe Photoshop CS4
Paweł Zakrzewski

53

cyfrowe malowanie
Cali Rezo

pozycje stałe
autorzy opis CD1 opis CD2 konkurs informacje z branży szybkie triki galeria Digart.pl klub PRO prenumerata zajawka 06 07 08 13 14 15 76 78 80 82
5

cyfrowa ciemnia według Epsona
artykuł powstał we współpracy z firmą Epson

interaktywny pokaz zdjęć
Paweł Zakrzewski

budujemy interaktywne formularze
Paweł Zakrzewski

interaktywny projekt strony
Paweł Zakrzewski

wiwat sztuczne ognie!
Piotr Ogiejko

razem czy osobno?
Paweł Zakrzewski

.psd 06/2008 » www.psdmag.org 01/2009

autorzy

PHOTOSHOP
Magazyn .psd jest wydawany przez Software-Wydawnictwo Sp. z o.o. z siedzibą przy ul. Bokserska 1, 02-682 Warszawa Tomasz Gądek
Konstruktor w branży mechanicznej, od ok. 2 lat zafascynowany Photoshopem ponieważ jego nieograniczone możliwości pozwalają na swobodne wyrażanie własnych emocji. Zabawę z Photoshopem zaczął przypadkiem, ucząc się z kursów zamieszczanych m.in. w magazynie .psd. Teraz próbuje własnych sił, tworząc tutoriale dla innych, by tak jak on odnaleźli inspirację i chęć nauki. Przecież to nic innego jak tylko świetna zabawa. W tym numerze zaprasza nas na rockowy koncert...

Krzysztof Kopciowski

Absolwent filmoznawstwa. Jego szczególnym zainteresowaniem cieszą się możliwości łączenia grafiki 2D i 3D. Szczery pasjonat digital paintingu oraz innych form wizualizacji cyfrowej. Przygotował dla nas drugą część multimedialnego kursu instruktażowego o wideo w Photoshop Extended oraz opisał przybliżył nam tajniki skanowania.

Anna Owczarz-Dadan

Autorka ponad dwudziestu książek poświęconych tematyce grafiki komputerowej oraz fotografii cyfrowej. Od lat pasjonatka programów wykorzystywanych do tworzenia grafiki cyfrowej (Photoshopa, Paint Shop Pro, Illustratora i Paintera). Miłośniczka edycji obrazów cyfrowych. Grafik. Autorka i wydawca kursów wideo do nauki obsługi programów Photoshop, Photoshop Elements. Członek NAPP. Autorka opisała wygląd najnowszego Photoshopa i podpowiedziała gdzie odnajdziecie niektóre zagubione narzędzia i polecenia. Strona: www.annaowczarz.pl.

Cali Rezo

Autorka francuskiej edycji magazunu .psd. Mieszka w Paryżu. Specjalizuje się w digital painting i właśnie w tej technice opowiada jej tutorial. Wykształcenie: matura z literatury i sztuki, 1 rok w szkole Sztuk Pięknych w Aix-en-provence, cztery lata w E.N.S.A.D. - École Nationale Supérieure des Arts Décoratifs de Paris (Państwowa Wyższa Szkoła Sztuk Dekoracyjnych). Strona: www.calirezo.com, kontakt: contact@calirezo.com, blog: www.calirezo.com/blog, muzyka: www.myspace.com/calirezo.

Katarzyna Sadło

Pomiędzy kolorami. Bezwarunkowa miłość do Photoshopa i uwielbienie dla kolorów, może z wyjątkiem połaczenia brązu i fioletu. Grafika, projektowanie stron www, obróbka zdjęć, Flash... Nieustające dokształcanie i ciągłe ściganie Photoshopa. Ulubieni artyści to Vincent Van Gogh i DESA... W tym numerze pokaże jak z nieudanego zdjęcia wykonać barwny fotomontaż. Strona: www.ebru.glt.pl lub www.deekey.pl

Redaktor Naczelny: Anna Adamczyk anna.adamczyk@software.com.pl Dyrektor wydawniczy: Sylwia Małecka Redaktor Prowadzący: Maria Dąbrowska maria.dabrowska@software.com.pl Zastępca Redaktora Prowadzącego: Łukasz Łopuszański lukasz.lopuszanski@psdmag.org Opracowanie CD: Krzysztof Wołowski, Krzysztof Kopciowski Kierownik Produkcji: Marta Kurpiewska marta.kurpiewska@software.com.pl Skład: Tomasz Kostro tomasz.kostro@software.com.pl Grafika na okładce: Mariano Villalba Projekt graficzny okładki: Agnieszka Marchocka Korekta: Mateusz Lipiński Dział reklamy: adv@software.com.pl, tel.: (22) 427 35 30 Prenumerata i archiwa: Marzena Dmowska, marzena.dmowska@software.com.pl www.buyitpress.com, tel.: (22) 427 36 79, (22) 427 36 53 Sklep internetowy: www.buyitpress.com Wydawca: Software-Wydawnictwo Sp. z o. o., 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 Druk: ArtDruk Zakład Poligraficzny, Kobyłka www.artdruk.com tel. +48 604 979 357 Nakład: 8000 egz. .psd ukazuje się w językach:
Redakcja dokłada wszelkich starań, by publikowane w piśmie i na towarzyszących mu nośnikach informacje i programy były poprawne, jednakże nie bierze odpowiedzialności za efekty wykorzystania ich; nie gwarantuje także poprawnego działania programów shareware, freeware i public domain. Uszkodzone podczas wysyłki płyty wymienia redakcja. Wszystkie znaki firmowe zawarte w piśmie są własnością odpowiednich firm i zostały użyte wyłącznie w celach informacyjnych. Deklarowana wysokość nakładu obejmuje również dodruki. Redakcja nie udziela pomocy technicznej w instalowaniu i użytkowaniu programów zamieszczonych na płycie CD dostarczonej z pismem. Płyty CD dołączone do magazynu przetestowano programem AntiVirenKit firmy G DATA Software Sp. z o.o. Redakcja używa systemu automatycznego składu Sprzedaż aktualnych lub archiwalnych numerów pisma po innej cenie niż wydrukowana na okładce — bez zgody wydawcy — jest działaniem na jego szkodę i skutkuje odpowiedzialnością sądową.

Mariano Villalba

Autor naszej okładki. Urodził się w Argentynie. Jest samoukiem w fotografii i fotmontażu. Zamiłowanie do rysunku i malarstwa wyniósł z domu. Jego matka jest wybitną ilustratorką, a ojciec wielkim fotografem. Lubi bawić się obrazami i nadawać im surrealistyczny charakter. Od pięciu lat uczestniczy w największych wystawach fotografii, zarówno krajowych, jak i międzynarodowych. Otrzymał wiele nagród i zaproszeń do licznych krajów. Spośród nagród, które otrzymał, chciałby wyróżnić Trierenberg Super Circuit, nagrodę uznawaną za Oskara w dziedzinie fotografii. Zaprojektował kilka okładek płyt muzycznych. Pracował z takimi gwiazdami jak piłkarz Carlos Tevez i prezenterka telewizyjna Susana Gimenez. Strona: www.flickr.com/marianovillalba, www.marianovillalbadigital.tk. E-mail: marianofotografo@gmail.com

Paweł Zakrzewski

Ojciec chrzestny tego numeru .psd. Pomysładawca tematu przewodniego. Guru i znawca produktów firmy Adobe. Wraz z pasjonatami Photoshopa z Adobe Users Group stworzył większość artykułów w tym numerze. Adobe Certified Expert, Adobe Certified Instructor. Strona: www.pawelzakrzewski.com

6

opis CD

CD1
Photoshop Extended Wideo cz.2
Na CD1 znajdziecie drugą, ostatnią część multimedialnego kursu instruktażowego poświęconego zagadnieniu wideo w Photoshopie. Druga część składa się z ośmiu rozdziałów: Rozdział 1 – Optymalizacja i praca z wieloma warstwami Rozdział 2 – Niedestruktywna edycja wideo Rozdział 3 – Warstwy wideo i inteligentne filtry Rozdział 4 – Edycja warstw wideo Rozdział 5 – Konwersja i spłaszczanie ramek Rozdział 6 – Animowanie światła głobalnego Rozdział 7 – Menu warstw wideo Rozdział 8 – Interpretacja materiału wideo

.psd 01/2009 » www.psdmag.org

7

opis CD

CD2

zdjęcia Royalty Free oraz filmy instruktażowe (bez dźwięku) i pliki źródłowe do tutoriali

Zdjęcia Royalty Free od agencji Eblis www.eblis.pl

Zdjęcia Royalty Free od agencji Digitouch www.digitouch.pl

Zdjęcia Royalty Free od agencji Skorpions www.skorpions.pl

Zdjęcia Royalty Free od agencji Human Anatomy for the Artist www.human-anatomy-for-artist.com

8

.psd 01/2009 » www.psdmag.org

tu powinny być 2 płyty CD
w razie ich braku proszę skontaktować się ze sprzedawcą

Co na krążku? kurs multimedialny
Photoshop Extended Wideo cz.2

CD1

CD2

Ekstrasy • Uwaga: Pliki zamieszczone na CD służą tylko do uzyskania efektów z tutoriali, każde inne użycie jest niedozwolone! • zdjęcia Royalty Free do komercyjnego wykorzystania • filmy instruktażowe są uzupełnieniem tekstu, służą jako pomoc w wykonaniu ćwiczeń znajdujących się na stronach magazynu i są bez dźwięku Płyty działają w systemach Win/Mac
W przypadku uszkodzonej płyty prosimy napisać maila na adres: cd@software.com.pl

.psd 01/2009 » www.psdmag.org

9

grafika z okładki

trudny | 30 min. | pliki na CD
Photoshop CS2

10

.psd 01/2009 » www.psdmag.org

grafika z okładki

ostatni anioł
01 początek pracy

Ostatni Anioł to już ostatnia grafika okładkowa, którą mam przyjemność opisywać Wam na łamach magazynu .psd. Mam nadzieję, że wszystkie dotychczasowe fotmontaże mojego autorstwa przypadły Wam do gustu. Spójrzmy, jak wykonałem ostatniego anioła...

Otwieramy obraz i powielamy warstwę, klikając [Ctrl]+[J]. Usuwamy nasycenie [Shift]+[Ctrl]+[U]. Przygotowaną warstwę łączymy w trybie Nadpisywania, ustawiamy krycie na 48%. Na dolną warstwę w kolorze nanosimy cienie i światło. Scalamy obraz. Na obrazie tworzymy maskę warstwy w kolorze białym. Przy użyciu aerografu rozmytego w kolorze czarnym, przy twardości 2%, czyścimy tło modelki. Przygotowujemy nową warstwę pod warstwą z modelką i wypełniamy ją kolorem szarym o kryciu 50% (Edycja>Wypełnienie 50% szarości). Warstwa ta posłuży nam tylko do sprawdzenia czy tło zostało dokładnie wyczyszczone.

03 dodawanie kamieni,

Przeciągamy fotografię kamieni pod warstwę ciał. Powielamy warstwę kamieni i warstwę znajdującą się nad nią. Usuwamy nasycenie i łączymy ją w trybie Nadpisywania (Overlay). W warstwie kolorowej stosujemy cień i światło, a następnie scalamy oba obrazy. Przechodzimy do Warstwy>Połącz w dół. Tworzymy maskę warstwy i rozpoczynamy całkowite czyszczenie nieba w warstwie kamieni.

warstwy koloru i włosów I

02 ciała w tle oraz gradient bieli i czerni

Przeciągamy obraz ciał na wierzch warstwy szarej. Tworzymy maskę warstwy i rozpoczynamy czyszczenie górnej części. Do tego stosujemy aerograf rozmyty o twardości 2%. Tworzymy mapę gradientu bieli i czerni. Przechodzimy do Palety warstw>Warstwy łączące>Mapa gradientu i wybieramy biel i czerń. Mapa musi być umieszczona nad pozostałymi warstwami i połączona w trybie koloru przy kryciu ok. 45%. Przechodzimy do warstwy ciał i wybieramy Światło i cień.

04 dodawanie kamieni,

Przechodzimy do palety warstw, wybieramy kolor kryjący i stosujemy kolor (#57512c). Pozostawiamy obraz w trybie łączenia łagodne światło przy kryciu 60%. Przechodzimy do warstwy ciał i za pomocą Lassa zaznaczamy krawędzie fotografii. Przechodzimy do Edycja>Kopiuj i Wklej. Obracamy skopiowany obraz Edycja>Przekształć>Obrót poziomy i umieszczamy go tam, gdzie znajdują się białe fragmenty na warstwie ciał. Dodajemy włosy. Wybieramy pasma włosów i umieszczamy je na nowej warstwie.
11

warstwy koloru i włosów II

.psd 01/2009 » www.psdmag.org

grafika z okładki

05 skrzydła modelki

Otwieramy odpowiedni plik i przeciągamy pożądany element. Musi on znaleźć się pod warstwą z modelką. Z palety narzędzi wybieramy Magiczną różdżkę o tolerancji 32px, przyciskamy [Del] w celu wyczyszczenia tła i [Ctrl]+[J]. Kopiujemy warstwę skrzydeł i obracamy ją poziomo. Narzędziem Przekształć zmniejszamy element do 85% w celu uzyskania właściwej perspektywy. Obniżamy krycie do 80%. Tworzymy maskę warstwy i pędzlem o kryciu 35% rozpoczynamy odzyskiwanie części skrzydeł. Ta czynność ma na celu lepsze scalenie skrzydeł z tłem. Po zakończeniu procesu odzyskiwania, nakładamy filtr Sepia o gęstości 90%.

08 dodawanie gałęzi i dymu

Tworzymy nową, przezroczystą warstwę i umieszczamy ją poniżej warstwy kamieni. W tym przypadku należy utworzyć dwie warstwy gałęzi, które scalamy w trybie Normalnym przy kryciu na poziomie 95%, a także osiem warstw dymu, które scalamy w trybie Nadpisywania (Overlay). Krycie może zostać zmienione w celu uzyskania różnej intensywności dymu w tle. Jego wartość może wahać się od 90% do 60%.

0 6 zaciemnienie modelki i tła I

Powielamy warstwę modelki, usuwamy nasycenie skopiowanej warstwy i łączymy ją w trybie Mnożenie (Multiply) przy kryciu 50%. Tworzymy maskę warstwy, pędzlem o kryciu 60% lub 65% rozpoczynamy odzyskiwanie części twarzy i tułowia. Scalamy te dwie warstwy. Przechodzimy do Warstwy>Połącz w dół. Pojawi się pytanie, czy chcesz zachować zmiany w masce warstwy. Wybieramy tak, tworzymy nową warstwę i wypełniamy ją kolorem szarym ustawionym na 50%, a następnie łączymy w trybie Nadpisywania (Overlay), który wybieramy z palety narzędzi.

09 zastosowanie systemu strefowego
Cyfrowy system strefowy jest doskonałą techniką pozwalającą na uzyskanie właściwego oświetlenia części fotografii. Wybieramy Lasso, zaznaczmy lewe skrzydło. Przechodzimy do palety warstw, tworzymy nową warstwę dopasowania poziomów i dopasowujemy wysokie światła histogramu. Na warstwie dopasowania stosujemy narzędzie Gaussian Blur – Filtry>Rozmycie>Gaussian blur o promieniu 30%, aby roztopić białą maskę, która powstała po utworzeniu warstwy dopasowania poziomów. Powtarzamy operację na drugim skrzydle.

na skrzydłach modelki

07 zaciemnienie modelki i tła II

Teraz należy wybrać narzędzie Dosycania (Burn). Przy ustawieniu Dosycania na 35% w trybie Tony Średnie (Midtones) rozpoczynamy przyciemnianie lewej strony obrazka, jak pokazuje zrzut z ekranu, a następnie przyciemniamy niektóre fragmenty nóg i ramion, również po lewej stronie. Po zakończeniu, tworzymy warstwę kryjącego czarnego koloru i umieszczamy ją poniżej modelki. Łączymy wszystko w trybie Łagodne światło (Softlight) i obniżamy stopień krycia do 50%.

10 Gaussian blur i wartość koloru

Przechodzimy do najwyższej warstwy i wybieramy Zaznacz wszystko, idziemy do Edycja>Kopiuj całość, Wklej. Kopiujemy fotografię Obraz>Kopiuj. Obraz zapisujemy jako TIFF lub PSD. Drugą wersję zapisujemy w całości. Dodajemy warstwę dopasowania w kolorze kryjącym (#b7bf76). Łączymy w trybie Nadpisywania o kryciu 17%. Powielamy warstwę [Ctrl]+[J] i stosujemy Gaussian Blur o wartości 14%. Łączymy je w trybie Łagodne światło przy kryciu 30%, usuwamy nasycenie, a gumką o kryciu 60% wycieramy części twarzy modelki i niektóre fragmenty ciała rozciągnięte na ziemi. Mariano Villalba

12

.psd 01/2009 » www.psdmag.org

informacje z branży
01
Firma Adobe udostępniła do pobrania triale produktów z pakietu Adobe Creative Studio 4. Do pobrania wymagane jest posiadanie Adobe ID (czyli zarejestrowanego konta na stronach Adobe) oraz wtyczki Java zainstalowanej w przeglądarce internetowej. Więcej znajdziecie na stronie http://www.adobe.com/downloads/

triale do pobrania

02

profesjonalne procesory graficzne NVIDIA dla miniaturowych komputerów i rozwiązań zintegrowanych

Przy obecnych cenach stacji roboczych, wiele firm może sobie pozwolić na wyposażenie w profesjonalne rozwiązania graficzne tylko niektórych projektantów i inżynierów. Powinno się to zmienić, gdyż NVIDIA Corp. przedstawiła pierwszy zintegrowany procesor graficzny dla płyt głównych NVIDIA® Quadro® FX 470 oraz kartę NVIDIA Quadro FX 370 Low Profile (Quadro FX 370 LP), niskoprofilowe rozwiązanie graficzne Quadro klasy podstawowej, przeznaczone dla miniaturowych komputerów typu small form factor. Procesory graficzne Quadro FX 470 i Quadro FX 370 LP zapewniają wysoką wydajność i elastyczność w aplikacjach CAD i DCC przy zachowaniu niewielkiej ceny, co pozostaje w zbieżności z tradycją firmy NVIDIA oferowania profesjonalnych produktów z linii Quadro zaprojektowanych tak, by zaspokajać specyficzne zapotrzebowania ich użytkowników Podnosząc wydajność i niezawodność, oba nowe produkty są certyfikowane dla głównych aplikacji DCC i CAD, produkowanych przez takich niezależnych producentów jak Autodesk i Adobe. Zaprojektowany tak, aby pasować do niewielkich komputerów, procesor graficzny Quadro FX 370 LP oferowany jest w sugerowanej przez producenta cenie 149 USD i zapewnia wydajność profesjonalnej grafiki bez konieczności stosowania aktywnego chłodzenia, co zmniejsza głośność środowiska pracy. Procesor graficzny Quadro FX 470 ułatwia dostęp do profesjonalnej grafiki pozwalając na konstruowanie systemów w cenie niższej niż 700 USD. Zapewniając jakość i niezawodność, których oczekuje rynek od rozwiązań NVIDIA Quadro, procesory graficzne dla płyt głównych Quadro FX 470 oraz Quadro FX 370 LP oferują 128-bitową precyzję potoku graficznego, 32-bitową precyzję obliczeń zmiennoprzecinkowych, filtrowanie i blending, zaawansowaną kompresję koloru i wczesne wykrywanie wymiaru z, co zapewnia wyższą efektywność renderingu i pełnoekranowego antyaliasingu. Wśród dodatkowych funkcji znaleźć można: • Zunifikowana architektura GPU – dynamicznie przydzielająca zadania przetwarzania geometrii, cieniowania i obróbki pikseli w celu zwiększenia wydajności w aplikacjach OpenGL i Microsoft DirectX 10, Technologia NVIDIA CUDA™ – rewolucyjna architektura procesora obliczeń równoległych wykorzystywana za pośrednictwem środowiska języka C i pakietu narzędzi, zapewniająca wysoką wydajność wizualizacji, Obsługa Shader Model 4.0 – pozwala wykorzystywać ultra-realistyczne, działające w czasie rzeczywistym aplikacje do wizualizacji, Oprogramowanie do obsługi zaawansowanych funkcji wyświetlania NVIDIA nView®: połączenie technologii sprzętowych i programowych nView zapewnia maksymalną elastyczność wyświetlania obrazu na jednym lub wielu ekranach, oferując niespotykaną dotąd możliwość kształtowania wyglądu pulpitu przez użytkownika, Skalowalność I/O i wydajność – bogata obsługa wyjść i wejść zapewnia obsługę takich peryferiów jak SAS czy podwójny GbE, co wydłuża czas życia platformy i zwiększa jej wydajność.

nierom CAD bardziej intuicyjną nawigację i kontrolę dla lepszych osiągnięć projektowych. Nowe usprawnienia wprowadzone w SolidWorks 2009 bezpośrednio przekładają się na korzyści z pracy z myszkami 3D firmy 3Dconnexion, mówi Dieter Neujahr, prezes 3Dconnexion. SolidWorks 2009 oferuje przejście na nowe poziomy produktywności i jakości projektów z większą szybkością i usprawnieniami, które pozwalają użytkownikom skupić się bardziej na projektowaniu niż na samej aplikacji. Usprawnienia te, wraz z udowodnionymi wzrostami produktywności i większymi koszyściami projektowania dostarczanymi przez myszki 3D, mają olbrzymi wpływ na proces rozwoju produktu, pozwalając dzisiaj organizacjom tworzyć wysokiej jakości dobra szybciej i bardziej efektywnie. Po dokładnym przeanalizowaniu SolidWorks 2009 3Dconnexion odkryło obszary, w których myszka 3D może podnieść efektywność aplikacji dla użytkownika, mówi Nick Iwaskow, Manager of Alliances w Dassault Systemes SolidWorks Corp. Przede wszystkim zaś, nasi klienci zawsze szukają takich korzyści i wzrostów produktywności, jakie zapewnić mogą myszki 3D firmy 3Dconnexion. Myszki 3D firmy 3Dconnexion zapewniają intuicyjną i wygodną pracę przy projektowaniu komputerowym oraz zwiększoną produktywność, co ma ogromne znaczenie dla inżynierów aplikacyjnych, którzy większość czasu spędzają na pracy z zaawansowanymi i złożonymi aplikacjami. W odróżnieniu od zwykłych myszek przeznaczonych do ruchu na płaskiej powierzchni, myszki 3D firmy 3Dconnexion umożliwiają użytkownikom ruch we wszystkich trzech wymiarach równocześnie. Myszki 3D firmy 3Dconnexion integrują się płynnie z trybem pracy projektowej w SolidWorks, oferując zaawansowaną nawigację i korzyści, które wzmacniają nowe funkcje programu SolidWorks 2009, takie jak: • Duże złożenia – w bardzo dużych, kompleksowych złożeniach użytkownicy SolidWorks mogą manipulować poszczególnymi częściami niezależnie, używając myszek 3D firmy 3Dconnexion do przesuwania, przybliżania, oddalania i obracania obiektami 3D. Sześć stopni swobody ruchu pozwala projektantom lepiej przeglądać i manipulować dużymi projektami, ułatwiając jednocześnie wykrywanie wad projektowych. Technologia SpeedPak – myszki 3D firmy 3Dconnexion umożliwiają intuicyjną nawigację uproszczonych wersji kompleksowych złożeń poprzez płynne przybliżenie w celu przeglądnięcia modelu lub manipulowania wybranym obszarem projektu, i później oddalenie by obejrzeć złożenie jako całość – funkcja ta wyraźnie poprawia osiągnięcia projektowe. Czujniki symulacji – kiedy wada projektowa jest wykryta przy pomocy czujnika symulacji, myszka 3D może być użyta w celu szybkiej i prostej nawigacji do tego konkretnego miejsca i pozwala inżynierowi obejrzeć projekt pod różnymi kątami, pomóc dokładnie zidentyfikować błąd oraz wprowadzić modyfikacje.

• •

03

myszki 3D firmy 3Dconnexion podwyższają nowe poziomy produktywności oferowane w SolidWorks 2009

3Dconnexion, a Logitech company, ogłosiła, że jej grupa produktów zwanych myszkami 3D jest teraz wspierana przez SolidWorks® 2009, najnowszą wersję popularnego programu 3D CAD. Myszki 3D firmy 3Dconnexion powiększają znaczną już szybkość i wydajność programu SolidWorks 2009, oferując inży-

Oprócz usprawniania procesu projektowania myszki 3D firmy 3Dconnexion dodatkowo pomagają ulepszać jakość samych projektów poprzez swój wkład w szybkie wykrywanie wad projektowych. Urządzenia 3Dconnexion: SpaceNavigator™, SpaceNavigator™ for Notebooks, SpaceExplorer™ i SpacePilot™ są dla inżyniera idealnym uzupełnieniem aplikacji do projektowania w 3D takiej jak SolidWorks 2009 zmieniając rozbudowane ruchy w zupełnie proste. Dodatkowych korzyści dostarczają programowalne przyciski, w które wyposażone są modele SpaceExplorer i SpacePilot, umożliwiające użytkownikowi szybki dostęp do najczęściej wykorzystywanych komend i funkcji pomocniczych klawiatury. Firma 3DConnexion oferuje po przystępnej cenie zaawansowane technicznie manipulatory 3D, które obsługują ponad 130 obecnie wiodących i wydajnych aplikacji 3D. Kompletna lista aplikacji obsługiwanych przez urządzenia firmy 3D podana jest na: www.3dconnexion.com/solutions/cad/all_sup_app.php. Dodatkowo na stronie www.3dconnexion/solidworks_demo obejrzeć można film pokazujący pracę myszek 3D w programie SolidWorks.

14

.psd 01/2009 » www.psdmag.org

szybkie triki
01
Aby szybko powielić warstwę, wykorzystaj skrót klawiaturowy [Ctrl]+[J] lub [Cmd]+[J] na Macu. Ta sama kombinacja klawiszy sprawdza się doskonale w sytuacji, gdy na nową warstwę chcemy przenieść jedynie zawartość zaznaczenia. Aby szybko wypełnić warstwę lub dowolny obszar zaznaczenia kolorem Foreground Color (narzędzia) wystarczy wykorzystać kombinację [Alt]+[Backspace] lub [Option]+[Backspace] na Macu. Alternatywnie, wykorzystanie skrótu [Ctrl]+[Backspace] lub [Cmd]+[Backspace] pozwala szybko wypełnić warstwę lub obszar zaznaczenia kolorem Background Color (tła). Aby szybko wypełnić warstwę kolorem narzędzia z zachowaniem jej przezroczystości, możemy skorzystać ze skrótu [Alt]+[Shift]+[Backspace] lub [Option]+[Shift]+[Backspace] na Macu. Podobnie kombinacja [Ctrl]+[Shift]+[Backspace] lub [Cmd]+[Shift]+[Backspace] na Macu pozwoli wypełnić obszar grafiki na bieżącej warstwie kolorem tła (z zachowaniem przezroczystości). Obszary przezroczyste w obu przypadkach pozostają przezroczyste. Aby szybko powrócić do pracy z domyślnymi kolorami (czarny jako kolor narzędzia oraz biały jako kolor tła) wystarczy wcisnąć klawisz [D] na naszej klawiaturze. Wykorzystanie klawisza [X] pozwoli szybko zmienić kolor narzędzia i tła miejscami, niezależnie od tego jakie kolory mamy właśnie wybrane. Jeśli chcesz szybko zmienić wielkość używanego narzędzia, wykorzystaj nawiasy kwadratowe lewy [[] – pomniejsza wielkość pędzla (lub innego narzędzia), natomiast prawy []] – powiększa jego rozmiar. Aby szybko zmienić kolor krycia (Opacity) wybranego narzędzia np. pędzla, wystarczy podczas pracy wcisnąć jeden z klawiszy [1], [3], [5], [9] itp. Każdy z nich odpowiada innemu poziomowi krycia, według schematu: 1=10%, 2=20%, 3+30%, 0=100%. Aby szybko zmienić poziom krycia grafiki na bieżącej warstwie, wykorzystaj następujący skrót [V] (wybiera narzędzie Move), a następnie dowolny z klawiszy numerycznych [1], [2], [3] itp. Wybór narzędzia Move jest tu konieczny, w przeciwnym wypadku użycie klawiszy numerycznych zmienia bowiem poziom krycia aktywnego narzędzia. Aby szybko zmieniać tryby mieszania warstw lub kolorów (Blending Mode) skorzystaj ze skrótu w postaci [Shift]+[-] lub [Shift]+[+]. Kombinacja ta pozwala szybko zmieniać tryby mieszania kolorów, odpowiednio warstwy lub wybranego narzędzia. Aby dodawać obszary do zaznaczenia, wykorzystaj klawisz [Shift]. W ten sposób możliwe jest stopniowe powiększanie dowolnego zaznaczenia. Alternatywnie klawisz [Alt], pozwala na odejmowanie obszarów od istniejącego zaznaczenia. Co ważne obie kombinacje działają dla wszystkich narzędzi selekcji. Warto wykorzystać je podczas pracy z narzędziem Magic Wand [W] czy też Quick Selection. Aby utworzyć zaznaczenie na podstawie istniejącej na warstwie grafiki, kanału lub ścieżki, wystarczy wcisnąć klawisz [Ctrl] lub [Cmd] na Macu i kliknąć miniaturkę warstwy, ścieżki lub kanału. W rezultacie szybko powstanie zaznaczenie o wskazanym kształcie.

02

03

04

05

06

07

08

09

10

Paweł Zakrzewski

15

warsztaty

gdzie się
podziały moje zabawki?!
Stało się. Mamy nowego Photoshopa – tym razem o dumnie brzmiącej nazwie CS4. Poza wprowadzonymi do niego udoskonaleniami, zmieniono wygląd programu oraz umiejscowienie niektórych narzędzi i poleceń. Gdzie zatem obecnie rezydują? Przeczytaj i zapamiętaj. interfejs programu
Na pierwszy ogień idzie interfejs programu. Jego wygląd uległ zmianie, to fakt, ale czy tylko wygląd? Nie do końca. Ktoś poprzestawiał w nim różne elementy. Zacznijmy od ikony Bridge, która pozwalała przełączać się do programu Bridge. Nadal jest ona dostępna w Photoshopie, jednak z prawej strony paska opcji została przeniesiona na lewą stronę paska menu programu. Wprowadzono także zmiany w dostępnych trybach ekranu. W najnowszym Photoshopie zrezygnowano z trybu Zmaksymalizowany tryb ekranu (Maximum Screen Mode). Poza tym nie ma już możliwości zmiany trybu ekranu za pomocą ikon dostępnych w przyborniku. Można tego dokonać, korzystając z paska menu i dostępnej na nim ikony zmiany widoku ekranu (rysunek 1). Poza tym w Photoshop CS3 po włączeniu trybu pełnoekranowego (Full Screen Mode) (poprzez naciśnięcie klawisza [F] lub wskazaniu go na liście po wybraniu polecenia Widok/Tryb ekranu (View/Screen Mode)), w oknie programu były widoczne jedynie: pasek opcji, przybornik oraz palety i obraz, na którym pracujesz. Dzięki temu, podczas pracy ze zdjęciem, miałeś do dyspozycji większy obszar roboczy. Wspaniale, prawda? W wersji CS4 wprowadzono coś ekstra. Otóż pracując w tym trybie (rysunek 2), palety i przybornik są automatycznie rozwijane i zwijane, kiedy tylko zbliżysz kursor do krawędzi obszaru roboczego (lub oddalisz go od danej palety) (rysunek 3). Aby powrócić do standardowego widoku, naciśnij klawisz [F] lub [Esc]. Wcześniej, aby przywrócić domyślne ustawienia przestrzeni roboczej programu wybieraliśmy polecenie Okno/Przestrzeń robocza/Domyślna przestrzeń robocza (Window/Workspace/ Default Workspace) lub klikaliśmy na pasku opcji przycisk Przestrzeń robocza (Workspace) i wybieraliśmy opcję Domyślna przestrzeń robocza (Default Workspace). Teraz opcja Domyślna przestrzeń robocza (Default Workspace) została zastąpiona przez opcję Essentials, a więc dla uzyskania tego samego rezultatu wybieramy polecenie Window/Workspace/Essentials (rysunek 4) lub klikamy na pasku menu odpowiedni przycisk (rysunek 5) i wybieramy opcję Essentials. Z listy menu Okno/Przestrzeń robocza (Window/Workspace) zniknęły również polecenia Wyzeruj położenie palet (Reset Panel Location), Wyzeruj skróty klawiszowe (Reset Keyboard Shortcuts) oraz Wyzeruj menu (Reset Menus) i Skróty klawiszowe i menu (Keyboard Shortcuts & Menus).

narzędzia

W Photoshop CS4 zmieniło się także położenie niektórych narzędzi, a jedno z nich zupełnie zniknęło. Mam tutaj na myśli Adnotacje dźwiękowe (Audio Adnotation), które wcześniej znajdowało się pod narzędziem Uwagi (Notes), a teraz jest niedostępne. Zmiana położenia dotyczy narzędzi takich, jak Uwagi (Notes), które zostało przeniesione pod narzędzie Kroplomierz (Eyedropper) oraz Cięcie na plasterki (Slice) i Zaznaczanie plasterków (Slice Selection), które zostały umieszczone pod narzędziem Kadrowanie (Crop). Tym samym miała tu miejsce kolejna zmiana, polegająca na tym, że w wersji CS4 narzędzie Kadrowanie (Crop) nie jest już w przyborniku samodzielnym narzędziem, lecz dzieli szufladkę narzędziami Cięcie na plasterki (Slice) i Zaznaczanie plasterków (Slice Selection) i nie jest już jedynym narzędziem, które można uaktywnić naciskając klawisz [C] (jak było do tej pory) (rysunek 6).

warstwy oraz tworzenie panoramy

W najnowszej wersji Photoshopa przestało być dostępne polecenie Warstwa/Zmień typ wypełnienia dynamicznego (Layer/ Change Layer Contents). Poza tym z okna Łączenie obrazów (Photomerge) zniknęła opcja Układ interaktywny (Interactive Layout), która dawała możliwość ręcznego dopasowywania zdjęć łączonych w panoramę. W oknie tym pojawiły się jednak nowe funkcje. Coś za coś.

preferencje programu

Trochę zmian pojawiło się także w oknie Preferencje (Preferences) Photoshopa, które możesz nadal wywołać za pomocą polecenia Edycja/Preferencje (Edit/Preferences). Zacznijmy od

Rysunek 1. Przycisk na pasku menu służący do zmiany trybu ekranu w Photoshop CS4

Rysunek 2. Zmiana trybu ekranu w Photoshopie CS4 na pełnoekranowy – Full Screen Mode
16 .psd 01/2009 » www.psdmag.org

gdzie się podziały moje zabawki?!

Rysunek 6. Zmiany dotyczące umiejscowienia narzędzi w Przyborniku programu Photoshop CS4

Rysunek 3. Kiedy pracujemy w trybie pełnoekranowym (Full Screen Mode), cała powierzchnia naszego ekranu staje się obszarem roboczym Photoshopa CS4. Potrzebne do pracy palety wywołujemy i ukrywamy jednym ruchem kursora

Rysunek 7. W nowej wersji Photoshopa nie oszczędzono także poleceń. Niektóre z nich zostały przeniesione w inne miejsce menu programu

sprawia, że w skalę szarości zostaje zamieniona ikona programu widoczna na pasku menu.
Rysunek 4. W Photoshop CS4 domyślne ustawienia przestrzeni roboczej przywracamy korzystając z polecenia Window/ Workspace/Essentials

filtry

czcionek. Polecenie umożliwiające przeprowadzenie zmiany rozmiaru czcionki interfejsu zostało przeniesione do sekcji Interfejs (Interface) (pole UI Font Preferences) i teraz nosi nazwę UI Font Size. Dodatkowo w sekcji tej znalazło się polecenie umożliwiające zmianę języka interfejsu (UI Language). Kolejna zmiana dotyczy opcji Automatyczne uruchamianie programu Bridge (Start Bridge at Login), która została przeniesiona z okna Preferencje (Preferenes) do sekcji Advanced okna preferencji programu Bridge. Opcja Użyj ikony paska narzędziowego Skala szarości (Use Grayscale Toolbar icon) została przemianowana na Use Grayscale Application Icon (znajduje się ona nadal w sekcji Interfejs (Interface) okna Preferencje (Preferences)). Wcześniej powodowała wyświetlanie w skali szarości kolorowego paska ze skróconą nazwą programu, widocznego nad paletą narzędziową, a teraz

Nawet ich nie oszczędzono? Oj, tak. Dla miłośników filtrów Wydziel (Extract) oraz Tworzenie wzorka (Pattern Maker) mam złą wiadomość – już ich nie ma! Nie, to nie żart. Naprawdę filtry te zostały usunięte z programu Photoshop. Jednak Adobe obiecuje, że będzie można je pobrać w najbliższej przyszłości, jak zgaduję w postaci pluginów. Trzymamy za słowo.

polecenia

Pora na polecenia. Zacznę od tego, że polecenie Proporcje pikseli (Pixel Aspect Ratio) znajduje się w tej chwili na wygnaniu w menu Widok (View), a wcześniej było dostępne w menu Obraz (Image). Poza tym, polecenia służące do automatycznej korekcji koloru, kontrastu i poziomów (teraz tonów) zostały przeniesione z podmenu Dopasowania (Adjustments) bezpośrednio do menu Obraz (Image). Czemu miała służyć ta zmiana? Szczerze mówiąc, nie wiem. Ale stało się i miłośnicy automatycznej korekcji wyglądu obrazu powinni to po prostu zapamiętać (rysunek 7). Kolejną naprawdę dużą zmianą jest wprowadzenie w CS4 panelu Adjustments (rysunek 8). W nim zgromadzono większość

Rysunek 5. Domyślne ustawienia przestrzeni roboczej programu możemy także przywrócić, klikając przycisk na pasku menu i wybierając odpowiednią opcję
.psd 01/2009 » www.psdmag.org 17

warsztaty

opcji dopasowania. Pisałam o tym w poprzednim numerze magazynu. Zmiany zostały również wprowadzone w oknie polecenia Czarno-biały (Black & White). W wersji CS3 programu, kiedy chcieliśmy uzyskać dostęp do suwaków Barwa (Hue) i Nasycenie (Saturation), musieliśmy zaznaczyć opcję Tinta (Tint) i suwaki stawały się aktywne. Teraz kiedy wywołujemy okno polecenia, suwaki te nie są widoczne, ponieważ zostały usunięte z programu. Aby wybrać kolor o określonym nasyceniu, zaznacz opcję Tint, a kiedy aktywna stanie się próbka z kolorem, kliknij ją i w otwartym w ten sposób oknie wybierz odpowiedni kolor (rysunek 9). Teraz coś dla miłośników polecenia Krzywe (Curves). Pamiętacie znajdujące się w dole okna Opcje wyświetlania krzywej (Curve Display Options)? Kiedy korzystacie z tego dopasowania w panelu Adjustments, opcja ta nie jest widoczna. Aby z niej skorzystać, musicie kliknąć ikonę menu panelu (ikona w górnej części panelu) (rysunek 10) i wybrać tę opcję z rozwiniętej listy. Zmienił się także sposób przechodzenia pomiędzy punktami na krzywej w oknie Krzywe (Curves). Kiedyś robiliśmy to za pomocą klawiszy [Ctrl]+[Tab], a teraz służą do tego klawisze [+] i [-].

kanały

W poprzedniej wersji Photoshopa (CS3), kiedy podczas pracy z poleceniami dopasowania, takimi jak np. Poziomy (Levels), Krzywe (Curves) chcieliśmy wskazać kanał obrazu, który ma zo-

Rysunek 10. Nowa lokalizacja opcji Curve Display Options
stać poddany edycji, używaliśmy klawisza [Ctrl]+cyfra (z zakresu 1-3, określająca odpowiedni kanał). W wersji CS4 zastosowanie tego rozwiązania nie jest najlepszym pomysłem. Po prostu nie zadziała. Teraz, aby uzyskać ten sam efekt, musimy użyć klawiszy [Alt]+cyfra. Ale to nie jedyna różnica. W najnowszym Photoshopie kanałom została nadana inna numeracja (wyższa). Przykład: jeśli wcześniej używałeś kombinacji klawiszy [Ctrl]+[3], aby edytować kanał niebieski (B), teraz musisz użyć w tym celu klawiszy [Alt]+[5]. Aby edytować kanał zielony (G) używasz kombinacji [Alt]+[4], a czerwony (R) – [Alt]+[3]. Użycie klawiszy [Alt]+[2] pozwala edytować wszystkie kanały jednocześnie, czyli sprawia, że pracujemy na kanale RGB. Wprowadzone w Photoshopie CS4 zmiany, być może, w wielu przypadkach, nie sprawią, że cały Twój uporządkowany świat legnie w gruzach i będziesz czuł się, jakbyś pracował w zupełnie nowym programie. Jednak wiele z tych zmian warto zapamiętać, aby później nie tracić czasu na prowadzenie poszukiwań wspomnianych przeze mnie narzędzi, czy poleceń w chwili, gdy będą one potrzebne. Anna Owczarz-Dadan

Rysunek 8. Paleta Adjustments – jedna z nowości programu Photoshop CS4

Rysunek 9. Zmiany wprowadzone w oknie dopasowania Czarno-biały (Black & White) – usunięto z niego suwaki Barwa (Hue) i Nasycenie (Saturation)
18 .psd 01/2009 » www.psdmag.org

warsztaty

trudny | 80 min. | pliki na CD
Photoshop 7.0

20

.psd 01/2009 » www.psdmag.org

warsztaty

koncert
rock&roll
W tutorialu tym zaprezentuję, jak w prosty i szybki sposób założyć własną kapelę i zorganizować tournee po kraju. Wystarczy kilka zdjęć z wakacji oraz inwencja twórcza. Głównym narzędziem, jakie zostanie użyte w tym ćwiczeniu, będzie pióro oraz filtr chmury. Rock’n roll...

01 wybór zdjęć do projektu

W celu stworzenia projektu z koncertu, należy najpierw przygotować zdjęcia, z których wytniemy postacie. Proponuję wybrać zdjęcia ze znajomymi i oczywiście ze sobą w roli głównej - bo to oczywiście nasz zespół i nasz koncert. Po wybraniu zdjęć należy wyselekcjonować postacie, możemy to zrobić na kilka sposobów: używając narzędzia Pióro (Pen), Lasso Magnetyczne (Magnetic Lasso Tool) lub opcji Wydziel (Extract) znajdującej się w zakładce Filtr (Filter).

03 selekcja instrumentów muzycznych

Kolejnym krokiem będzie dobór instrumentów muzycznych i ich wyselekcjonowanie. Zdjęcia instrumentów, których użyłem w tutorialu, znalazłem, używając wyszukiwarki internetowej. Jeżeli macie swoje własne zdjęcia, możecie ich również użyć. Wybrane instrumenty można wyselekcjonować używając Różdżki (Magic Wand Tool). Należy kliknąć białe tło, odwrócić zaznaczenie wciskając [Ctrl] +[Shift]+[I] oraz użyć [Ctrl]+[J], postępując dalej tak jak zostało to opisane w poprzednim punkcie.

02 selekcja postaci

Z palety z narzędziami wybieramy Pióro (Pen) i obrysowujemy jak najdokładniej postać na zdjęciu. Po obrysowaniu wciskamy prawy przycisk myszy i z menu wybieramy Utwórz Zaznaczenie (Make Selection), wpisujemy Wtapianie (Feather) 0px i wciskamy OK. Następnie wciskamy [Ctrl]+[J]. Wybieramy czarny kolor narzędzia, z menu głównego wybieramy Zaznacz>Wczytaj Zaznaczenie (Select>Load Select). Teraz możemy skorzystać ze skrótu klawiaturowego [Alt]+[Backspace] w celu zamalowania postaci. Możemy również kopiować ręce i ustawiać je w sposób, jaki nas interesuje.

04 rozmieszczenie postaci i instrumentów

Z menu wybieramy Plik>Nowy [File>New] i wpisujemy następujące wartości wysokość 800px na szerokość 880px, wybieramy białe tło i zatwierdzamy OK. Korzystając z narzędzia Zaznaczanie Prostokątne [Rectangular Marquee Tool] rysujemy na nowej warstwie prostokąt, który zamalowujemy na czarno – będzie on wstępnie tworzył scenę. Za pomocą narzędzia Przesuń [Move], przenosimy wszystkie wyselekcjonowane postacie oraz instrumenty do głównego projektu. W razie potrzeby ,korzystając ze skrótu [Ctrl]+[T] i przytrzymując [Shift] zmniejszamy lub powiększamy je, dopasowując do odpowiedniej wielkości.
21

.psd 01/2009 » www.psdmag.org

warsztaty

05 tworzenie głośników i pałeczek dla
Ponieważ niektóre postacie mają uniesioną nogę, należy umieścić na scenie głośniki, tak by mogły na nich ją oprzeć. Wykonamy to narzędziem Zaznaczanie Prostokątne (Rectangular Marquee Tool), jak w punkcie poprzednim, z tym że wybierzemy teraz wartość Wtapiania (Feather) 1px. Brakuje mikrofonu i pałeczek dla perkusisty. Na nowej warstwie rysujemy czarnym pędzlem o twardej końcówce i średnicy 3px linię prostą. Następnie obracamy ją [Ctrl]+[T] i dopasowujemy do perkusisty. Wciskamy [Ctrl]+[J] i mamy kolejną pałeczkę, którą obracamy i wkładamy perkusiście do drugiej ręki.

perkusisty

08 tworzenie oświetlenia I

Stworzymy teraz reflektor oświetlający scenę. W tym celu tworzymy nowy plik Plik>Nowy (File>New) o wymiarach wys. 600px i szer. 300px, Tło (Background) malujemy na Czarny (Black) kolor. Na palecie Warstwy (Layers) wciskamy ikonkę Utwórz Warstwę (Create New Layer). Z palety z narzędziami wybieramy Zaznaczanie Prostokątne (Rectangular Marquee Tool) i rysujemy prostokąt jak na rysunku. Używając narzędzia Wiadro z Farbą (Saint Bucket) zamalowujemy prostokąt na kolor biały.

0 6 rysowanie mikrofonu

Tworzymy nową warstwę, na której narysujemy mikrofon. Wybieramy czarny pędzel o średnicy 7px i Twardości (Hardness) 100%. Rysujemy linię jak na rysunku, a następnie powiększamy średnicę pędzla do 12px i klikamy na końcu prostej, którą narysowaliśmy. Dopasowujemy mikrofon jak w poprzednim kroku. W celu narysowania przewodu dochodzącego do mikrofonu wybieramy średnicę pędzla 3px, a następnie rysujemy Piórem (Pen) kształt jak na rysunku. Wciskając prawy przycisk myszy, wybieramy opcję Obrysuj Ścieżkę (Stroke Path), z nowego okna wybieramy Pędzel (Brush) i zatwierdzamy OK.

09 tworzenie oświetlenia II

Nastepnie na palecie z narzędziami klikamy dwa razy na ikonę Tryb Szybkiej Maski (Quick Mask Modes) i w pojawionym się oknie zaznaczamy opcję Obszary Zaznaczone (Selected Areas). Wybierając narzędzie gradient, zamalowujemy nasza warstwę przeciągając z dołu do góry, na całej długości prostokąta. Następnie wciskamy [Q] na klawiaturze, powinno pojawić się zaznaczenie jak na rysunku. Teraz wybieramy z menu Filtr>Rozmycie>Rozmycie Gaussowskie (Filter>Blur>Gaussian Blur) i ustawiamy suwak na 14px. W celu pozbycia się zaznaczenia wciskamy [Ctrl]+[D].

07 tłum

Tych samych postaci możemy użyć w celu stworzenia tłumu pod sceną lub wyselekcjonować nowe jak w pkt. 2. Jeżeli wybierzemy te same postacie, proponuję je zmienić, robiąc na przykład odbicie lustrzane lub delikatnie je rozciągając bądź zwężając. Możemy również zaznaczyć rękę i przekopiować ją do innej postaci zmieniając jej kształt. Kiedy nasz tłum będzie gotowy, łączymy wszystkie tworzące go warstwy w jedną, używając kilkakrotnie skrótu [Ctrl]+[E]. Na koniec zamalowujemy całe tło na czarno.

10 tworzenie oświetlenia III

Kolejnym krokiem będzie zablokowanie przezroczystych pikseli, w tym celu na palecie Warstwy (Layers) wciskamy pierwszy kwadracik znajdujący się w górnej części palety. Wybieramy czarny kolor narzędzia, a z menu głównego wybieramy Filtr>Rendering>Chmury (Filter>Render>Clouds). Efekt powinien być zbliżony do tego na zrzucie. Teraz możemy już odblokować przezroczyste piksele, ponownie klikając na tę sama ikonkę co poprzednio. Następnie wciskamy [Ctrl]+[T] i wciskając prawy przycisk myszy, wybieramy opcję Perspektywa (Perspective). Przekształcamy światło reflektora jak na rysunku.

22

.psd 01/2009 » www.psdmag.org

koncert rock&roll

11 dodanie reflektora

By całość wyglądała dość realistycznie, należy stworzyć źródło, z którego wyłania się snop światła. Z palety z narzędziami wybieramy opcję Zaznaczanie eliptyczne (Elliptical Marquee Tool) i na nowej warstwie rysujemy niewielką elipsę, którą wypełniamy białym kolorem. Następnie z menu Warstwy (Layers) wybieramy opcję Dodaj Styl Warstwy>Blask Zewnętrzny (Add A Layer Style> Outer Glow) oraz ustawiamy opcje: Wielkość (Size) 21px, Rozszerzenie (Spread) 10px, Krycie (Opacity) 85%.

14 tworzenie refleksu świetlnego I

Gdy ustawimy już wszystkie reflektory, możemy scalić warstwy, na których znajdują się osoby na scenie oraz warstwy instrumentów muzycznych (z wyjątkiem perkusji) po to by w późniejszym kroku dodać efekt odbicia światła na scenie. Nie łączymy warstw z głośnikami oraz ze sceną. Będąc na warstwie, którą scalaliśmy, wybieramy z menu palety Warstwy (Layers) Dodaj Styl Warstwy>Faza i Płaskorzeźba (Add New Layer Style>Bevel And Emboss). Ustawiamy suwaki: Glębia (Depth) 121%, Wielkość (Size) 3px, Zmiękczanie (Soften) 1px, Kąt (Angle) 1050, a Krycie (Opacity) na 70%.

12 reflektor – kosmetyka

Ponieważ reflektor nie wygląda jeszcze dość naturalnie, dokonamy jego niewielkiej korekty. W tym celu z menu głównego wybieramy Edycja>Przekształć>Wypaczenie (Edit>Transform>Warp) i klikając myszką pośrodku dolnej linii, delikatnie ją unosimy, uzyskując efekt widoczny na rysunku. Jeżeli efekt jest zadowalający, łączymy warstwę reflektora z warstwą snopu światła, wciskając [Ctrl]+[E]. Używając narzędzia Przesuń (Move), przenosimy oświetlenie do projektu.

15 tworzenie refleksu świetlnego II

Kopiujemy Styl Warstwy (Layer Style) i wklejamy go na warstwę z instrumentami, a następnie w ustawieniach Faza i Płaskorzeźba (Bevel And Emboss) zmieniamy Krycie (Opacity) na około 30%. To samo robimy na warstwie perkusji – tylko Krycie (Opacity) zmniejszamy do 15%. Przechodzimy na warstwę z tłumem, gdzie wklejamy styl warstwy, a następnie w zakładce Faza i Płaskorzeźba (Bevel And Emboss) ustawiamy Głębię (Depth) oraz Krycie (Opacity) na wartości 30%.

13 rozmieszczenie oświetlenia na scenie

Umieszczamy oświetlenie reflektorów poniżej warstwy z ludźmi na scenie oraz poniżej warstwy z instrumentami. Możemy każde oświetlenie stworzyć od nowa bądź powielić je wciskając [Ctrl]+[J]. Pozostało nam teraz ustawienie reflektorów w taki sposób, by oświetlały interesujące nas instrumenty oraz postacie na scenie. Wciskając [Ctrl]+[T] możemy zmieniać wielkość oświetlenia, a także obracać je według własnych potrzeb. Reflektory znajdujące się na drugim planie powinny być odpowiednio mniejsze.

16 ostatnie poprawki

W taki oto sposób stworzyliśmy koncertowy projekt. Na koniec możemy pobawić się kolorystyką świateł, tworząc na samej górze nową warstwę i zamalowując ją dowolnym kolorem. Zmieniamy Tryb Mieszania (Blend Mode) na Kolor (Color) i zmniejszamy Krycie (Opacity) w przedziale 30 – 50%. Na koniec możemy dodać efekt dymu Filtr>Rendering>Chmury (Filter>Render>Clouds), zmieniamy Tryb Mieszania (Blend Mode) na Mnożenie Odwrotności (Screen), a krycie do 70%. Niepotrzebnego dymu pozbywamy się Gumką (Erase). Tomasz Gądek
23

.psd 01/2009 » www.psdmag.org

warsztaty

tworzymy
Boże Narodzenie, Wielkanoc czy Dzień Zakochanych to najpopularniejsze święta, które skłaniają nas do składania życzeń najbliższym, pracownikom, współpracownikom czy też znajomym. Świąteczna, animowana kartka email, jest chyba jednym z najpopularniejszych sposobów przekazywania życzeń.
W przykładzie tym spróbujemy przygotować prostą animowaną kartkę świąteczną, zapisaną w postaci umożliwiającej przesłanie jej w treści wiadomości e-mail. Naturalnie w podobny sposób możemy budować nie tylko kartki świąteczne, lecz także wszelkiego typu newslettery czy graficzne wiadomości e-mail. Co ważne możemy w takim przypadku łączyć różne formy mediów. Animowany element graficzny wraz z treścią możemy zamknąć w prostej tabeli, co pozwoli na bardziej atrakcyjną formę prezentacji. Do wykonania tego przykładu wykorzystamy łącznie trzy programy: Adobe Illustrator – w celu wstępnego przygotowania wektorowego projektu, Adobe Photoshop – aby dodać prostą animację oraz Microsoft Outlook – by przygotować finalną postać naszej e-kartki. Wybór tego typu narzędzi nie jest tu obligatoryjny. Jedynym istotnym programem jest bowiem Photoshop, który nie tylko pozwala na utworzenie animacji, ale także przygotowanie projektu w postaci gotowej do rozsyłania klientom i znajomym. Wykorzystałem Illustratora dla wygody i łatwej edycji użytych elementów wektorowych. Nie jest on jednak konieczny, cały projekt od podstaw możemy zbudować za pomocą Photoshopa. Często wiadomość prezentowana w atrakcyjnej formie graficznej zwana bywa – mailingiem HTML. Niestety tworzenie tego typu wiadomości ma kilka istotnych ograniczeń, które warto poznać, zanim jeszcze rozpoczniemy projektowanie. • •

średni | film i pliki na CD Photoshop CS4 | Illustrator CS4

animowaną, świąteczną kartkę e-mail

Nie można zapomnieć także o niezwykle istotnej kwestii kolorystyki. Wprawdzie, praca prezentowana będzie na ekranie monitora w trybie RGB, jednak aby możliwe było dodanie stosownej animacji, konieczny jest zapis jej efektów w postaci pliku GIF. Jednym z jego największych ograniczeń z punktu widzenia kreacji i grafiki jest niemożność użycia pełnej palety kolorów RGB. Pliki typu GIF pozwalają zapisać wyłączenie do 256 kolorów. Jest to niestety poważny problem. Ostatnim, jednak niezwykle ważnym ograniczeniem jest waga całej animacji. Nie ma racjonalnych możliwości, by tworzyć piękne, płynne animacje w postaci pliku GIF. Ten nie nadaje się do zapisu filmów, doskonale zaś sprawdza się podczas budowy prostych animacji złożonych z kilku następujących po sobie ekranów. Mając to na uwadze, możemy przygotować naprawdę ciekawe animacje, dbając jednocześnie o ich odpowiednią wagę.

o czym należy pamiętać?

poznajemy i pojmujemy ograniczenia

Jednym z podstawowych błędów początkujących grafików jest próba tworzenia animowanej kartki świątecznej za pomocą programu Adobe Flash. Oczywiście sam program doskonale nadaje się do tworzenia grafiki okolicznościowej, wprowadzenia odpowiednich animacji, a nawet nastrojowego podkładu muzycznego. Na tym kończą się jednak jego atuty (choć jest ich naprawdę wiele), a rozpoczynają problemy. Pierwszy jest najbardziej istotny: • Nie ma możliwości osadzenia pliku Flash SWF w treści wiadomości e-mail. Ten problem w zasadzie całkiem skutecznie niweczy pomysł tworzenia kartki świątecznej za pomocą Flasha. Co gorsze, w ten sposób rozumując, nie ma możliwości, by dźwięk zapisany w animacji Flash znalazł się łatwo w naszej kartce. Pamiętając o tych ograniczeniach, możemy oczywiście zdecydować się na budowę animowanej kartki za pomocą Flasha, jednak finalną animację eksportujemy wówczas do postaci animowanego GIFA. Takie postępowanie niesie ze sobą tak wiele ograniczeń i wyrzeczeń, że trudno powiedzieć by użycie Flasha w tym przypadku było dobrym pomysłem. Osobiście, pomimo niezłej znajomości zasad tworzenia animacji Flash, kartki świąteczne zawsze buduję za pomocą Photoshopa (wcześniej Image Ready). Kolejnym istotnym ograniczeniem naszej kreatywności jest brak (racjonalnych) możliwości wykorzystania muzyki w treści naszej kartki. Oczywiście istnieją sposoby, by to zmienić, jednak ich użycie zupełnie nie gwarantuje nam tego, że nasi docelowi odbiorcy odsłuchają podkład muzyczny czy nasze życzenia.

Wiadomość e-mail nie powinna być zbyt ciężka - to chyba oczywiste, jednak podczas projektowania nie można zapomnieć także o jej rozmiarze. Kartka prezentowana będzie za pomocą jednego z popularnych programów do obsługi poczty a może nawet bezpośrednio w oknie przeglądarki internetowej. Aby dać możliwość wyświetlenia jej w całości, nie może być ona zbyt szeroka. Zwykle dobrym rozwiązaniem okazuje się przygotowanie kartki o szerokości około 500-700 px i długości dostosowanej do zawartości. Projektując kartkę warto pamiętać o kolorach. Ograniczenie do użycia jedynie 256 kolorów wymusza niejako rezygnację ze zbyt wielu zdjęć jednocześnie. Dobrym rozwiązaniem może być także (warto rozważyć to w praktyce) przygotowanie świątecznej kartki o charakterze wektorowym. Oczywiście tego typu grafika nie nie-

Rysunek 1. Prace rozpoczynamy od utworzenia dokumentu Photoshopa o docelowej wielkości

24

.psd 01/2009 » www.psdmag.org

tworzymy animowaną, świąteczną kartkę e-mail
shopa. W rezultacie wyświetlone zostanie okno Paste, które umożliwia wybór odpowiedniej postaci wklejanej grafiki (rysunek 2). W tym miejscu, najlepszym wyborem jest z pewnością wskazanie opcji - Smart Object. Umieszczona w tej formie grafika nie traci swych wektorowych właściwości. W każdej chwili możemy powrócić do Illustratora, by tam poprawić nasz projekt. Co niezwykle ważne, wszystkie zmiany wprowadzone i zapisane za pomocą Illustratora zostaną automatycznie naniesione w docelowym dokumencie Photoshopa. Jest to niezwykle ciekawy i wygodny sposób pracy – polecam. Wspomniałem tu o możliwości przenoszenia całej pracy z Illustratora do Photoshopa, jednak nie zawsze jest to zasadne i konieczne. Niekiedy, dużo lepszym rozwiązaniem okazuje się kopiowanie jedynie pojedynczych elementów projektu, które wielokrotnie możemy wykorzystać w animowanej kartce. Oczywiście, cały projekt kartki możemy wykonać także za pomocą Photoshopa czy innego programu graficznego. Ważne jest, by ten znalazł się w Photoshopie na osobnej warstwie lub warstwach. Ich ilość nie ma tu bowiem żadnego znaczenia. Osobne warstwy ułatwiają przeprojektowanie kartki, wprowadzanie koniecznych zmian oraz dodawanie animacji.

Rysunek 2. Podczas wklejania obiektów wektorowych Illustratora, zwykle wygodnie jest wykorzystać opcję Smart Object. Pozwoli to na późniejszą edycję grafiki w Illustratorze sie takiej ilości ciepła i emocji jak fotomontaże, jednak z pewnością lepiej się kompresuje (bez utraty jakości) oraz zwykle nie wymaga ograniczeń co do użytych kolorów i ich ilości. Do animacji wykorzystać należy niewielki element całej kompozycji. Zmieniające się obrazy, zbyt duże i jaskrawe animacje są często niezwykle irytujące. Warto rozważyć także połączenie grafiki i tradycyjnego tekstu. Dzięki użyciu tabel, możliwe jest przygotowanie kartki w postaci dopasowanej do naszych potrzeb.

dodajemy elementy animacji

tworzymy ogólny projekt kartki

Kolejny krok to wprowadzenie dodatkowych elementów, które mają być animowane. Warto tu pamiętać, by znalazły się one na osobnych warstwach. Mimo że jest to dość kłopotliwe do wykonania, niezwykle uła-

Prace rozpoczynamy od utworzenia dokumentu Photoshopa o docelowej wielkości. W naszym przykładzie wykorzystam dokument o wielkości 600 x 266 px (rysunek 1). Takiej bowiem wielkości jest grafika przygotowana wcześniej w Illustratorze. Do budowy samej animacji, pokusiłem się o wykorzystanie projektu zeszłorocznej kartki świątecznej firmy IT Media – autoryzowanego ośrodka szkoleniowego Adobe (wykorzystana kolorystyka) przygotowanej w postaci wektorowej za pomocą programu Adobe Illustrator. W związku z faktem, iż do budowy projektu, w tym przykładzie wykorzystałem grafikę utworzoną wcześniej w Illustratorze, muszę przenieść ją do Photoshopa. W tym celu, otwieram projekt kartki w programie Illustrator, zaznaczam go, kopiuję, a następnie wklejam do Photo-

Rysunek 4. Płatki i inne elementy animacji rozmieszczamy na osobnych warstwach

Rysunek 5. Paleta Animation pozwala na przejście w tryb animowanie elementów naszej pracy

Rysunek 3. Adobe Photoshop posiada całkiem pokaźną bibliotekę pędzli. Pozwalają one na uzyskanie wielu ciekawych efektów graficznych. W tym przykładzie, wykorzystane zostały płatki śniegu oraz pędzle naturalne do utworzenia mgiełki oraz płatków

Rysunek 6. Do budowy animacji wykorzystujemy schemat. Nowa klatka, następnie modyfikujemy widoczność, położenie lub/oraz poziom krycia wybranych warstw projektu
25

.psd 01/2009 » www.psdmag.org

warsztaty

twi późniejsze wprowadzanie konkretnych animacji. W naszym przykładzie, kolejne płatki śniegu oraz świecące punkty na drzewkach dodane zostały na kilku osobnych warstwach za pomocą pędzla w programie Photoshopa (rysunek 3). WSKAZÓWKA Adobe Photoshop udostępnia pokaźną kolekcję dodatkowych pędzli. Aby skorzystać z różnych kształtów dostępnych w programie Photoshop, należy w palecie Brushes przejść do opcji i wskazać odpowiednią bibliotekę. Jeśli podczas dodawania pędzli użyjemy opcji Append, kolejne pędzle dodane zostaną do istniejącej kolekcji. Wybór opcji OK zastąpi bieżący zestaw nową, wskazaną biblioteką. Dla lepszych efektów wizualnych oraz aby ułatwić sobie pracę, możemy zróżnicować nieco poziom krycia (Opacity) dodanych elementów. Pozwoli to na późniejszą ich animację w kolejnych klatkach naszej kartki (rysunek 4).

budujemy animację

Tworzenie animacji kartki świątecznej jest niezwykle proste. Wszystkie konieczne działania wykonamy za pomocą dwóch palet: Animation oraz Layers. W tym celu przechodzimy do menu górnego Window, otwieramy paletę Animation i zaznaczamy widoczną w dolnej części opcję Convert to frame animation (rysunek 5). Wybór ten pozwoli na tworzenia animacji poklatkowych charakterystycznych dla plików GIF.

W rezultacie mamy już gotową pierwszą klatkę animacji. Jej wygląd jest odzwierciedleniem bieżącego układu i widoczności warstw naszego projektu. Aby dodać kolejną klatkę, użyjemy przycisku Duplicate Selected Frames widocznego w dolnej części okna Animation. W ten sposób wszystkie warstwy projektu przeniesione zostały do drugiej klatki animacji. Tu jednak musimy wprowadzić kilka drobnych zmian. Aby przygotować nasza animację, będąc w drugiej klatce pliku, modyfikujemy widoczność, położenie lub/oraz poziom krycia wybranych warstw projektu. Pozwoli to uzyskać efekt animowania płatków śniegu, mgiełki w tle oraz lampek na drzewkach (rysunek 6). Aby podejrzeć działanie animacji, wystarczy szybko klikać kolejno w pierwszą i drugą klatkę projektu. W ten sposób mamy wygodny podgląd wprowadzanych modyfikacji. Wprowadzenie kolejnej klatki animacji wygląda niemal identycznie. Rozpoczynamy od przycisku Duplicate Selected Frome, a następnie modyfikujemy wygląd, położenie czy też widoczność niektórych warstw naszego projektu. W podobny sposób dodajemy kilka (dosłownie kilka) klatek projektu godząc się z faktem, że nie ma technicznych i praktycznych możliwości uzyskania efektu płynnie opadających płatków śniegu czy zapalania świateł na drzewkach (rysunek 7). Liczby widoczne poniżej miniaturki podglądu określają czas wyświetlania kolejnych klatek animacji. W programie Adobe Photoshop możemy niezależnie określić czas trwania każdej klatki animacji. W tym celu należy rozwinąć menu widoczne tuż obok bieżącej wartości i wskazać inną, odpowiednią wartość. Aby zmienić czas trwania wszystkich klatek animacji jednocześnie, wystarczy zaznaczyć je wszystkie i dokonać odpowiedniej modyfikacji czasu (rysunek 8). Wprowadzone w ten sposób zmiany dotyczą automatycznie wszystkich klatek.

tworzymy animację w pliku GIF

Rysunek 7. Gotowa animacja w naszym przykładzie złożona jest jedynie z czterech klatek

Rysunek 8. Możemy szybko zmienić czas trwania wszystkich klatek jednocześnie

Aby zapisać efekt animacji w postaci pliku GIF, konieczne jest wykorzystanie polecenia Save for Web & Devices z menu górnego File. Pozwoli to nie tylko na wskazanie odpowiedniego formatu zapisu naszej pracy, ale także na wybór liczby użytych kolorów i wykorzystanie dodatkowej kompresji. W prawej części okna Save For Web & Devices wskazujemy GIF jako format wyjściowy, a następnie (o ile to możliwe) redukujemy liczbę użytych kolorów animacji. Dzięki podglądowi pliku wyjściowego w dolnej części okna możemy precyzyjnie określić wymaganą liczbę barw naszej pracy. O ile waga pliku przekracza założone maksimum, możemy także wykorzystać dodatkową kompresję stratną. W tym celu przechodzimy do sekcji Lossy i określamy odpowiedni zakres kompresji. Niestety, stratna kompresja w przypadku plików GIF prowadzi do bardzo znacznego pogorszenia jakości naszej pracy. Oznacza to więc, że należy korzystać z niej z wielkim umiarem i wyczuciem. Jeśli jednak nawet kompresja nie pozwoli na zapis pliku GIF o założonej wadze, konieczne będzie usunięcie niektórych klatek animacji i/lub zmniejszenie liczby wykorzystanych kolorów. Podczas zapisu pracy w formacie GIF, warto zwrócić uwagę także na opcję Looping Options widoczną w dolnej części okna. W tym miejscu określamy sposób powtarzania animacji zapisanej w pliku GIF. Wybór opcji Forever pozwala na stałe zapętlenie animacji (rysunek 9). Wprowadzone ustawienia potwierdzamy za pomocą przycisku Save. Wskazujemy odpowiednie miejsce na dysku i nadajemy pracy docelową nazwę. Uwaga! Pliki przeznaczone do użycia w internecie nie powinny mieć nazw zawierających spacje, polskie znaki czy inne znaki specjalne typu: *, ;, „, @, # itp.

budujemy wiadomość e-mail w programie Microsoft Outlook

Rysunek 9. Za pomocą polecenia Save For Web & Devices zapisujemy efekt naszej pracy w pliku typu GIF
26

Ostatnim krokiem przygotowania naszej kartki jest budowa odpowiedniej oprawy za pomocą klienta poczty internetowej. W naszym przypadku, wykorzystam najpopularniejszy program pocztowy, jakim bez wątpienia jest Microsoft Outlook. Pozwala on na tworzenie wiadomości email w formacie HTML doskonale spełniającym nasze potrzeby. Za pomocą przycisku Nowa wiadomość pocztowa tworzymy nowy, czysty dokument e-mail. Należy pamiętać, by był to e-mail

.psd 01/2009 » www.psdmag.org

Rysunek 10. W programie pocztowym tworzymy nową wiadomość e-mail w formacie HTML i dodajemy prostą tabelę

Rysunek 11. Cały projekt możemy od razu przygotować za pomocą Photoshopa. W tym przypadku w treści wiadomości znajduje się wyłącznie pojedynczy plik graficzny
w formacie HTML. Jedynie tego typu forma wiadomości pozwala na budowę atrakcyjnych mailingów. Aby nadać naszej wiadomości odpowiednią oprawę, proponuję wykorzystać prostą tabelę HTML, która pozwoli na budowę odpowiedniego układu naszej wiadomości. W tym celu za pomocą sekcji Wstawianie dodałem prostą tabelę złożoną z trzech rzędów i jednej kolumny. Teraz nie pozostaje nic innego jak tylko wprowadzić właściwą treść wiadomości. W tym celu przechodzimy do menu wstawianie i za pomocą polecenia Obraz dodajemy przygotowaną właśnie animację w pierwszym rzędzie tabeli. W środkowym wierszu tabeli, wprowadzamy właściwą treść wiadomości oraz odpowiednie życzenia świąteczne. W ostatnim wierszu dodajemy zaś stopkę z danymi naszej firmy lub/oraz jej logotyp (rysunek 10). O ile to konieczne, możemy także dostosować nieco wielkość, kolor i formatowanie tekstu, dodać delikatne obramowanie oraz wyśrodkowanie tabeli. W rezultacie powstaje nam całkiem atrakcyjna kartka świąteczna zbudowana za pomocą graficznych programów Adobe, w szczególności zaś chyba najpopularniejszego programu graficznego na świecie – Adobe Photoshop. Animowana kartka świąteczna nie jest jak widać trudnym zadaniem.

inne możliwości

Naturalnie, możemy jeszcze bardziej uprościć nasze działania. Jeśli powiększymy obszar roboczy dokumentu Photoshopa, dodamy od razu stosowny tekst oraz logo naszej firmy, gotową kartkę możemy w całości umieścić w wiadomości email (rysunek 11). W takim przypadku nie ma potrzeby, by dodawać tabelę czy też wprowadzać dodatkowe teksty. Cały projekt i animacje możemy wykonać za pomocą Photoshopa. Dowolny program pocztowy pozwoli na przesyłanie jej w treści wiadomości. Z najlepszymi życzeniami Paweł Zakrzewski

warsztaty
średni | film i pliki na CD

nowość
Content-Aware Scale
W tym przykładzie przeanalizujemy jak implementacja narzędzia Content-Aware Scale w programie Photoshop CS4 działa w praktyce oraz zastanowimy się, w jaki sposób dotrzeć do maksymalnych możliwości tego narzędzia.

Photoshop CS4

Pośród wielu nowości dostępnych w najnowszej wersji Adobe Photoshop CS4 łatwo odnaleźć funkcję Content-Aware Scale. Jest to całkowicie nowe i doprawdy rewolucyjne narzędzie skalowania obrazów oparte o znany już od pewnego czasu algorytm zwany Seam Carving.
odpowiedniego tła, możemy pokusić się o przeskalowanie całej pracy, wykorzystując algorytm Seam Carving – czyli właśnie polecenie Content-Aware Scale.

troszkę historii – Seam Carving

dodawanie tła do fotografii

Seam Carving został zaadoptowany w programie Photoshop CS4 pod nazwą Content-Aware Scale. Jest to algorytm przekształcania wielkości obrazu, opracowany przez Shaia Avidana i Ariela Shamira, na podstawie mapy energetycznej obrazu. Seam Carving, w przeciwieństwie do tradycyjnych narzędzi skalowania (powiększania lub pomniejszania), nie deformuje obrazu w oparciu o przekształcenia matematyczne, kadrowanie czy odcinanie, ale bierze pod uwagę jego zawartość. Algorytm buduje mapę energetyczną istotnych lub mniej istotnych obszarów obrazu i na ich podstawie dokonuje dalszych działań. Dzięki dodawaniu lub usuwaniu pikseli należących do tej samej fali energetycznej (seam), możemy uzyskać fantastyczne efekty działania. W rezultacie, wykorzystanie polecenia Content-Aware Scale w programie Adobe Photoshop CS4, pozwala na niemal bezstratne skalowanie wybranych (tak nawet my możemy wskazać obszary, jakie chcemy chronić lub poddać edycji) obszarów pracy z zachowaniem nienaruszonej struktury pozostałych detali. Jak to działa w praktyce? Postaram się wyjaśnić na podstawie kilku prostych przykładów. Istota użycia narzędzia jest niezwykle prosta. Zaznaczamy odpowiednią warstwę, którą chcemy poddać edycji, a następnie za pomocą narzędzia Content-Aware Scale wykonujemy stosowane przekształcenia (powiększanie lub pomniejszanie obrazu). Już w pierwszej chwili widać, jak niesamowite możliwości przynosi użycie nowej funkcji programu. Tam, gdzie konieczne jest przykładowo przekształcenie pionowej fotografii w poziomą, tam, gdzie brakuje nam

Pierwszy przykład – dodawanie tła do istniejącej fotografii wykonamy w bardzo prosty sposób. Rozpoczynamy od powielenia oryginalnej warstwy obrazu. W tym celu, bezpośrednio po otwarciu grafiki za pomocą polecenia [Ctrl]+[J] lub [Cmd]+[J] na komputerach Macintosh przenosimy oryginalne tło pracy na nową warstwę (rysunek 1). Jest to konieczne, ponieważ podobnie jak w przypadku innych

Rysunek 2. W naszym przypadku pokusimy się o dwukrotne powiększenie rozmiaru naszej pracy

Rysunek 1. Oryginalna fotografia powielona na nową warstwę
28

Rysunek 3. Polecenie Content-Aware Scale dostępne jest także skrótem [Ctrl]+[Alt]+[Shift]+[C] lub [Cmd]+[Alt]+[Shift]+[C] na Macu

.psd 01/2009 » www.psdmag.org

nowość – Content-Aware Scale
przekształceń obrazu konieczne jest użycie warstwy. Nie ma możliwości skalowania oryginalnego tła pracy. W przypadku dodawania nowego tła konieczne jest rozszerzenie obszaru roboczego naszej pracy. W tym celu wywołujemy polecenie Image>Canvas Size ([Ctrl]+[Alt]+[C] lub [Cmd]+[Alt]+[C] na komputerach Macintosh) i dodajemy dodatkowy obszar naszej pracy. Oczywiście ustawienia w oknie Canvas Size dobieramy odpowiednio do efektów, jakie chcemy osiągnąć. Jeśli główny obiekt znajduje się w centralnej części zdjęcia i chcielibyśmy dodać nowe obszary tła zarówno z lewej, jak i prawej strony, pozostawiamy pole Anchor w środkowym położeniu. W ten sposób dodatkowe obszary naszej pracy zostaną dodane po obu stronach oryginalnej fotografii. Jeśli jednak zależy nam, by dodać nowe tło jedynie po prawej stronie, przenosimy pole Anchor na lewą stronę. W rezultacie dodatkowe tło zostanie dodane jedynie po prawej stronie. W naszym przypadku pokusimy się o dwukrotne powiększenie rozmiaru naszej pracy. Pozwoli to w pełni docenić możliwości narzędzia (rysunek 2). Dzięki technologii Seam Carving rozciąganie naszej pracy odbędzie się w całkowicie inteligentny sposób. Program rozpozna strukturę dokumentu i na tej podstawie zdecyduje, które obszary obrazu mają być powielane, które zaś pozostaną bez zmiany. Zaznaczamy górną warstwę i za pomocą polecenia Edit>Content-Aware Scale ([Ctrl]+[Alt]+[Shift]+[C] lub [Cmd]+[Alt]+[Shift] +[C] na komputerze Macintosh) wywołujemy polecenia Content – Aware Scale (rysunek 3). Istota jego użycia jest niezwykle prosta. Chwytamy jeden z dostępnych uchwytów i powiększamy lub pomniejszamy rozmiar warstwy. W tym przykładzie chwytamy prawy, środkowy uchwyt kontrolny i rozciągamy pracę aż do krawędzi obrazu. W ten sposób obraz został dwukrotnie rozciągnięty w swej szerokości. Jakie zmiany przyniosło takie działanie? Już od pierwszej chwili widać niesamowite możliwości, jakie oferuje nowa funkcja Content-Aware Scale. W rezultacie nawet tak znacznego powiększenia pracy, edycji uległy przede wszystkim elementy jej tła. Główny obiekt pozostał niemal bez zmian. I to jest naprawdę niesamowite (rysunek 4). Oczywiście, dla osiągnięcia tego efektu posłużyłem się małym trikiem, ale o tym w dalszej części artykułu (rysunek 5).

Rysunek 5. Porównanie obrazu oryginalnego i edytowanego bez żadnych dodatkowych zabiegów

Rysunek 6. Grafikę, jaką chcemy poddać edycji, przenosimy na nową warstwę

przekształcamy pionowe zdjęcie w poziome

W podobny sposób możemy łatwo przekształcić pionowe zdjęcie w jego poziomy odpowiednik. Także w tym przypadku przenosimy oryginalną prace na nową warstwę ([Ctrl]+[J] lub [Cmd]+[J]), powiększamy obszar roboczy (Canvas Size) i za pomocą narzędzia Content-Aware Scale ([Ctrl]+[Alt]+[Shift]+[C] lub [Cmd]+[Alt]+[Shift]+[C]) modyfikujemy jej zawartość. W rezultacie pionowe ujęcie przekształcone zostaje w poziome zdjęcie. To działa! Przykład, jaki przedstawiłem wcześniej, doskonale oddaje istotę tego procesu. Ewidentnie pionowe ujęcie, dzięki przekształceniu zawartości stało się poziome i wciąż wygląda całkiem dobrze. Ciekawe co na to modelka ze zdjęcia?

Rysunek 7. Wywołujemy polecenie Edit>ContentAware Scale i za pomocą uchwytów kontrolnych pomniejszamy obraz. Tło tymczasowo zostało wyłączone

Rysunek 4. Już od pierwszej chwili widać niesamowite możliwości, jakie oferuje nowa funkcja Content-Aware Scale

Rysunek 8. W rezultacie, zbędne elementy tła zostają usunięte a centralne postacie pozostają bez zmian – działa to naprawdę rewelacyjnie
29

.psd 01/2009 » www.psdmag.org

warsztaty

pomniejszanie zdjęć – przekształcanie poziomej fotografii w pionową

Rysunek 9. Rysujemy prostokątne zaznaczenie ponad obszarem, jaki chcemy pozostawić bez zmian

Początkowo narzędzie Seam Carving planowane było jako inteligentny algorytm pomniejszania obrazu, z czasem zaadoptowany został także do powiększania. Jak zatem działa to w praktyce. Podobnie jak we wcześniejszych przykładach, zawartość pracy, jaką chcemy poddać edycji, przenosimy na nową warstwę (rysunek 6). Wywołujemy polecenie Edit>ContentAware Scale i za pomocą uchwytów kontrolnych pomniejszamy ją (rysunek 7). W rezultacie, zbędne elementy tła zostają usunięte a centralne postacie pozostają bez zmian (rysunek 8). Zdecydowanie widać, że nawet bez dodatkowych trików, Content-Aware Scale doskonale sprawdza się szczególnie podczas pomniejszania. Są jednak sytuacje, gdy algorytm narzędzia Content-Aware Scale nieco się gubi. Wtedy konieczne jest dodanie maski – kanału alpha, który pozwoli na ochronę wybranych (przez nas) obszarów. Zabieg ten wykorzystałem podczas skalowania postaci na ulicy. Użycie maski doskonale zabezpiecza pracę przed przypadkowym zniekształceniem.

wybór obszarów do edycji – maska z kanału alpha

Rysunek 10. Za pomocą przycisku Add New Alpha Channel w palecie Channels dodajemy nowy kanal alpha

Narzędzie Content-Aware Scale dokonuje przekształcenia obrazu na podstawie mapy energetycznej. Algorytm automatycznie określa, które obszary można łatwo skalować, które należy pozostawić bez edycji. Niestety, takie podejście nie zawsze daje zadowalające rezultaty. Dotyczy to w szczególności obszarów o jednolitym zabarwieniu. Jeśli program odnajdzie takie fragmenty na głównym obiekcie naszej fotografii, z pewnością podda je edycji. W tym jednak przypadku nie tego oczekiwaliśmy. Warto więc zastanowić się, w jaki sposób możemy chronić wybrane, istotne elementy pracy przed niezbyt poprawnym przekształceniem. Odpowiedzią na ten problem okazują się dwa dodatkowe narzędzia, dostępne na górnym pasku właściwości Photoshopa CS4. Użycie opcji Preserve skin tones pozwala zachować bez dodatkowej edycji obszaru, kolory zbliżone do koloru skóry człowieka. W rezultacie postacie, twarze, elementy ciała pozostają chronione i program w nieco mniejszym zakresie poddaje je edycji. Nawet wówczas, gdy mamy do czynienia z jednolitym kolorem. Niestety także i ten mechanizm nie daje oczekiwanych rezultatów. Czasami trudno jest znaleźć odpowiedni kolor skóry, czasami po prostu nie ma takich detali. Jak możemy więc chronić ważne elementy obrazu przed przypadkową edycją? Tu odpowiedzią okazuję się użycie dodatkowego kanału alpha. Obszar zamaskowany pozostaje całkowicie bez edycji, pozostałe fragmenty obrazu poddane są edycji na podstawie standardowego algorytmu Content-Aware Scale. Działa to po prostu rewelacyjnie.

dodajemy kanał alpha zabezpieczający naszą pracę przed przypadkową edycją
Rysunek 11. Przekształcamy obraz, z uruchomioną opcją Protect>Alpha 1

Najprostszym sposobem oznakowania obszarów, jakie chcemy pozostawić bez edycji, jest użycie zaznaczenia. Za pomocą dowolne-

Rysunek 12. Efekt działania narzędzia Content-Aware Scale i maski
30

Rysunek 13. Mamy do dyspozycji prosty projekt – okładkę płyty CD

.psd 01/2009 » www.psdmag.org

nowość – Content-Aware Scale

Rysunek 14. Wywołujemy polecenie Image>Canvas Size, zaznaczamy opcję Relative i w polach Width oraz Height wprowadzamy wartości, o jakie chcielibyśmy powiększyć naszą pracę

Rysunek 16. Przechodzimy do narzędzia Image>ContentAware Scale. Upewniamy się, że w górnym pasku opcji aktywna jest opcja Protect Alpha 1 i powiększamy grafikę
+ [Alt]+[Shift]+[C], wywołujemy narzędzie edycji – Edit>ContentAware Scale. Teraz właśnie uruchamiamy z górnego paska funkcję Protect i wskazujemy utworzony kanał alpha jako maskę (rysunek 10). Za pomocą dostępnych uchwytów powiększamy lub pomniejszamy obraz i potwierdzamy ustawienia [Enter] (rysunek 11). W rezultacie obszary chronione maską (kanał alpha) nie zostają poddane edycji, zaś te niezamaskowane są w inteligentny sposób powielane lub usuwane (rysunek 12).

dodajemy spady do obrazu

Rysunek 15. Zaznaczamy górną warstwę projektu i za pomocą narzędzia Marquee [M] – rysujemy prostokątne zaznaczenia nieco mniejsze niż oryginalna okładka
go narzędzia selekcji (np. Marquee Tool [M]) zaznaczamy (najlepiej) pionowy lub poziomy obszar na całą szerokość lub wysokość obrazu, jaki chcemy pozostawić w oryginalnej formie (rysunek 9). Następnie przechodzimy do palety Channels (Window>Channels) i za pomocą przycisku Save Sellection as Channel dodajemy nowy kanał do pracy (rysunek 10). Tak przygotowany kanał, utworzony na podstawie przygotowanej selekcji to właśnie kanał alpha, który możemy później wykorzystać podczas edycji obrazu za pomocą Content-Aware Scale. Uwaga! W zależności od konfiguracji palety Channels, a także metody zaznaczenia, może okazać się, że chroniony obszar prezentowany jest w kolorze czarnym, zaś pozostałe są białe. Tego typu kanał działa dokładnie odwrotnie i zamiast chronić wybrany fragment, edytuje go, pozostawiając bez edycji obszary tła. Wymaga to drobnej korekty. Nie jest to trudne. Za pomocą skrótu [Ctrl]+[I] lub [Cmd]+[I] na Macu tworzymy negatyw obrazu, co automatycznie zamienia kolory miejscami. W rezultacie, obszar maski staje się biały, pozostałe obszary czarne. W tej postaci, dodatkowy kanał alpha jest już doskonałą maską zabezpieczającą naszą pracę przed niechcianą edycją. Aby aktywować kanał jako maskę zabezpieczającą naszą pracę przed niechcianą edycją, musimy skorzystać z dodatkowej opcji – Protect, dostępnej na górnym pasku właściwości. Dalsze działania nie odbiegają od tradycyjnych metod użycia narzędzia Content-Aware Scale. Wybrany obszar przenosimy na osobną warstwę skrótem [Ctrl]+[Alt]+[Shift]+[C] lub [Cmd]

Narzędzie Content-Aware Scale doskonale sprawdza się także na etapie przygotowywania gotowej pracy pod kątem druku. Niestety, wielu projektantów podejmując się przygotowania pracy o konkretnym rozmiarze, zapomina o cięciu i spadach. W rezultacie jakże często prace tworzone przez mniej doświadczonych designerów nie mają odpowiedniego marginesu pozostawionego do cięcia. Dzięki użyciu Content-Aware Scele możemy łatwo ten problem rozwiązać. Tam bowiem, gdzie ze względu na kształt projektu, niemożliwe jest proste jego powiększenie, użycie tej nowej funkcji sprawdza się doskonale. Spróbujmy na prostym przykładzie. Na widocznym przykładzie prezentowany jest prosty projekt – okładka płyty CD (rysunek 13). Projekt wykonany został na ostro i nie uwzględnia spadów. Teraz dzięki użyciu narzędzia ContentAware Scale spróbujemy dodać te dodatkowe obszary. Rozpoczynamy przeniesienia tła na nową warstwę ([Ctrl]+[J] lub [Cmd]+[J] na Macu), a następnie powiększamy rozmiar całego dokumentu. W tym celu wywołujemy polecenie Image>Canvas Size, zaznaczamy opcję Relative i w polach Width oraz Height wprowadzamy wartości, o jakie chcielibyśmy powiększyć naszą pracę. Wybór 2-3 milimetrów w większości przypadków będzie bardzo dobry. Punkt odniesienia – Anchor Point pozostawiamy na środku bez zmian (rysunek 14). Zaznaczamy górną warstwę projektu i za pomocą narzędzia Marquee [M] – rysujemy prostokątne zaznaczenia nieco mniejsze niż oryginalna okładka (rysunek 15). W tym miejscu zawarte zostaną główne elementy projektu, które nie mogą ulec deformacji podczas przekształcania tła. Za pomocą przycisku Add New Channel dodajemy nowy kanał alpha w Palecie Channels i wyłączamy zaznaczenie (rysunek 16). Teraz przechodzimy do narzędzia Image>Content-Aware Scale. Upewniamy się, że w górnym pasku opcji aktywna jest opcja Protect Alpha 1 i powiększamy grafikę. Zgodnie z założeniem, przekształcane są jedynie najbardziej zewnętrzne obszary tła, środek obrazu (w tym przypadku wraz z logotypem grupy) pozostaje nienaruszony. Właśnie to było naszym celem. Paweł Zakrzewski

.psd 01/2009 » www.psdmag.org

31

warsztaty

animacja 3D
w... Adobe Photoshop CS4
Tak, może brzmi to nieprawdopodobnie, ale program Adobe Photoshop CS4 Extended pozwala nam łatwo i wygodnie tworzyć animacje trójwymiarowe. Gotowy film możemy wykorzystać podczas dalszej pracy w Adobe Premiere czy After Effects. Może on także stanowić pełną, samodzielną reklamę. Jak się za to zabrać?
Wraz z najnowszą wersją programu Adobe Photoshop CS4 Extended, znacznie poprawiono jego możliwości tworzenia oraz edycji obiektów trójwymiarowych. Z pewnością praca z 3D nie jest podstawowym zastosowaniem Photoshopa, jednak w wielu przypadkach, umiejętność budowy prostych figur 3D, ich teksturowania a w końcu animowania otwiera przed nami zupełnie nowe możliwości. To właśnie zagadnieniom związanym z tworzeniem prostych obiektów 3D oraz ich animacji poświęcimy ten artykuł. Co ważne, wszystkie wykorzystane tu techniki, możemy z powodzeniem wykorzystywać do tworzenia zwykłych animacji. Przykład ukazuje bowiem ogólne zasady tworzenia animacji w oparciu o klatki kluczowe. Wykorzystanie w tym celu obiektów 3D daje nam dodatkowe, niezwykłe możliwości. oznacza strefę akcji, gdzie powinny znaleźć się wszystkie istotne elementy naszego filmu. Wewnętrzna, czyli strefa tytułów określa miejsce, gdzie powinien znaleźć się tytuł animacji. Ze względu na zjawisko zwane Overscan, w niektórych telewizorach nie widać pełnego obrazu PAL. Przycięcie ważnej sekcji animacji lub - co gorsza - tytułu bardzo źle świadczy o autorze animacji. Po utworzeniu nowego dokumentu dalsze prace rozpoczynamy od importu/umieszczenia wzorcowego modelu 3D. W tym celu przechodzimy do menu górnego 3D i wskazujemy polecenie New Shape From Layer. Na dostępnej tu liście znajduje się szereg prostych wzorców do tworzenia modeli w programie Ado-

wykorzystujemy prosty model 3D

Naszą pracę rozpoczynamy od budowy prostego modelu 3D – sześcianu. Co bardzo istotne, Adobe Photoshop CS4 pozwala nie tylko importować gotowe modele zapisane w popularnych formatach DXF, OBJ, 3DS, czy też DAE (Collada), ale także umożliwia wykorzystanie prostych modeli dostępnych w programie. W tym przypadku skorzystamy z takiej właśnie możliwości i naszą prostą animację przygotujemy na podstawie gotowego modelu sześcianu, standardowo dostępnego w Photoshop CS4 Extended. Uwaga! Wszystkie efekty, animacje oraz cała praca związana z grafiką trójwymiarową dostępna jest wyłącznie dla posiadaczy programu Adobe Photoshop CS4 Extended. Wersja oznaczona jako Standard nie daje możliwości pracy z obiektami 3D. Aby gotowa animacja dobrze komponowała się z tłem, rozpoczniemy od przygotowania nowego dokumentu, o tymczasowo białym tle. Po zakończeniu animacji, zdecydujemy się na dodanie tła najbardziej dopasowanego do utworzonej sceny. W rezultacie do budowy naszego przykładu utworzymy dokument RGB o wielkości 720x576px i rozdzielczości 72ppi. Do celów testowych, nie ma sensu budować większych projektów. Jak się niebawem przekonamy, budowa animacji 3D w znaczący sposób obciąża procesor naszego komputera, toteż mniejszy dokument pozwoli na większą płynność wykonywanych prac. Co niezwykle ważne, zaproponowany tu rozmiar dokumentu w pełni odpowiada wielkości klatki filmu w standardzie PAL. W ten sposób, gotowa animacja będzie od razu doskonale dopasowana do prezentacji na ekranie standardowego telewizora. Do szybkiego budowania dokumentów PSD z myślą o różnego typu zastosowaniach wideo, możemy pokusić się o użycie predefiniowanych ustawień. Cóż to daje? Nowy dokument utworzony na bazie standardu posiada dodatkowe linie pomocnicze, czyli tak zwane strefy bezpieczeństwa (rysunek 1). Zewnętrzna
32

Rysunek 1. Nowy dokument utworzony na bazie standardu posiada dodatkowe linie pomocnicze, czyli tak zwane strefy bezpieczeństwa

Rysunek 2. Po dodaniu elementu Cube w oknie dokumentu pojawia się model 3D – sześcian

.psd 01/2009 » www.psdmag.org

animacja 3D w... Adobe Photoshop CS4
be Photoshop. Co ważne, wszystkie widoczne tu przykłady zapisane są w uniwersalnym formacie Collada (*.dae) i znajdują na naszym dysku. Aby dodać nowe modele do tego menu, wystarczy dowolny obiekt 3D zapisać w formacie Collada (*.dae) i umieścić go w katalogu o nazwie Meshes naszego Photoshopa. Pełna ścieżka do tej lokalizacji wygląda następująco: Adobe/Photoshop CS4/Prestes/Meshes. Każdy umieszczony tu dokument w formacie Collada będzie automatycznie widoczny na liście predefiniowanych modeli 3D dostępnej w menu New Shape From Layer Phoptoshopa CS4. To naprawdę niezła sprawa! W naszym przykładzie wybieramy z dostępnej listy Cube i automatycznie w oknie naszego dokumentu pojawia się podgląd sześcianu. Domyślnie każda z jego ścianek prezentowana jest w innym kolorze. Raczej trudno powiedzieć, że wygląda to atrakcyjnie. (rysunek 3) Tym właśnie musimy się zająć. Za pomocą narzędzia 3D Rotate Tool (K) mamy możliwość swobodnego obracania figury. Dodatkowe narzędzia edycji podglądu modelu 3D, jak na przykład Drag 3D Roll 3D aktywują się na górnym pasku właściwości w chwili rozpoczęcia pracy z grafiką trójwymiarową (rysunek 4). Naturalnie tak przygotowany model nie jest żadną atrakcją i budowa animacji sześcianu w tej formie z pewnością nie ma sensu. Pokusimy się zatem o dodanie atrakcyjnych tekstur, które pozwolą na zdecydowaną poprawę wizerunku całej animacji. W tym celu musimy dodać do naszej pracy elementy graficzne, jakie chcielibyśmy wykorzystać w animacji. W naszym przypadku pokusiłem się o dodanie kilku ikon graficznych popularnych programów Adobe. Każdy symbol dodany zostanie na osobnej ściance sześcianu. W rezultacie powstanie animowana kostka, którą możnaby wykorzystać do losowania programów Adobe.

Rysunek 3. Za pomocą narzędzia 3D Rotate Tool [K] mamy możliwość swobodnego obracania figury

dodajemy tekstury obiektów 3D

Dodawanie tekstury na każdą ściankę nie jest trudnym zadaniem. Wymaga jednak nieco precyzji w działaniu. W pierwszym kroku importujemy odpowiednie elementy graficzne i umieszczamy je na kolejnych warstwach naszego projektu. Niewątpliwym atutem Photoshopa CS4 jest możliwość użycia wektorowych elementów typu Smart Object jako tekstury dla naszych obiektów 3D. W tym przypadku, skorzystamy jednak z tradycyjnych grafik bitmapowych. Otwieramy dowolne pliki graficzne i przeciągamy je w okno naszego roboczego dokumentu. W rezultacie każdy dodany element zapisany jest na osobnej warstwie, i to nam odpowiada. Aby ułatwić sobie kolejne działania, tymczasowo wyłączamy podgląd dodatkowych warstw i powracamy do pracy z modelem 3D (rysunek 5). Na tym etapie, bardzo ważne jest to, by obrócić model górną ścianką w naszym kierunku. W tym celu przechodzimy do górnego paska właściwości i w sekcji View wskazujemy podgląd pierwszej ścianki – Top. W rezultacie sześcian wizualnie stracił swoje trójwymiarowe właściwości. Bez obawy, to tylko podgląd, nasz obiekt wciąż pozostaje pełnowartościowym modelem 3D (rysunek 6). Uruchamiamy teraz podgląd pierwszej z warstw zawierających grafikę do umieszczenia na wskazanej ściance. W naszym przypadku, jako pierwszą wskazałem warstwę zawierającą ikonę programu Adobe Photoshop. Za pomocą narzędzi transformacji ([Ctrl]+[T] lub [Cmd]+[T] na Macu) należy dopasować wielkość nowej grafiki do obiektu 3D na stronie. O ile to przydatne, możemy tymczasowo zmienić poziom Krycia (Opacity) ikonki, by ułatwić sobie precyzyjne przekształcenia. Po dostosowaniu rozmiaru grafiki ponownie nadajemy jej pełen poziom krycia – Opacity 100%. Kolejny krok jest stosunkowo prosty, jednak bardzo istotny. Musimy bowiem odpowiednio zmodyfikować układ warstw naszej pracy. Bardzo ważne jest to, by warstwa, którą właśnie edytujemy (tekstura pierwszej ścianki sześcianu) znajdowała się bezpośrednio powyżej obiektu 3D w palecie Layers. Jedynie taki układ warstw umożliwia dodanie tekstury do naszego modelu. Aby dostosować kolejność warstw do tych wymagań, po prostu

Rysunek 4. Aby ułatwić sobie kolejne działania, tymczasowo wyłączamy podgląd dodatkowych warstw i powracamy do pracy z modelem 3D

Rysunek 5. Pomimo zmiany widoku obiekt wciąż pozostaje trójwymiarowy

Rysunek 6. W rezultacie użycia polecenia Merge Down warstwa z grafiką stała się teksturą pierwszej ścianki naszej trójwymiarowej kostki
33

.psd 01/2009 » www.psdmag.org

warsztaty

przeciągamy bieżącą warstwę ponad obiekt 3D w palecie Layers (rysunek 8). W naszym przykładzie, ikona programu Photoshop przypadkowo znalazła się bezpośrednio powyżej obiektu 3D. W naszym przykładzie nie było konieczności modyfikacji układu warstw. Jednak w większości innych przypadków będzie to naprawdę niezbędny krok. Teraz postaramy się połączyć obie warstwy, zachowując jednak model 3D. W tym celu upewniamy się, że aktywna jest warstwa tekstury i znajduje się ona bezpośrednio powyżej obiektu 3D. Jeśli tak, za pomocą polecenia Merge Down ([Ctrl]+[E] lub [Cmd]+[E] na Macu) dostępnego w opcjach palety Layers oraz

Rysunek 7. Korzystając z narzędzia 3D Rotate Tool [K] możemy łatwo obrócić sześcian w dowolnym kierunku, a przygotowana tekstura obraca się wraz z ruchem modelu

menu górnym Layers łączymy obie warstwy (rysunek 9). W rezultacie, warstwa z grafiką stała się teksturą pierwszej ścianki naszej trójwymiarowej kostki. Nawet pisząc ten tekst, wciąż muszę przyznać, że robi to na mnie wrażenie. Teraz, korzystając z narzędzia 3D Rotate Tool [K] możemy łatwo obrócić sześcian w dowolnym kierunku, a przygotowana tekstura obraca się wraz z ruchem modelu. Początkowo, dodana tekstura jest dość ciemna, jednak nie stanowi to problemu w tej chwili. Edycją wszystkich ścianek sześcianu zajmiemy się nieco później. W podobny sposób dodamy kolejne tekstury. Podobnie jak poprzednio przechodzimy do górnego paska właściwości i z menu View wybieramy teraz podgląd Front – przedniej ścianki sześcianu (rysunek 10). Podobnie jak to miało miejsce wcześniej, sześcian został automatycznie obrócony tak by jego tym razem górna płaszczyzna znalazła się przodem do nas. Uruchamiamy podgląd kolejnej warstwy i za pomocą tradycyjnych przekształceń dopasowujemy jej kształt do ścianki modelu. Po dopasowaniu figury należy ponownie dostosować układ warstw w palecie Layers. Bieżąca tekstura musi znajdować się bezpośrednio ponad modelem 3D (rysunek 11). Po korekcie układu warstw za pomocą polecenia Merge Down ([Ctrl]+[E] lub [Cmd]+[E]) łączymy teksturę z obiektem trójwymiarowym. Także w tym przypadku, jeśli za pomocą narzędzia 3D Rotate Tool [K] obrócimy obiekt, kolejna tekstura zostanie automatycznie dopasowana do widoku 3D (rysunek 12). Dokładnie w ten sam sposób dodajemy tekstury kolejno dla wszystkich ścianek modelu 3D. Należy przy tym pamiętać, by wcześniej ustawić obiekt (sześcian) w odpowiedniej pozycji, dostosować rozmiar warstwy, tekstury, i co najważniejsze, umieścić ją (teksturę) bezpośrednio ponad warstwą 3D. Dopiero wówczas można za pomocą polecenia Merge Down połączyć ją z modelem trójwymiarowym. W tym miejscu warto zwrócić uwagę na fakt, że możemy wykorzystać tekstury o dowolnym kształcie czy wielkości. Nie muszą być one dokładnie dopasowane do płaszczyzny edytowanego obiektu 3D. Naturalnie w finalnej wersji pracy daje to nieco inne rezultaty, jednak warto w niektórych sytuacjach przetestować takie możliwości. Po dodaniu tekstury dla wszystkich ścianek sześcianu, możemy z łatwością obracać go w dowolnym kierunku. Dzięki użyciu narzędzi edycji 3D, jak na przykład 3D Rotate Tool, można łatwo odnaleźć najbardziej atrakcyjny widok kostki. Jak już wcześniej wspominałem, cały model sprawia wrażenie nieco zbyt ciemnego. Ikony programów, jakie wykorzystaliśmy do budowy kostki nie były aż tak ciemne. Coś jest nie tak, spróbujmy to teraz zmienić. Okazuje się, że możliwości, jakie oferuje nam Photoshop CS4 w zakresie zarządzania oświetleniem, są naprawdę duże. Jak to działa?

Rysunek 8. Przechodzimy do górnego paska właściwości i z menu View wybieramy teraz podgląd Front – przedniej ścianki sześcianu

sterujemy oświetleniem obiektów 3D

Dwukrotne kliknięcie miniatury warstwy 3D w palecie Layers, otwiera dodatkowy panel zwany 3D Scene (rysunek 13). W tym

Rysunek 9. Po dopasowaniu figury należy ponownie dostosować układ warstw w palecie Layers. Bieżąca tekstura musi znajdować się bezpośrednio ponad modelem 3D
34

Rysunek 10. Dwukrotne kliknięcie miniatury warstwy 3D w palecie Layers otwiera dodatkowy panel zwany 3D Scene

.psd 01/2009 » www.psdmag.org

warsztaty

miejscu mamy dostęp do szczegółowych właściwości naszych obiektów. W tym także oświetlenia modelu. Za pomocą przycisku o kształcie żarówki (Filter By Lights) przechodzimy do sekcji odpowiedzialnej za zarządzanie oświetleniem naszej pracy. W tym miejscu, w dolnej sekcji Infinite Lights odnajdziemy trzy domyślnie dołączone źródła światła: Infinite Light 1, Infinite Light 2 oraz Infinite Light 3. Standardowo, intensywność każdego z nich ustawiona jest w minimalnym zakresie na poziomie 1% (rysunek 15). Zmiana, czyli wprowadzenie większych wartości pozwala oczywiście na lepsze oświetlenie naszego modelu. Co ważne, wszystkie wprowadzone tu zmiany widać bezpośrednio w oknie dokumentu, co pozwoli nam łatwo dostoso-

wać oświetlenie do naszych potrzeb w konkretnej sytuacji (rysunek 16). Oczywiście, każde źródło światła działa na inną część naszej pracy. Warto więc skorzystać z możliwości obrotu obiektu, by dokładnie dostosować intensywność oświetlenia (rysunek 17).

dodajemy tło

Gotowy oświetlony obiekt pora umieścić na odpowiednim tle. W tym celu otwieramy przygotowane wcześniej zdjęcie lub grafikę i umieszczamy ją na nowej warstwie naszego projektu. Oczywiście całą warstwę przenosimy na spód w palecie Layers. W rezultacie grafika ta stanie się tłem całej przyszłej animacji (rysunek 18).

animacje 3D w programie Adobe Photoshop CS4

Rysunek 11. Standardowo, intensywność każdego z nich ustawiona jest w minimalnym zakresie na poziomie 1%

Do budowy animacji obiektu 3D skorzystamy z palety Animation dostępnej w menu górnym Window. Animation to paleta/ narzędzie, które umożliwia tworzenia animacji podobnie jak w innych programach Adobe np. Flash, After Effects czy Director w oparciu o klatki kluczowe (rysunek 19). Paleta Animation znana z Photoshopa pozwala także na przejście do trybu Frame Animation szczególnie przydatnego podczas tworzenia animowanych plików w formacie GIF. W naszym przykładzie skorzystamy z możliwości budowy animacji na podstawie klatek kluczowych, nie ma więc konieczności, by zmieniać domyślny wygląd palety Animation. Ta w swej standardowej formie zawiera oś czasu – Timeline, doskonale znaną użytkownikom programów After Effects, Premiere czy Flash.

Rysunek 12. Wprowadzone tu zmiany widać bezpośrednio w oknie dokumentu

Rysunek 14. Paleta Animation to narzędzie, które umożliwia tworzenia animacji podobnie jak w innych programach Adobe jak Flash, After Effects czy Director w oparciu o klatki kluczowe

Rysunek 13. Otwieramy przygotowane wcześniej zdjęcie lub grafikę i umieszczamy ją na nowej, dolnej warstwie naszego projektu
36

Rysunek 15. Tuż obok jej nazwy widoczny jest niewielki trójkątny przycisk. Pozwala on na przejście do edycji klatek kluczowych dla wybranych właściwości warstwy lub obiektu 3D

.psd 01/2009 » www.psdmag.org

animacja 3D w... Adobe Photoshop CS4
Tu bowiem na osi czasu odłożone są kolejne sekundy i klatki naszej animacji. Ogólnie rzecz ujmując, animacje tworzone na podstawie klatek kluczowych budowane są w oparciu o co najmniej dwa ujęcia – klatki kluczowe. W pierwszej animowany obiekt prezentowany jest przykładowo w widoku od przodu. W drugiej klatce kluczowej zmieniamy jego obrót, położenie czy też inne atrybuty, a komputer automatycznie buduje stosowną animację. Tego typu podejście nazywane jest Tweeningiem i wykorzystywane jest przez wiele programów multimedialnych w tym także Photoshopa. W ten sposób do budowy naszej animacji potrzebujemy dodać co najmniej dwie klatki kluczowe, które staną się podstawą do utworzenia Tweeningu – właściwej animacji. Adobe Photoshop CS4 oferuje w tym względzie interfejs przypominający nieco Adobe After Efects. pomocą tych właśnie narzędzi są automatycznie rejestrowane w postaci klatek kluczowych na osi czasu naszej animacji. Na podstawie tego prostego przykładu widać wyraźnie, że tworzenie nawet trójwymiarowych animacji w programie Adobe Photoshop CS4 nie jest trudnym zadaniem. Z pewnością jednak wymaga nieco cierpliwości. Niestety wszystkie przekształce-

dodajemy klatki kluczowe i budujemy animację

Aby dodać prostą animację trójwymiarową, zaznaczamy warstwę z obiektem 3D i przechodzimy do palety Animation. Tuż obok jej nazwy widoczny jest niewielki trójkątny przycisk. Pozwala on na przejście do edycji klatek kluczowych dla wybranych właściwości warstwy lub obiektu 3D (rysunek 20). W naszym przypadku po rozwinięciu właściwości warstwy za pomocą niewielkiego przycisku o kształcie stopera, dodajemy pierwszą klatkę kluczową dla właściwości 3D Object Position (rysunek 21). W ten sposób mamy gotową pierwszą, startową klatkę animacji. Aby możliwe było wykorzystanie komputera do utworzenia automatycznej animacji typu Tweening, konieczne jest dodanie drugiej klatki kluczowej. W tym celu przestawiamy wskaźnik czasu do wybranej sekundy naszej animacji i za pomocą dowolnych narzędzi 3D np. 3D Rotate Tool [K] wprowadzamy zmiany w wyglądzie kostki (rysunek 22). W rezultacie, we wskazanej lokalizacji utworzona została automatycznie druga klatka kluczowa, a Photoshop utworzył animację pomiędzy pierwszą a bieżącą klatką. Aby się o tym przekonać, wystarczy przesunąć nieco wskaźnik czasu bieżącego. Trójwymiarowy model kostki zmienia swój obrót i inne zmodyfikowane wcześniej właściwości wraz ze zmianą czasu. I to jest właśnie nasza pierwsza animacja. W podobny sposób możemy wskazać kolejny punkt na osi czasu i ponownie zmodyfikować obrót, wielkość czy położenie naszej kostki w trójwymiarowej przestrzeni. Każda modyfikacja automatycznie tworzy kolejną klatkę kluczową i odpowiednią animację. Co ważne, do edycji obiektu 3D możemy wykorzystać także inne narzędzia, jak choćby Scale the 3D Object, Slide the 3D Object czy Roll the 3D Object. Wszystkie zmiany wprowadzone za

Rysunek 17. W tym celu przestawiamy wskaźnik czasu do wybranej sekundy naszej animacji i za pomocą dowolnych narzędzi 3D np. 3D Rotate Tool [K] wprowadzamy zmiany w wyglądzie kostki

Rysunek 18. Wszystkie zmiany wprowadzone za pomocą tych właśnie narzędzi są automatycznie rejestrowane w postaci klatek kluczowych na osi czasu naszej animacji

Rysunek 16. Po rozwinięciu właściwości warstwy za pomocą niewielkiego przycisku o kształcie stopera dodajemy pierwszą klatkę kluczową dla właściwości 3D Object Position

Rysunek 19. Dodajemy klatkę kluczową dla wybranej właściwości np. 3D Cross Section (przekrój poprzeczny), wskazujemy dowolny punkty na osi czasu i modyfikujemy atrybuty wybranej właściwości – tu Cross Section. Pozwoli to na animację przekrojów w czasie – po prostu rewelacja
37

.psd 01/2009 » www.psdmag.org

warsztaty

nia nawet tak prostego obiektu w przestrzeni 3D wymagają nieco czasu na przeliczenie. Podgląd gotowej animacji za pomocą przesuwania wskaźnika czasu bieżącego także pozostawia wiele do życzenia. Zdecydowanie nie ma co narzekać. Możliwości, jakie oferuje Adobe Photoshop CS4 są naprawdę imponujące. A to jeszcze nie wszystko! Jeśli zwrócimy uwagę na właściwości, jakie można animować za pomocą klatek kluczowych wyraźnie widać tam: 3D Object Position, 3D Camera Position, 3D Render Settings oraz 3D Cross Section. Taki zestaw animowanych właściwości otwiera przed nami niemal nieograniczone możliwości tworzenia naprawdę widowiskowych i atrakcyjnych animacji obiektów 3D. Serdecznie namawiam do prób we własnym zakresie. W każdym przypadku zasada jest bowiem identyczna. Dodajemy klatkę kluczową dla wybranej właściwości np. 3D Cross Section (przekrój poprzeczny), wskazujemy dowolny punkty na osi czasu i modyfikujemy atrybuty wybranej właściwości – tu Cross Section. Pozwoli to na animację przekrojów w czasie – po prostu rewelacja!

podgląd animacji

Do podglądu przygotowanej animacji możemy wykorzystać metody znane wszystkim użytkownikom aplikacji do edycji filmów wideo. Najprostszym (niestety nie najszybszym) sposobem jest przeciąganie wskaźnikiem czasu bieżącego po osi czasu – Timeline dopóty nie wyrenderujemy naszego projektu. Podgląd tego typu jest bardzo powolny, ale działa. Innym rozwiązaniem jest użycie klawisza [Spacja]. Pierwsze wciśnięcie klawisza [Spacja] uruchamia podgląd animacji, kolejne zatrzymuje ją. Pierwsze uruchomienie podglądu tą metodą, wymaga nieco cierpliwości, program bowiem renderuje budowaną animację. Już po zrenderowaniu możemy oglądać ją w rzeczywistej prędkości. To mechanizm znany z wielu programów do edycji plików wideo. Oczywiście do obsługi naszej animacji możemy wykorzystać także tradycyjne przyciski Play (odtwarzanie i zatrzymania odtwarzania), Select First Frame (przewinięcie do początku animacji), Select Previous Frame (przejście do poprzedniej klatki) itp. widoczne w dolnej sekcji palety Animation. Osobiście częściej korzystam z klawisza [Spacja]. Raz wyrenderowaną animację możemy już szybko przeglądać dowolną metodą. Oczywiście wprowadzenie dodatkowej modyfikacji ponownie wydłuży czas pierwszego podglądu – renderowania.

Rysunek 20. Oczywiście do obsługi naszej animacji możemy wykorzystać także tradycyjne przyciski Play (odtwarzanie i zatrzymania odtwarzania), Select First Frame (przewinięcie do początku animacji), Select Previous Frame (przejście do poprzedniej klatki) itp. widoczne w dolnej sekcji palety Animation

Rysunek 21. Najprostszym rozwiązaniem będzie tu więc wybór polecenia Export i wskazanie polecenia Render Video

zapis gotowej animacji

Aby przygotowaną animację można było wykorzystać w reklamie czy innym programie, należy zapisać ją w formacie czytelnym dla innych aplikacji umożliwiających prace z plikami wideo. Najprostszym rozwiązaniem będzie tu więc wybór polecenia Export i wskazanie polecenia Render Video. W ten sposób przygotowana za pomocą Photoshopa animacja zapisana będzie w wybranym formacie typowym dla zapisu filmów wideo. W oknie Render Video mamy możliwość określenia wielu istotnych parametrów całej animacji. Wskazujemy właściwą lokalizację dla pracy oraz wprowadzamy stosowną nazwę. W sekcji Quick Time Options wskazujemy jeden z dostępnych formatów wideo, najlepiej dopasowany do dalszych zastosowań naszej animacji. Warto zwrócić tu uwagę na możliwość zapisu animacji w formacie FLV (Flash Video) – doskonałym do szybkiej publikacji na stronie WWW. Aby zapisać animację do dalszej edycji w programach typu After Effects, Premiere czy też Final Cut Pro, warto wskazać jeden z formatów bez kompresji obrazu: Quick Time, czy AVI. Niekiedy przydatny jest także eksport sekwencji obrazów bitmapowych. Każdy program do edycji wideo pozwala budować animacje na podstawie sekwencji obrazów bitmapowych. W dolnej części okna możemy wskazać także docelową prędkość odtwarzania naszej animacji. Dla standardu PAL, obowiązującego w naszym kraju jest to 25 FPS. Film zapisany w formacie Quick Time czy też AVI możemy bez problemów przeglądać dowolnym odtwarzaczem plików wi38

Rysunek 22. Warto zwrócić tu uwagę na możliwość zapisu animacji w formacie FLV (Flash Video) doskonałym do szybkiej publikacji na stronie WWW
deo na naszym komputerze. Jeśli przypomnimy sobie, od czego rozpoczynaliśmy ten przykład, okazuje się, że możliwości Adobe Photoshop CS4 stają się powoli nieograniczone. Pawel Zakrzewski

.psd 01/2009 » www.psdmag.org

warsztaty

cyfrowe malowanie
Pracuję na komputerze z tabletem i rysikiem. Poza tym moja technika jest dosyć tradycyjna. Nie używam filtrów, nie rysuję na zdjęciach. Dlatego też wybrałam taką, a nie inną nazwę dla mojej pracy. Wykorzystanie odnośnika do zdjęcia zamiast jego wymyślania, umożliwia oparcie się na konkretnym modelu, którym manipuluję, aby otrzymać własny, indywidualny obraz
40 .psd Extra 01/2009 » www.psdmag.org

cyfrowe malowanie

01 ustawienie elementów

Wybierz zdjęcie, które posłuży Ci za model (Plik>Otwórz). Jakość zdjęcia nie jest najważniejsza. Wystarczy, że będzie ono szczegółowe, tak aby móc analizować światło oraz widoczność kształtów. Kadruj zdjęcie (skrót na klawiaturze narzędzia [C]) i kalibruj je (Zdjęcie>Ustawienia>Automatyczne poziomy). Umieść je z boku płaszczyzny pracy, będzie Ci tutaj służyło jako model. Jeśli jest to zdjęcie wydrukowane, umieść je jak najbliżej brzegu ekranu.

04 podstawowe masy

W przypadku tego obrazu wybierz rysowanie za pomocą narzędzia Kreda, które jest podstawowym pędzlem o rozmiarze 36 istniejącym w skrzynce narzędzi programu Photoshop. Powiększ rozmiar obrazu, jeśli ma być on później wydrukowany (pędzel w rozmiarze 150). Jak w przypadku tradycyjnego rysunku pędzlem lub kredą na papierze, zacznij od ogólnych zarysów. Narysuj duże ciemne strefy i nie zatrzymuj się na szczegółach. Technika umożliwiająca pozostawienie wykonania szczegółów na później, polega na tym, aby lekko zmrużyć oczy, w celu stworzenia lekko niewyraźnego widoku.

02 ustawienie obrazu

Stwórz nowy obraz (Plik>Nowy obraz, [Ctrl]+[N]). Jeśli Twój ostateczny obraz jest przeznaczony do druku, pamiętaj, aby wybrać dobrą rozdzielczość, zazwyczaj 300dpi (tutaj wyjściowy obraz ma wymiary 6780x3400px i 300dpi). Obraz wykonany w zbyt małym formacie nie będzie mógł być powiększony, gdyż stanie się niewyraźny. Jeśli z kolei obraz jest przeznaczony do umieszczenia w Internecie, 72dpi jest wystarczającą wartością. Na samym początku możesz nadać tłu lekki odcień tak, aby móc łatwiej pracować nad strefami cieni i świateł.

05 podstawowe masy w całości

Rysuj dalej dużymi uderzeniami pędzla, wybierając jaśniejsze strefy oraz bardziej zdecydowane kolory (w naszym przypadku jest to rozjaśniona strefa po prawej stronie, wnętrze ust oraz włosy). Jeśli po przeciwnej stronie głównego źródła światła istnieje odbicie światła, podkreśl je, aby odgrodzić ogólną masę (w naszym przypadku jest to niebieski element po lewej stronie). Nie nanoś jeszcze szczegółów na tym etapie, skup się na częściach, które mają identyczną skalę: policzki, ręce lub ramiona. Nie zajmuj się natomiast na przykład uszami, oczami, ustami lub paznokciami.

03 szkic

Na początku wykonaj szybki szkic za pomocą pędzelka Cienki (w tym wypadku rozmiar 36). Jeśli nie wykonasz szkicu, obraz może się okazać w późniejszym czasie zbyt wybrzuszony lub źle wykadrowany. Celem naszym nie jest skopiowanie zdjęcia, ale inspirowanie się nim. Nie chcemy tutaj wykonać zbyt realistycznego rysunku, ale naprawdę oryginalny obraz cyfrowy. Proporcje mogą więc być zmienione (rozmiar oczu, długość szyi), a nawet przesadzone.

0 6 więcej modelu

W miarę postępu pracy nad rysunkiem, plamy o różnych kolorach połączą się ze sobą. Nie próbuj przeciągać odcieni za pomocą narzędzia do wygładzania, możesz w ten sposób stracić ziarnistość uzyskaną dzięki zastosowaniu pędzla i obraz wydałby się najprawdopodobniej zabrudzony i niewyraźny. Ogólne wrażenie gładkości pochodzi z mnogości podobnych odcieni. Można użyć narzędzia Pipeta ([I]), aby pobrać kolory z sąsiadującej strefy. Poza tym dzięki użyciu narzędzia kreda nie otrzymujemy matowych kresek, ale kreski przerzedzone, co umożliwia odnalezienie pośrednich odcieni.

.psd Extra 01/2009 » www.psdmag.org

41

warsztaty

07 tło

Dla lepszej integracji całości, rysuj w tle tak, jakbyś zajmował się malarstwem tradycyjnym. Jeśli uważasz, że jakiś element Ci się nie udał, nałóż raczej kolory na siebie, zamiast je usuwać. Wykorzystanie tego samego narzędzia zwiększa także szybkość wykonania. W przypadku wątpliwości możesz utworzyć nową kalkę, aby pracować oddzielnie nad tłem i postacią. Uważaj jednakże na efekt klejenia postaci.

10 dodawanie małych elementów

Aby dodać małe elementy, takie jak iskry, kwiaty, świece, gwiazdy i inne drobne obiekty, dodaj kalkę. Ogólna harmonia elementów może być czasem uzależniona od minimalnych przestawień, ułatwionych użyciem tej kalki. Dzięki niej można uniknąć dotykania tła i anulować działanie. Skopiuj niektóre elementy, aby podkreślić obfitość całości (wybierz element, a następnie wykonaj [Ctrl]+[Alt], aby go przenieść i wkleić na tej samej kalce). Zmniejszając lub przekręcając skopiowane elementy ([Ctrl]+[T]), możesz uzyskać różnorodne kształty, które wzbogacą obraz.

08 stabilność całości

Sprawdź, czy utrzymana jest równowaga w strukturze obrazu. Wykonaj odbicie w lustrze płaszczyzny pracy (Obraz>Przekręć obraz>Poziomo). Obraz przekręcony w ten sposób pojawia się nagle w nowym świetle dla oka i ewentualne problemy są natychmiast widoczne. Przechodzenie z obrazu do jego odbicia może być wykorzystane w każdym momencie pracy, kiedy tylko nachodzą Cię wątpliwości. Często zdarza się, że wydrukowane obrazy są przekręcane w momencie ustawiania makiety.

11 sprawdzenie kadrowania oraz rozmiaru
Należy teraz sprawdzić i ewentualnie poprawić początkowe kadrowanie. W tym przypadku lewa strona nie wnosi nic nowego do całości a uwaga powinna być skupiona na poziomie ust postaci. Wycięcie tego miejsca wzmacnia początkowe wrażenie. Na początku przewidziano, że obraz będzie miał większy rozmiar na zlecenie klienta, kadrowanie nie wpłynie na pracę. Pamiętaj, aby zawsze dodać 5mm więcej wokół obrazu, względem zamawianego rozmiaru, dla lepszego ustawienia przy drukowaniu.

obrazu

09 czas na szczegóły

Wykonaj szczegóły, powiększając strefę, na której chcesz pracować. Zaleca się jednakże pozostanie możliwie jak najdłużej w ogólnym widoku całości. Przy powiększaniu możesz odczuć dużą chęć zmniejszenia narzędzia i rysunek może wtedy stać się niespójny, kiedy powrócisz do ogólnego widoku. Otwórz drugie okno z tym samym obrazem (Okno>Nowe okno). Umieść je z ogólnym widokiem obrazu z boku ekranu i pracuj na drugim oknie, powiększając jego części. Sprawdzaj regularnie co się dzieje na obrazie całości, kiedy pracujesz nad szczegółami.

12 sprawdzenie kolorów i formatu

Sprawdź poziomy (Obraz>Ustawienia>Poziomy). Zobacz, czy pracujesz nad obrazem przeznaczonym na potrzeby Internetu. Jeśli masz wysłać obraz do prasy lub do publikacji, powinieneś przygotować niespakowany plik JPG (standard, poziom 12) w trybie CMYK. Przejście z RGB do CMYK ściemnia lekko obraz. Sprawdź, czy możesz go lekko nasycić, nie ruszając jednakże kolorów, które nie będą drukowane (Widok>Gamut warning, [Shift]+[Ctrl]+[Y]) Teraz możesz podpisać swój obraz i wysłać go klientowi! Cali Rezo

42

.psd Extra 01/2009 » www.psdmag.org

warsztaty

cyfrowa ciemnia według Epsona
o skanowaniu i skanerach cz. 1
Skanowanie, obok cyfrowej fotografii, to drugi podstawowy sposób pozyskiwania obrazów. Bez dobrego sprzętu, wiedzy i doświadczenia trudno uzyskać satysfakcjonujące efekty. Doświadczenie przychodzi z czasem, na sprzęt i wiedzę jest jednak prosty sposób. I tutaj rozpoczyna się nasza rola.
Obecnie wybór skanera wiąże się z zadaniami, które chcemy realizować. To już nie tylko kwestia dygitalizacji dokumentów tekstowych, tylko zaawansowanych projektów fotograficznych i DTP. Wynika to z faktu, że rynek oferuje urządzenia, które dotychczas były uważane za dostępne tylko dla profesjonalnego studia. Oczywiście trudno własne domowe studio czy też malutkie przedsiębiorstwo wyposażyć w skaner bębnowy. Ale sytuacja obecnie tego nie wymaga. Wiele urządzeń dostępnych dla przysłowiowego Kowalskiego doskonale sprawdza się w pracy z wyzwaniami, które stoją przed zaawansowanymi, profesjonalnymi systemami. Zanim w ogóle zaczniemy skanować, ba, kupimy odpowiednie urządzenie, musimy sobie odpowiedzieć na kilka pytań. W jakiej rozdzielczości chcemy skanować? Jaka będzie rozdzielczość wyjściowa drukowanych projektów, z którymi będziemy się najczęściej stykać? Czy będziemy skanować filmy, czy liczymy się z taką ewentualnością? Jeśli tak, to w jakich formatach? Czy potrzebujemy zewnętrznego programu do skanowania i profilowania urządzenia? Czy stawiamy na edycję obrazu w aplikacji zewnętrznej, czy zależy nam na przeprowadzeniu korekty już na wejściu? Odpowiedzi na te pytania związane są z naszą codzienną pracą i hobby. Ważne jest również to, aby zaznajomić się z nowymi technologiami. względem siebie (Matrix CCD™). Dzięki temu rozwiązaniu matryca kompensuje zmniejszoną czułość sensora w jego zewnętrznych obszarach. Te i inne rozwiązania możemy znaleźć w linii skanerów Perfection. W rozwiązaniach konsumenckich znajdziemy już urządzenia, których parametry zaspokoją większość możliwych potrzeb. Skanowanie z rozdzielczością 4800dpi, skanowanie filmów i slajdów o szerokości 35mm (Epson Perfection V200 Photo). Jeśli chcemy podnieść poprzeczkę, zwracamy uwagę na skanery, które dygitalizują obraz z rozdzielczością 6400dpi z 48-bitową głębią kolorów (Epson Perfection V500 Photo). Sięgając po skanery z tej półki, możemy liczyć się z zupełnie nowymi rozwiązaniami. Przykładem może być Digital ICE, dzięki któremu już na etapie skanowania możemy rozpocząć proces korekcji uszkodzonych klisz. Naszej uwadze nie powinna także umknąć implementacja technologii Epson ReadyScan LED. Źródłem światła w takim skanerze jest biała dioda. Wykorzystanie diody wpływa na małe zużycie energii oraz bardzo imponujący czas rozgrzania, w granicach 0,14s (w tradycyjnych lampach CCFL dochodzi nawet do 45s). Zużycie energii podczas pracy nie przekracza 16 Wat, w trybie czuwania około 7,5Wat. W obu trybach jest to o połowę mniej niż osiągi uzyskiwane przez lampy CCFL. Konstrukcja lampy na bazie diody nie wymaga transformatora do przesuwania modułu skanowania klisz i filmu TPP. Brak transformatora to obniżony ciężar i wielkość jednostki oraz zwiększona prędkość skanowania i znowu – mniejsze zużycie energii. Przekłada się to również na obniżenie temperatury podczas skanowania nawet do 36 stopni Celsjusza – to o kilka stopni mniej niż w przypadku lamp CCFL. Jak łatwo się domyślić, materiały, zwłaszcza klisze, są mniej narażone na fizyczny stres.

możliwości i technologie

Wykorzystanie matryc CCD w skanerach płaskich znacznie ułatwia pracę. Użytkownik może liczyć na mniej szumów, polepszoną dynamikę tonalną i zwiększoną jakość obrazu. Producenci idą dalej. Matryce są udoskonalane. Epson wprowadził dodatkowy system mikrosoczewek, które pomagają skupić światło w centrum obszaru sensora oraz przesunął je

Rysunek 1. Usuwanie kurzu i rys z wykorzystaniem technologii Digital ICE
44

Rysunek 1. Usuwanie kurzu i rys z wykorzystaniem technologii Digital ICE

.psd 01/2009 » www.psdmag.org

cyfrowa ciemnia według Epsona
Szukając odpowiedniego skanera warto również zwrócić uwagę na prędkości skanowania. Profesjonalny sprzęt (Perfection V700 i V750 Pro) radzi sobie z materiałem pozytywowym w okolicach dwóch minut (w rozdzielczości 6400dpi); materiał negatywowy skanowany jest poniżej jednej minuty. Wykorzystanie podwójnych diod w takich modelach gwarantuje duża gęstość optyczną rzędu 4.0 Dmax. Ten parametr pozwala na większe odwzorowanie szczegółów w ciemnych obszarach zdjęcia. Warto też zwrócić uwagę na dodatkowe cechy, które nie są szczególnie eksponowane, ale mogą znacznie podnieść jakość pracy, przykładowo implementacja powłoki antyodblaskowej. Dodatkowe przystawki do materiałów światłoczułych znacznie ułatwiają skanowanie szerszego zakresu filmów. W skanerze Perfection V750 Pro obok przystawek do skanowania slajdów i klisz 35 mm (12 slajdów i 24 klatek w jednym cyklu skanowania) znajduje się przystawka 120/220 (maksymalnie 6x20cm) i 2 razy 4"x5". Prawdziwy bonus to przystawka do skanowania na mokro o wymiarach 203mm na 254mm (użytkownik otrzymuje ją po wykonaniu telefonu do Epsona). Skanowanie na mokro wykorzystywane jest w skanerach bębnowych, gdzie po zamoczeniu materiału w odpowiednim płynie owija się nim bęben skanera, który następnie obracając się z dużą prędkością skanuje powierzchnię. Skanowanie na mokro poprawia wiele aspektów obrazu (dynamikę tonalną, kontrast, gradację ostrość, nasycenie). Suche skanowanie musi uporać się z rozpraszaniem i odblaskami światła; każda powierzchnia ma swoją rozdzielczość, w przypadku kliszy jest to rozdzielczość ziarna. Skanowanie na mokro eliminuje ten problem z racji pokrycia powierzchni filmu warstwą płynu. Wszystkie nierówności są w tym przypadku wypełnione. Jest to technologia, która debiutuje na rynku skanerów płaskich. dmuchawką. Z tłustymi śladami walczymy za pomocą dedykowanych materiałów eksploatacyjnych. Wykorzystanie materiałów światłoczułych daje nam do dyspozycji więcej informacji o obrazie niż odbitki fotograficzne. Jeśli skanujemy czarno-biały film, rozważmy przeprowadzenie tej operacji w kolorze. Dodatkowe kanały informacji zwiększają możliwość manipulowania kontrastami skali tonalnej. Zanim włożymy odbitkę lub film do skanera musimy dokładnie zaplanować cały proces. Wiedzieć dokąd zmierzamy. Czy skanowany materiał będzie wykorzystany w druku, na potrzeby WWW lub w innym audiowizualnym projekcie? Odpowiedź związana jest z decyzją o wyborze rozdzielczości skanowanego materiału. Najwyższa rozdzielczość nie zawsze wiąże się z najwyższą jakością, a już na pewno nie z szybkością wydruku. Niska rozdzielczość to mniej informacji, mniej detali, zakłócenia ostrości, problemy. Współpracując z drukarnią, możemy uzyskać odpowiednie ustalenia. Jednak co zrobić w sytuacji, w której takimi ustaleniami nie dysponujemy? Przychodzi czas na obliczenia. Zacznijmy od pojęcia liniatury rastra. Jest to parametr, który mówi nam ile komórek rastrowych, linii umieszczonych równolegle znajduje się w danej jednostce miary – standardowo mówimy o calach, czyli line per inch (lpi). Wyższe liczby oznaczają więcej detali podczas druku, jednak zbyt wysokie wartości powodują kłopoty. Po pierwsze, rodzaj papieru i jego zdolność chłonięcia farby drukarskiej relatywizują nieznacznie idealną rozdzielczość. Papier powlekany ma mniejsze zdolności chłonięcia, co powoduje, że zmiana punktu rastrowego nie jest duża; odwrotna sytuacja prezentuje się w przypadku papieru gazetowego. Po drugie, parametry maszyny drukującej mogą nie uwzględnić dużej ilości informacji, konsekwencją będzie brak właściwej reprodukcji najmniejszych i największych punktów. Wystąpią więc problemy w jasnych i ciemnych obszarach. Im jaśniej tym mniejsze punkty, im ciemniej tym punkty stają się większe. Z racji tego, że chłonność papieru powlekanego nie jest duża, wytrzyma on większe zagęszczenie kropelek tuszu, liniatura rastra w tym przypadku może wynosić spokojnie 150lpi. W przypadku druku na papierze gazetowym liniatura rastra powinna być mniejsza, rzędu: 100lpi (+/- kilkanaście punktów – istnieją różne szkoły).

przed skanowaniem – rozdzielczość i wymiary

Z tego krótkiego opisu możemy się zorientować, że współczesne skanery, szczególnie te z najwyższej półki, oferują kompleksowe rozwiązania z zakresu wstępnej edycji obrazu. Nic nie zastąpi jednak zwykłej dbałości. Przed przystąpieniem do skanowania starannie usuwamy suchą szmatką kurz i zabrudzenia z filmu bądź odbitki. Sprawdzamy powierzchnię szyby skanera. Drobinki kurzu możemy potraktować

Rysunek 3. Ramka do skanowania na mokro
.psd 01/2009 » www.psdmag.org 45

warsztaty

Wprowadźmy teraz kolejne pojęcie. Komórka rastra – tworzy punkt rastrowy. Każdy punkt rastrowy wewnątrz komórki może składać się z określonej liczby kropek. Przykładowo kwadratowa komórka rastra o boku 4 na 4 kropki daje 16 kombinacji, czyli 16 poziomów szarości plus 1 poziom w wyniku braku kropek – biel. Przyjmijmy, że chcemy z komórek rastrowych o boku 4x4 zbudować linię o rozdzielczość 300dpi (dots per inch – kropek na cal). W tym celu należy pomnożyć komórkę przez 75, gdyż 75*4 kropki (jeden bok komórki rastra) daje 300dpi. W takiej sytuacji mówimy o liniaturze równej 75lpi. Operujemy jednak dzisiaj skalą szarości, która budowana jest z 256 poziomów, czyli 8 bitów. Dlatego aby uzyskać komórkę rastrową, której punkt rastrowy może symulować 256 odcieni szarości, potrzebujemy komórki o bokach 16x16 kropek. Skoro do satysfakcjonującego druku na papierze powlekanym potrzebujemy liniatury rzędu 150lpi to jeśli pomnożymy tą wartość przez 16, uzyskamy rozdzielczość wyjściową 2400dpi. Jak jednak obliczamy rozdzielczość wejściową (skanowania) wyrażaną w pikselach? Po pierwsze jeden piksel odpowiada jednej komórce rastrowej, często mylonej z kropką rastra. Można więc byłoby przyjąć, że jeśli chcemy uzyskać wydruk rzędu 2400dpi przy liniaturze 150lpi, to wystarczy ustawić rozdzielczość wejściową na 150ppi (pixel per inch – pikseli na cal), czyli stosunek 1:1. Niestety sytuacja nie jest taka prosta. Kolejny atrybut rastra to jego kąt nachylenia. Zmiana kąta nachylenia ma zapobiec powstawaniu efektu mory. Nachylenie rastra wynosi do 45 stopni. Także jak łatwo się domyślić, odległości między komórkami się zwiększają. Jeden piksel nie wystarczy już do opisania jednej komórki rastra ergo stosunek 1:1 jest niewystarczający. Prawidłowa liczba to 1:1,41 – jest ona zaokrąglana do 1,5 w celu uproszczenia obliczeń. Ta wartość jest podstawowym mnożnikiem liniatury rastra. Przykładowo 1,5*150lpi = 225ppi. Mnożnik zmienia się w zależności od charakteru i materiałów wykorzystanych do realizacji projektu. Niestety, podłączamy skaner do komputera, instalujemy sterowniki, przechodzimy do okienka ustawień skanowania i widzimy, że rozdzielczość skanowania wyrażana jest w dpi [!]. W ten sposób burzy się najbardziej przemyślana próba wyjaśnienia związków ppi-dpi-lpi. W pewnym momencie rozwoju sprzętu peryferyjnego nastąpiło wygodne zawłaszczenie dpi do określenia rozdzielczości wejściowej urządzenia. Skoro skaner potrafi skanować z roz-

dzielczością 4800dpi, to przewyższa on możliwości drukarek i wymagań drukarni, które oczekują od nas przykładowo 300dpi/ppi. Nic z tego, nie dysponujemy takim zapasem. Pamiętamy, iż kwadratowa komórka rastra o boku 16 kropek tworzy jeden punkt rastrowy, który jest podstawą do obliczania liniatury rastra. Skaner nie posługuje się kropkami i punktami, skaner dygitalizuje obraz do postaci piksela, który to piksel będzie później w procesie wydruku odwzorowany przez jedną komórkę rastra, która za pomocą 256+1 kombinacji kropek odda nam wygląd skali szarości piksela. Także na jeden piksel wejściowy przypada jedna komórka rastra o boku 16 kropek. Dlatego wartość 4800dpi, którą znajdziemy w opisie skanera, trzeba podzielić przez 16, co da nam 300dpi rozdzielczości wyjściowej. Tak więc myśląc o zależności pomiędzy rozdzielczością drukarki i skanera, które obydwie posługują się jednostką dpi, musimy przyjąć wzór: rozdzielczość skanera = rozdzielczość druku ÷16 i na odwrót: rozdzielczość drukarki = rozdzielczość skanera *16. Spróbujmy zobrazować te zależności w odniesieniu do skanowania kliszy. Weźmy dla przykładu małoobrazkową kliszę negatywu 36mm na 24mm. Po przeliczeniu wymiaru na cale wartości wynoszą 1,42"x0,94" (1cal = 25,4mm, dzielimy tą wartość przez wymiary filmu). Przyjmijmy rozdzielczość skanowania 1200ppi (ppi to prawidłowe określenie rozdzielczości wejściowej). W takiej sytuacji uzyskamy wymiary w pikselach 1704px na 1128px (1,42"*1200ppi; 0,94"*1200ppi). Wyświetlając obraz na ekranie w rozdzielczości ekranowej 72ppi, możemy powiedzieć, że jest w miarę duży. W sam raz do galerii/portfolio fotograficznego. Jeśli jednak zechcemy wydrukować ten obrazek z uwzględnieniem rozdzielczości 300dpi (1704px ÷ 300dpi; 1128px ÷ 300dpi) to jego wymiary będą wynosiły 5,68"x3,76" – inaczej 14,42cm x 9,5cm. Jest to niewielkie zdjęcie, blisko formatu A6 (105mm x 148mm). Wykorzystując powyższe obliczenia, możemy zeskanować film z rozdzielczością 4800ppi. Otrzymamy w takiej sytuacji wydruk 57,7cm x 38,2cm, jest to z zapasem format A3 (297mm x 420mm). Także w wyjątkowych sytuacjach (proces wysokiej jakości) możemy podnieść rozdzielczość wydruku do 350dpi. Uzyskamy wtedy wymiary prawie równe formatowi A3.

rozdzielczość optyczna vs interpolowana

Stykając się ze skanerami, spotykamy się także z różnymi rozdzielczościami: optyczną, interpolowaną, wejściową, wyjściową i w koń-

Rysunek 4. Bez korekcji
46

Rysunek 5. Autoekspozycja
.psd 01/2009 » www.psdmag.org

cyfrowa ciemnia według Epsona

Rysunek 6. Autoekspozycja i przywracanie kolorów
cu bitową- uporządkujmy te terminy. Rozdzielczość wejściowa to rozdzielczość skanowania, którą wyrażamy w pikselach na cal (ppi) lub ewentualnie na centymetr. Rozdzielczość optyczna opisuje rzeczywistą zdolność skanera do cyfrowej reprodukcji, wynika ona z konstrukcji układu CCD. Często możemy zauważyć, że producent umieszcza w dokumentacji dwie wartości rozdzielczości skanowania. Pierwsza (niższa) związana jest z rozdzielczością optyczną, druga (wyższa) odnosi się do rozdzielczości interpolowanej, czyli takiej, którą oprogramowanie skanera potrafi uzyskać na drodze matematycznych obliczeń. Rozdzielczość optyczna jest rozdzielczością poziomą – związana z liczbą układów CCD. Podobnie jak w przypadku aparatów fotograficznych wyższa rozdzielczość równa się wyższej ilości przetworników umieszczonych na matrycy. Rozdzielczość interpolowana jest związana z rozdzielczością pionową, która dotyczy ruchu głowicy skanującej. Ruch skokowy głowic obejmuje pół piksela, następnie na drodze matematycznych obliczeń łączony jest obraz. Na drodze interpolacji skaner nie uzyskuje więcej szczegółów. Dodawane są piksele w oparciu o obliczenia zeskanowanego obrazu. Rozdzielczość bitowa odnosi się do głębi kolorów. Teoretycznie 24 bity w zupełności wystarczą, każdy kanał koloru to 8 bitów. Jednak wykorzystanie 48 bitów daje nam większy zakres tonalny, jednocześnie większe pole do popisu podczas edycji, zanim postanowimy skonwertować obraz do 24 bitów. Rozdzielczość wyjściowa dotyczy rozdzielczości druku wyrażanej w dpi.

Rysunek 7. Autoekspozycja, przywracanie kolorów i paleta barw
fection V750 Pro. Obie wersje SilverFast gwarantują korekcję w czasie rzeczywistym, autodopasowanie, ScanPilot, NegaFix® (optymalizacja negatywów i profilowanie). Wersja AI to także technologia GANE® (eliminacja ziarna i szumu), dwupoziomowy interfejs (Normal/Expert), 48 bitowa korekcja RAW, HiRePP®, rozszerzona korekcja kolorów z możliwością maskowania. Program Monaco Ezcolor to kompletne rozwiązanie z zakresu tworzenia profilów kolorów. Dysponując oprogramowaniem tej klasy, możemy z powodzeniem powierzyć skanerowi wykonanie większości zadań korekcyjnych, gdyż uzyskane skany będą daleko lepszej jakości niż zdjęcia, których retusz obejmował także korekcję błędów skanera. Inna kwestia to profilowanie urządzenia. Dołączanie właściwego profilu koloru gwarantuje nam spójność kolorów na każdym etapie pracy, począwszy od urządzenia wejściowego, a skończywszy na urządzeniu wyjściowym. Profil koloru możemy utworzyć podczas kalibracji, wykorzystując przykładowo Ezcolor. Warto zajrzeć do ustawień sterownika urządzenia. W przypadku oprogramowania Epson Scan mamy do dyspozycji trzy różne tryby pracy, które oddają nam dyspozycji większą bądź mniejszą kontrolę procesu (Full Auto Mode, Home Mode, Professional Mode). Wykorzystując tryb profesjonalny, możemy określić typ dokumentu i filmu, wybrać paletę kolorów łącznie z 48 bitową. Wpływamy na rozdzielczość, wielkość i korektę kolorów, ustawiamy filtr wyostrzający, redukcję ziarna, odrestaurowanie kolorów, usuwanie kurzu i korzystamy z technologii Digital ICE. W wersji Epson Scan 3.5 znajdziemy tryb Office. Możemy przy jego pomocy ingerować bezpośrednio w kanały kolorów, jak i pomijać poszczególne kanały podczas skanowania. Oprócz tego możliwa jest korekcja położenia dokumentu na łożu skanera. Oprogramowanie oferuje tworzenie wielostronicowych dokumentów PDF, z uwzględnieniem opcji wyszukiwania tekstu. Aby skorzystać z tej opcji, musimy posiadać silnik Abbyy FineReader OCR. Na samym końcu musimy jeszcze zdecydować się na format zapisu pliku, w tym przypadku bezstratna kompresja (przykładowo TIFF) jest jedynym rozwiązaniem. Po dokonaniu szeregu decyzji możemy w końcu nacisnąć przycisk Start. Co wyniknie z tego przygotowania? W kolejnej części cyklu Historia pewnego procesu, zmierzymy się ze skanowaniem przy użyciu Epson Perfection V750 Pro. Krzysztof Kopciowski Artykuł powstał we współpracy z firmą Epson
47

ostatnie decyzje

Po umieszczeniu materiału w skanerze musimy rozważyć czy dokument będziemy poddawać pełnej korekcie w zewnętrznym programie takim jak Photoshop, czy też chcemy wykonać wstępną korektę przy użyciu sterownika i oprogramowania dołączonego do skanera. Photoshop to potężne narzędzie jednak znacznie lepiej edytować materiał, który nie wymaga drastycznych posunięć. Z drugiej strony sterownik urządzenia wskutek złego doboru opcji lub na wyrost postawionych mu wymagań może nie sprostać oczekiwaniom i pogorszyć sytuację. Musimy po prostu poznać możliwości sterownika. Jeśli dysponujemy zewnętrznym programem skanującym, który jest dołączony do niektórych modeli skanerów warto zapoznać się z jego dokumentacją. Przykładem takiego programu jest doskonała aplikacja SilverFast firmy LaserSoft Imaging GmbH. W wersji SE znajdziemy ją w Epson Perfection V700, zaś wersję AI oraz Monaco Ezcolor w Per-

.psd 01/2009 » www.psdmag.org

warsztaty
średni | pliki na CD

interaktywny
pokaz zdjęć
Prawdopodobnie wielu z nas spotkało na stronach internetowych publikacje, których kolejne strony można przekładać w sposób zbliżony do tradycyjnego oglądania gazety. Chwytamy myszką prawy dolny narożnik i po prostu przekładamy stronę. Efekt ten choć bardzo widowiskowy nie jest trudny do zrobienia...
To z pewnością bardzo zaskakujące, że do budowy interaktywnej galerii zdjęć w formacie Flash SWF wykorzystamy popularny program do składu jakim jest Adobe InDesign CS4. Jednak wygoda pracy i nieograniczone możliwości przygotowania projektu/ szablonu całej pracy szybko wyjaśnią taki właśnie wybór. Co więcej, jeśli dodamy do tego nowe możliwości eksportu dostępne w najnowszej wersji InDesign CS4 wszystko od razu stanie się jasne i zrozumiałe. W najnowszej wersji - CS4, ten popularny program można wspaniale wykorzystać do tworzenia interaktywnych dokumentów PDF i SWF. Szczególnie te drugie prezentują się widowiskowo na ekranie naszych monitorów. W tym przykładzie pokusimy się o przygotowanie prostej galerii zdjęć, tak by przybliżyć możliwości InDesign CS4 w zakresie tworzenia i publikacji interaktywnych dokumentów SWF. Do ukończenia pracy potrzebujemy jedynie kilkunastu/kilkudziesięciu zdjęć i nieco czasu. Uzyskany efekt z pewnością wynagrodzi nam cały nakład czasu włożony w przygotowanie galerii. Oczywiście nie ma żadnych problemów, by w podobny sposób przygotować intranetowe, interaktywne wydanie gazety, katalogu czy innego dokumentu przeznaczonego do druku. W takim przypadku, nie ma potrzeby tworzenia całego szablonu, ponieważ ten już istnieje. Aby przekształcić dowolną pracę w prezentację ekranową, wystarczy wybrać polecenie File>Export, wskazać format SWF i odpowiednio skonfigurować opcje zapisu finalnej wersji naszej publikacji. Gotowy plik SWF możemy osadzić na dowolnej stronie WWW i nie jest to żadnym problemem nawet dla mniej doświadczonych Webmasterów. ła rozmiar 1200x800, co pozwoli nam łatwo prezentować ją na większości popularnych monitorów. Jeśli w pracy chcemy dodać także różne elementy dodatkowe, możemy rozważyć użycie marginesów, które ułatwiają pozycjonowanie elementów na stronie. W naszym przypadku, galeria nie będzie bardzo rozbudowana, toteż nie będzie konieczności dodawania linii pomocniczych marginesów. Co bardzo ważne, w oknie nowego dokumentu wskazujemy opcję Facing Pages (Rozkładówki, Strony widzące), aby można by-

InDesign CS4

konfiguracja dokumentu Adobe InDesign CS4

Rysunek 1. Internetowa galeria zdjęć z możliwością ręcznego przekładania stron prezentuje się bardzo okazale. Co więcej, jest bardzo modna wśród naszych klientów

Do budowy atrakcyjnej galerii potrzebujemy ciekawej oprawy graficznej. Dziki użyciu narzędzi InDesign jej opracowanie nie powinno sprawić nam żadnych kłopotów. Pracę rozpoczynamy od ustawienia ogólnych właściwości dokumentu. Otwieramy Adobe InDesign CS4 i za pomocą polecenia [Ctrl]+[N] lub [Cmd]+[N] na Macu, budujemy nowy dokument InDesign (Rysunek 2). Oczywiście, w związku z tym, że całość prezentowana będzie na ekranie monitora, jego właściwości będą nieco inne niż podczas tworzenia prac przeznaczonych do druku. Do prezentacji na ekranie monitora przygotujemy stronę o pionowej orientacji. Może to nieco dziwne, jednak tak przygotowany dokument pasuje lepiej do proporcji monitora. Jak to możliwe? Sprawa jest całkiem prosta, będziemy budować strony rozkładowe – a popularne rozkładówki wyświetlone obok siebie, wypełnią nam ekran w sposób zbliżony do jego proporcji. Oczywiście kwestią dodatkową pozostaje tu samo dobranie wielkości strony, jednak po kilku próbach każdy z nas samodzielnie odnajdzie rozmiar najbardziej odpowiedni do konkretnych potrzeb. W naszym przykładzie użyłem strony o wielkości 600x800px, która prezentowana jako rozkładówka będzie mia48

Rysunek 2. Otwieramy Adobe InDesign CS4 i za pomocą polecenia [Ctrl]+[N] lub [Cmd]+[N] na Macu budujemy nowy dokument InDesign

.psd 01/2009 » www.psdmag.org

interaktywny pokaz zdjęć
ło przygotować układ galerii złożony z dwóch stron prezentowanych obok siebie. Do tworzenia interaktywnej galerii SWF taki układ sprawdza się najlepiej. Wskazujemy więc jeden łam i marginesy o zerowej wielkości, zaznaczamy opcję Facing Pages oraz początkowo 3 strony dokumentu i rozpoczynamy budowę szablonu (rysunek 3). dokument InDesign, nie ma konieczności usuwania czy też korekty elementów wychodzących na spad. Po dodaniu tła przystępujemy do wprowadzenia kolejnych elementów layoutu naszej galerii. W naszym przykładzie pokusiłem się o dodanie białej ramki graficznej (rysunek 7), która posłuży mi za tło do prezentowania osobnych fotografii. Dodatkowo, za pomocą opcji dostępnych pod przyciskiem fx nadałem jej efekt cienia. Aby ten nie był zbyt intensywny, dopasowałem jego odcień (rozjaśnienie za pomocą zmniejszenia wartości parametru Opacity) oraz odległość od obiektu bazowego – ramki (rysunek 8). Kolejny krok to dodanie podpisu pod zdjęciem. W naszym przykładzie buduję niewielką galerię prac wykonanych za pomo-

tworzymy makietę/szablon galerii

Do prezentacji zbioru fotografii wykorzystamy jeden stały układ graficzny. Naturalnie nie będzie konieczności, by powtarzać rozkład typowych elementów na każdej stronie, wykorzystamy w tym celu Master Page, czyli stronę wzorcową InDesign. Dzięki użyciu wzorca możemy łatwo i szybko przygotować makietę dla wielu stron jednocześnie. Co więcej, modyfikacja wzorca automatycznie uaktualnia wszystkie strony zbudowane na jego podstawie. To niezwykle wygodne podejście jest całkowicie nieodzowne podczas tworzenia dokumentów wielostronicowych przygotowanych z myślą o druku, doskonale sprawdzi się także w naszej interaktywnej, elektronicznej pracy. Zamiast budować interfejs galerii na kolejnych stronach, użyjemy wzorca i automatycznie zastosujemy raz przygotowany układ na wszystkich stronach tej elektronicznej publikacji. Do budowy szablonu – Master Page przechodzimy do palety Window>Pages [F12] (rysunek 4) i dwukrotnie klikamy miniaturkę A Master widoczną w górnej sekcji okna. W ten sposób przechodzimy do edycji wzorca naszej pracy. Oczywiście sposób prezentacji fotografii czy też innych prac graficznych jest sprawą indywidualnego wyboru. W naszym przykładzie pokusiłem się o przygotowanie prostych elementów graficznych (prostokąty, prostokątne ramki graficzne) o stonowanej szarej kolorystyce, które doskonale kontrastują z kolorowymi zdjęciami. Tego typu galeria cechuje się prostotą i czytelnością oraz nadaje naszej pracy ciekawy charakter. Jeśli jednak tego typu stylistyka galerii nie przypadła do gustu lub po prostu nie nadaje się do prezentacji naszych prac, możemy pokusić się o przygotowanie dowolnego, innego układu. Co ważne, nie ma tu żadnych ograniczeń! Aby prezentować prace na neutralnym tle, dodałem prostokątną ramkę graficzną w tle galerii. Nadałem jej odcień szarości na poziomie 5-10% (rysunek 5) czerni. Oczywiście, aby zmiany widoczne były na obu stronach galerii, konieczne jest powielenie ramki także na prawą stronę projektu (rysunek 6). Ten krok dotyczy wszystkich elementów jakie dodamy do naszej pracy. Aby zachować spójny wygląd lewej i prawej strony rozkładówki, na stronie wzorcowej dodajemy elementy o jednakowym położeniu na obu stronach. Niekiedy, w zależności od projektu możemy pokusić się o wprowadzenie efektu lustrzanego odbicia, który pozwoli zachować symetryczny wygląd całej rozkładówki. Jako że pracujemy nad dokumentem elektronicznym prezentowanym jedynie na ekranie komputera, nie ma konieczności, by do elementów graniczących z krawędziami strony dodawać spady. Ich obecność nie ma wpływu na finalną wersję naszej pracy. Jeśli więc przekształcamy w interaktywny projekt SWF istniejący

Rysunek 4. Do budowy szablonu – Master Page przechodzimy do palety Window>Pages [F12]

Rysunek 5. Aby prezentować prace na neutralnym tle, dodałem prostokątną ramkę graficzną i nadałem jej odcień szarości na poziomie 5-10%

Rysunek 3. Wybieramy jeden łam, marginesy o zerowej wielkości, zaznaczamy opcję Facing Pages oraz początkowe 3 strony dokumentu i rozpoczynamy budowę szablonu

Rysunek 6. Aby zmiany widoczne były na obu stronach galerii, konieczne jest powielenie ramki także na prawą stronę projektu
49

.psd 01/2009 » www.psdmag.org

warsztaty

cą obiektywu wyposażonego w funkcję Macro, toteż cała galeria posiada jeden, stały tytuł. Umieściłem go w dolnej części białej ramki i aby zachować spójny wygląd całości, nadałem jasno szary kolor tekstu (rysunek 9). Oczywiście zarówno miejsce prezentacji tytułu galerii, jak i wykorzystany krój pisma, kolorystyka zależy przede wszystkim od charakteru naszej pracy i indywidualnych upodobań. W dalszej części pokusimy się o użycie narzędzia Rectangle Frame Tool [F] i dodanie pustej, prostokątnej ramki do prezentacji zdjęcia. Jej wielkość powinna być ściśle skorelowana z rozmiarem fotografii, jaką będziemy tu prezentować (rysu-

Rysunek 7. Za pomocą narzędzia Rectangle Tool [M] dodajemy białą ramkę graficzną jako podkład pod fotografię

nek 10). Najwygodniej byłoby tak, że obrazek od razu pasuje do przygotowanej ramki. Jeśli nie, warto zadbać o zachowanie proporcji ramki, zgodne z proporcjami wykorzystanych fotografii. Pozwoli to na szybkie i automatyczne dopasowanie ich wielkości w ramce. Aby ułatwić sobie to zadanie, możemy od razu dla pustej ramki graficznej wprowadzić odpowiednie opcje dopasowania. W tym celu klikamy ramkę prawym klawiszem myszki i wskazujemy polecenie Fitting>Frame Fitting Options. W wyświetlonym oknie dialogowym wybieramy jeden ze sposobów dopasowania najlepszy dla naszej pracy. Wskazanie opcji Fit Content Proportionaly pozwala automatycznie dopasować zdjęcie (lub inna grafikę) do wielkości ramki. Jednak w tym przypadku konieczne było wcześniejsze zachowanie proporcji dla ramki graficznej. Zdjęcie o innych proporcjach nie wypełnia jej całkowicie, co nie zawsze daje dobry efekt. Aby zabezpieczyć się przed taką sytuacją, możemy wskazać także opcję Fill Frame Proportionally. Pozwoli ona na zachowanie proporcji oryginalnej fotografii i doskonale dopasuje ją do wielkości przygotowanej ramki graficznej. W tym przypadku możemy jednak przyciąć część zdjęcia, jeśli jego proporcje znacznie odbiegają od kształtu samej ramki. Użycie odpowiedniej wielkości zdjęć zdecydowanie ułatwia pracę i całkowicie rozwiązuje problem dopasowania. W naszej pracy wybrałem opcję Fill Frame Proportionally, która zapewnia mi wypełnienie całej ramki graficznej z zachowaniem proporcji oryginalnych fotografii. Jako że te są wcześniej dopasowane do wielkości naszej pracy, nie będę miał żadnych problemów z ich automatycznym dopasowaniem. Uwaga! Aby szybko dopasować serię zdjęć do naszego projektu, najwygodniej jest wykorzystać paletę Actions (Zadania/Operacje) i wykonać cały proces automatycznie. Podczas dopasowania wielkości możemy dodatkowo wyostrzyć pomniejszane fotografie. Pozwala to na osiągnięcie lepszej ich jakości w budowanej galerii. Ostatnim krokiem w naszej galerii jest dodanie drobnej ramki, która stanowi naturalną granicę każdej fotografii. W tym celu ponownie wybieramy narzędzie Rectangle Tool [M] i rysujemy prostokąt wokół przygotowanej ramki graficznej. Nadajemy mu szary obrys o nasyceniu około 20% czerni (rysunek 11). Gotowy moduł (białe tło, podpis, ramka graficzna na fotografię oraz dodatkowe obramowanie) musimy szybko przenieść na drugą stronę rozkładówki. W tym celu wraz z wciśniętym klawiszem [Shift] zaznaczamy kolejno białą ramkę, podpis, ramkę na zdjęcie oraz obrys. W ten sposób aktywne są wszystkie elementy, które powinniśmy przenieść na prawą stronę rozkładówki. W tym celu wraz z wciśniętym klawiszem [Alt] (kopia) oraz

Rysunek 8. Aby cień nie był zbyt intensywny, dopasowujemy jego odcień (rozjaśnienie za pomocą zmniejszenia wartości parametru Opacity) oraz odległość od obiektu bazowego – ramki

Rysunek 9. Kolejny krok to dodanie podpisu pod zdjęciem. Umieszczamy go w dolnej części białej ramki i aby zachować spójny wygląd całości, nadajemy nieco wygaszany odcień
50

Rysunek 10. Za pomocą narzędzia Rectangle Frame Tool [F] dodajemy pustą, prostokątną ramkę do prezentacji zdjęcia. Jej wielkość powinna być ściśle skorelowana z rozmiarem fotografii, jaką będziemy tu prezentować

.psd 01/2009 » www.psdmag.org

interaktywny pokaz zdjęć
[Shift] (zachowanie pionu) przeciągamy moduł na drugą stronę. Dzięki liniom Smart Guides, właściwe ułożenie go na drugiej stronie nie powinno stanowić żadnego problemu. Jeśli jednak nie dowierzamy tej niezwykle przydatnej, nowej funkcji Adobe InDesign, możemy skorzystać z możliwości pozycjonowania obiektów za pomocą współrzędnych X i Y w górnym pasku opcji programu. Zapewniam jednak, że dzięki wykorzystaniu nowych linii pomocniczych – Smart Guides nie jest to jednak konieczne. W ten właśnie sposób przygotowaliśmy sobie makietę do prezentacji zdjęć. Kolejny krok to dodanie samych zdjęć, dzięki użyciu wzorca – Master Page nie będzie to trudnym zadaniem. wości i znacznie ułatwia późniejszą edycję galerii. Po odblokowaniu ramki nie pozostaje nic innego jak zaimportować pierwszą fotografię. W tym celu wybieramy polecenie File>Place [Ctrl]+[D] lub [Cmd]+[D] na Macu) i wskazujemy odpowiedni plik graficzny (rysunek 12). Osadzony obrazek automatycznie dopasował się do ramki graficznej zgodnie z metodą dopasowania, jaką wskazaliśmy na wzorcu (rysunek 13). W podobny sposób możemy oczywiście odblokować ([Ctrl]+[Shift]+LKM lub [Cmd]+[Shift]+LKM) ramkę na prawej stronie rozkładówki i zaimportować kolejny obrazek. Także ten zostanie automatycznie dopasowany do ramki (rysunek 14). Oczywiście w podobny sposób można dodawać kolejne strony, a następnie wypełniać je odpowiednimi zdjęciami. Spróbujmy jednak wykonać to nieco szybciej. Rozpoczynamy od dodania dwóch kolejnych stron galerii. Wykorzystamy w tym celu przycisk Add New Page widoczny w dolnej części palety Pages (rysunek 15). Po dodaniu kolejnych

dodajemy kolejne strony i zdjęcia

Aby zakończyć pracę z makietą, ponownie skorzystamy z palety Pages [F12]. Dwukrotnie klikamy miniaturkę strony o numerze 1 i przechodzimy do pracy z pierwszą stroną naszego projektu. Tu zgodnie z założeniem widoczne są od razu wszystkie dodane elementy wzorca. W podobny sposób zbudowane są pozostałe strony naszej pracy. Klikamy dwukrotnie miniaturkę strony drugiej, by szybko przejść do widoku pierwszej rozkładówki projektu. Tu właśnie rozpoczniemy dalszą pracę. Jeśli spróbujemy zaznaczyć dowolny element strony, łatwo się zorientujemy, że są one zablokowane – aby uniknąć przypadkowej edycji. To bardzo wygodne, projekt edytujemy na szablonie (Master Page) zaś na kolejnych stronach wprowadzamy jedynie konkretne elementy. Jak jednak dodać zdjęcie, skoro przygotowana ramka graficzna jest także zablokowana? Posłużymy się tu niewielkim trikiem. Jeśli wraz z wciśniętymi klawiszami [Ctrl]+[Shift] lub [Cmd]+[Shift] na Macu, klikniemy przygotowaną ramkę na zdjęcie, automatycznie odblokujemy ją. Pozwoli to na łatwe dodawanie zdjęć. Co ważne, dopóty nie zmienimy jej położenia na konkretnej stronie, modyfikacja położenia ramki na stronie wzorca Master Page, automatycznie zaktualizuje także tę stronę. Daje to naprawdę wspaniałe możli-

Rysunek 13. Oba zdjęcia zostaną automatycznie dopasowane do przygotowanej wcześniej ramki

Rysunek 11. Wybieramy narzędzie Rectangle Tool [M] i rysujemy prostokąt wokół przygotowanej ramki graficznej. Nadajemy mu szary obrys o nasyceniu około 20% czerni

Rysunek 14. Aby dodać dwie kolejne strony galerii, wykorzystamy przycisk Add New Page widoczny w dolnej części palety Pages

Rysunek 12 Aby zaimportować pierwszą fotografię, wybieramy polecenie File>Place ([Ctrl]+[D ] lub [Cmd]+[D] na Macu) i wskazujemy odpowiedni plik graficzny

Rysunek 15. Po dodaniu kolejnych stron odblokowujemy ramki graficzne, nie dodajemy jednak kolejnych fotografii
51

.psd 01/2009 » www.psdmag.org

warsztaty

stron odblokowujemy ramki graficzne, nie dodajemy jednak kolejnych fotografii. Teraz bowiem powielimy przygotowane strony, by uniknąć konieczności odblokowania ramek graficznych na wszystkich dodawanych stronach naszej publikacji. W tym celu zaznaczamy obie rozkładówki na palecie Pages i przeciągamy je na miniaturkę Create New Page w dolnej części palety (rysunek 16). Automatycznie powstała nam kopia wskazanych stron zawierających odblokowane do edycji ramki graficzne. W podobny sposób powielamy dwie (lub szybciej teraz już nawet cztery) strony naszej pracy i dodajemy tyle rozkładówek ile to konieczne do prezentacji wszystkich prac z danej serii.

Po dodaniu kolejnych stron, postaramy się szybko wypełnić je odpowiednią treścią. Przechodzimy na czwartą stronę projektu, zaznaczamy ramkę graficzną i wybieramy polecenie File>Place ([Ctrl]+[D] lub [Cmd]+[D] na Macu), w oknie dialogowym wskazujemy teraz całą serię fotografii i potwierdzamy wybór. Tuż obok kursora myszki widoczna jest teraz niewielka miniaturka pierwszej wybranej fotografii (rysunek 17), Jeśli to właśnie ją chcielibyśmy umieścić na kolejnej stronie, po prostu klikamy ramkę graficzną na stronie, Obrazek automatycznie dopasował się do wskazanej ramki (rysunek 18). Obok kursora widoczna jest teraz miniaturka kolejnej fotografii. Naturalnie, jeśli to jest odpowiednie zdjęcie, wskazujemy ramkę na prawej stronie i osadzamy je w galerii. Jeśli jednak w tym miejscu chcielibyśmy wykorzystać inne zdjęcie, za pomocą klawiszy – strzałek na klawiaturze, możemy wskazać odpowiednie zdjęcie i dopiero wówczas osadzić je na prawej stronie. Przechodzimy na kolejne strony i kontynuujemy dodawanie dalszych zdjęć. Aby ułatwić sobie pracę, możemy za pomocą skrótu [Ctrl]+[-] lub [Cmd]+[-], pomniejszyć podgląd rozkładówek, tak by na ekranie widać było kilka stron jednocześnie (rysunek 19). W tym trybie możemy nieco szybciej dodawać kolejne fotografie na stronach naszej galerii.

eksport do postaci Flash SWF

Rysunek 16. W tym celu zaznaczamy obie rozkładówki w palecie Pages i przeciągamy je na miniaturkę Add New Page w dolnej części palety

No cóż, krótko mówiąc, eksport do pliku Flash SWF nie jest pasjonującym zadaniem. Jeśli nie zależy nam na szczególnych ustawieniach, wystarczy wybrać polecenie File>Export ([Ctrl]+[E] lub [Cmd]+[E] na Macu), by przejść do okna eksportu (rysunek 20). W tym miejscu wskazujemy odpowiednią lokalizację na dysku oraz nadajemy właściwą nazwę pliku wyjściowego. Następnie

Rysunek 17. Tuż obok kursora myszki widoczna jest teraz niewielka miniaturka pierwszej wybranej fotografii

Rysunek 19. Aby ułatwić sobie pracę, możemy za pomocą skrótu [Ctrl]+[-] lub [Cmd]+[-], pomniejszyć podgląd rozkładówek, tak by na ekranie widać było kilka stron jednocześnie. W tym trybie możemy nieco szybciej dodawać kolejne fotografie na stronach naszej galerii

Rysunek 18. Jeśli to właśnie ją chcielibyśmy umieścić na kolejnej stronie, po prostu klikamy ramkę graficzną na stronie, obrazek automatycznie dopasował się do wskazanej ramki
52

Rysunek 20. Polecenie File>Export ([Ctrl]+[E] lub [Cmd]+[E] na Macu) pozwala szybko przejść do okna eksportu

.psd 01/2009 » www.psdmag.org

recenzja

Rysunek 21 .W oknie dialogowym Export SWF wskazujemy zakres stron, jaki chcielibyśmy wyeksportować, stopień kompresji oraz docelową wielkość naszego projektu

Ocena końcowa: Tutuł: Fotografia cyfrowa. Edycja zdjęć Autor: Scott Kelby Tłumaczenie: Piotr Cieślak Wydawnictwo: Helion ISBN: 978-83-246-1410-3 Liczba stron: 504 Cena: 77,00 zł
Książka Scotta Kelby’ego to najnowszy przewodnik po technikach obróbki i modyfikacji zdjęć cyfrowych, znajdujących swoje zastosowanie pośród profesjonalistów z branży fotograficznej i projektowej. Wszyscy wiemy, jak wielkie są możliwości współczesnych aparatów cyfrowych, jednocześnie jednak zdajemy sobie sprawę z tego, że żaden aparat nie zagwarantuje wykonania idealnych fotografii. Dlatego właśnie większość zarejestrowanych obrazów poddawana jest cyfrowej obróbce – od korekcji barw po konwersję zdjęć na tryb czarno-biały. Książka ta ma za zadanie ukazanie, jak można profesjonalnie wyostrzyć dowolną fotografię, jak zautomatyzować pracę Photoshopa czy też jak przetwarzać pliki RAW. Publikacja składa się z 13 rozdziałów, każdy z nich dotyczy konkretnego zagadnienia. Pierwszy jest swoistym przewodnikiem po programie Bridge, następny uczy zaawansowanych technik posługiwania się tym programem. Tak naprawdę każdy kolejny rozdział to istna wędrówka po konkretnym przypadku. W pierwszych wersach każdego rozdziału autor słowem wstępu przedstawia pewną sytuacje, by później pokazać konkretne rozwiązanie potencjalnego problemu. Oczywiście należy zauważyć, że każde wykonane działanie jest dokładnie opisane i opatrzone ilustracją. Opisanych sytuacji jest kilkadziesiąt, dzięki czemu jesteśmy w stanie przyswoić sobie kilka ciekawych informacji. Po lekturze tej książki dowiemy się na przykład, jak poprawnie ustalić balans bieli, jak w prosty sposób kadrować i prostować zdjęcia, jak edytować kilka zdjęć jednocześnie. Bardzo ciekawy jest również dział poświęcony retuszowi zdjęć portretowych – w prosty i ciekawy sposób przedstawione zostały sposoby retuszu poszczególnych elementów twarzy. Na zakończenie autor zaprasza do zapoznania się rozdziałem omawiającym proces przygotowania zdjęć, od A do Z – począwszy od ich skopiowania na dysk komputera do wydrukowania odbitki włącznie. Rozdział ten jest tak naprawdę kwintesencją całości materiału zawartego w książce. Mogę z czystym sumieniem polecić tę pozycję każdemu. Książka jest naprawdę świetną propozycją zarówno dla osób, które posiadają stosunkowo niewielkie doświadczenie, jak i tych, którzy obróbką zdjęć zajmują się na co dzień. Paweł Kołodziej

Fotografia Cyfrowa. Edycja zdjęć

Rysunek 22. Gotowa galeria doskonale prezentuje się na neutralnym tle w oknie przeglądarki internetowej
na liście dostępnych formatów wskazujemy SWF, przechodzimy do kolejnego okna dialogowego. Uwaga! Jeśli przygotowany w ten sposób plik miałby być prezentowany w internecie, nazwa wyjściowa nie może zawierać spacji, znaków specjalnych typu :, ; .- / * ani polskich znaków. O ile to konieczne, nazwy złożone budujemy wykorzystując dolne podkreślenie (twardą spację). W rezultacie powstaje nam nazwa moja_galeria zamiast moja gal eria. Z punktu widzenia serwera WWW ma to istotne znaczenie. W oknie dialogowym Export SWF wskazujemy zakres stron, jaki chcielibyśmy wyeksportować, stopień kompresji oraz docelową wielkość naszego projektu. Namawiam, by nieco poeksperymentować z tymi ustawieniami. Zmiana jakości, wielkość może mieć olbrzymi wpływ na szybkość ładowania tak przygotowanej galerii (rysunek 21). O ile nie przygotowaliśmy strony tytułowej całej galerii, eksport do formatu SWF możemy ograniczyć do samych rozkładówek, po prostu omijając pierwszą stronę InDesign. Możemy jednak pokusić się o przygotowanie atrakcyjnej okładki (strony tytułowej) całej galerii i wówczas wyeksportować całą pracę. Gotowa galeria doskonale prezentuje się na neutralnym tle w oknie przeglądarki internetowej (rysunek 22). O ile to konieczne, właściwości przygotowanej w ten sposób strony WWW możemy dowolnie modyfikować za pomocą edycji jej źródła lub nawet wygodniej – wykorzystując w tym celu Adobe Dreamweaver CS4. Lub inny edytor kodu HTML. Paweł Zakrzewski

.psd 01/2009 » www.psdmag.org

53

warsztaty
trudny

budujemy
interaktywne formularze
Wielu z nas budując formularze na stronach WWW, spotkało się z problemem poprawnego wypełniania konkretnych pól przez użytkowników. Puste pola, błędny format wprowadzonych informacji nie ułatwiają później automatycznej obsługi przesłanych danych. Dzięki użyciu elementów Spry i programu Adobe Dreamweaver CS4, problem ten można niemal całkowicie wyeliminować.
Do analizy tego przykładu posłużymy się fragmentem strony internetowej i gotowym formularzem (rysunek 1). Na naszej stronie umieszczony jest prosty formularz, wykorzystywany do przesyłania typowych informacji zwrotnych – hipotetycznego zamówienia – wstępnego zgłoszenia na szkolenie komputerowe. Cały formularz wykonany jest i formatowany na podstawie prostej dwukolumnowej tabeli oraz kilku dodatkowych definicji stylów CSS. Na pierwszy rzut okna, nie różni się niczym od tysięcy innych znanych z różnorodnych stron WWW (rysunek 2). Wszystkie elementy naszego formularza posiadają już unikalne ID oraz przypisaną odpowiednią klasę CSS. Sam formularz jest skonfigurowany i jego użycie pozwoli na przesyłanie wprowadzonych danych. Jest tylko jeden problem. Co stanie się w chwili, gdy użytkownik nie wprowadzi wszystkich danych niezbędnych do wysłania formularza? Zwykle walidacja formularza odbywa się na poziomie serwera i wymaga użycia specjalnych skryptów napisanych w języku CGI, PHP, ASP czy innym. Oznacza to, że każdy twórca strony internetowej powinien dysponować w swym arsenale odpowiednim skryptem, umieć go skonfigurować i wykorzystać w praktyce. Czy tak zawsze jest? Nie trzeba czarodziejskiej kuli, by szybko zdać sobie sprawę, że nie zawsze takie rozwiązanie jest łatwe, a nawet możliwe do użycia. Może więc zrobić to nieco inaczej?

Dreamweaver CS4

Dzięki użyciu Adobe Dreamweaver CS4, elementów Spry i gotowych skryptów w języku JavaScript możemy pokusić się o wykonanie walidacji formularza bezpośrednio na stronie bez konieczności użycia żadnych technologii serwerowych. Jest to niezwykle wygodne rozwiązanie. Co więcej, bardzo dobrze wygląda na stronie i bezbłędnie działa. Nie wymaga też wiele pracy.

Dreamweaver i Spry

Już w poprzedniej wersji Dreamweaver CS3 udostępniał szereg elementów Spry ułatwiających projektowanie serwisów WWW oraz właśnie formularzy. Dziś, w najnowszej odsłonie oznaczonej numerem CS4, mamy jeszcze więcej ciekawych możliwości. Czym jest więc Spry? Jak można go wykorzystać w praktyce? Spry to nic innego jak framework technologii AJAX wykorzystany w programie Dreamweaver. Dzięki umiejętnemu połączeniu JavaScriptu, stylów CSS i często także danych zapisanych w postaci XML, Spry oferuje nam naprawdę niesamowite możliwości tworzenia ciekawych, interaktywnych stron WWW. Walidacja formularzy to tylko niezwykle ciekawy i bardzo użyteczny dodatek Przekonajmy się o tym budując niewielki przykład. Uwaga! Dużo ciekawych informacji o technologii Adobe Spry można znaleźć w internecie. Najlepszym miejscem, gdzie powinniśmy roz-

Rysunek 1. Do analizy tego przykładu posłużymy się fragmentem strony internetowej i gotowym formularzem. Widok z przeglądarki internetowej
54

Rysunek 2. Cały formularz wykonany formatowany jest na podstawie prostej dwukolumnowej tabeli oraz kilku dodatkowych definicji stylów CSS. Na pierwszy rzut okna, nie różni się niczym od tysięcy innych znanych z różnorodnych stron WWW

.psd 01/2009 » www.psdmag.org

budujemy interaktywne formularze

Rysunek 3. Panel Insert przeniesiony ponad okno dokumentu począć poszukiwanie własnej inspiracji, jest z pewnością serwis http://labs.adobe.com/technologies/spry/home.html. Serdecznie namawiam do lektury i przeglądania dostępnych tam przykładów. Okazuje się, że Adobe Spry to wiele więcej niż kilka prostych gadżetów dostępnych w programie Dreamweaver CS4. Aby szybko przygotować walidację, czyli sprawdzanie poprawności wypełnienia poszczególnych pól formularza, wykorzystamy właśnie najnowsze elementy Spry dostępne w zakładce Spry panelu Insert. Dla wygody pracy (i nieco z przyzwyczajenia) cały panel Insert, domyślnie umieszczony w pionie, po prawej stronie okna Dreamweavera, przeniosłem ponad górną część strony. W ten sposób jest mi nieco łatwiej korzystać z dostępnych tu elementów. W dużym stopniu zadziałało tu też przyzwyczajenie. Zwykle właśnie w ten sposób konfiguruje sobie ekran roboczy Dreamweavera (rysunek 3).

Rysunek 4. Zaznaczamy pierwsze pole formularza i w dolnym panelu Properties sprawdzamy jego nazwę – ID

dodajemy elementy Spry do formularza

Aby skorzystać z możliwości walidacji formularzy, jakie oferuje nam Dreamweaver CS4, musimy przebudować nieco nasza stronę. Pracę rozpoczynamy od modyfikacji samego formularza. Zaznaczamy pierwsze pole formularza i w dolnym panelu Properties sprawdzamy jego nazwę – ID (rysunek 4). To ważny moment, ponieważ za chwilę usuniemy oryginalne pole, wprowadzając w jego miejsce element Spry. Aby ten zadziałał poprawnie w przygotowanym wcześniej formularzu, musi posiadać identyczną nazwę – ID. Możemy oczywiście ułatwić sobie pracę, i widoczną w panelu Properties nazwę pola po prostu skopiować. Użyjemy ja niebawem. Uwaga! Oczywiście, wszystkie wprowadzane modyfikacje można także przeprowadzić w trybie podglądu kodu źródłowego. Adobe Dreamweaver równorzędnie traktuje oba tryby pracy. Przechodzimy do panelu Insert, wskazujemy zakładkę Spry, a następnie lokalizujemy element Spry Validation Text Field (rysunek 5). Upewniamy się, że kursor wstawiania znajduje się

w odpowiednim miejscu i dodajemy nowy element formularza. W wyświetlonym oknie uważnie wprowadzamy (lub wklejamy) nazwę ID poprzednio usuniętego pola. W rezultacie otrzymamy niemal identyczne pole formularza, zamknięte jednak w sekcji Spry o turkusowym zabarwieniu. Ten układ oferuje nam szereg ciekawych możliwości. Tym jednak zajmiemy się nieco później. Oczywiście, aby zachować jednakowy wygląd formularza, zaznaczamy dodane pole i nadajemy mu wcześniej użytą klasę i ewentualnie ograniczenie co do ilości znaków (rysunek 6). W rezultacie pole formularza Spry wygląda niemal identycznie jak usunięty wcześniej oryginał. Teraz w podobny sposób usuwamy i wprowadzamy kolejne elementy formularza. W trakcie tych działań należy zwrócić baczną uwagę, by zachować oryginalne nazwy nowych elementów Spry. Oczywiście, podczas tych prac należy zachować odpowiedni typ dodawanych elementów. Tam gdzie mieliśmy do czynienia z przyciskami typu radio, wprowadzamy element Spry Validation Radio Group, tam gdzie były to zwykłe przyciski wyboru – wprowadzamy odpowiednio Spry Validation Checkbox. Listę programów, czyli element formularza o nazwie List/Menu zastępujemy odpowiednio Spry Validation Select. W każdym przypadku zachowujemy oryginalną nazwę (ID) wymienionego obiektu. Naturalnie w tym przypadku, wprowadzamy także wszystkie konieczne dane samej listy.

podgląd elementów Spry i formularza

Niezwykle wygodną funkcją najnowszej wersji Adobe Dreamweavera CS4 jest możliwość podglądu działania budowanej strony bezpośrednio w oknie programu. W tym celu możemy wykorzystać przycisk Live View widoczny w górnej części strony. W rezultacie, formularz, jak i inne elementy strony prezentowane są w postaci, która będzie widoczna na stronie (rysunek 7). A wszystko to bez opuszczania okna Dreamweavera CS4. To niezwykle wygodne.

Rysunek 5. Przechodzimy do panelu Insert, wskazujemy zakładkę Spry, a następnie lokalizujemy element Spry Validation Text Field
.psd 01/2009 » www.psdmag.org 55

warsztaty

Rysunek 6. Aby zachować jednakowy wygląd formularza, zaznaczamy dodane pole i nadajemy mu wcześniej użytą klasę i ewentualnie ograniczenie co do ilości znaków Co więcej, w tym trybie możemy nawet normalnie pracować i wprowadzać odpowiednie poprawki, także w kodzie. Aby możliwe było testowanie bieżącej strony w oknie przeglądarki internetowej, konieczne jest zapisanie efektów naszej pracy. W chwili, gdy wywołamy polecenie Save, wyświetlony zostanie zaskakujący komunikat Copy Dependend Files. Informuje on o fakcie utworzenia dodatkowego foldera – SpryAssets wewnątrz naszego site’a. Naturalnie, chcąc przesłać działającą stronę na serwer WWW, nie można zapomnieć o przesłaniu także tego właśnie katalogu. W nim bowiem zapisany jest odpowiedni kod JavaScript oraz arkusz CSS odpowiedzialny za działanie elementów Spry.

Rysunek 8. Wskazanie opcji Required w miejsce Initial w sekcji Preview States także aktywuje podgląd komunikatu z alertem walidacji

dodajemy walidację elementów formularza

Aby prawidłowo skonfigurować elementy walidacji formularza, zaznaczamy pierwszy przykładowy element – pole tekstowe. Staramy się kliknąć nie bezpośrednio w pole, a w turkusową nazwę Spry TextField widoczną ponad nazwą pola. Wszystkie właściwości zaznaczonych elementów Spry dostępne są w dolnym panelu Properties. Jeśli wprowadzenie danych dla bieżącego pola jest wymagane, odznaczamy i ponownie zaznaczamy przycisk Required (najpierw odznaczamy, a następnie ponownie zaznaczamy). Daje to

nam dodatkowe możliwości. W oknie formularza widoczny jest teraz niewielki tekst w postaci: A value is required (rysunek 8). Jest to informacja tekstowa, która wyświetlona zostanie, gdy użytkownik pozostawi edytowane pole bez żadnej treści i spróbuje przesłać dane formularza. Dokładnie ten sam efekt można uzyskać zmieniając domyślny format prezentacji danych za pomocą przełącznika Preview States. Wskazanie opcji Required w miejsce Initial także aktywuje podgląd komunikatu z alertem walidacji (rysunek 9). Wyświetlenie tej treści zdecydowanie ułatwia edycję komunikatu w trybie wizualnym. Oczywiście, wszyscy, którzy preferują pracę z kodem HTML, mogą stosowne zmiany wprowadzić bezpośrednio w źródle strony dostępnym za pomocą górnego przełącznika – Source. W naszym przypadku wprowadzamy polski tekst w postaci: wprowadź imię, wprowadź wymagane dane itp. Oczywiście, dla wygody dobrze będzie, jeśli skopiujemy użyty tekst, by wykorzystać go później jako komunikat dla kolejnych elementów naszego formularza. Nie są to jedyne właściwości, jakie możemy modyfikować dla aktywnego pola formularza. Spry pozwala także na określenie typu wprowadzanych danych. W tym celu należy skorzystać z listy

Rysunek 7. Niezwykle wygodną funkcją najnowszej wersji Adobe Dreamweavera CS4 jest możliwość podglądu działania budowanej strony bezpośrednio w oknie programu – Live View
56

Rysunek 9. Na potrzeby bardziej zaawansowanych zastosowań dostępne są dodatkowe pola walidacji: Format, Pattern, Hint itd.

.psd 01/2009 » www.psdmag.org

Rysunek 10. Zaznaczamy element formularza i w dolnym oknie Properties przechodzimy do ustawienia sposobu walidacji Type i wskazać odpowiedni zakres treści. Na potrzeby bardziej zaawansowanych zastosowań dostępne są dodatkowe pola walidacji: Format, Pattern, Hint itd. (rysunek 10). Dokładnie w ten sam sposób zaznaczamy każdy kolejny element formularza zamówienia, a następnie uruchamiamy podgląd komunikatu o wymaganej treści. W miejsce oryginalnego angielskiego alertu wklejamy wykorzystany wcześniej tekst w języku polskim i ewentualnie modyfikujemy nieco jego treść. O ile to konieczne (lub przydatne) określamy także typ oraz format wprowadzonych danych. Nieco inaczej wygląda sprawa wykorzystania elementu Spry Select, czyli rozwijanej listy – List/Menu. W tym przypadku także możliwe jest wykorzystanie walidacji elementu formularza za pomocą narzędzi Spry, wykonamy to jednak w nieco inny sposób. Do walidacji elementy Spry Select konieczne jest odpowiednie przygotowanie danych elementu <Select> formularza. W tym przypadku wprowadzamy odpowiednio etykiety – Label oraz wartości – Value dla kolejnych pozycji listy. Ostatnią typu Wybierz czy też Zaznacz program pozostawiamy albo bez wprowadzania żadnej wartości w polu Value, albo też wprowadzamy konkretną wartość liczbową np. -1. Obie formy możemy wykorzystać do walidacji naszej listy. W tym celu zaznaczamy turkusowy obszar z nazwą Spry Select widoczny nieco ponad rozwijaną listą na stronie i zaznaczamy odpowiednie pole w oknie Properties (rysunek 11). Jeśli dodatkowe pole Value pozostało puste, wskazujemy przycisk Do not allow: Balnk Value. Jeśli dodatkowa etykieta na liście zawiera konkretną wartość liczbową (u nas w przykładzie -1) wprowadzamy ją po aktywacji opcji Do not allow: Invalid value w polu obok. Naturalnie także w przypadku rozwijanej listy wybieramy opcję Required w polu Preview States, a następnie wprowadzamy odpowiedni komunikat tekstowy. Jeszcze inaczej wygląda sprawa walidacji przycisków typu Spry Radio Group. Mimo że nie wykorzystujemy ich w naszej pracy, możemy jednak oznaczyć grupę przycisków jako wymaganą do przesłania formularza, a następnie za pomocą dwóch opcji: Empty Value lub Invalid Value sposób przeprowadzenia walidacji (rysunek 12). Ostatni ciekawy sposób walidacji dotyczy pól typu Spry Checkbox, także niewykorzystywanych w naszej pracy. W tym przypadku mamy możliwość nie tylko oznaczenia przycisku jako wymagany (Requied), ale także wymuszenia wskazania dwóch lub większej liczby opcji

Rysunek 11. Elementy walidacji przycisków typu Spry Radio Group
.psd 01/2009 » www.psdmag.org 57

warsztaty

Rysunek 12. Jeśli bez wprowadzenia wymaganych danych użyjemy przycisku Zamówienie, w oknie przeglądarki internetowej wyświetlone zostaną wszystkie przygotowane komunikaty walidacyjne

Rysunek 13. Elementy walidacji przycisków typu Spry Checkbox
jednocześnie. Pola Required oraz Enforce Range dostępne są po zaznaczeniu turkusowego obszaru Spry Checkbox na stronie (rysunek 13). Dla obu typów przycisków Spry Radio Group oraz Spry Checkbox powinniśmy wprowadzić stosowne komunikaty walidacyjne w języku polskim. Po zaznaczeniu opcji Required w polu Initial Value wprowadzamy odpowiedni tekst alertu. Oczywiście wszystkie treści możemy także zmienić w widoku kodu źródłowego strony. Odnalezienie miejsc wymagających zmiany w kodzie strony, z pewnością nie będzie trudnym zadaniem. Po wprowadzeniu stosownych zmian nie pozostaje nam nic innego jak przetestowanie działania formularza w oknie przeglądarki internetowej. Jeśli bez wprowadzenia wymaganych danych użyjemy przycisku Zamówienie, wyświetlone zostaną wszystkie przygotowane komunikaty walidacyjne (rysunek 14). Wszystko działa całkiem dobrze, jest jednak jedno małe ale... Zarówno sposób podświetlania pól formularza, jak i wygląd komunikatów nie pasują do naszej strony. Cóż z tym można zrobić? Nic prostszego, za pomocą edycji dołączonych stylów CSS z łatwością zmodyfikujemy wygląd wszystkich detali formularza i komunikatów walidacji.

Rysunek 14. W celu edycji wyglądu elementów Spry przechodzimy do panelu CSS Styles i lokalizujemy arkusz (automatycznie tworzony jest zewnętrzny arkusz stylów) o nazwie Spry Validation Text Field, Spry Validation Select itp.

Rysunek 15. Oczywiście o ile to konieczne, możemy także kliknąć dwukrotnie nazwę stylu, by przejść do jego edycji w oknie edytora CSS. Wszystkie zmiany w stylach możemy wykonać także ręcznie modyfikując dokument CSS

formatujemy elementy Spry

Do zmiany wyglądu sposobu podświetlenia pól tekstowych skorzystamy oczywiście ze stylów kaskadowych. Co ważne, dzięki Framework Spry, nie mamy konieczności tworzenia wszystkich definicji stylów CSS od początku. Elementy walidacji formularza – Spry to bowiem zestaw odpowiedniego kodu JavaScript, jak i gotowych stylów CSS. Naszym zadaniem jest zatem edycja istniejących właściwości. W tym celu przechodzimy do panelu CSS Styles i lokalizujemy arkusz (automatycznie tworzony jest zewnętrzny arkusz stylów) o nazwie Spry Validation Text Field, Spry Validation Select itp. Tam odnajdziemy odpowiednie właściwości CSS odpowiedzialne za wygląd poszczególnych elementów walidacji. Przykładowo, aby zmienić wygląd komunikatu o wymaganych elementach zamówienia, lokalizujemy definicję o nazwie: .textfiel58

dRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg i w dolnej części panelu CSS Styles wprowadzamy zmiany koloru tekstu czy obramowania. Oczywiście o ile to konieczne, możemy także kliknąć dwukrotnie nazwę stylu, by przejść do jego edycji w oknie edytora CSS. Wszystkie zmiany w stylach możemy wykonać także ręcznie, modyfikując dokument CSS. W podobny sposób edytujemy wszystkie niezbędne style, tak by dopasować wygląd formularza do naszych potrzeb. Paweł Zakrzewski

.psd 01/2009 » www.psdmag.org

warsztaty

interaktywny projekt strony
WWW w formacie PDF
Stałe przywiązanie do magicznego Photoshopa, zwykle kończy się użyciem tej popularnej aplikacji w każdej niemal sytuacji. Nie zawsze jednak daje to tak dobre efekty, jakich w danym przypadku oczekiwaliśmy. Niekiedy warto więc sięgnąć po ciekawą alternatywę np. Adobe Fireworks CS4. Okazuje się, że program Fireworks doskonale sprawdza się podczas tworzenia różnego typu layoutów, projektów i prototypów aplikacji czy też stron internetowych. Zakres dedykowanych narzędzi webowych Fireworksa oraz wygoda działań z pewnością przewyższają możliwości Photoshopa w tej dziedzinie. Podkreślam jednak, że osąd ten dotyczy jedynie tworzenia elementów grafiki internetowej czy aplikacji. Niestety, tylko z punktu widzenia pracy grafika i użycia narzędzi kreatywnych, Adobe Photoshop jest zdecydowanie lepszym i wygodniejszym programem. Warto jednak podkreślić, że pomimo wielu ograniczeń, da się z dużą łatwością przygotować doskonałe projekty stron czy aplikacji internetowych wyłącznie za pomocą Fireworks CS4. Z pewnością stanowi on doskonałą alternatywę dla zakupu wiele droższego Photoshopa w sytuacji, gdy zajmujemy się głównie (lub wyłącznie) tworzeniem stron WWW. Dostępny w pakiecie Web Standard CS4, jest doskonałym dodatkiem do uznanych aplikacji jak Adobe Dreamweaver, Flash czy Contribute. W tym przykładzie, pokusimy się o wykorzystanie programu Fireworks CS4 do budowy prostego, interaktywnego prototypu strony internetowej zapisanego w postaci pliku PDF. Dlaczego PDF? Format PDF już wiele lat temu stał się uznanym standardem wymiany dokumentów elektronicznych. Przygotowanie prototypu aplikacji w tej postaci sprawi, że będzie ona dostępna i bez problemu czytelna dla (niemal) wszystkich użytkowników komputerów. Nie ma chyba bardziej uniwersalnej postaci zapisu efektów naszej pracy jak właśnie PDF. Zachowanie oryginalnego wyglądu, możliwości wprowadzenia elementów interaktywnych sprawiają, że wielu z nas coraz częściej sięga po ten ciekawy program podczas tworzenia wstępnych projektów. Zdecydowanie namawiam do takich działań. Możliwości Adobe Fireworks CS4 są bowiem niezwykle obiecujące. Budowa projektu za pomocą programu Adobe Fireworks nie jest trudnym zadaniem. Podobnie jak w większości innych programów graficznych, wszystkie elementy wizualne pracy możemy tworzyć samodzielnie za pomocą dostępnych narzędzi wektorowych lub bitmapowych. Możemy także importować gotowe obiekty, zdjęcia, a nawet całe projekty utworzone w innych programach. Co więcej, Adobe Fireworks pozwala otwierać prace w całości przygotowane w Photoshopie i zapisane w jego tradycyjnym formacie - PSD. Oczywiście w tym przypadku zachowana zostanie większość elementów edycyjnych w tym między innymi: warstwy, maski, edytowalne teksty, efekty (style warstw) itp. W naszym przykładzie, wstępnie przygotowany projekt zbudowany został z kilkunastu osobnych elementów graficznych. Są
60

Adobe Fireworks CS4 to doskonały program dedykowany do tworzenia, edycji i dostosowywania grafiki na potrzeby internetu. Wielu z nas nie docenia jednak ogromu jego możliwości.
to oczywiście proste elementy bitmapowe – zdjęcia dopasowane do konkretnej pracy za pomocą narzędzi graficznych programu Fireworks (rysunek 1). Cały projekt nie jest oryginalny, odnajdziemy tu: złożone z kilku powtarzających się elementów tło, grafikę nagłówkową, przykładowe teksty i pozostałe elementy graficzne.

Rysunek 1. Projekt strony WWW wykonany za pomocą programu Fireworks może zawierać maski i teksty

Rysunek 2. Na potrzeby niniejszego artykułu, wszystkie elementy składowe projektu połączone zostały w pojedyncze grafiki reprezentujące kolejne strony serwisu. Każda z nich zapisana na osobnej warstwie zawiera kolejny ekran prezentacji/strony internetowej

.psd 01/2009 » www.psdmag.org

interaktywny projekt strony
Aby nadać całości bardziej tradycyjny wygląd strony WWW, pokusiłem się o wyróżnienie sekcji strony za pomocą cienkiego, wektorowego obramowania. Na potrzeby niniejszego artykułu, wszystkie elementy składowe projektu połączone zostały w pojedyncze grafiki reprezentujące kolejne strony serwisu. W rezultacie, cały prezentowany moduł nie jest bardzo złożony i składa się jedynie z kilku grafik bitmapowych zapisanych na osobnych warstwach. Każda z nich zawiera kolejny ekran prezentacji/strony internetowej (rysunek 2). Wcześniejsze spłaszczenie poszczególnych elementów warstw (podstron) nie było w tym przypadku konieczne, jednak do utworzenia wstępnego, interaktywnego projektu, takie podejście ułatwia nam pracę. Pojedyncze ekrany pozwolą łatwiej skupić się na dodawaniu elementów interaktywnych, co w tym przypadku jest naszym głównym zadaniem. Naturalnie, do dalszych prac możemy wykorzystać także projekty budowane za pomocą Photoshopa lub innych programów graficznych. Dzięki użyciu Fireworks CS4, łatwo i wygodnie przekształcimy je w interaktywny PDF, gotowy do wstępnej prezentacji naszym klientom.

Rysunek 3. Na najniższej warstwie znajduje się projekt typowej strony głównej serwisu, w tym przypadku nazwany – Home

budowa dokumentu PNG

Na najniższej warstwie prezentowanego tu dokumentu, znajduje się projekt, który możemy nazwać głównym ekranem nawigacyjnym. Jest to typowa strona główna serwisu, w tym przypadku nazwana Home (rysunek 3). Na pozostałych warstwach rozmieszczone są kolejne projekty podstron przykładowego serwisu WWW. Poprzez włączenie lub wyłączenie odpowiedniej warstwy, za pomocą przycisku o kształcie oczka w palecie Layers [F2], możemy łatwo przejrzeć wszystkie elementy składowe. Jak łatwo zauważyć, poza stroną główną, odnajdziemy tu projekty kilku podstron serwisu zespołu muzycznego – Openspace (rysunek 4). Prezentowany projekt nie zawiera jeszcze żadnych przycisków ekranowych. Główne elementy nawigacyjne (Home, Zespół, Galeria, Media, itp.) to jedynie etykiety tekstowe, które markują interaktywne przyciski ekranowe. Wykorzystamy je w dalszej pracy.

Rysunek 4. Na pozostałych warstwach znajdują się kolejne podstrony serwisu

paleta Pages – dodajemy podstrony

Adobe Fireworks pozwala wygodnie budować interaktywne projekty stron oraz łączy pomiędzy nimi za pomocą palety Pages (Window>Pages lub szybciej [Shift]+[F2]). W praktyce, oznacza to, że do budowy interaktywnego prototypu wykorzystać musimy projekty zapisane na osobnych stronach dokumentu. To dość wygodne i całkiem intuicyjne podejście przypomina budowę tradycyjnych stron WWW. Samo rozmieszczenie kolejnych projektów na stronach nie jest trudnym zadaniem. Wystarczy bowiem powielić istniejącą stronę i za pomocą przycisku Oczko, włączyć lub wyłączyć podgląd odpowiedniej warstwy. W rezultacie, kolejne podstrony naszej pracy będą różniły się jedynie konfiguracją widocznych/niewidocznych warstw. Oczywiście możemy także budować każdą stronę serwisu niejako od początku, kopiując lub importując niezbędne elementy graficzne. Niezależnie od metody, należy doprowadzić do sytuacji, gdy każda strona dokumentu zawierać będzie inny projekt podstrony serwisu. Aby przenieść kolejne warstwy na osobne strony dokumentu, otwieramy paletę Pages [Shift]+[F2] i klikając prawym przyciskiem myszki nazwę pierwszej strony – Page 1, rozwijamy menu kontekstowe. Na dostępnej liście wybieramy polecenie Duplicate Page (rysunek 5). Zaznaczamy drugą stronę serwisu i od razu nadajemy jej konkretną nazwę, w tym przypadku – zespol. Za pomocą zmian widoczności warstw w palecie Layers [F2] odsłaniamy właściwy projekt podstrony (rysunek 6). W ten sam sposób duplikujemy przygotowaną stronę i ponownie zmieniamy nazwę nowej kopii. Omówione kroki powtarzamy kolejno dla wszystkich przygotowanych projektów podstron, przenosząc je na osobną stronę.

Rysunek 5. Aby przenieść kolejne warstwy na osobne strony dokumentu, otwieramy paletę Pages [Shift]+[F2] i klikając prawym przyciskiem myszki nazwę pierwszej strony – Page 1, wybieramy polecenie Duplicate Page

W rezultacie, klikając nazwy stron w palecie Layers w oknie dokumentu, widoczna będzie jedynie odpowiednia strona projektu. W kolejnym kroku dodamy proste elementy interaktywne Hot Spoty.

proste elementy interaktywne – Symbole typu Button

Jeśli w naszej pracy korzystamy z tekstów dodawanych za pomocą Fireworks, możemy łatwo przekształcić je w przycisk
61

.psd 01/2009 » www.psdmag.org

warsztaty

Po wprowadzeniu odpowiednich elementów aktywnych, dodamy łącza, które pozwolą na wprowadzenie interakcji.

interaktywne łącza

Rysunek 6. Zaznaczamy drugą stronę serwisu i od razu nadajemy jej konkretną nazwę, w tym przypadku – zespol. Za pomocą zmian widoczności warstw w palecie Layers [F2] odsłaniamy właściwy projekt podstrony ekranowy, dodając jednocześnie prosty element interaktywny – animację. Oczywiście w podobny sposób możemy także przygotować przyciski o charakterze graficznym, które nie zawierają etykiet tekstowych, a jedynie czytelne i łatwe do zrozumienia grafiki. Aby przekształcić teksty w proste przyciski ekranowe w programie Fireworks, skorzystamy z technik znanych doskonale wszystkim użytkownikom Flasha. Zaznaczamy jeden z tekstów lub odpowiednią grafikę i za pomocą polecenia Convert To Symbol ([Ctrl]+[8]) przekształcamy go w symbol typu Button. W tym przypadku, na wstępnym etapie budowy projektu strony, nie ma sensu, by skupiać się na budowie animowanych detali. Może okazać się tak, że cały projekt zostanie bowiem odrzucony przez Klienta a cała praca pójdzie na marne. Spróbujmy więc przygotować przyciski ekranowe w nieco prostszy sposób. Wykorzystamy w tym celu tzw. Hot Spoty.

Każdy przygotowany Hot Spot może był łączem do kolejnej strony naszego projektu. O ile to konieczne, możemy dodawać odnośniki także do dowolnych stron w internecie, a nawet plików na naszym dysku lokalnym. Wykorzystamy w tym celu panel Properties zlokalizowany w dolnej części okna Fireworks. Aby dodać odpowiedni odnośnik, zaznaczamy pierwszy obszar aktywny – przycisk Home, a następnie w polu Link w panelu Properties z rozwijanej listy wybieramy odpowiednią stronę. W tym przypadku – Page 1, czyli główną stronę serwisu (rysunek 9). W podobny sposób postępujemy dalej. Zaznaczamy obszar Hot Spot ponad przyciskiem Zespół i w polu link wskazujemy stronę o tej nazwie. Kolejne łącza dodajemy analogicznie, zaznaczamy Hot Spot i wybieramy odpowiedni odnośnik w polu link. Oczywiście możliwe jest dodawanie łączy także do innych stron. W tym także plików lokalnych na naszym dysku. W takim przypadku nie korzystamy z listy stron, zaś w polu link ręcznie wprowadzamy odpowiednią lokalizację. Uwaga! Aby dodać łącze do strony w internecie, adres URL powinien mieć postać: http://www.psdmag.org. Jak widać w tym przypadku, nie można zapomnieć o pełnym zapisie poprzedzonym wyrażeniem http://. W przypadku łączy do plików, innych stron na dysku lokal-

Hot Spot to tradycyjny element interaktywny doskonale znany twórcom stron WWW. Określa on za pomocą dołączonego kodu HTML, obszar (najczęściej prostokątny), który może stać się interaktywnym linkiem do innej strony. Grafika, która zawiera kilka zdefiniowanych obszarów Hot Spot, tworzy tak zwaną Image Map – interaktywną mapę obszarów aktywnych obrazu. Najlepszym przykładem użycia elementów Image Map i Hot Spotów jest mapa Polski z podziałem na województwa. Aby odszukać imprezy, firmy czy też lokalne biura urzędów, klikamy miniaturkę województwa, by przenieść się do kolejnej strony serwisu prezentującej odpowiednie informacje. Za pomocą programu Fireworks możemy z łatwością dodawać obszary Hot Spot budowane z myślą o projektach internetowych, ale także projektując interaktywne, wielostronicowe dokumenty PDF. Przechodzimy na główną stroną projektu – Page 1 i za pomocą klawisza [J] wybieramy narzędzie Rectangle Hot Spot (rysunek 7). Przeciągamy nim prostokątny kształt ponad obszarem pierwszeRysunek 7. go przycisku na stronie – Home. W podobPrzechodzimy na ny sposób dodajemy obszary aktywne do główną stroną pro- kolejnych elementów menu. Warto w tym jektu – Page 1 i za miejscu zwrócić uwagę, że dla wygody końpomocą klawisza [J] cowych użytkowników zwykle budujemy obna klawiaturze wy- szary aktywne nieco większe niż ramka tekbieramy narzędzie stowa. Pozwoli to łatwiej korzystać z przygoRectangle Hot Spot towanych przycisków (rysunek 8).
62

dodajemy elementy interaktywne typu Hot Spot

Rysunek 8. Dodajemy obszary aktywne do kolejnych elementów menu. Warto w tym miejscu zwrócić uwagę, że dla wygody końcowych użytkowników zwykle budujemy obszary aktywne nieco większe niż ramka tekstowa

Rysunek 9. Aby dodać odpowiedni odnośnik, zaznaczamy pierwszy obszar aktywny – przycisk Home, a następnie w polu Link w panelu Properties z rozwijanej listy wybieramy odpowiednią stronę

.psd 01/2009 » www.psdmag.org

Rysunek 10. Utworzony projekt zapisany w formacie PDF, zachowuje nie tylko swój oryginalny wygląd (fonty, grafika, jakość), ale także wprowadzone łącza i strony
nym korzystamy z adresów względnych typu: innaStrona.html lub dane.pdf, pamiętając jednak, by otwierane dokumenty znalazły się w tym samym katalogu co nasz projekt. Oczywiście możemy używać także dodatkowych katalogów i wprowadzać adresy typu: strony/innaStrona.html. Na tym etapie możemy już sprawdzić działanie naszej strony. Za pomocą kombinacji [Ctrl]+[F12] lub [Cmd]+[Shift]+[F12] na Macu, otwieramy podgląd projektu w oknie domyślnej przeglądarki internetowej. Jak łatwo zauważyć, po najechaniu myszką na kolejne przyciski (Hot Spot), kursor zmienia swój kształt, informując nas o wprowadzonym odnośniku. Kliknięcie przycisku przenosi nas do wybranej strony. Niestety na kolejnej stronie nie działają już wprowadzone łącza. To właśnie musimy zmienić.

łącza do kolejnych stron

Za pomocą palety Pages, przechodzimy na pierwszą stronę projektu i zaznaczamy wszystkie wprowadzone Hot Spoty. Kopiujemy je ([Ctrl]+[C] lub [Cmd]+[C] na Macu) i otwierając kolejne strony, wklejamy na wszystkich podstronach serwisu. W rezultacie te proste elementy nawigacyjne dostępne są na wszystkich podstronach projektu. Pozwoli to na łatwą i szybką prezentację projektu potencjalnemu klientowi. Gotowy projekt testujemy za pomocą skrótu [Ctrl]+[F12] lub [Cmd]+[Shift]+[F12] na Macu. Jeśli w przeglądarce internetowej wszystkie łącza działają poprawnie, możemy pokusić się o zapis ostatecznej formy naszej pracy w postaci pliku PDF. Taki dokument możemy łatwo przesłać do oceny klientowi.

budujemy interaktywny dokument PDF

W najnowszej odsłonie programu Adobe Fireworks CS4 dodano możliwość zapisu wielostronicowych projektów w formacie PDF. Co ważne, tego typu podejście zachowuje wszystkie elementy interaktywne, wprowadzone za pomocą prostych Hot Spotów i łączy. Zobaczmy więc jak to działa. Wybieramy polecenie File>Export ([Ctrl]+[Shift]+[R] lub [Cmd]+[Shift]+[R] na Macu) i w oknie dialogowym wskazujemy format zapisu naszej pracy – PDF. Wprowadzamy odpowiednią nazwę pracy oraz jej lokalizację na dysku i gotowe! Utworzony projekt zapisany w formacie PDF zachowuje swój oryginalny wygląd (fonty, grafika, jakość), ale także wprowadzone łącza i strony. W ten sposób niemal każdy użytkownik komputera z dowolnym systemem operacyjnym, może łatwo prześledzić działanie prototypu strony WWW lub innej aplikacji na podstawie wstępnego projektu (rysunek 10). Dużo łatwiej rozmawiać o stronie przedstawiając jej interaktywny projekt, a i klienci traktują poważniej tak przedstawione prace. Paweł Zakrzewski

warsztaty
średni
Fireworks CS4

wiwat sztuczne ognie!
łatwiejsze życie Webmastera-grafika
Jeżeli jesteś projektantem lub grafikiem stron WWW, zapewne nie cierpisz programować w ActionScript, Javie, HTML-u, Ajaksie. Przygotowujesz wstępne projekty, a potem przenosisz je np. do Dreamweavera? Ja polecam Fireworks CS4, który przeistoczył się z brzydkiego kaczątka w piękną księżniczkę.
Firma Adobe włożyła wiele wysiłku, aby program, który do tej pory miał opinię mało przydatnego, stał się produktem alternatywnym dla Dreamweavera. Program ten polecam szczególnie początkującym webmasterom i grafikom chcącym projektować strony WWW. W Fireworksie znajdziesz bardzo dużo podobieństw do znanych programów jak Illustrator, Freehand, Photoshop. Większość funkcji i narzędzi będziesz znał z wymienionych wyżej programów, a ich obsługa będzie łatwa i intuicyjna. Proces tworzenia bardzo przypomina pracę w programie wektorowym, dając projektantowi wielkie możliwości ograniczone tylko jego wyobraźnią. Przyjrzyjmy się zmianom, jakie dokonały się w interfejsie programu Fireworks CS4 (rysunek 1). Na pierwszy rzut oka, w porównaniu do poprzedniej wersji, interfejs wydaje się bardziej interesujący, czyściej zaprojektowany i mocniej zintegrowany z innymi programami z pakietu CS4. Po lewej stronie znajdują się narzędzia (toolbox) podzielone na: bitmapowe, wektorowe i webowe, co ułatwia użytkownikowi wybór i używanie narzędzi. Po lewej stronie znajdują się panele a na dole właściwości. Po krótkiej pracy z programem zauważymy bardzo istotną zmianę, otworzenie wielu elementów powoduje ułożenie ich w zakładki. Jest to bardzo wygodne, bardzo przyśpiesza pracę. Wszystkie elementy znajdują się jakby na ramie, uniemożliwiając przypadkowe przełączenie na pulpit lub inny program, co ułatwia pracę z programem nowym użytkownikom komputerów ze znaczkiem jabłka. Użytkownicy Macintosha z pewnością docenią tę zmianę i przyzwyczają się do takiej formy interfejsu, natomiast tradycjonaliści mogą powrócić do starych przyzwyczajeń, wchodząc do panelu Windows i wyłączając opcję Use Aplication Frame (rysunek 2). Wraz ze zmianą wyglądu paneli, na wygodniejszy (taki sam jak w Photoshopie czy Illustratorze) zmienił się sposób ich układania. Możesz je dowolnie grupować, układać w zakładkach, zmieniać kolejność, wyciągać z grupy i umieszczać w dowolnym, dogodnym miejscu. Panele możemy wyświetlać jako ikony, ikony z opisem, oraz

w trybie rozszerzonym (jako otwarte panele zajmują dużo miejsca). Jaki wybierzesz rodzaj wyświetlania paneli, zależy tylko od Ciebie i od wielkości monitora, na którym pracujesz. Program pozwala na zapisanie wypracowanego układu palet (rysunek 3). Wygląd programu bardzo się zmienił i jest bardziej spójny z pozostałymi aplikacjami CS4, do tego jest łatwiejszy w obsłudze. Zaczynając pierwszy raz pracę z programem, otwieramy preferencje. W Fireworks CS4 pojawia się nowy panel Photoshop Import/Open. Panel ten opisuje zachowanie się Fireworksa przy importowaniu plików PSD z Photoshopa, dzięki zaznaczeniu odpowiednich

Rysunek 1. Wygląd interfejsu programu Fireworks CS4. Widoczny po lewej Toolbos, palety wyświetlane w trybie expanded po prawej i na dole paleta properties. Widok znajomy z programów: Illustrator, Photoshop
64

Rysunek 2. Wyłączenie opcji Use Aplication Frame powoduje powrót do starych skrótów przełączających między dokumentami – Option

.psd 01/2009 » www.psdmag.org

wiwat sztuczne ognie!

Rysunek 5. Ilustracja pokazująca działanie Smart Guides dla jednego i dla wielu elementów na stronie
sza pracę i jest bardzo intuicyjna, wystarczy chwila pracy i bez problemu wyczujemy, jak zachowują się Smart Guides. W połączeniu z paletą Align (wyrównanie) otrzymujemy komplet potężnych narzędzi do pozycjonowania i wyrównywania elementów na stronie (rysunek 5). Nową funkcją edycji tekstu jest możliwość umieszczania go w ramce, czego bardzo brakowało w poprzednich wersjach. W połączeniu z możliwością umieszczania tekstu na krzywej otrzymujesz wspaniałe możliwości edycyjne i nie musisz korzystać z pomocy innych programów. Przy projektowaniu stron bardzo przydatny staje się panel Pages (strony). Za jego pomocą w jednym pliku możesz zapisać całą strukturę strony tj. stronę główną i wszystkie podstrony. Element stały (powtarzający się na wszystkich stronach) zapisujemy jako Master Page i powielając ją w panelu Pages, otrzymujemy podstrony, oszczędzając bezcenny czas oraz mając pewność, że wszystkie stałe elementy strony na wszystkich podstronach są w takim samym położeniu. Dokonując zmian w Master Page np. inny układ płatów czy inny rodzaj przycisków, mamy świadomość, że będą one widoczne wszystkich podstronach. Genialna funkcja oszczędzająca bardzo dużo czasu i pozwalająca współpracować z najbardziej niezdecydowanymi klientami. Teraz możemy reagować bardzo szybko na ich zachcianki, nie tracąc za dużo czasu. Zbliżając się do końca artykułu, w którym chciałem zachęcić do używania programu Fireworks CS4. Chcę nadmienić, że zaimplementowano w nim również możliwość korzystania z Arkuszy Stylów (CSS), wprowadzono integrację z usługą internetową Kuler (znaną z Illustratora), możliwość eksportu stron do interaktywnych PDF-ów, wykonywania prototypów aplikacji internetowych i umieszczania ich w Adobe Air, eksportowania stron z zachowaniem struktury CSS do Dreamweavera. Dostajemy też możliwość skorzystania z usługi Adobe ConnectNow, dzięki której możemy udostępnić kilku klientom (maksymalnie trzem) nasz ekran niezależnie od platformy sprzętowej. Jest to bardzo duże udogodnienie, pozwalające zaoszczędzić dużo bezcennego czasu potrzebnego zazwyczaj na dojazd do klienta. W tym momencie warto też wspomnieć, że wraz z programem otrzymujemy pokaźną ilość gotowych menu, przycisków, elementów multimedialnych, gotowych elementów do formularzy itp. Stworzenie z nich wstępnego projektu potrwa tylko chwilę. Jest szansa, że klient będzie zamykał drzwi Twojej firmy, a Ty będziesz gotowy, aby umieścić pierwszy wstępny projekt w sieci. Namawiam każdego początkującego webmastera z przeszłością DTP do wypróbowania Fireworks CS4. Każdy DTP-owiec poczuje się w nim znajomo, większość funkcji pochodzi z programów, które wykorzystywane są w tej branży codziennie, reszta jest bardzo intuicyjna i łatwa do ogarnięcia. W wersji CS4 Fireworks jest bardzo stabilnym i szybkim programem, który z czasem stanie się dla Ciebie z pewnością podstawowym lub pomocniczym narzędziem do budowy wspaniałych stron internetowych. Piotr Ogiejko
65

Rysunek 3. Przykłady ustawień paneli: expanded, ikony z nazwami, tylko ikony
opcji pliki PSD są importowane z warstwami, filtrami, i maskami, co jest dużym udogodnieniem przy projektowaniu. Przy importowaniu Photoshopowego pliku mamy możliwość umieszczenia go w osobnym folderze w panelu warstwy. Reszta preferencji nie uległa poważniejszym zmianom (rysunek 4). Widoczne zmiany zauważysz podczas rysowania i przesuwania elementów. Pojawią się tzw. Smart Guides. Przy przesuwaniu jedynego elementu na stronie, Smart Guides (pionowe i poziome) pojawiają się przy zbliżaniu się krawędzi elementu do środka strony. Jeżeli mamy dwa lub więcej elementów to Smart Guides pokazują wyrównanie do górnej, bocznej krawędzi lub do środka – w zależności od ustawienia elementów. Funkcja bardzo przyśpie-

Rysunek 4. Panel preferancji z opcjami dla importu i otwierania plików psd w programie Fireworks

.psd 01/2009 » www.psdmag.org

warsztaty
łatwy
Acrobat Connect

razem czy osobno?
Wraz z nadejściem pakietów Adobe Creative Suite 4 firma Adobe zaproponowała swym użytkownikom nowość – możliwość przeprowadzenia konferencji na żywo przez Internet. Co nam to daje? Otóż przede wszystkim możliwość pracy wraz z klientem nad jednym projektem poprzez konto na serwerze Acrobat.com. Czy tylko?
Brzmi to troszkę niewiarygodnie i jak się zaraz okaże, nieprawdopodobnie działa. Wyobraźmy sobie sytuację, gdy wraz z naszym klientem na żywo pracujemy nad projektem, Klient mówi nam - bardziej w prawo, proszę zmienić zdjęcie itp. A wszystko w czasie niemal rzeczywistym odbywa się zarówno na naszym, jak i jego monitorze. Brzmi fascynująco i w sumie tak też działa. Sam nie wiem czy jest to bardzo dobra, czy bardzo zła funkcja. Z jednej strony to rewelacja, że klient może wraz ze mną uczestniczyć w procesie budowy projektu. Z drugiej strony może być to przysłowiowym gwoździem do trumny i nie tylko nie pozwoli na ukończenie projektu w terminie, ale także kompletnie zrujnuje nam relacje z klientem. Oczywiście przedstawiam tu tylko jeden z możliwych scenariuszy. Jeśli spojrzymy na możliwości, jakie oferuje nam funkcja Share My Screen z innej strony, to może okazać się to całkowicie rewelacyjnym rozwiązaniem. I raczej tak ją oceniam, mimo wcześniejszych wątpliwości. Wyobraźmy sobie sytuację, gdy zespół projektowy podczas prac nad jednym dokumentem może na żywo dokonywać poprawek, niezależnie od tego gdzie na świecie znajdują się jego członkowie. To jest prawdziwa rewelacja! Spróbujmy przeanalizować możliwości, jakie oferują programy pakietu Creative Suite 4 w tym właśnie zakresie.

pokaż mi swój ekran, a powiem Ci jak pracujesz...

ekran, lecz przede wszystkim elementy bieżącego projektu. Istota działania tej funkcji jest niezwykle prosta. Aktywujemy własne konto na serwisie Acrobat.com i w zasadzie od razu możemy cieszyć się z możliwości użycia Share My Screen w dowolnej aplikacji Adobe. Spróbujmy prześledzić działanie tej funkcji na przykładzie programu Adobe Indesign CS4. W tym celu, otwieramy dowolny dokument InDesign i za pomocą polecenia File>Share My Screen aktywujemy możliwość podglądu danych z programu za pośrednictwem Internetu (rysunek 1).

pokaż mi swój ekran

Każdy program pakietu Adobe CS4 posiada prostą funkcję Share My Screen dostępną w menu górnym File. Pozwala ona na pokazanie ekranu własnego monitora dowolnym współpracownikom, klientom czy wreszcie chętnym z całego świata. Nie chodzi tu tylko o własny

Rysunek 2. Bezpośrednio po wywołaniu funkcji Share My Screen otwiera się okno dialogowe, gdzie musimy wprowadzić dane dotyczące naszego konta w serwisie Acrobat.com

Rysunek 1. Za pomocą dostępnego w każdej aplikacji Adobe CS4 polecenia Share My Screen, możemy zaprosić dowolnego użytkownika Internetu do wirtualnego spotkania i dyskusji nad projektem
66

Rysunek 3. Aby założyć konto Acrobat.com, wystarczy przejść na stronę o tej samej nazwie i po wprowadzeniu wymaganych informacji aktywować swoje konto

.psd 01/2009 » www.psdmag.org

razem czy osobno?
W pierwszej chwili, otwiera się okno dialogowe Share My Screen (rysunek 2), gdzie musimy wprowadzić dane dotyczące naszego konta w serwisie Acrobat.com (rysunek 3). Utworzenie takiego konta jest całkowicie bezpłatne i daje możliwość wykorzystania oprogramowania Acrobat Connect i połączenia tworzonego nawet dla trzech odległych użytkowników jednocześnie. W rezultacie, darmowe konto Acrobat.com, pozwala nie tylko na wspólną pracę, ale także na tworzenie niewielkich szkoleń online. Oczywiście, płatne konto Acrobat Connect Pro oferuje daleko większe możliwości i lepszą jakość połączeń. Nie zawsze jednak warto wydawać pieniądze na usługę, której nie znamy. Dzięki funkcji Share My Screen możemy wcześniej przetestować jak działa Acrobat Connect i w razie potrzeby skorzystać z możliwości, jakie oferuje nam wersja Pro. Bezpośrednio po zalogowaniu do konta, otwiera się nowe okno programu Acrobat Connect, które umożliwia nam podjęcie dalszych działań (rysunek 4). W tym miejscu, mamy przede wszystkim możliwość wysłania zaproszenia wraz z adresem naszej unikalnej sesji do dowolnego użytkownika komputera w dowolnym miejscu na świecie. Co ważne, adresat wiadomości nie musi posiadać konta Acrobat.com, nie musi także posiadać żadnej wersji InDesign, ani nawet nowej wersji Acrobata. Niestety nie miałem możliwości sprawdzenia, jak zachowa się komputer bez zainstalowanego Acrobata lub Acrobat Readera - ponieważ w dzisiejszych czasach trudno znaleźć taką maszynę. Drugi komputer testowy, z jakiego korzystałem podczas pisania tego artykułu, wyposażony był w pełną wersję Acrobata 6 w języku polskim. Na kolejnym, Macu miałem do dyspozycji pełną wersję programu Adobe Acrobat 9 Pro. W obu przypadkach możliwości, jakie miał uczestnik spotkania online były jednakowe. Odnoszę wrażenie, że do współpracy z serwisem/ aplikacją Acrobat Connect nie jest wymagana żadna wersja Acrobata! Acrobat Connect czy też pełna wersja Acrobat Connect Pro to następca programu Macromedia Breeze. Mam nieodparte wrażenie, że programiści Macromedia projektując swój program, nie myśleli o integracji z konkurencyjnym wtedy Acrobatem. Za pomocą przycisku Send Email Invitation możemy bezpośrednio z Connect przesłać zaproszenie do udziału w sesji online (rysunek 5). O ile to konieczne, możemy także skopiować widoczny powyżej adres wirtualnego spotkania i przesłać go wybranym użytkownikom w sposób tradycyjny. Po przesłaniu zaproszeń do spotkania zamykamy okno Meet Online With Others i rozpoczynamy właściwą sesję. Nasze działania rozpoczęliśmy od programu Adobe InDesign, oznacza to, że po uruchomieniu przyciskiem Share My Computer Screen, wszyscy zaproszeni i zalogowani użytkownicy zobaczą bieżący dokument projektowany za pomocą tej właśnie aplikacji. Daje to niezwykłe możliwości dostosowania projektu do szczególnych potrzeb czy też oczekiwań klienta, czy też współpracownika. Zanim jednak zaproszeni użytkownicy będą mogli na żywo obserwować zmiany jakie wprowadzamy w budowanej pracy, musimy zezwolić im na udział w spotkaniu. Prześledźmy więc działania, jakie

Rysunek 5. Connect otwiera okno domyślnego klienta poczty i automatycznie tworzy stosowne zaproszenie

Rysunek 6. Nowy użytkownik musi zalogować się do serwisu. Co ważne, nie musi on mieć konta na serwisie Acrobat.com

Rysunek 7. Jako organizator spotkania zostajemy poinformowani o przyłączeniu kolejnego uczestnika. To my decydujemy o tym czy może on wejść do naszego wirtualnego pokoju

Rysunek 4. Za pomocą przycisku Send Email Invitation możemy bezpośrednio z Connect przesłać zaproszenie do udziału w sesji online

Rysunek 8. Każdy uczestnik, ma możliwość pisania wiadomości tekstowych online, a także komunikacji głosowej za pomocą mikrofonu i słuchawek
67

.psd 01/2009 » www.psdmag.org

warsztaty

Rysunek 9. Administrator spotkania ma dodatkowe możliwości zarządzania połączeniem
musi wykonać typowy użytkownik komputera, by móc dołączyć do wirtualnego spotkania oferowanego przez użytkowników oprogramowania Adobe CS4.

Rysunek 11. Fragment tekstu edytowany przez użytkownika. Dziwnie czuje się w tej chwili administrator komputera. Zmieniają się narzędzia, a także nasz projekt – to działa!

Każdy zaproszony użytkownik informowany jest o wirtualnym spotkaniu za pośrednictwem poczty elektronicznej. Oczywiście, warto wcześniej uzgodnić termin i czas spodziewanej prezentacji. Sam e-mail nie jest wszechwładny, jeśli nasz klient czy współpracownik nie korzysta w danej chwili z Internetu, tego typu zaproszenie nie zda egzaminu. Zatem ustna lub telefoniczna konsultacja terminu i godziny wirtualnego spotkania może okazać się nieunikniona. Przesłana z programu Acrobat Connect wiadomość e-mail zawiera łącze do naszego spotkania. Najprościej, gdy zaproszony użytkownik skorzysta bezpośrednio z linku przesłanego w treści maila. Oczywiście może on także skopiować i wkleić lub po prostu wpisać adres spotkania w oknie dowolnej przeglądarki internetowej (rysunek 6). Co chyba zrozumiałe, samo uruchomienie programu Connect nie jest wystarczające do wzięcia udziału w spotkaniu online. Każdy nowy użytkownik pozostaje zablokowany do czasu, gdy organizator spotkania zezwoli na jego udział. To całkiem wygodne rozwiązanie. Jako organizator spotkania dostajemy informacje o przyłączeniu kolejnego uczestnika. To my decydujemy o tym czy może on wejść do naszego wirtualnego pokoju (rysunek 7). Jeśli tak się stanie, każdy z dołączonych użytkowników zobaczy ekran naszego komputera – w tym przypadku będzie to program Adobe Indesign (rysunek 8). Każdy uczestnik ma możliwość pisania wiadomości tekstowych online, a także w komunikacji głosowej za pomocą mikrofonu i słuchawek. W rezultacie prowadzący spotkanie, może na żywo reagować na opinie i uwagi uczestników. Co nam to daje? Przede wszystkim możliwość dopasowania wyglądu projektu do potrzeb klienta, współpracownika czy szefa. Dzięki użyRysunek 10. W razie pilnej ciu technologii Acrobat Connect potrzeby, możemy zezwolić wymiana informacji na żywo staje wybranemu użytkownikowi na się prosta i dostępna dla każdego wykonywanie działań bezpoużytkownika komputera (z dostęśrednio na naszym komputerze pem do Internetu) (rysunek 9).
68

logowanie zaproszonych użytkowników do wirtualnego spotkania

Rysunek 12. Konto Acrobat Connect pozwala na połączenie do trzech użytkowników jednocześnie. Oferuje ponadto szereg innych ciekawych udogodnień

wspólna praca

Na tym nie kończą się jednak możliwości, jakie oferuje nam konto Acrobat.com. Każdy uczestnik spotkania może dynamicznie uczestniczyć w pokazie. Jeśli my jako organizatorzy spotkania, zezwolimy na interakcję. Każdy użytkownik może nie tylko śledzić zmiany, jakie my nanosimy w naszym projekcie, ale także samodzielnie modyfikować bieżący dokument InDesign (rysunek 10). Co ważne, żaden z dołączonych użytkowników nie musi posiadać programu InDesign, wszystkie operacje wykonuje bowiem bezpośrednio na naszym komputerze (poprzez Internet). Dzięki użyciu programu Acrobat Connect i funkcji Share My Screen modyfikuje on projekt na naszym dysku (rysunek 11). Sam nie wiem czy jest to dobry pomysł. Jeśli wyobrazimy sobie klienta, który samodzielnie przestawia elementy projektu i buduje dokument według własnych pomysłów, szybko okaże się, że całkowicie zaburzy to charakter naszej pracy. Z drugiej strony na wstępnym etapie pracy, tego typu możliwości pozwolą szybko znaleźć właściwe rozwiązania.

jak to działa w praktyce?

Różnie, wiele zależy od szybkości łącza jakim dysponujemy my i nasi współpracownicy. Na łączu typu Neostrada 1MB/s cały serwis działa poprawnie i mimo zauważalnego opóźnienia pozwala na zdalną pracę. Większa liczba uczestników oraz kiepskiej jakości łącze zdecydowanie pogarszają jakość takiego połączenia. Warto jednak spróbować możliwości, jakie oferuje funkcja Share My Screen w praktyce. A nóż okaże się to doskonałym pomysłem na komunikację z klientem czy też współpracownikami. Ogromne słowa uznania dla Adobe za udostępnienie wszystkim użytkownikom ich oprogramowania takiej wspaniałej możliwości. Jak wykorzystamy to w praktyce, zależy już od naszych pomysłów możliwości technicznych i wyobraźni. Nawet bezpłatne konto Acrobat Connect oferuje nam dużo więcej możliwości. Wszyscy, którzy nie próbowali tego w praktyce, powinni zaraz to przetestować (rysunek 12). Paweł Zakrzewski

.psd 01/2009 » www.psdmag.org

sprzęt dla grafika
HP zaleca system Windows Vista® Business

HP EliteBook 8730w
dla mobilnego grafika
Mobilna stacja robocza HP EliteBook 8730w została zaprezentowana przez producenta na tegorocznej konferencji SIGGRAPH. Jest to jeden z pierwszych notebooków wyposażony w procesor 4-rdzeniowy na platformie Intel Centrino 2. Zajrzyjmy do środka.
70 .psd 01/2009 » www.psdmag.org

HP EliteBook 8730w dla mobilnego grafika
HP zaleca system Windows Vista® Business procesory

Platforma Intel Centrino 2 miała swoją premierę w czerwcu 2009 roku. Nowa architektura obsługuje 8GB pamięci RAM DDR2 (do 800Mhz) i DDR3 (do 1033Mhz) oraz CPU wykonane w 45nm procesie technologicznym. Umożliwia to instalację m.in.: 2-rdzeniowych procesorów opartych na jądrze Penryn+ (Intel® Core™2 Extreme) lub 4-rdzeniowych procesorów opartych na jądrze Penryn XE (Intel® Core™2 Quad-Core, do 12MB cachu drugiego poziomu [!]). Oznacza to. że do rąk otrzymujemy pełne sprzętowe wsparcie dla 64-bitowych aplikacji. Siłą rzeczy instalacja nowego 64-bitowego Creative Suite 4 znajduje teraz swoje uzasadnienie także w mobilnych urządzeniach. Notebook dostępny jest wraz z zainstalowanym systemem Windows Vista®. Użytkownik może zdecydować się na konkretną wersję: Home Basic, Buisness 32-bit, Buisness 64-bit lub instalowany na życzenie Windows XP Professional. Wybór 64-bitowego systemu operacyjnego w kontekście platformy Centrino 2 wydaje się naturalną konsekwencją zakupu sprzętu tej klasy. Niezwykłą podporą dla systemu oraz procesów graficznych jest możliwość wyboru high-endowych kart graficznych dwóch wiodących producentów: ATI (Mobility FireGL V5725) lub NVIDIA (Quadro FX 3700M ewentualnie Quadro FX 2700M) z obsługą do 1GB pamięci video. Implementacja kart z serii Quadro powinna zainteresować użytkowników pracujących w środowisku CAD. Oczywiście oba standardy wpierają najnowsze wersje bibliotek OpenGL i DirectX oraz udostępniają podwójne cyfrowe wejście wideo Dual Link DVI. Notebook możemy także podpiąć do zewnętrznego wyświetlacza obsługującego standard wysokiej rozdzielczości, co umożliwia nam port HDMI. Cieszy także coraz bardziej powszechne implementowanie urządzeń optycznych z możliwością odtwarzania nośników w standardzie Bluray, który pozwala odczytać do 50GB danych na dwuwarstwowym nośniku. W drugim przypadku jest to szczególnie przydatne rozwiązanie podczas pracy w systemie do nieliniowej edycji wideo. Kolejny ukłon w stronę użytkownika to wejście eSata, standard który staje się coraz bardziej konkurencyjnym rozwiązaniem względem Firewire (1394a/b) i USB 2.0 (oba znalazły swoje miejsce w HP EliteBook 8730w). Port eSata umożliwia nam podpięcie dysku twardego, który może pełnić rolę zewnętrznego nośnika w standardzie SATA II. Dzięki temu przepustowość danych osiąga 150-300MB/s. Po-

Vista do wyboru

Rysunek 2. Mobilna stacja HP EliteBook 8730w
jemność dysku podyktowana jest po prostu modelem, na który się zdecydujemy. W dobie coraz powszechniej stosowanych dysków o pojemności przekraczającej 1TB daje to ogromne możliwości. Jeśli to rozwiązanie nie jest wystarczające dla wykorzystywanych procesów, zawsze możemy skorzystać z wnęki rozszerzeń obsługującej dwa rodzaje dysków twardych. Instalacja opcjonalnego drugiego dysku twardego umożliwia tworzenie kopii lustrzanych w trybie RAID 1 Mirroring lub w trybie RAID 0 Striping.

karty graficzne

monitor, energia i klawiatura

peryferia

Producent przedstawił także szerokokątny 17 calowy wyświetlacz oparty na technologii wykorzystującej diody LED (tzw. DreamColor) – dostępny tylko w konfiguracji z kartami NVIDIA. Jego natywna rozdzielczość wynosi 1920x1200 pikseli. Wzmocniona obudowa wykonana ze stopu magnezowego oraz klawiatura DuraKeys znacznie zwiększają bezpieczeństwo i odporność notebooka na intensywne użytkowanie. Dodatkowe wyposażenie obejmuje również 2 megapikselową kamerę internetową oraz szereg programowych rozwiązań HP pomagających optymalizować system oraz zabezpieczyć dane. Żywotność baterii w zależności od technologii na którą się zdecyduje użytkownik wynosi od 4h do 9h 45min. Coraz wyraźniej zaznacza się tendencja wdzierania się urządzeń mobilnych w sektor, który dotychczas zdominowany był przez komputery stacjonarne. Małe wymiary notebooka, dodatkowy pojemny dysk twardy oraz dwa monitory mogą sprawić, że nasze stanowisko pracy spełnia rolę stołu montażowego. Wykorzystanie 64-bitowych procesów i rozszerzonej pamięci RAM, powoduje że stajemy się mobilni, wydajniejsi i co najważniejsze zużywamy mniej energii. HP EliteBook 8730w jest na dobrej drodze do utrwalenia tej tendencji. Artykuł powstał we współpracy z firmą HP

Rysunek 1. Stanowisko pracy: 2 monitory 24-calowe HP LP2475w współpracujące ze stacją roboczą HP EliteBook 8730w umieszczoną w standzie HP Dual-Monitor Stand wraz ze stacją dokującą HP 2008 Advanced Docking Station, klawiatura i mysz
.psd 01/2009 » www.psdmag.org

Microsoft, Windows oraz Windows Vista są zastrzeżonymi znakami towarowymi lub znakami handlowymi Microsoft Corporation zarejestrowanymi w USA i/lub w innych krajach. Niektóre funkcje systemu Windows Vista wymagają dodatkowego lub zaawansowanego sprzętu. Szczegółowe informacje można znaleźć na stronach www.microsoft.com/windowsvista/getready/hardwarereqs.mspx oraz www.microsoft.com/windowsvista/ getready/capable.mspx. Program Doradca uaktualnienia systemu Windows Vista jest przydatny przy sprawdzaniu, które funkcje systemu Windows Vista będą działały na tym komputerze. Program ten można pobrać ze strony www.windowsvista.com/upgradeadvisor.

71

warsztaty fotomontaż

łatwy | 00 min. | materiały na WWW Photoshop 7.0 | 3DStudio MAX łatwy | 00 min. | film na CD Photoshop 7.0 | 3DStudio MAX łatwy | 30 min. | pliki na CD średni | Photoshop CS2 00 min. | film i pliki na CD Photoshop 7.0 | 3DStudio MAX trudny | 00 min. | pliki na CD Photoshop 7.0 | 3DStudio MAX

72

01/2009 .psd 12/2008 » www.psdmag.org

fotomontaż

londyńska
ulica mlekiem płynąca
Często nasze nieudane zdjęcia lądują w koszu lub do nich nie zaglądamy. W tym tutorialu zaprezentuję, jak z nieudanego zdjęcia londyńskiej ulicy zrobić barwną fotografię wykorzystując inne zdjęcia w formie fotomontażu.

01 bliźniacze wieże

Otwieramy w Photoshopie nasze zdjęcie do obróbki. W tym przypadku jest to zdjęcie londyńskiej ulicy, które powielamy na nową warstwę [Ctrl]+[J]. Za pomocą polecenia [Ctrl]+[T]>Odwróć poziomo (Flip Horizontal) przekształcamy je w poziomie w celu uzyskania dwóch bliźniaczych wież. Dodajemy maskę warstwy i dowolnym pędzlem (Brush) usuwamy zbędne fragmenty fotografii. Następnie łączymy warstwy.

03 staw, drzewa i krzaki

Na nowej warstwie dodajemy zdjęcie ze stawem, które wkomponujemy pomiędzy nasze dwie wieże ([Ctrl]+[T]), tak aby zakryć całą ulicę. Dodatkowo dodajemy na kolejnej warstwie drzewa i krzaki, które możemy skopiować z innego dowolnego zdjęcia lub namalować za pomocą gotowych pędzli pobranych z serwisu www.deviantart.com. Uzyskane warstwy z drzewami dopasowujemy za pomocą polecenia [Ctrl]+[U], Barwa/Nasycenie (Hue/Saturation) oraz ustawiamy tryb mieszania na Ściemnianie liniowe (Darker Color).

02 retusz wież i budynków

Tak uzyskane symetryczne wieże powielamy na nową warstwę za pomocą skrótu [Ctrl]+[J]. Ustawiamy tryb mieszania na Łagodne światło (Soft light) oraz za pomocą krzywych [Ctrl]+[M] korygujemy nasze zdjęcie. W tym przypadku dokonałam rozjaśnienia, gdyż fotografia jest za ciemna. Retuszujemy budynki, tzn. zamalowujemy niepotrzebne przebarwienia, plamki itp. Następnie za pomocą dowolnej tekstury tworzymy fakturę ścian budynków - żeby były lekko chropowate.

04 wodospad

Na nowej warstwie Shift+Ctrl+N, dodajemy nowe zdjęcie z wodospadem, Zdjęcie dopasowujemy za pomocą Ctrl+T w prześwit między wieżami. Tryb mieszania zdjęcia z wodospadem ustawiamy na Jasność (Brightness). Dodajemy maskę za pomocą której usuwamy zbędne elementy zdjęcia z wodospadem. Proponuje używać maski zamiast gumki, gdyż w dowolnym momencie zapewnia nam możliwość korekty jeśli za dużo usuniemy, używając na przemian pędzla czarnego lub białego.

.psd 01/2009 » www.psdmag.org

73

fotomontaż

05 wodospad o zachodzie słońca

Dodajemy koleją nowa warstwę [Shift]+[Ctrl]+[N], na której umieszczamy zdjęcie z zachodem słońca i ustawiamy je poniżej naszego zdjęcia z wodospadem. Zdjęcie dopasowujemy za pomocą [Ctrl]+[T] w prześwit między wieżami, w taki sposób, aby słońce lekko nam się wyłaniało nad wodospadem. Dodajemy maskę za pomocą której usuwamy zbędne elementy zdjęcia.

08 kolorowe motylki

Dodatkowo, żeby nasze motylki wyglądały bardziej kolorowo, za pomocą narzędzia Rozjaśnianie (Dodge Tool), Tryb – Półcienie (Range-Midtones), Ekspozycja (Exposure) – 50% rozjaśniamy fragmenty każdego motylka (skrzydełka lub środek). Efekt ten sprawi, że nie będą sztuczne i jednobarwne.

0 6 chmury

Na samym dole naszego projektu dodajemy nową warstwę z chmurami. Proponuję znaleźć chmury z zabarwieniem zachodzącego słońca lub za pomocą [Ctrl]+[U] dodać nasycenie i barwę. Ja dodatkowo ustawiłam dla tej warstwy tryb mieszania na Światło punktowe (Pin light) oraz Jasność (Brightness) +53. Najlepiej jest połączyć kilka różnych zdjęć chmur, dzięki czemu uzyskamy efekt wielu kłębiastych chmurek.

09 londyńska ulica mlekiem płynąca

Na zakończenie dodałam więcej kłębiastych chmur, dostosowując Barwę/Nasycenie (Hue/Saturation) z uwzględnieniem zachodzącego słońca oraz dla warstwy z wieżami dodałam tryb mieszania ustawiony na Ostre światło (Hard light), co sprawiło, że nasz projekt stał się bardziej wyrazisty i nasycony kolorami. Katarzyna Sadło

07 definiujemy pędzel z motylkami

Otwieramy nowy dokument i korzystając z gotowych pędzli motyli z www.deviantart.com, tworzymy nowy pędzel. Wybieramy Edycja>Zdefiniuj Pędzel (Define Brush Preset) i zapisujemy nasz nowy pędzel. Wracamy do naszego projektu i na nowej warstwie malujemy motyle, wcześniej ustawiając (według upodobań) kształt i dynamikę pędzla. Następnie za pomocą [Ctrl]+[T]>Wypaczanie (Warp), przekształcamy, tworząc efekt motyli wylatujących z prześwitu pomiędzy wieżami.

74

.psd 01/2009 » www.psdmag.org

Klub PRO
psd@psdmag.org tel.: 022 427 35 30 fax: 022 244 24 59

warsztaty

wizytówki firm prenumerujących .psd kontakt do nas:

Naszą misją jest projektowanie najwyższej jakości dedykowanych systemów IT, które cechuje wysoka niezawodność, wydajność, ergonomiczność i intuicyjność w obsłudze oraz administracji. Głównym elementem oferty EPRO jest oprogramowanie sklepu internetowego oraz identyfikacja wizualna.

Red IT Production

e-mail: bok@epro.com.pl tel. 085 743 66 38 http://www.epro.com.pl

Red IT Production. Realizujemy produkcje reklamowe, telewizyjne, filmowe i radiowe. Zapewniamy profesjonalną obsługę na każdym etapie produkcji obrazu i dźwięku. Dodatkowo oferujemy wsparcie kreatywne każdego projektu. Od konceptu, poprzez storyboard, produkcję i postprodukcję.

http://www.redit.pl

78

.psd Extra 01/2008 » www.psdmag.org

morning drink TTS Company
eduZETO – szkolenia IT
al. Kraśnicka 35 20-718 Lublin Tel. +48 81 718 4217 Fax. +48 81 525 5052

grafika z puterowego. Import programów na zamówienie. jednego elementu

Sprzedaż i dystrybucja oprogramowania komPonad 200 producentów w standardowej ofercie. Chcesz kupić oprogramowanie i nie możesz znaleźć polskiego dostawcy? Skontaktuj się z nami - sprowadzimy nawet pojedyncze licencje.

http://www.eduzeto.lublin.pl e-mail: szkolenia@zeto.lublin.pl

www.OprogramowanieKomputerowe.pl

paweł pomorski

Agencja Reklamowa Nylon Coffee
Inspirujące wyzwania, energetyzująca atmosfera, nie siedź w domu – dołącz do nas! Nylonowcy

Zakres naszej działalności obejmuje: • opiekę serwisową i techniczną firm oraz wydawnictw • doradztwo w zakresie doboru sprzętu dla DTP (MAC/PC) • bezpieczeństwo sieci i danych klienta e-mail: pawel@pomorski.net

http://www.nc.com.pl/praca

EURO INFO GROUP Sp. z o.o.

G-media Autoryzowany Instruktor Adobe

Istnieje na rynku usług edukacji informatycznej od 1999 r. Prowadzimy profesjonalne szkolenia z zakresu grafiki komputerowej, projektowania stron www (HTML i CSS, PHP, tworzenie aplikacji internetowych).

http://www.kursykomputerowe.pl

Tworzenie stron WWW i prezentacji multimedialnych

G-media Paweł Zakrzewski http://www.g-media.pl

BROSTUDIO

Projekty i aplikacje internetowe; Grafika komputerowa; Projektowanie ikonek i GUI; Korekcja i retusz zdjęć; Corporate Identity... i wiele innych.

http://www.brostudio.pl

Studio Filmowe Montevideo
Książka TECHNOLOGIA PRODUKCJI KOMPUTEROWYCH EFEKTÓW SPECJALNYCH W POLSKIEJ KINEMATOGRAFII Bogumiła Jochymczyka (141 s., 16 s. barwnych ilustracji) do nabycia wyłącznie u wydawcy pod adresem: info@montevideo.pl cena 29 zł w tym koszt przesyłki.

http://www.montevideo.pl

CEDRYK GRAPHICS

Skład, łamanie, ulotki, broszury, książki, kalendarze, foldery, katalogi; opracowywanie projektów graficznych, logo, papierów firmowych, szyldów; obsługa firm i klientów indywidualnych. Tel. 0-501-792-583

e-mail: kahuna1@wp.pl

WARSZAWSKA SZKOŁA FOTOGRAFII

Jedna z najstarszych i największych prywatnych szkół fotograficznych w Polsce. Proponujemy: • 2 letnie studium fotografii • 1 roczne studium fotoreportażu • 4 miesięczne intensywne kursy fotografii • wieczorowe i weekendowe warsztaty z komputerowej obróbki obrazu (Photoshop CS2)

MEDIA FORM

http://www.wsfoto.art.pl

• Sesje fotograficzne - również wyjazdowe. • Plansze reklamowe, wystawowe (full kolor/ zdjęcie naklejane i laminowane maszynowo) • Systemy prezentacyjne typu roll-up Rzetelnie, Terminowo i Kompetentnie Obsługujemy cały kraj Rok założenia 1995

http://www.mediaform.pl

.psd Extra 01/2008 » www.psdmag.org

79

Roczna prenumerata .psd + .psd Extra

,239
Kontakt
1. Telefon +48 22 427 36 79 +48 22 427 36 53 2. Fax +48 22 244 24 59

tylko

Magazyn .psd jest jedynym polskim magazynem poświęconym grafice 2D, który pokazuje krok po kroku jak w praktyczny sposób wykorzystać możliwości programu Adobe Photoshop, uzyskać ciekawy efekt, wyretuszować fotografię, czy zaprojektować stronę internetową. Do każdego numeru są dodawane płyty CD z filmami instruktażowymi oraz zdjęciami Royalty Free. W prenumeracie otrzymujesz też dwa numery .PSD Extra. Jest to .PSD The Best of, który jest zbiorem najlepszych tutoriali o objętości aż 220 stron. Do tego numeru dodajemy 3 płyty DVD oraz .PSD Extra będący wydaniem specjalnym, zgłębiającym tematykę związaną z grafiką komputerową. W linii .PSD Extra pojawiają się wydania o fotografii cyfrowej, przygotowaniu do druku, numery dla początkujących.

3 +48 22 427 36 5
lub zamów mailowo!

Zadzwoń

2. Online pren@software.com.pl www.buyitpress.com 3. Adres Bokserska 1 02-682 Warszawa, Polska

Prenumerujesz – zyskujesz
l

Zamówienie prenumeraty
Prosimy wypełniać czytelnie i przesyłać faksem na numer: 00 48 22 244 24 59 lub listownie na adres: Software-Wydawnictwo Sp. z o. o. ul. Bokserska 1 02-682 Warszawa Polska E-Mail: pren@software.com.pl Przyjmujemy też zamównienia telefoniczne: 0048 22 427 36 79 0048 22 427 36 53 Jeżeli chcesz zapłacić kartą kredytową, wejdź na stronę naszego sklepu internetowego www.buyitpress.com.

l l l

oszczędność pieniędzy szybka dostawa prezenty bezpieczna płatność on-line

Imię i nazwisko ............................................................................... Nazwa firmy..................................................................................... Dokładny adres .............................................................................. ......................................................................................................... Telefon ............................................................................................ E–mail ............................................................................................. ID kontrahenta ................................................................................ Numer NIP firmy ............................................................................. Fax (wraz z nr kierunkowym) .........................................................

□ automatyczne przedłużenie prenumeraty

Tytuł
.PSD + .PSD Extra Miesięcznik użytkowników Adobe Photoshop i numery specjalne .PSD Extra. W każdym numerze płyty CD lub DVD

Ilość numerów

Ilość zamawianych prenumerat

Od numeru pisma lub miesiąca

Cena

13*

239 PLN

* w lipcu i sierpniu ukazuje się jeden wakacyjny numer

zajawka
i to by było na tyle...

kolejnego numeru .psd 2/2009 wypatrujcie już w lutym!

To już niestety ostatnia strona styczniowego wydania .psd. Mamy nadzieję, że artykuły i tutoriale zainteresowały Cię i nauczyły wielu nowych, przydatnych sztuczek. Jeśli wciąż masz głód wiedzy, musisz poczekać na kolejny numer .psd, w którym zaserwujemy następną porcję ciekawych materiałów. Zajrzymy za kulisy powstawania jednej z najsłynniejszych scen z filmu Testosteron, stworzymy własną galerię internetową w kilkanaście minut, nauczymy się cyfrowo postarzyć obraz... i wiele, wiele więcej. Pamiętaj też o zaopatrzeniu się w najnowsze, specjalne wydanie .psd Extra The Best Of, które w salonach prasowych czeka na Ciebie juz od listopada. Jest to naprawdę arcyciekawy numer – 220 stron najbardziej efektownych, polskich i zagranicznych tutoriali, 7 najlepszych multimedialnych kursów instruktażowych, ponad 1000 darmowych zdjęć Royalty Free do ściągnięcia... uff! Musisz go mieć! .psd Extra The Best Of i wszystkie pozostałe numery .psd mozesz kupić w naszym sklepie internetowym. Zapraszamy też na nasze młode, rozwijające się forum!

www.pdsmag.org www.buyitpress.com

82

.psd 01/2009 » www.psdmag.org

Sign up to vote on this title
UsefulNot useful