Dla webmastera > Tutoriale

Projektowanie nagłówka - tutorial by PA_BLO PT1

(1/2) > >>

PA_BLO:
Skye niedawno poruszyła na forum kwestię tego, jakich tutoriali poszukują nasi użytkownicy. Jedną z większości była grupa użytkowników, którzy chcieliby podszkolić się w tworzeniu grafiki. Jako, że mam już spore doświadczenie w tej dziedzinie i gołębie serce - postanowiłem zaserwować coś od siebie. W tym (zapewne długim i skomplikowanym) tutorialu pokażę Wam krok po kroku co robię podczas standardowego wykonywania nagłówka w programie Photoshop.

Od razu uprzedzam, że nie udostępniam wersji PSD wykonywanego prze ze mnie projektu, gdyż to ma być lekcja dla Was a nie gotowiec :) Mam nadzieję, że to docenicie. Korzystam z programu Adobe Photoshop CS3 (bo według mnie to najwygodniejsza wersja) w polskiej wersji językowej. Jeżeli korzystacie z anglojęzycznej wersji tego programu to polecam stronę http://www.pstools.pl/ gdzie znajdziecie angielskie odpowiedniki operacji jakie wykonuje. Tutorial został podzielony na kilka części, które będę w miarę możliwości i czasu dokładał i Wam udostępniał w tym temacie.


Tworzenie dokumentu
1. Prace nad zaprojektowaniem nagłówka zawsze rozpoczynam od stworzenia dokumentu większego od zaplanowanej szerokości strony. Za zwyczaj tworzę dokument praktycznie zawsze o tych samych wymiarach po to aby mieć pole do popisu. Tak więc zabieram się za stworzenie dokumentu o rozmiarach 1500px (szerokość) na 2000px (wysokość). Takie wymiary przybieram gdy od razu planuje stworzyć na jednym dokumencie wygląd nagłówka jak i postów wraz z panelem bocznym, ponieważ nie lubię bawić się w łączenie elementów aby sprawdzać czy są zgrane kolorystycznie.

2. Tym razem za inspirację posłużyła mi sesja Miley Cyrus dla brytyjskiego wydania ELLE z 2013 roku {zdjęcia} Sesja jest zachowana w dość jasnej kolorystyce, dlatego też postanowiłem stworzyć szablon w nie co jaśniejszej pastelowej tonacji (uwielbiam kolory pastelowe). Część ubrań Miley ma kolor pudrowy, dlatego uważam iż dobrym rozwiązaniem na kolor tła będzie barwa o kodzie #cedfee (jasny, delikatny błękit). Nakładam kolor na stworzony wcześniej dokument.

3. Teraz za zwyczaj na tym etapie definiuje już zbliżoną szerokość nagłówka, aby później nie okazało się że grafika będzie na całą szerokość 1500px. Zawsze korzystam z linii pomocniczych (tzw. miarki). Opcję można włączyć wchodząc w Widok -> Miarki (Ctrl+R). Następnie wybieram narzędzie "Przesunięcie" (V). Najeżdżam kursorem na krawędź miarki pionowej i przesuwam ją na szerokość 250px (oś miarki poziomej) i upuszczam ją tam. Powinna pojawić się niebieska linia, która wyznaczy nam lewy brzeg nagłówka. Teraz ponownie wracam kursorem na lewą miarkę i kolejną linię przesuwam na szerokość 1200px (na osi poziomej) i też upuszczam. Tym sposobem mam wyznaczoną prawą krawędź nagłówka. Między jedną a drugą niebieską linią mamy szerokość 1000px. Ta wartość jest moją opcjonalną szerokością nagłówka i przy jego tworzeniu będę starał się pilnować aby nie pracować po za jej krawędziami. {zobacz} Widok tych linii pomocniczych zawsze można wyłączyć wybierając Widok -> Dodatki (odznaczamy opcję).

