Jest wiele różnych rodzajów layoutów. Właściwie tyle ile branż handlowych, usługowych oraz ludzkich zainteresowań, które z grubsza możemy poddać pewnym klasyfikacjom. W tym artykule chcielibyśmy przedstawić luźny zbiór różnego rodzaju sposobów i rozwiązań stworzonych na potrzeby prostych, jak i złożonych projektów WWW. Program - Photoshop CS4 Poziom - Łatwy
Zaprenumeruj newsletterMiodne tła i wypełnienia
Podstawy
Bazą każdej strony internetowej jest tło. Podstawą każdego tła jest kolor. Owszem, tłem może być zdjęcie, wzorek, tekstura lub jednolity kolor. Aczkolwiek nawet te elementy muszą na czymś leżeć. Z reguły jest to czerń, biel lub szarość. Czasami gradient, grafika/zdjęcie. Zdefiniowanie konkretnego koloru to tylko informacja wyrażona za pomocą szesnastkowego systemu zapisu liczb, zawarta w kodzie strony. Aczkolwiek czasami strona może łączyć się z tłem za pomocą cienia.
)
Cień strony
Biel, czerń, szary gradient może świadczyć o czystości layoutu. Nie ma jednak nic ciekawszego niż jego integracja z tłem chociażby za pomocą cienia. W tym przypadku cień definiuje wymiary layoutu strony, jego proporcje i integruje go z całą zawartością przeglądarki. Twoim zadaniem jako projektanta jest dopasowanie jego wymiarów do layoutu. W takich przypadkach możemy się posłużyć prostym stylem warstwy.
)
Kolorowe wypełnienie
Kolorowe wypełnienia i tła przydają się zawsze i wszędzie: w banerach, w tłach, na przyciskach, etc. Jeszcze bardziej efektownie wyglądają gradienty. Przygotowując gradient, uwzględniamy oczywiście kontekst oraz staramy się go wykonać, posługując się jednym kolorem, dodając kolejne markery i zmieniając jasność oraz nasycenie koloru. Warto w takich sytuacjach w próbniku koloru włączyć opcję wyświetlania bezpiecznych kolorów sieci, co ograniczy, ale jednocześnie ułatwi dobór barw.
)
Gradientowe wariacje
Skoro znamy teorię, warto zawsze przygotować sobie kilka podstawowych gradientów, posługując się najczęstszymi barwami. Biorąc pod uwagę przeznaczenie bardzo szybko można przewidzieć, że zielony kolor znakomicie nada się do tła layoutu strony promującej markę piwa. Poniżej prezentujemy kilka zestawów gradientów, wartości szesnastkowe wystarczy wprowadzić w odpowiednim miejscu próbnika kolorów.
)
Nie zapominamy o szumie
Warto pamiętać, że narzędzie gradient oddaje nam do dyspozycji możliwość generowania przejść tonalnych w postaci szumu. Dzięki temu możemy wykorzystywać go do wielu różnych efektów specjalnych (także świetlnych). Na ilustracji gradient typu Reflected, warstwa ustawiona w trybie Hard Light wchodzi w interakcję z warstwą o gradientowym regularnym wypełnieniu, które zaprezentowaliśmy w poprzednich krokach. Dzięki temu uzyskaliśmy dodatkowe cieniowanie.
)
Efekty świetlne
Korzystając z omówionej przed chwilą techniki, możemy, przy odrobinie szczęścia, znaleźć bardzo ciekawe efekty. W tym przykładzie wykorzystaliśmy gradient z szumem; styl Radial. Jednak warstwę z gradientem zniekształciliśmy i zmieniliśmy jej tryb mieszania na Color Dodge. W zależności od kolorów wykorzystanych podczas tworzenia gradientu i tła (w naszym przypadku regularny gradient) oraz trybu mieszania, można odnaleźć ciekawe efekty.
)
Profesjonalne kształty
Wybór narzędzi
Kształty mogą nam posłużyć do tworzenia wielu elementów layoutu strony – bannery, przyciski, stopki... Prostokąt i Zaokrąglony prostokąt pozwala nam utworzyć kształt ręcznie, proporcjonalnie, zdefiniować precyzyjne wymiary i zaokrąglenia, warto korzystać w takich sytuacjach z Geometry Options narzędzia. Co więcej, pracujmy w trybie tworzenia kształtów wektorowych (Shape Layers), co da nam możliwość dodawania punktów i ich edycji oraz wypełniania kształtu kolorem.
)
Pióro to potęga
Za jego pomocą możemy tworzyć nieregularne kształty. W oparciu o linie pomocnicze i konkretne wartości w Geometry Options tworzymy zarys kształtu prostokąta. Posługując się Piórem, możemy dodawać kolejne punkty geometrii, a narzędziem Direct Selection Tool możemy je edytować. Każda wymieniona czynność może być także wykonana zdefiniowanym narzędziem: Add Anchor Point Tool, Delete Anchor Point Tool, Convert Point Tool.
)
Edycja ścieżki
Narzędziem Add Anchor Point Tool dodaliśmy dwa punkty do ścieżki, narzędziem Direct Selection Tool kliknęliśmy wybrany punkt i zmieniliśmy jego położenie (możemy przytrzymać [Shift] i przesuwać po linii prostej). Możemy także tym samym narzędziem kliknąć i przeciągnąć obszar zaznaczenia nad kilkoma dodatkowymi punktami, a następnie zmieniać ich położenie wykorzystując klawisze kierunkowe klawiatury+[Shift], co pozwoli przesunąć punkty o 10 px.
)
Transformacja punktów
Każdy punkt ścieżki dysponuje 2. punktami kontrolnymi, klikając na wybranym punkcie i przesuwając go, możemy wpływać na krzywiznę ścieżki. Korzystając ze skrótu [Alt] łamiemy ciągłość ścieżki. Zaznaczając 2 lub więcej punktów ścieżki możemy korzystać z polecenia Swobodnie przekształć [Ctrl]+[T] i wpływać na wzajemne relacje pomiędzy punktami, przykładowo zbliżając/oddalając lub obracając je względem siebie w oparciu o położenie punktu zaczepu skrzynki przekształcającej.
)
A co ze stylami?
Warstwy wektorowe dysponują wypełnieniem koloru, który zawsze możemy zmienić, klikając na ikonce wypełnienia. Co ważniejsze, możemy na nie nakładać style warstw, na których znajdziemy możliwość nałożenia jednolitego koloru, co zwiększa nasze możliwości. Oprócz tego możemy także nałożyć gradient. Jeśli zapisaliśmy gradient, który utworzyliśmy podczas tworzenia tła, to możemy teraz z niego skorzystać i zmodyfikować jego właściwości.
)
Jak to wszystko połączyć?
Jeśli dysponujemy przygotowanymi wcześniej stylami, to możemy z nich skorzystać, zanim narysujemy konkretny kształt, wybieramy odpowiedni styl na belce z opcjami, następnie narzędzie – chociażby – Prostokąt, definiujemy wymiary i rysujemy. Dalej możemy już tylko transformować cały kształt lub poszczególne punkty.
)
Efekty specjalne
Cienie pod zdeformowanymi obiektami
Szczególnie interesujące są te cienie, które występują pod bannerami lub częściami layoutu sugerując podniesiona kartkę lub zakładkę. Takim cieniem będziemy się zajmować w kontekście całej strony. W tym celu należy skopiować warstwę, która jest odpowiedzialna za tło zawartości strony WWW i zdeformować ją za pomocą Swobodnie przekształć. Tymczasowo możemy zmienić jej kolor, aby wyraźniej odróżniała się od reszty strony. Podczas przekształcania można skorzystać z trybu zniekształcania Warp Modes.
)
Tworzenie cienia zagiętej kartki
Skoro warstwa jest gotowa, to możemy utworzyć jej styl, czyli Cień zewnętrzny. Upewniamy się, że nieprzezroczystość stylu wynosi 100% (potem będziemy mogli go dopasować), wyłączamy światło globalne i przesuwamy cień na lewo do góry. Możemy także wpłynąć na jego wielkość, aby zmiękczyć krawędzie. Następnie zatwierdzamy zmiany i klikamy na warstwę prawym przyciskiem i konwertujemy styl do warstwy (Create Layer).
)
Dopasowanie cienia
Po konwersji cienia do warstwy możemy rozmyć go filtrem Gaussowskim, zdeformować, obniżyć jego nieprzezroczystość, ogólnie – dopasować. Aczkolwiek cień wchodzi w interakcję z pozostałą częścią layoutu. My chcemy, aby tylko objawiał swoją obecność w lewym górnym rogu. Dlatego zaznaczamy warstwę z tłem i odwracamy zaznaczenie, a następnie usuwamy całą zawartość cienia poza zaznaczeniem, będąc na warstwie odpowiadającej za ten cień. Pamiętajmy, aby przywrócić pierwotny kolor do warstwy, która generuje cień zagięcia.
)
Jak uzyskać wiele obrysów jednego obiektu za pomocą stylów warstw?
Pomimo tego, że style warstwy dysponują jedną pozycją, która odpowiada za obrys (Stroke) możemy wygenerować 5 obrysów! W takich sytuacjach po prostu należy się posłużyć Cieniem zewnętrznym i wewnętrznym oraz Blaskiem wewnętrznym i zewnętrznym. Style zewnętrzne dysponują parametrem Spread zaś wewnętrzne Choke. Zwiększając te parametry do 100%, tworzymy twarde obrysy. Pamiętajmy jednak o trybach mieszania i przezroczystości oraz o hierarchii wszystkich stylów.
)
Cienie na przyciskach
Przycisk w tym przypadku cieniujemy na zewnątrz i wewnątrz. Wybieramy styl warstwy Cień zewnętrzny/wewnętrzny. W obydwu przypadkach obniżamy Dystans do zera, co pozwoli nam umieścić cień w orientacji do środka obiektu.
)
Dwa obrysy
Pierwszy obrys to lekkie liniowe rozjaśnienie, które tworzymy stylem Obrys (#99ff33), Pozycja obrysu to Wewnątrz a jego Wielkość to 2 px oraz 100% nieprzezroczystości. Drugi, wewnętrzny obrys tworzymy za pomocą Blasku wewnętrznego, kolor #009900, Wielkość 5 px, a parametr Choke 100%. Dzięki temu możemy utworzyć prawie geometryczne style.
)
Anatomia linii
Kontrast to podstawa
Linie to podstawa podziałów. Wykorzystywane są na krawędziach obiektów jako żłobienie lub rozjaśnienie. Pomagają cieniować i kreślić granice między obszarami. Wykorzystywane są w wielu sytuacjach. Mogą być płaskie i mogą tworzyć wrażenie wypukłości lub wklęsłości. W tym ostatnim przypadku po prostu posługujemy się kontrastem pomiędzy dwoma liniami, uwzględniając również tło.
)
Wybór narzędzia
Linie możemy kreślić za pomocą narzędzia Line Tool. Jeśli zdecydujemy się na to narzędzie warto pamiętać o odznaczeniu opcji Anti-alias. Z reguły korzystamy z szerokości 1 px i podczas kreślenia linii przytrzymujemy [Shift] oraz pracujemy w trybie warstwy z pikselami. Alternatywą jest narzędzie Ołówek (Pencil). Pozwala nam określić średnicę końcówki oraz klikając w jednym miejscu, a następnie przytrzymując [Shift] kreślić proste linie.
)
Linie w roli podziału
Podstawowa funkcja linii to podział. Dzięki nim możemy wyznaczyć kolumny strony. W zależności od projektu może być to layout 3-kolumnowy (podstawowy układ) lub o innym podziale. Linie z reguły nie powinny odwoływać się do skrajnych tonacji (czerń i biel) warto posługiwać się rożnymi wartościami skali szarości i przechowywać je na osobnej warstwie.
)
Linie w roli podkreślenia
Bardzo często linie tworzą żłobienie na stopce strony internetowej. W takiej roli mogą występować jako podkreślenie mapy strony i szybkich linków. W tej sytuacji zastosowano po prostu dwie przylegające do siebie horyzontalnie linie, obie wykonane kontrastowymi odcieniami szarości.
)
Linie, a przyciski i krawędzie
Często linie budują żłobienia przycisków, jak i oddzielają je od siebie. W tym przykładzie wybudowaliśmy menu w oparciu o jedno prostokątne zaznaczanie, które wypełniliśmy gradientem. Następnie wprowadziliśmy kontrastowe pionowe linie za pomocą narzędzia Ołówek, otrzymując, tym samym, żłobienie.
)
Szklany przycisk z obrysem
W tym przykładzie wybudowaliśmy szklany przycisk, korzystając z trochę bardziej złożonego gradientu. Zasada jest prosta, dwa wewnętrzne markery są zbliżone i budują kontrastową linię, dwa zewnętrzne markery niosą informację o jaśniejszych kolorach. Cały gradient jest zaś utrzymany w jednym kolorze. Następnie narzędziem Ołówek i szarym kolorem wykonaliśmy obrys (1 px) na dole i po prawej oraz dobraliśmy najjaśniejsza próbkę na przycisku i wykonaliśmy obrys na wewnętrznej krawędzi przycisku.
)
Odbicia, obiekty, materiały
Jak uzyskać błyszczący metaliczny obiekt?
W tej części wybudujemy błyszczący i metaliczny banner, który może być nośnikiem różnego typu informacji, szczególnie oferta reklamowana lub specyfikacja usługi. Zaczniemy od utworzenia nowego dokumentu o wymiarach 800 x 600 px. Następnie wypełnimy go gradientem o wartościach: #999999 i #ffffff. Linię gradientu przeprowadzamy od dołu do góry.
)
Obiekt
Wybieramy narzędzie Prostokąt zaokrąglony, promień 20 px, aktywna opcja Anti-alias, kolor #999999 i malujemy na nowej warstwie kształt (niekoniecznie warstwa z kształtem) o wymiarach 250 x 400 px.
)
Wzorek
Tworzymy nowy dokument o wymiarach 3 x 3 px. Następnie za pomocą Ołówka malujemy przekątną, która składa się z 3 pikseli. Następnie zaznaczamy całość [Ctrl]+[A] i korzystamy z polecenia Edit>Define Pattern. To będzie nasz wzorek, który wykorzystamy w późniejszym czasie.
)
Tworzenie metalicznego obrysu
Powracamy do naszego pierwotnego dokumentu i klikamy dwukrotnie warstwę z obiektem oraz aktywujemy Obrys. Typ wypełnienia to Gradient, klikamy na gradiencie i dodajemy cztery markery. Pozycja i kolory markerów od lewej: 0% i #ffffff; 51% i #ffffff; 52 i #999999; 68% i #ffffff; 84% i #999999; 100% i #cccccc. Wielkość gradientu to 5 px, pozostałe opcje są standardowe.
)
Wzorek i dodatkowe obrysy
Przechodzimy do stylu warstwy wzorek i wybieramy zdefiniowany przez nas wcześniej wzorek. Nieprzezroczystość to 25%, tryb mieszania Normal. Następny styl to Nałożenie gradientu, Tryb mieszania Soft Light, Nieprzezroczystość 100%, pozycja i wartości markerów od lewej: 0% i #000000; 66% i #ffffff; 100% i #999999. Pozostałe opcje są standardowe. Kolejne style to Blask wewnętrzny: czarny kolor, Choke 100%, wielkość 1 px, Normal, Opacity 28% i Blask zewnętrzny to: czarny kolor, Spread 100%, Wielkosć 6 px, Normal i Nieprzezroczystość 21%.
)
Odblask
Ostatni etap to tworzenie odbicia i cienie. Wykonajmy odblask. Zaznaczamy cały obiekt i wybieramy narzędzie Zaznaczenie eliptyczne, korzystamy z kombinacji [Alt]+[Shift] i mnożymy zaznaczenia. Wybieramy narzędzie gradient od bieli do przezroczystości i na nowej warstwie rysujemy linie od góry do dołu oraz obniżamy nieprzezroczystość warstwy.
)
Odbicie i cień
Czas złączyć warstwę z obiektem i odblaskiem. W tym celu wyłączamy widoczność tła i korzystamy z kombinacji [Ctrl]+[Alt]+[Shift]+[E] co pozwoli na utworzyć nową warstwę z widocznych. Następnie przenosimy ją na dół i odwracamy o 180 stopni, zakładamy maskę i malujemy ją tradycyjnym czarno białym gradientem. Dodajemy nowe zaznaczenie eliptyczne między obiektem i jego odbiciem, wybieramy pędzel o Twardości 0%, średnica nieco mniejsza niż zaznaczenie i klikamy, a następnie obniżamy Nieprzezroczystość.
)
Typografia
Tekst jako tło i logotyp
Typografia to odrębne zagadnienie budowy serwisu lub projektowania layoutu strony internetowej. Warto zwrócić uwagę, że typografia może spełniać kilka funkcji. Może być również częścią layoutu, co czasami spotyka się wśród serwisów zajmujących się zagadnieniami projektowania. W tym przykładzie skorzystaliśmy z pustej przestrzeni u góry i wprowadziliśmy serię zaznaczeń prostokątnych, które w miarę ściśle do siebie przylegają. Zaznaczania dodajemy klawiszem [Shift].
)
Tekst
Serię zaznaczeń warto zapisać jako kanał alfa, aby móc zawsze do nich powrócić. Pamiętajmy o tym, iż w końcowej fazie pracy z layoutem możemy usunąć ten kanał z pliku .psd. Następnie wprowadzamy odpowiedni tekst, w naszym przypadku będzie on w skali szarości. Tryb mieszania warstwy warto zmienić na Color Burn, co bardzo ładnie zintegruje się z cieniowaniem tła.
)
Odcinanie tekstu
Wczytujemy zaznaczenia z kanału alfa, następnie musimy je pomnożyć z zaznaczeniem tekstu, także przytrzymujemy [Ctrl]+[Alt]+[Shift] i klikamy na warstwie z tekstem. Tworzymy nową warstwę, wybieramy gradient radialny oraz kolory gradientu zbliżone do tła, a następnie wypełniamy zaznaczenie. Ta warstwa winna znajdować się pod warstwą z tekstem. Na czas tworzenia gradientu możemy wyłączyć podgląd warstwy z tekstem (co my uczyniliśmy przed wykonaniem zrzutu).
)
Odcinanie warstwy
Włączamy widoczność warstwy tekstowej i sam efekt nie jest zbyt ciekawy. Aczkolwiek wystarczy utworzyć między warstwą tekstową i warstwą z gradientem relację odcinania, aby sytuacja się zmieniła. Po prostu przenosimy kursor myszy pomiędzy obydwie warstwy i przytrzymujemy [Alt] oraz klikamy lub korzystamy z polecenia.
)
Ostatnie detale
Pozostaje teraz powrócić na warstwę z gradientem i dodać standardowy cień, aczkolwiek zmieniamy dystans do 0. Oprócz tego warto skorzystać z blasku wewnętrznego, jednak w tym przypadku zmieniamy tryb mieszania stylu warstwy na Nakładkę, dzięki temu uzyskamy wrażenie światło jarzeniowego na krawędziach tekstu.
)
Autor: Krzysztof Kopciowski
Artykuł pochodzi z magazynu .PSD http://psdmag.org/pl
Co za chała....
Tworzenie layoutu w Photoshop to idiotyzm w czystej postaci! Layouty tworzy się programach wektorowych/rysunkowych a nie w programach do obróbki zdjęć/bitmap. Co zrobiłby grafik gdyby musiał na życzenie klienta zwiększyć jego szerokość o 20xp zachowując proporcje? Przecież bitmapy stworzonej w ten sposób nie da się bezstratnie skalować!
Sądząc po treści powyższego komentarza doświadczenie osoby w projektowaniu nie jest zbyt wielkie - każdy profesjonalny webdesigner tworzy layouty stron w Photoshopie. I każdy profesjonalny webdesigner zachowuje plik PSD, gdzie elementy rozłożone są na warstwach, właśnie po to, by móc później wprowadzić ewentualne poprawki. Komentujący po przeczytaniu tego artykułu powinien wiedzieć, że w Photoshopie istnieje możliwość tworzenia kształtów w trybie wektorowym, co umożliwia ich późniejsze bezstratne skalowanie.
Każdy profesjonalny projektant strony zrobi stronę w byle czym, bo program ten czy inny tylko ułatwia pracę, reszta jest w głowie.
Zgadzam się w całej rozciągłości! IMO ważniejsze niż narzędzia tego rzemiosła jest po prostu wyobraźnia grafika...
Co do poziomu tutoriala... Najlepszym komentarzem chyba jest samo to, że wypowiedzi użytkowników sprowadzają się do tego jaki program wykorzystano, niż to co kroki realizacji, które są w nim pokazywane:)
Tworzenia kształtów w trybie wektorowym w Photoshopie jest mocno ograniczone, to nie jest program do tworzenia bezstratnie skalowanych grafik.
wydaje mi się, że znaczna wiekszosc webdesignerow uzywa PS.
wiadomość usunięta z przyczyn regulaminowych
(kryptoreklama firmy My Design, Pszczyna)