Podstawą jest wybranie dobrej fotki. Prawda jest taka, że jeśli wszystkie elementy szablonu będą prezentowały się świetnie, a fotka będzie - delikatnie mówiąc - brzydka, cały szablon straci na swojej wartości. Najlepiej, jeśli wokół głównego elementu fotki (czyli tego, co jest związane tematycznie ze stroną i na czym użytkownik ma skupiać swoją uwagę) w przypadku dużego topu pozostanie sporo wolnego, nieskomplikowanego miejsca - będziemy mogli bowiem umieścić tam odpowiedni napis, a inne szczegóły nie będą odciągały naszej uwagi.

Faktem oczywistym jest, że drugim ważnym fundamentem jest odpowiedni dobór kolorów. Sytuacja podobna jak przy wyborze fotki - jeśli kolory będą złe, cały design będzie zły. Nie trzeba chyba nikomu mówić, że kolory fotki muszą pasować do ogólnej kolorystyki szablonu... czyli? Nie dodawaj czerwonej papryki, do szablonu w kolorze morskiego niebieskiego, może jeszcze z wodnymi elementami... prawda, że nie pasuje?

Przejdźmy więc do tego, o czym naprawdę miał być tutorial...

1. menu

   Jak widać, ja swój szablon zrobiłam w kolorze niebiesko-biało-szarym. Stonowane, pasujące do siebie kolory. Menu również ma kolor niebieski. Zaczynamy więc od stworzenia odpowiedniego kształtu o kolorze niebieskim. Przy użyciu dodge tool rozjaśniamy w niektórych miejscach nasz pasek.

   

   W zakładkach warstw zaznaczamy nasz kształt, a następnie select -> modify -> contract -> 2px. Nasze zaznaczenie zmniejszyło się o 2 px. Wybieramy biały gradient (Foreground to Transparent) i dajemy delikatny odcień od dołu. Efekt, być może mało widoczny, ale jest. Wszystko zależy od krycia i parametrów, które wybierzecie.

   

   Następnie, za pomocą Rectangular Marquee Tool zaznaczamy połowę kształtu, ponownie wybieramy ten sam gradient i kierując go do góry tworzymy delikatny odcień. Po tym, gumką (soft brush 100-300 px) delikatnie gumkujemy boki naszego cienia.

   

   Takim oto sposobem skończyliśmy tworzyć nasze menu. Pozostaje nam dodać tylko odpowiedni tekst i rozdzielić poszczególne odnośniki (w moim przypadku były to akurat linie stworzone z myślników i odpowiednio przekręcone).

2. PANEL LOGOWANIA, WYSZUKIWANIE, STOPKA

   Robimy tym samym sposobem, co menu. Odpowiedni kształt, wypełniony kolorem i potraktowany dodge toolem dla cieniowania. Można dodać 1-2 px ramkę. Ja chyba utrudniłam sobie sprawę, bo po prostu stworzyłam nową warstwę, zaznaczyłam warstwę z kształtem, weszłam następnie w Edit -> Stroke, 1-2 px ramka, z wybranym parametrem inside, koloru białego. Krycia nie zmieniamy.

   Każdy z mniejszych napisów (zaloguj się, hasło, model, marka etc.) został wykonany czcionką Verdana, o rozmiarze od 10-11 px. Uważam, że jest to najlepsza czcionka do zastosowania w treści. Napis Wyszukiwanie oraz ten w topie został wykonany fontem Century Gothic.

   

   Załóżmy, że jesteśmy na takim etapie. Wykonanie menu i pozostałych kształtów zostało przeze mnie opisane, dobór fotki również. Z uzupełnieniem treści na poszczególnych elementach nie powinno być problemu - równie dobrze może być to samo Lorem Ipsum, napisane odpowiednią czcionką, bądź też inne elementy, jak chociażby skróty galerii (co mam na myśli? Kilka miniaturek z odnośnikiem do galerii). Nawet patrząc na inne szablony można zobaczyć, w jaki sposób można uzupełnić poszczególne miejsca. Trzeba tylko pamiętać, że należy zachować umiar i rozsądek, czyli nie pisać czcionką o rozmiarze 30 w małym okienku - bo to najzwyczajniej w świecie nie pasuje.. bądź też nie dodawać brushy, wystających poza obramowanie.

   To maleńkie okienko Nasi asystenci zostało przeze mnie wykonane na podstawie tutoriala - przyznaję się bez bicia. Przy odrobinie dobrych chęci i umiejętym szukaniu każdy go znajdzie i również będzie mógł sobie owo okienko wykonać.

   Źródło tutoriala na okienko - deviantart.com

