Adobe

Korporacyjne portfolio na Blu-ray

Standard wysokiej rozdzielczości na dobre zadomowił się w masowym odbiorze. Dlatego warto uwzględnić go podczas przygotowania audiowizualnej prezentacji dorobku firmy/klienta. W tym artykule zobaczymy, w jaki sposób zaprojektować proste i statyczne menu dla authoringu w Adobe Encore. Motywem przewodnim menu będzie kula światła, która nawiązuje do działalności firmy (architektura światła). Motyw ten został zaczerpnięty z twórczości Jean Yves Lemoigne’a.

1.Przygotowanie dokumentu
Photoshop oddaje nam do dyspozycji gotowy profil dokumentu o parametrach spełniających wymogi standardu HDTV (1920×1080px., proporcje pikseli - kwadratowe). Możemy także dołączyć do dokumentu odpowiedni profil kolorów HDTV (Rec. 709). Nowy dokument jest tworzony wraz z liniami pomocniczymi, które wykreślają bezpieczny obszar dla grafiki (zewnętrzny) i dla tekstu (wewnętrzny).

2.Przygotowanie tła
Za tło wybieramy zdjęcie udostępnione przez agencję Diazone (diazone-pl 50.jpg). Importujemy materiał i dostosowujemy jego wielkość tak, aby wypełniał dokładnie cały obszar dokumentu. Górną część zdjęcia przyciągamy do górnej części obrazka. Warto wyostrzyć zdjęcie filtrem Maska wyostrzająca (Amount: 124%, Radius: 1,5px, Threshold: 3 levels). Ekrany mają z reguły tendencję do lekkiego rozmycia obrazu.

3.Kula
Wykonujemy niewielkie okrągłe zaznaczenie, które wypełniamy odpowiednim kolorem #ad2b00. Wybór koloru jest dosyć istotny jeśli zechcemy go później pozostawić i zmieszać z blaskiem. Dodajemy blask zewnętrzny o kolorze #ac2f24 , wielkość blasku 50px. Dodajemy blask wewnętrzny o standardowym kolorze i wielkości 30px. Kopiujemy warstwę z kulą i zmieniamy tryb mieszania kopii na Jaśniej.

4.Podrasowanie kuli
Dysponujemy dwiema warstwami z kulą, skopiujmy ponownie pierwotną warstwę z kulą. Rozmywamy skopiowaną warstwę filtrem gaussowskim (7px). Możemy powtórzyć ten proces, tym razem jednak rozmywamy warstwę wartością 14px. Uzyskaliśmy tym samym 4 warstwy z kulą. Dwie środkowe są warstwami rozmytymi. Utwórzmy pustą warstwę zaraz nad 1 warstwą z kulą, zaznaczmy ją wraz z 2 rozmytymi warstwami z kulą i złączmy. Tym samym ponownie dysponujemy tylko 3 warstwami z kulami, z czego środkowa jest odpowiedzialna za natężenie blasku.

5.Biała kula
Zgromadźmy wszystkie warstwy odpowiedzialne za kulę w jednej grupie. Możemy teraz skopiować grupę w celach archiwizacyjnych i ukryć. Następnie obniżmy nieprzezroczystość warstwy środkowej, czyli tej odpowiedzialnej za blask kuli do 50%, możemy także zwiększyć warstwę odpowiedzialną za blask (warto eksperymentować). Spłaszczmy grupę. Następnie dodajemy warstwę dopasowania Ekspozycja i ustawmy ją w trybie maski odcinania i zwiększmy Ekspozycję do +20. Ta technika pozwala nam uzyskać różnego typu żarzące się obiekty (przykł.: słońce).

6.Manipulacja światłem
Dodajemy nową warstwę dopasowania Krzywe. Zmieniamy położenie punktu wyjścia (Output) do 43. Zaznaczamy maskę warstwy dopasowania. Wybieramy narzędzie Gradient, standardowo czerń i biel [D]. Klikamy w samym środku kuli i wyprowadzamy linię gradientu na zewnątrz. Mamy główne światło.

