Panorama stereograficzna

“Planeta”, która ubarwi layout każdej strony internetowej.

Programy: Autopano Giga 2, Adobe Photoshop

Poziom: Średni

Obecnie coraz trudniej jest stworzyć ciekawy projekt graficzny strony internetowej, który w pełni zadowoli klienta, a co więcej stanie się inspirującym przykładem dla innych designerów. Na wartości zyskują koncepcje bazujące na własnym materiale fotograficznym. Tutaj ważne jest indywidualne spojrzenie autora na dany temat i uchwycenie sceny w odpowiedni kadr. Z pomocą przychodzi zastosowanie fotografii panoramicznej, a jeszcze ciekawsze efekty daje tzw. „planeta”, czyli panorama stereograficzna. Wykorzystanie jej w projekcie może dać zupełnie odmienne spojrzenie na całą stronę WWW. Spróbujmy więc razem, od podstaw stworzyć właśnie taką koncepcję.

1. SPRZĘT FOTOGRAFICZNY

Aby wykonać samodzielnie profesjonalną panoramę stereograficzną ,niezbędny jest odpowiedni sprzęt fotograficzny. Dzięki niemu możliwe jest również stworzenie tzw. wirtualnego spaceru. Wymagana jest lustrzanka cyfrowa, a także obiektyw - najlepiej szerokokątny. W ćwiczeniu wykorzystany został Canon EOS 500D oraz obiektyw typu Fisheye Samyang 8mm. Dodatkowo, potrzebny jest stabilny statyw wraz ze specjalną głowicą panoramiczną. Jest to dedykowany sprzęt, dzięki któremu można obracać aparat wokół punktu nodalnego, co w efekcie umożliwia szybkie i sprawne połączenie zdjęć w całość.

2. PRZYGOTOWANIE MATERIAŁU

Posiadając odpowiedni sprzęt można udać się w miejsce, gdzie zostanie wykonana fotografia. Należy ustawić statyw zgodnie z poziomicą, a następnie wykonać 6 zdjęć w poziomie co 60 stopni oraz zdjęcie zenitu i nadiru. Dzięki głowicy panoramicznej bez problemu wykonamy takie zdjęcia w kilka sekund. Powinniśmy pamiętać aby miejsce podłoża, gdzie wykonujemy zdjęcia było możliwie jak najbardziej jednolite lub powtarzalne. To ułatwi nam późniejszy retusz fotografii. Zdjęcia nocne, jak w tym przykładzie, najlepiej robić z kilkusekundowego samowyzwalacza, ustawiając długi czas naświetlania, dzięki czemu unikniemy poruszeń.

3. ZŁOŻENIE FOTOGRAFII

Wykonany materiał fotograficzny należy złożyć w jedną całość przy pomocy odpowiedniego oprogramowania - w ćwiczeniu wykorzystany został program Autopano Giga 2. Otwieramy nasze zdjęcia File>Select Images. Następnie zaznaczamy wszystkie fotografie z utworzonej grupy i klikamy na ikonę Image Properties. Ustawiamy tutaj ogniskową obiektywu Focal Lenght na 8 mm oraz typ obiektywu Lens type na szerokokątny Fisheye. Po wprowadzeniu danych klikamy na ikonę Detect. W tym momencie po prawej stronie widzimy podgląd złożonej panoramy. Aby zapisać plik wciskamy Render panorama. Uzyskaliśmy w ten sposób plik wyjściowy dla panoramy stereograficznej.

4. STWORZENIE “PLANETY.”

Stworzoną podczas wcześniejszych kroków panoramę otwieramy w programie Adobe Photoshop. Obracamy obraz o 180 stopni Image>Image Rotation>180°. Teraz możemy w bardzo prosty i szybki sposób utworzyć tzw. „planetę” poprzez zastosowanie filtra Filter>Distort>Polar Coordinates. Z dostępnych opcji tego narzędzia wybieramy Rectangular to polar, a następnie zatwierdzamy. Uzyskaliśmy w ten sposób panoramę stereograficzną. Jak widać, w centralnej części pozostał widok statywu oraz jego cień, przez co zdjęcie nie daje w pełni oczekiwanego efektu.

5. RETUSZ

