logo
WIEDZA
Polska reklama i poligrafiaWIEDZA

TUTORIAL: Sposoby na efektowny layout WWW

   31.07.2010, przeczytano 36371 razy
ilustracjastrzałka

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


Artykuł pochodzi z portalu Signs.pl: https://www.signs.pl/sposoby-na-efektowny-layout-www,11023,artykul.html

Miodne 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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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. 

Powiększ

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.

Powiększ

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).

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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.

Powiększ

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%.

Powiększ

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.

Powiększ

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ść.

Powiększ

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].

Powiększ

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.

Powiększ

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).

Powiększ

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.

Powiększ

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.

Powiększ

Autor: Krzysztof Kopciowski

Artykuł pochodzi z magazynu .PSD http://psdmag.org/pl


avatar użytkownika
+ + + + +

Tekst opublikował użytkownik: psd

Więcej informacji o użytkowniku

REKLAMA

Komentarze

Zaloguj się i dodaj komentarz
avatar użytkownika
,

Co za chała....

avatar użytkownika
,

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ć!

avatar użytkownika
,

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.   

brak ikonki
,

Każdy profesjonalny projektant strony zrobi stronę w byle czym, bo program ten czy inny tylko ułatwia pracę, reszta jest w głowie.  

brak ikonki
,

Zgadzam się w całej rozciągłości! IMO ważniejsze niż narzędzia tego rzemiosła jest po prostu wyobraźnia grafika...  

brak ikonki
,

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:)  

avatar użytkownika
,

Tworzenia kształtów w trybie wektorowym w Photoshopie jest mocno ograniczone, to nie jest program do tworzenia bezstratnie skalowanych grafik.  

avatar użytkownika
,

wydaje mi się, że znaczna wiekszosc webdesignerow uzywa PS.

,

wiadomość usunięta z przyczyn regulaminowych
(kryptoreklama firmy My Design, Pszczyna)

Najnowsze w tym dziale

Gen Z - być offline w świecie, w którym króluje online
O pokoleniu Z mówi się, że telefon w dłoni trzymają nieustająco. Ale czy nie jest tak, że opinię wyrabiamy sobie na podstawie jednostkowych zaobserwowanych przypadków? Z badań przeprowadzonych przez Dentsu Aegis Network Polska oraz infuture hatalska foresight institute na potrzebę raportu Gen Z. Jak zrozumieć dziś pokolenie jutra wynika, że większość ankietowanych...
Aż 70% marketerów nie wie jak zmierzyć efektywność swoich kampanii content marketingowych. Czy oznacza to, że 70% budżetów jest zmarnowanych? Co gorsza, więcej niż połowa z nich przyznaje, że nie dostrzega tego, by ich działania miały wpływ na przychody firmy - wynika z raportu “Content Fitness Report” przygotowanego przez PAN Communications. Jednak nie wszystko stracone, z...
Ponad 3 razy więcej leadów przy 5-krotnie mniejszych wydatkach – taki wynik biznesowy osiągnęła kampania Facebook Ads prowadzona przez Bluerank dla Promedica24. Facebook właśnie opublikował studium przypadku tej kampanii jako ciekawy przykład sukcesu biznesowego.
Rynek opakowań kształtuje się dynamicznie, a świadomość i wymagania klientów stale rosną. Opakowanie jest 6-krotnie efektywniejszym środkiem promocji niż reklama – wynika z szacunków Stowarzyszenia Strategii Opakowania. Producenci zmuszeni są do ciągłego poszukiwania nowych rozwiązań, które pomogą im skutecznie wyeksponować dany artykuł....
Krój pisma

Typografia na co dzień (3): Krój pisma

Obję­tość skryptu autor­skiego wyra­żona w arku­szach wydaw­ni­czych bądź w arku­szach autor­skich, to z pew­no­ścią naj­istot­niej­szy czyn­nik, mający wpływ na koń­cową obję­tość publi­ka­cji. Ale to dopiero począ­tek kło­po­tów. Po...
 
Signs.pl - Polska Reklama i Poligrafia © 1997-2019 ICOSWszystkie prawa zastrzeżone. ISSN 2657-4764