7.Gradacja światła
Utwórzmy kolejną warstwę dopasowania Krzywe. Wprowadźmy kontrast, czarny punkt: Wyjście: 0, Wejście: 18; biały punkt: Wyjście: 255, Wejście: 210. Wybieramy ponownie Gradient, przechodzimy do edytora gradientu i zmieniamy typ gradientu na szum. Następnie ponownie prowadzimy linię gradientu od centrum kuli na zewnątrz - bezpośrednio na masce warstwy dopasowania. Zmieniamy tryb mieszania warstwy dopasowania na Screen, i zaznaczamy maskę tej warstwy, a następnie rozmywamy filtrem gaussowskim (7px). Uzyskujemy tym samym bardziej skokową gradację światła. Możemy też kliknąć czarnym pędzlem dokładnie w centrum kuli będąc dalej na masce warstwy dopasowania, dzięki temu odzyskamy wyraźne kontury obiektu.

8.Odbicia kuli
Wygenerujemy teraz odbicie kuli na ścianie. Dokładnie tą samą procedurę można wykonać w odniesieniu do odbicia na podłodze. Kopiujemy cała grupę z kulą i spłaszczamy jej zawartość, następnie kopiujemy spłaszczoną warstwę. Obie warstwy ustawiamy w trybie mieszania Overlay. Rozmywamy filtrem gaussowskim warstwę poniżej, ok. 30px. Spłaszczamy obie warstwy i przenosimy na ścianę. Zdeformujemy teraz warstwę [Ctrl] + [F]. Klikamy dwukrotnie na warstwie i w sekcji: Blend if, klikamy wraz z przyciskiem [Alt] na czarnym markerze Underlying Layer i zmieniamy do 90. Powtarzamy czynność w przypadku odbicia na podłodze.

9.Kontrast i logo
Bezpośrednio nad warstwą ze zdjęciem dodajemy warstwę dopasowania Krzywe i wybieramy standardowe ustawienia średniego kontrastu: Medium Contrast (RGB). W obszarze kuli wprowadzamy nazwę firmy „Lumadesign” (Luma na biało, design na czarno), zaś poniżej dopełnienie „Profesjonalna architektura światła”. Oba napisy dysponują fontem DejaVu Sans Extra Light. Zmienia się tylko stopień pisma i wykorzystujemy kapitaliki (small caps). Staramy się umieścić wszystko w jednym bloku tekstu, zaś literkę „i” ze słowa „design” pod kulą. Dodajemy nieznaczny cień (Distance: 0px, Spread: 6%, Size 13px, Opacity 100%).

10.Linie w tle
Przygotujmy tło pod menu. W tym celu zagospodarujemy lewą część zdjęcia, gdzie znajdziemy spory ciemny obszar. Na nowej warstwie rysujemy linie o grubości 3px narzędziem Linia. Przecinamy linie pod różnymi kątami, aczkolwiek staramy się utrzymać układ wyznaczający perspektywę. Następnie narzędziem Lasso tworzymy drobne zaznaczenia w kształcie trójkątów, głównie przy łączeniach linii i wypełniamy bielą. Zmieniamy tryb mieszania warstwy na Overlay i obniżamy jej krycie do 60%.

11.Napisy menu
Każdy napis poszczególnych działów menu, powinien znajdować się w osobnej grupie razem z elementami, które tworzą jego pozycję w menu. W naszym przypadku w menu będą znajdowały się z 4 pozycje. Tworzymy więc 4 grupy i wprowadzamy do nich osobno warstwy tekstowe z nazwą pozycji w menu: „Projekty”, „Klienci”, „Oferta”, „O nas”. Na razie pozostawiamy domyślne nazwy warstw i grup. Napisy tworzymy fontem DejaVu Sans: Condensed Oblique. Każdy napis przechylamy i kładziemy na wybranej linii tła

12.Detale napisów
Dysponujemy osobną grupą z warstwami, które pomogły nam zbudować kulę. Skorzystajmy z tej grupy i skopiujmy ją. Następnie dopasujemy odpowiednio warstwę z blaskiem (warto ją zmniejszyć i obniżyć krycie) i spłaszczmy grupę. Zmniejszamy kulkę do wysokości napisów menu, kopiujemy trzykrotnie i umieszczamy kulki w poszczególnych grupach (obok napisów menu). Na każdą warstwę tekstową (odpowiedzialną za pozycję menu) nakładamy Blask zewnętrzny. Zmieniamy jego kolor tak, aby dopasować go do blasku kuli . Następnie konwertujemy styl warstwy do regularnej warstwy, zakładamy maskę na styl i maskujemy częściowo blask.

