Do roboty...

Pierwszym krokiem jest oczywiście stworzenie nowego projektu, czyli klikamy File > New i wybieramy rozmiary 250 px wysokości na 900 px szerokości. Tło jest jak na razie nieważne.

Następnie wypełniamy obrazek wybranym kolorem. Tu użyłem czarnego, ale oczywiście możecie wybrać jakikolwiek inny, pasujący do zaplanowanej kolorystyki site’a. Zaznaczam, że ten kolor będzie się bezpośrednio łączył z kolorem tła samej strony.Aby wypełnić wreszcie obraz, wybieramy Edit > Fill i w moim przypadku – Foreground Color. Jak widzicie na obrazku, jako pierwszy mam właśnie czarny, tło to natomiast biały. Na tej podstawie determinuje się Foreground / Background Color.



Teraz czas dokonać podziału na banner górny i menu strony. Należy to zrobić ostrożnie i możliwie jak najbardziej symetrycznie. Aby zaznaczyć takie pole wybieramy Rectangular Marquee Tool z „ruchomego” menu (klawisz M) i przytrzymując lewy przycisk myszki wydzielamy dany obszar. Następnie klikamy na selekcję prawym przyciskiem i wybieramy Layer via Copy.



To będzie nasze pole pod banner. Teraz pozostało jeszcze wydzielić obszar dla menu. Dla ułatwienia polecam zastosować Stroke na pierwszej selekcji (PPM > Stroke), dzięki czemu będziemy widzieć ile mamy miejsca dla menu. Uwaga – pole dla menu zaznaczamy z pierwszej warstwy Background.



Wybieramy warstwę odpowiedzialną na banner, która zdecydowanie wymaga upiększenia – czyli podkładu. Klikamy na nią PPM > Blending Options. Tam ustawiamy:

Outer Glow

Blend Mode: Normal
Opacity: 100 %
Kolor: biały
Spread: 9 px
Size: 7 px

Inner Glow

Blend Mode: Normal
Opacity: 100 %
Kolor: biały
Choke: 3 px
Size: 10 px

Color Overlay

Blend Mode: Normal
Kolor: 091551
Opacity: 75 %

Gradient Overlay

Blend Mode: Normal
Style: Linear
Scale: 60 %

Przypuśćmy, że robimy stronę teamu o nazwie Metal Frag, grającego w Quake IV. Czego potrzebujemy? Obrazków. Najlepsza jest wyszukiwarka Google, ponieważ w kilka sekund znajdziemy tam potrzebne źródła. Ja wybrałem delikwenta z jednego z pierwszych rysunków. Czas na najmniej przyjemną część roboty – wycinanie tego jegomościa. Ku mojej rozpaczy, ma on dość dużo nierównych elementów. Pamiętajcie, że pójście na łatwiznę w tym przypadku naprawdę nie popłaca. Do wycinania używamy Pen Tool (klawisz P). Powoli stawiamy nowe punkciki. Najlepiej robić to na dużym zoomie. Po skończeniu pracy klikamy prawym przyciskiem i wybieramy Save Selection na domyślnych ustawieniach.



Teraz kopiujemy (Ctrl+C) wybrany obrazek i wklejamy (Ctrl+V) na naszej warstwie. Automatycznie utworzy się nowa warstwa, ważne jednak, żeby utworzyła się nad poprzednią, nie pod. Moja postać wystawała trochę poza granice całego obrazu, dlatego kliknąłem PPM > Free Transform i ją odrobinę pomniejszyłem. Nie będziemy jednak stosować się do schematów i stworzymy coś ciekawszego. Niech wklejony obrazek wystaje poza granice pola bannera, uzyskamy dzięki temu niezły efekt. Pozostaje nam dopieścić tego strogga. Znowu klikamy Blending Options.

Outer Glow

Blend Mode: Normal
Opacity: 100 %
Kolor: biały
Spread: 4 px
Size: 10 px

Inner Glow

Blend Mode: Normal
Opacity: 100 %
Kolor: biały
Choke: 0 px
Size: 5 px



Warto teraz dodać trochę Brushów, które można ściągnąc z internetu (szukajcie haseł „tech brushes”).



Teraz zajmiemy się samym napisem. Najpierw przygotowujemy tło. Aby to zrobić, musimy najpierw zapisać obrazek (jako jpg i jako psd), następnie otworzyć jpg i zaznaczyć odpowiednie pole o szerokości bannera. Potem już tylko Layer via Copy...



W nowej warstwie ustawiamy Blending Options:

Color Overlay

Blend Mode: Normal
Kolor: biały
Opacity: 50 %

Stroke

Size: 1 px
Position: Outside
Blend mode: Normal
Opacity: 100 %
Kolor: czarny

Teraz na tym wpisujemy nazwę klanu („METAL FRAG”), automatycznie tworzy się nowa warstwa. Używałem czcionki Vibrocentric. Należy jeszcze upiększyć nasz napis – Blending Options:

Outer Glow

Mode: Normal
Opacity: 100 %
Kolor: czarny
Spread: 7 px
Size: 8 px

Gradient Overlay

Mode: Normal
Opacity: 72 %
Style: Reflected

Stroke

Size: 1 px
Kolor: czarny

Pod tym proponuję mały napis – “dla smaczku”.



Czas na buttony. Sam napis z jakimś efektem wygląda nieźle, ale to za mało. Dlatego warto dodać jakiś motyw – na przykład łuski od pistoletu. Musimy znaleźć taki obrazek, wyciąć go dokładnie i wkleić do naszego dokumentu. Tam go ew. zmniejszamy i ustawiamy w dobrym miejscu. Dodajemy efekty (do naboju i napisu):

Outer Glow

Mode: Normal
Opacity: 75 %
Kolor: biały

I mamy gotowy przycisk. Powielamy warstwę z łuską (Layer > Duplicate Layer) i wkrótce mamy gotową stronkę!



No – prawie gotową. Trzeba teraz to jakoś przerzucić na kod HTML. Z pomocą przychodzi nam Photoshop. Wybieramy Slice Tool (klawisz K) i dzielimy obrazek na banner oraz przyciski. Pamiętajcie – wszystkie części muszą być zaznaczone.



Potem klikamy File > Save for web, zaznaczamy wszystkie części i klikamy „OK”. Program zapisze nam plik index.html wraz z folderem zawierającym wszystkie obrazki.

To generalnie tyle. Pod tym, co właśnie zrobiliśmy, pozostaje do wpisania tylko treść. Wystarczy dodać tabelki i wypełniać. Oczywiście, można pod to zrobić jakieś tło lub ramki. Jednakże po tym krótkim tutorialu powinniście już umieć to zrobić sami. Wystarczy zacząć od większego obrazka...

Patrząc na stronę klanu Fear Factory nadal pewnie wzdychacie z podziwem. Fakt, jest ładnie zrobiona, ale nie jest to nic nadzwyczajnie trudnego w wykonaniu. Potrzeba czasu, a przede wszystkim - pomysłu. Każdy grafik zaczyna od prostych motywów, by skończyć na czymś ekstrawaganckim. Na przykład siedzicie w szkole, patrzycie na krajobrazy za oknem i nagle pojawia się myśl, że to drzewo i ten blok nieźle się komponują i wyjdzie z tego dobre logo dla waszego portfolio. W internecie szukacie odpowiednich zdjęć, mieszacie i efekt gotowy. Sztuką jest wykształcić w sobie tę manierę.

Na koniec polecam zaglądania na fora z tutorialami. P2l nada się doskonale. Powodzenia!

Wstęp | Do roboty...