3. Treść strony powinna być czytelna i prosta, bez zbędnych udziwnień, które uniemożliwiałyby nam spokojne przeglądanie tego, co nas interesuje. Tekst powinien być wyraźny, nie chcemy bowiem tracić wzroku przez wlepianie oczu w monitor usiłując rozczytać coś, co jest... nieczytelne, czy to z powodu kolorów, czy to z powodu czcionki. Tutaj ponownie polecam czcionkę Verdana 10-11 px, gdyż według mnie najlepiej sprawdza się w tej roli. O kolorach pisać nie będę, jest to bowiem uzależnione od ogólnej kolorystyki szablonu.

   Jak zauważyliście, cały szablon jest okrągły. Nie ma tu kanciastych rogów. Nie możemy więc pozwolić sobie na coś takiego w treści. Każde cieniowanie, dzielenie okienek, elementów, powinno również być w krągłościach. Kanty gryzą się z krągłościami i odwrotnie.

   Teksty Wieści ze świata motoryzacji oraz Najnowsze oferty zostały wykonane grubą, większą czcionką dla wyróżnienia. W tym przypadku jest to Impact. Nie chcemy jednak, aby owe grubsze nagłówki/tytuły paliły nas w oczy i przeszkadzały, dlatego też nie robimy ich w mocnym, wyróżniającym kolorze (są na to po prostu za duże!), ale w delikatniejszym, stonowanym - tak, aby pasowały do całego szablonu (oczywiście w innym wariancie kolorystycznym wszystko może wyglądać inaczej). W tym przypadku jest do delikatny, szary kolor.

   Dla odznaczenia poszczególnych wiadomości i ofert (w końcu nie chcemy, żeby nam się wszystko zlało) zastosowałam delikatne cienie - nie przeszkadzają i odpowiednio oddzielają odrębne teksty od siebie. Jak je zrobić? Tworzymy zaznaczenie:

   • kanciaste po prostu za pomocą Rectangular Marque Tool (M)

   • zaokrąglone poprzez stworzenie kształtu narzędziem Rounded Rectangle Tool, a następnie jego zaznaczenie

   Po czym wybieramy gradient (Foreground to Transparent) w ciemnym kolorze (szary bądź czarny) i tworzymy delikatny cień (delikatny! Nie chcemy przecież, żeby zakrywał nam napisany ciemną czcionką tekst). Wciskamy Ctrl +D dla odznaczenia, ustawiamy odpowiednio, i efekt powinien wyglądać mniej więcej tak:

   Czerwona strzałka wskazuje niemalże niewidoczny tutaj cień - inaczej jednak sprawa będzie wyglądać, gdy takich elementów pojawi się z konieczności więcej - wówczas owe cieniowanie będzie bardziej widoczne.

   

   W zasadzie... To by było na tyle. Nie zapomnijcie wyłączyć wygładzania czcionek w treści! Nie ma sensu opisywać rozmieszczenia poszczególnych elementów (co? Jak? Dlaczego tam?), bowiem nie wiem, kto do czego będzie chciał owy tutorial i wskazówki w nim zawarte wykorzystać. Wszystko zależy tylko i wyłącznie od Waszej WYOBRAŹNI i naprawdę obiektywnej oceny swoich projektów - i to tam poszukajcie klucza. Każdy widzi inne projekty i potrafi zobaczyć różnicę poziomów - próbujcie więc do skutku, poprawiajcie, aż Wasz projekt dojdzie do jakiegoś poziomu. Nie pasuje Ci to rozwiązanie, taki kształt, taka czcionka? Trudno, musi pasować inna - więc po prostu próbuj.