Aby pozbyć się niechcianych elementów w centralnej części, musimy dokonać odpowiedniego retuszu fotografii. Z pomocą przyjdzie tu narzędzie Polygonal Lasso Tool. Zaznaczamy odpowiednie kawałki powierzchni i poprzez funkcję kopiowania wklejamy je w miejsce statywu. Aby zgrać krawędzie podłoża używamy narzędzia Spot Healing Brush Tool. Podobnie postępujemy z cieniem rzucanym przez statyw na podłoże. Chcąc uzyskać  zbliżoną jasność podłoża, używamy narzędzia Dodge Tool oraz Burn Tool, w zależności od potrzeb. Po kilku minutach otrzymujemy w pełni zadowalającą panoramę stereograficzną.

6. NOWY LAYOUT

Przygotowaną „planetę” możemy wykorzystać w dowolnym layoucie strony internetowej. Warto przy tym pamiętać o pewnych zasadach, które ułatwią stworzenie poprawnego projektu. Tworzymy nowy plik File>New o wymiarach 1920px na 1000px. W jego centralnej części ustawiamy pomocniczy kontener o szerokości 950px. Dzięki temu każdy użytkownik niezależnie od przeglądarki i rozdzielczości poprawnie zobaczy nasz projekt w sieci. Przydatne okazać się mogą linie pomocnicze View>Show>Guides. Pierwszą z nich ustawiamy na wartości 485px, a drugą na wartości 1435px - wszystko przy pomocy narzędzia Move Tool, przeciągając wciśnięty kursor myszy od lewej miarki projektu, a upuszczając na konkretnej wartości.

7. PRZYKŁADOWE ELEMNTY GRAFICZNE

Za pomocą Rectangle Tool możemy wstawić jako tło nowy kształt, rozciągając go na całym obszarze projektu. W opcjach tej warstwy możemy następnie ustawić gradient Layer>Layer style>Gradient Overlay, gdzie pierwszą wartością koloru będzie #6e4f37, drugą natomiast #392617. Możemy dodatkowo wstawić belkę dla menu poziomego. Przy użyciu Rectangle Tool umieszczamy prostokąt, a w opcjach warstwy Layer>Layer Style>Blending Options włączamy dla niego Stroke z wartościami: Size: 1px oraz Color: #f9d343, a także Gradient Overlay z trzema wartościami kolorów: #f9d346, #ebe250, #dfac2d. Dodatkowo poniżej możemy wstawić pole tekstowe za pomocą Rectangle Tool z kolorem #6b5544 o wartości Fill: 60%. Opcjonalnie zamieszczamy również teksty.

8. WKOMPONOWANIE PANORAMY

W naszym projekcie powyżej warstwy tła wklejamy zdjęcie panoramy stereograficznej. Dopasowujemy jej rozmiar i przesuwamy na najkorzystniejsze miejsce w całym projekcie za pomocą Edit>Free Tranfsorm. Na zakończeniach widoczne są kontrastowe ramki naszej fotografii. Aby je usunąć zastosujemy maskę dla warstwy Layer>Layer Mask>Reveal All. Następnie przy pomocy narzędzia Gradient Tool, na masce tworzymy łagodne przejście pomiędzy zdjęciem a tłem. Po uzyskaniu odpowiedniego efektu zatwierdzamy zmiany Layer>Layer Mask>Aplly. Czynność tą wykonujemy dla każdego z boków zdjęcia. Efekt końcowy to dopasowana panorama do projektu strony WWW.

W ćwiczeniu dowiedzieliśmy się jakiego sprzętu fotograficznego potrzebujemy, aby samodzielnie wykonać panoramę stereograficzną oraz jakie należy podjąć kroki, w celu uzyskania efektu finalnego. Zaprezentowane przykładowe zastosowanie tego typu fotografii w prostym szablonie strony internetowej, może być podstawą do tworzenia bardziej rozbudowanej kompozycji opartej na głównym motywie zdjęcia, co nada oryginalności całemu layoutowi.

O Autorze:

Paweł Szroeder

Grafik z agencji adStone

Jeżeli chciałbyś wykonać tutorial i potrzebujesz plików źródłowych na adres: p.szroeder@adstone.pl



Podziel się