Przygotowywanie głównej postaci nagłówka
4. Mając przygotowany dokument wraz z określoną szerokością nagłówka, mogę przystąpić do pierwszych czynności. Aby praca była uporządkowana, korzystam z opcji "grupowania warstw". Opcję "Utwórz nową grupę" znajdziecie na palecie warstw {zobacz}. Utworzoną grupę nazywam np. Header i w niej będę tworzył warstwy w ramach projektowania nagłówka. Teraz gdy już mam utworzoną grupę, mogę przystąpić do pracy wokół głównej postaci nagłówka. Otwieram wcześniej przygotowane zdjęcie Miley (z wcześniej nałożoną koloryzacją aby dodać lekki kontrast, gdyż zdjęcie jest zbyt jasne) i pomniejszam je do rozmiaru, który mnie interesuje. Tak przygotowane zdjęcie przesuwam na dokument nagłówka tak aby warstwa z nim znalazła się we wcześniej utworzonej grupie. Na tym etapie wycinamy postać. W tym celu korzystam z narzędzia lassa wielokątnego (L). Powiększam sobie obraz kilkukrotnie aby lepiej widzieć szczegóły i wycinam postać Miley tak aby obszar wokół włosów pozostawić nietkniętym - gdyż zajmę się nim później. Po wycięciu ciała postaci (zostawiając jej głowę) - Wasz projekt powinien wyglądać mniej więcej tak {zobacz}.

Włosy są często najtrudniejsze do wycięcia, gdyż wycinając każde pasmo osobno można doprowadzić do bardzo sztucznego efektu. Dlatego ja preferuję wykorzystanie miękkiej gumki (np. o szerokości 45px - szerokość dopasowałem mniej więcej do proporcji zasięgu jakim mogę usunąć przy tak małej postaci). Na przykładzie Miley mogłem pozwolić sobie na lekkie przycięcie jej włosów, gdyż prawdziwy problem zaczyna się dopiero powyżej linii jej uszu (dodatkowo dochodzi fakt, że zdjęcie w tym miejscu jest prześwietlone i ciężko jest wyznaczyć linie włosów). Dodatkowo warto ustawić przepustowość gumki, czyli silę nacisku. Po wybraniu gumki przejdźcie do ustawień, które znajdują się na górnym pasku (poniżej nawigacji programu). Ja osobiście preferuje wartości przepływu między 20 a 40% {zobacz}. Tu przykładowo mam ustawione na oko 36%. To oznacza, że gumka nie będzie nam wszystkiego przycierała na maxa, ale delikatnie likwidowała zbędne tło. Delikatnie wycieramy obszar wokół włosów (nie musi to być dokładnie, gdyż za chwilę wszystko nadrobimy przy projektowaniu tła). Podczas pracy możecie dowolnie zmniejszać rozmiar gumki aby dopasować jej rozmiar do szczegółów. Po wszystkim moja praca wygląda mniej więcej tak {zobacz}.

Teraz czas na zatuszowanie tego śmiesznego "berecika" aby nie wyglądał on tak mało estetycznie. Dlatego tworzymy nową warstwę, która będzie znajdowała się pod warstwą z postacią główną. Możemy ustawić sobie nazwę warstwy aby orientować się co na każdej z nich jest. Wystarczy dwuktornie kliknąć na nazwę warstwy w oknie warstw i wpisać swoją własną. Ja wpisałem "mgiełki" bo to właśnie teraz będziemy robić. Z narzędzi "Pędzle" wybierz miękki pędzel o rozmiarze ok. 250px - 300px. Z palety kolorów wybieramy biały, zaś "Tryb mieszania" tejże warstwy ustawiamy na "Łagodne światło". Teraz w okolicach głowy naszej postaci kilkukrotnie naciskamy pędzlem pozostawiając rozbłyski, aby rozmazane kontury naszej postaci były troszkę zatuszowane. Jeżeli widzimy, że nadal włosy naszej postaci są brzydko zakończone - możemy ponownie je troszkę bardziej wytrzeć wedle własnego upodobania. Kilka "mgiełek/rozbłysków" możecie zrobić również w okolicach ramion postaci aby rozjaśnić obszar wokół niej. Na tym etapie moja praca wygląda tak {zobacz}.