13.Tworzenie prefiksów dla przycisków
Aby Adobe Encore mógł rozpoznać, iż dana grupa warstw odpowiada za przycisk interaktywny, musimy wprowadzić odpowiedni prefiks przed nazwą grupy, mianowicie: (+). Przykładowo: (+) Projekty, (+) Oferta, etc. Prefiks wprowadzamy oczywiście do nazwy całej grupy. Od tej chwili wszystkie warstwy, które znajdą się w tej grupie będą postrzegane przez Encore jak elementy składowe jednego przycisku.

14.Zaznaczenie i aktywacja przycisku
W każdej grupie musimy umieścić warstwę, która będzie odpowiadała za wskazanie pozycji w menu i jej aktywację. Tworzymy nową warstwę w grupie: (+) Projekty. Zaznaczamy wszystkie linie tła, które utworzyliśmy w 10 kroku. Wybieramy zaznaczenie eliptyczne (lub inne), korzystamy z kombinacji [Alt] + [Shift] i wykreślamy okrąg, który obejmuje napis jak i sąsiadujące linie. Następnie wypełniamy zaznaczenie dowolnym kolorem, wyłączamy widoczność warstwy i wprowadzamy do jej nazwy prefiks (=1). Zabieg powtarzamy w odniesieniu do 3 pozostałych grup. (Na zrzucie ekranowym widoczność warstwy jest włączona, aby zobrazować wynik zaznaczenia i wypełnienia bielą). Tworząc kolejne obszary zaznaczenia starajmy się wykonywać je w tatki sposób, aby obszar który jest zajęty przez piksele i jest opisany kwadratem, nie zachodził na obszar sąsiedniego przycisku (patrz kolejna ilustracja, gdzie wszystkie aktywne obszary przycisków są oddzielone od siebie linią pomocniczą).

15.Przygotowanie do importu
Zasadniczo nasz dokument jest gotowy. Możemy teraz utworzyć jego kopię i spłaszczyć wszystkie te warstwy, które nie będą animowane (my tworzymy statyczne menu) oraz te warstwy, które nie wchodzą w grupę przycisków interaktywnych. Zapisujemy dokument w rozszerzeniu .psd i uruchamiamy Encore. Na zrzucie ekranowym zaprezentowane są wszystkie warstwy odpowiedzialne za podświetlenie (zaznaczenie) i aktywację przycisków. Przed eksportem wyłączę widoczność tych warstw.

16.Projekt Encore
Tworzymy nowy projekt Encore. Z racji tego, iż mamy do czynienia z menu dla HDTV wybieramy tryb authoringu Blu-ray. Television Standard: PAL, Frame Rate to 25i, Codec to H.264. Wprowadzamy nazwę i zatwierdzamy. Następnie możemy przeciągnąć i upuścić dokument .psd odpowiedzialny za menu do panelu projekt. Jeśli nie pojawi się ikona First Play to klikamy prawym przyciskiem myszy na menu w panelu Project i wybieramy Set as First Play.

17.Dopasowanie podświetleń przycisków
Warstwy, które przygotowaliśmy w 14 kroku, Encore wykorzysta do wykonania podświetlenia i aktywacji przycisku. Domyślnie jednak posłuży się on standardowym zestawem kolorów i parametrem nieprzezroczystości. My, musimy zmieniać ten stan rzeczy. W dolnej części panelu Menu Viewer znajdują się 3 przyciski odpowiedzialne za kolejne stany: Normal, Selected, Activated. Klikając na nich możemy podpatrzeć, co się dzieje w panelu podglądu. Przejdźmy teraz do Menu>Edit Menu Color Set…

18.I na koniec
Włączamy Preview i zwracamy uwagę tylko na Highlight Group 1, oraz wers oznaczony cyferką 1 (Selected State, Activated State). Klikając na próbniku kolorów możemy dobrać odpowiedni kolor dla zaznaczenia i aktywacji przycisku. W pierwszym przypadku warto wybrać kolor #a05148, w drugim może to być czerwień lub biel. Zaraz obok próbników znajdują się wartości procentowe odpowiedzialne za przezroczystość nakładanego koloru, warto obniżyć ten parametr do ok. 20%. Zapisujemy zestaw, klikamy OK i możemy przystąpić do dalszej pracy z authoringiem.