Efekt "rozmycia" głównej postaci
5. Zapewne wielu z Was widziało efekt przesunięcia konturów postaci. To bardzo łatwa rzecz. Wystarczy, że dwukrotnie powielicie warstwę z Waszą postacią. Pierwszą warstwę (tą znajdującą się najwyżej) zostawiacie w spokoju. Zaś w drugiej i trzeciej zmniejszacie krycie do 20% i przesuwacie jedną z nich o 2px lub 3px w lewo, zaś drugą w prawo. Teraz aby złączyć trzy warstwy z postacią w całość, mając wciśnięty Ctrl wybierzcie w palecie warstw te trzy warstwy i prawym przyciskiem rozwińcie listę i wybierzcie opcję "Scal warstwy".

Praca nad tłem nagłówka - wtapianie postaci
6. Teraz pora na zagospodarowanie reszty tła, aby nie wydawało się ono takie puste. W tym celu schodzimy w palecie warstw na najniższą warstwę, tą najbliższą tłu - gdyż teraz w tym obszarze warstw będziemy pracować. Często na stronach jest tak, że graficy wtapiają w tło jednokolorowe postaci. Ja zrobię tak samo. Otwieram w programie kilka zdjęć, które chcę wtopić. Możecie je pomniejszyć jeżeli są za duże. Ja swoje pomniejszam, nakładam na nie koloryzację i zmieniam ich kolorystykę na czarno białą. (koloryzację nakładałem po to aby poprawić kontrast zbyt jasnego zdjęcia by następnie za pomocą zejścia do poziomu czarno-białego sprawić, że nasze zdjęcia będą się równomiernie wtapiały w tło). Na tym etapie nagłówek wygląda tak {zobacz}. Zdjęcia możemy przytrzeć aby jedno z drugim się komponowało (robimy to gumką o miękkim zakończeniu). Wszystkie warstwy na których znajdują się nasze postacie (które chcemy wtopić w tło) scalamy (ten sam sposób jak przy scalaniu warstw z główną postacią). Teraz zabieramy się za wtapianie. Tryb mieszania tejże warstwy ustawiamy wedle naszych upodobań - jednak ja preferuje "Łagodne światło". Nadal widać kontury naszych zdjęć, więc możemy zrobić tak: 1) Przytrzeć miękką gumką kontury wokół zdjęć oraz 2) gdy nadal warstwa jest zbyt widoczna i wyraźna, możemy zmniejszyć jej widoczność korzystając z opcji "Wypełnij", której wartości w % znajdują się zaraz pod opcją gdzie zmniejszamy krycie. Każdy z nas ustawia taką wartość jaka mu odpowiada. Ja przykładowo ustawiłem wartość 60%. {zobacz}

Dodawanie brushy do tła
Aby uzupełnić nasze tło w tym miejscu, możemy dodać na nowej warstwie kilka jasnych brushy typu "sparkle". Z łatwością znajdziecie je na deviantart. Przy nakładaniu ich ustawcie ich kolor na biała barwę, zaś tryb mieszania warstwy na dowolny w zależności od tego jaki efekt wtopienia tych brushy chcecie uzyskać. Ja miałem brushe, które same w sobie są bardzo delikatne więc nie ustawiałem trybu warstwy. {zobacz}.


Efekt końcowy tego etapu prezentuję powyżej. Kolejne kroki już wkrótce. Z góry przepraszam za mój język, jeżeli jest skomplikowany lub nie jasny.

Przepraszam, że długo nie aktualizowałem tego tutorialu, ale zwyczajnie nie miałem czasu. W drugiej odsłonie zaprezentuję Wam jak zaprojektować adres strony, wiadomość powitalną oraz nawigację. Zaczynamy.

Projektowanie logo/adresu strony
7. Bardzo ważnym elementem jest to, aby nasi czytelnicy wiedzieli jaki jest adres strony by mogli ponownie na niego trafić. Na stronach typu fansite taki element powinien być umieszczony w w widocznej części nagłówka (jeżeli decydujemy się na umieszczenie go akurat na nagłówku). To jaką czcionkę wybiorę do zaprojektowania adresu strony zawsze mam uwarunkowane tym w jakim stylu będzie cały szablon. Gdy decyduje się na prosty i przejrzysty layout to wtedy najczęściej poszukuje fontów prostych bez zbędnych dekoracji. Ale w tym wypadku mamy typowy fansite, gdzie stawiam na zabawę a nie na powagę z tytułu prowadzenia strony. Dlatego też w takich sytuacjach skupiam się na dobraniu czcionki z rodziny tzw. Scripts. W tym celu tworzę nową warstwę, która będzie znajdować się w katalogu HEADER. To czy adres chcecie umieścić nad postacią bądź za nią to już Wasza decyzja - dostosujcie wtedy czy nowo utworzona warstwa będzie niżej czy na samej górze w katalogu. Teraz wybieram miejsce gdzie chcę umieścić adres strony i używając narzędzia tekstowego (T) zakreślam pole i piszę adres. Na przykładzie wykorzystałem czcionkę "Aphrodite Pro". Zarówno słowo MILEY jak i CYRUS są zrobione tą samą czcionką, tylko zaprojektowane osobno i przesunięte dla ciekawszego efektu. Ponadto zdecydowałem się troszkę zmniejszyć przerwy między poszczególnymi znakami w wyrazach - dlatego rozstaw zmniejszyłem do -25 {zobacz}.

Gdy mam już umieszczony adres - czas na jego wystylizowanie, czyli dodanie efektów. Można to zrobić osobno dla każdego z napisów bądź dla obu jednocześnie (różnice w nakładaniu efektów są widoczne gdy jeden z napisów nachodzi na drugi). Aby pracować na obu warstwach jednocześnie wystarczy scalić je - jak jak w przypadku gdy scalałem postać Miley. Ja jednak zdecydowałem się pracować na obu warstwach osobno - gdzie dokonam zmian na jednym z napisów a następnie skopiuję styl i przeniosę go na drugi. W tym celu klikam prawym przyciskiem myszy na warstwę pierwszego napisu (weźmy na przykład MILEY) i przechodzę do funkcji "Opcje mieszania". Pierwsze co robię to ustawiam wartości cienia, który będzie wysuwał się zza napisu. Wprowadzam ustawienia, które mnie interesują i które wydają się najciekawsze dla osiągnięcia zamierzonego efektu {zobacz}. Następnie przechodzę do zakładki "Cień wewnętrzny". Tu jedynie zmieniam wielkość i zakres cienia wewnętrznego oraz jego kolor {zobacz}. Czasami decyduje się też na dodatkowe zmiany w zakładce "Blask wewnętrzny". Tym razem też postanowiłem wykorzystać taką opcję {zobacz}. To wszystko. Więcej nie kombinuje z napisem bo nie chce z niego zrobić czegoś przesadnego - dlatego zatwierdzam wprowadzone zmiany. Takie same efekty chcę uzyskać na drugim napisie, stąd klikam prawym na warstwę na której obecnie pracowałem i z listy wybieram "Kopiuj styl warstwy" i wklejam go na warstwę z drugim napisem (prawy przycisk myszy i "Wklej styl warstwy"). Na tym etapie, mam wstępnie zaprojektowany adres strony {zobacz}. W późniejszych etapach mogę zdecydować się na dodanie ewentualnych rozjaśnień brushami - ale to okaże się jak potoczy się praca nad innymi elementami.

Projektowanie wiadomości powitalnej
8. Będąc już dobry czas na forum, zauważyłem że wiele osób zadawało pytania dotyczące czcionki i stylu pisania wiadomości powitalnej. Większość zgodnie wykorzystuje czcionkę "Arial". Jednak spotkałem się również z projektami, które do tego celu wykorzystały czcionkę Century Gothic bądź Curier. Wszystko zależy od Was. Ja zawsze stawiam na Arial, bo uważam ten font za uniwersalny, który fajnie komponuje się z innymi stylami, czcionkami, grafikami. Co do ustawień to ja osobiście wykorzystuje następujące parametry: Czcionka: Arial (żadne Arial Black czy też Narrow), metoda wygładzania: BRAK (opcja ta znajduje się na górnym pasku narzędzi zaraz przy symbolu podwójnej literki "a"), rozmiar czcionki: 11 pkt. {zobacz}

Gdy mamy już ustawioną czcionkę, to możemy zabrać się za dobór koloru fontu. To jaki kolor wybierzecie zależy od Was. Ja natomiast mając na uwadze to, że praca będzie wykonana w kolorach pastelowych, decyduje się na ciemniejszy błękit. Wybieram miejsce gdzie chcę napisać wiadomość powitalną i robię to. To jak długa powinien być Wasz tekst, to zależy od tego jak wiele chcecie zaoferować odwiedzającym. Nie należy jednak przesadzać z jego długością, gdyż to nie jest kolumna w prasie, aby iść na ilość znaków. Dodatkowo ważniejsze wyrazy jak imię i nazwisko gwiazdy, adres strony bądź wymienione sekcje dodatkowe możecie wyeksponować innym kolorem. Gdy macie wrażenie, że Wasza wiadomość powitalna wygląda blado bądź jest za mało widoczna i niezbyt czytelna - możecie dodać cień bądź zwyczajnie zmienić kolor na wyraźniejszy. {zobacz}. Możecie też dodać Wasz podpis, wykorzystując do tego celu inną bardziej osobistą czcionkę, która przypomina ręczne pismo. W tym celu polecam dobrze Wam znany font La Carte. Aby sekcja z Waszą wiadomością powitalną wyróżniała się, warto dodać pod nią jakieś lekkie tło {zobacz}.

Nawigacja strony
9. Bardzo ważnym elementem nagłówka jest nawigacja, ponieważ dzięki niej nasi czytelnicy będą w stanie poruszać się po stronie. Należy ją umieścić w widocznym i łatwo dostępnym miejscu. Wcześniej uważnie zastanówcie się jakie sekcje nawigacji chcecie zaprojektować, po to aby rozmieścić je estetycznie na szerokości całego nagłówka. Czcionką jaką się posłużę będzie Century Gothic o wysokości 10pkt i metodą wygładzania "Twarde". Napisy nawigacji zrobiłem jasnym kolorem zbliżonym do barwy białej. Dodatkowo dodałem cień na odległość 1px, zasięgu 0% i rozmiarze 0px, barwie czarnej o trybie mieszania "Nakładka" z kryciem 50%. Ze względu na to, że nawigacja jest u mnie rozdzielona na dwie części, które są przecięte główną postacią - zdecydowałem się aby tło pod nawigacją było inne dla każdej z tych części. I tak lewa strona jest różowa, lewa fioletowa. Dodatkowo nałożyłem na nich lekki wzorek z trybem mieszania "Łagodne światło" z zmniejszonym kryciem. Dodatkowo cień wewnętrzny o odległości 0px, podlewką 6% i rozmiarem 13px. Aby nadać całości troszkę wyrazistości zdecydowałem się na dodanie też cienia o trybie mieszania "Nakładka" o odległości 1px i wyzerowanych pozostałych dwóch suwakach. {zobacz}

Na tym etapie mój nagłówek wygląda tak. Co prawda są na nim już główne elementy, ale nadal wymaga on dopracowania w postaci dodania kilku równie istotnych detali.



LINK DO DRUGIEJ CZĘŚCI TUTORIALU

Matthew:
Baaardzo Ciekawe  ;D Dziękujemy :) Nie wiem jak dawać plusy - niech ktoś da za mnie  ;) Jak tylko znajdę czas się za to biorę  :D

Ellie:
wow PA_BLO ! Jesteś wielki, w sumie usunęłam AP, ale chyba znów zainstaluję, żeby to wypróbować ! :0 oczywiście plusik!

Skye:
no i pięknie! dziękować!

Dakota:
Bardzo ciekawa i pomocna instrukcja. Być może skorzystam ; ))

Nawigacja

[0] Indeks wiadomości

[#] Następna strona

Idź do wersji pełnej