Witam w moim nowym tutorialu, tym razem coś z działu webdesign, bo trzeba go rozwinąć
. Jest to tut na portal internetowy, są w nim opisane podstawy, więc naprawdę radzę dodawać coś od siebie do stron. Tematyka jaką wybrałem to EURO 2012, Wy możecie oczywiście wymyślić inny temat. Zacznijmy.
_______________
[ I ] Początek i tłoZaczynamy od wymyślenia tematu oraz kolorystyki naszej przyszłej strony. Ja wybrałem EURO 2012, więc i kolory będą w tym stylu, czyli zieleń i dodatki o różnej kolorystyce.
1. Pierwszą rzeczą jaką robimy jest otworzenie nowego dokumentu. U mnie są to wymiary 1000x1400. Najczęściej portale są dość wysokie, choć nie zawsze.
2. Następnie musimy zrobić tło. Ja pomyślałem o piłeczkach na miękkie światło, dodałem też deseń na krycie 20. Wygląda to tak:
click[ II ] Top1. Robimy top. Nie powinien być zbyt wysoki.
-Ja zrobiłem lekki, zielony gradient.
-Potem dodałem pattern "warning".
-Później przeciągnąłem dwuliniowy gradient od białego do przezroczystości, oczywiście na nowej warstwie. Tryb warstwy ustawiłem na pokrywanie, krycie na 40.
-Następnie dodałem logotyp (po lewej stronie), czyli napis (EURO 2012). Czcionka to Tahoma Bold.
-Zduplikowałem warstwę z napisem. Wybrałem opcję Kanał alfa na zaznaczenie. Zmieniłem kolor napisu na żółty. Warstwę tę przesunąłem pod warstwę z właściwym napisem. Wybrałem opcję Rozmycie Gaussa z ustawieniem na 8.
-Dodałem podtytuł (Poland & Ukraine) już bez zbędnych bajerów.
-Następnie wkleiłem na sam szczyt kolorowy pasek, symbol mistrzostw z reklam.
-Później zrobiłem gradientem dwuliniowym z białego do przezroczystości paseczek oddzielający logotyp od informacji co to za strona. Paseczek zduplikowałem, bo 2 takie wyglądają ładnie w połączeniu ze sobą.
-Dodałem po drugiej stronie paseczków napis "serwis informacyjny".
-Po prawej stronie topa jest miejsce na wyszukiwarkę. Najpierw czcionką Tahoma 12 pt napisałem "wyszukiwarka".
-Następnie należy zrobić okienko na wpisanie tekstu. Robimy nieduży podłużny prostokąt, u mnie wymiary 123x20.
-Wypełniamy go gradientem z białego do przezroczystości. Warstwa na pokrywanie krycie 100.
-Robimy ramkę 1px, najlepiej czarną.
-Dodajemy napis "szukana fraza". U mnie Tahoma 10 pt.
-Tym samym sposobem robimy button "szukaj", tyle że mniejszy.
-Dodałem jeszcze napis "zaawansowane" oraz znany nam już gradientowy oddzielnik, tym razem czarny między miejscem na szukaną frazę, a buttonem "szukaj".
-Proponuję jeszcze dodać coś w środku topa, coś spełniającego rolę "loga". Ja dodałem znanych piłkarzy.
Efekt:
click[ III ] Menu1. Przyszedł czas na menu.
-Najpierw robimy paseczek o wysokości 12 px, szerokość na całą stronę.
-Wypełniamy go gradientem dwuliniowym, ja mam od zielonego do przezroczystości, dobrze aby pasował ten kolor do naszej strony.
-Tryb warstwy ustawiamy na Twarde Światło, krycie wg uznania. Możemy też ewentualnie pobawić się jasnością tego paska.
-Teraz robimy właściwe menu. Musi wychodzić tak jakby z paska, który zrobiliśmy przed chwilą.
-Najpierw wyśrodkowany prostokąt. Szerokość ok. 500, w zależności od potrzeb, wysokość 40-50 px.
-Wchodzimy w zaznaczenie>zaokrąglenie i ustawiamy na 30%.
-Wypełniamy prostokąt jakimś pastelowym, ładnym kolorem, najlepiej jak pasuje do naszego topa.
-Uzupełniamy braki tak, aby zaokrąglone były tylko dolne rogi.
-Wybieramy "kanał alfa na zaznaczenie".
-Robimy nową warstwę.
-Gradient dwuliniowy, tak jak to było robione na początku w topie.
-Ustawiamy tryb warstwy na pokrywanie.
-Teraz na nowej warstwie kolejny paseczek, wysokość o połowę mniejsza od tego 12 px.
-Wypełniamy go trochę ciemniejszym odcieniem koloru menu, u mnie jest to zielony.
-Teraz musimy sobie zaplanować jak podzielić prostokąt menu. Ja mam szerokość 500 px, więc zrobię 5 buttonów po 100 px.
-Robimy znane nam z topa gradientowe cienkie kreski co 100 px, u mnie są białe.
-Następnie wstawiamy tekst, wyśrodkowany, między kreski. U mnie Tahoma Bold 10 pt, wielkie litery.
-Pamiętacie tą zieloną 6px kreskę na szerokość strony? Wreszcie się przyda. Ścieżkami robimy małą strzałeczkę, dobrze kontrastującą z kolorem menu, u mnie pomarańcz.
-Na koniec robimy cień z ustawieniami 0/1/1/czarny/20-50. Ja zrobiłem ten cień na menu, można też zrobić na innych elementach, ale nie przesadzajcie.
-Oto efekt:
click-Górę mamy jako tako zrobioną, więc czas na...
[ IV ] Poprawki kosmetyczne topa i menu1. Tutaj nie mam za bardzo co pisać. Dodajemy coś jak czegoś brakuje, usuwamy, zmieniamy kolory, wszystko wedle uznania, tak żeby kompozycja była jak najlepsza. Mój efekt po poprawkach
-Ja dodałem cień na tych kolorowych flagach u góry.
-Wkleiłem piłkę za Beckhamem.
-Wyszło w efekcie tak:
click[ V ] Zagospodarowanie boków laya1. Przyszedł czas na zagospodarowanie przestrzeni bocznej. Mogą się tam znaleźć najprzeróżniejsze informacje, w moim przypadku poczynając od rozkładu grup, kończąc na wyglądzie oficjalnej piłki i reklamach.
-Zaczniemy od zrobienia tła, na którym znajdą się nagłówki i informacje.
-Ja po prostu zrobiłem jeden długi prostokąt i wypełniłem kolorem pasującym do reszty, czyli...białym. Szerokość zrobiłem ok. 200 px.
-Nagłówki zrobię o wysokości 45 px, na tej samej zasadzie co top.
-Do nagłówka dodałem jeszcze coś co kojarzy się z tematyką strony, czyli piłkę.
-Napis podświetliłem tak samo jak logotyp.
-Wygląd nagłówka po tych operacjach:
click-Dodajemy tekst oraz robimy nagłówki z inną zawartością.
-Oto mój efekt:
click[ VI ] Miejsce na artykuły1. Teraz jedna z ważniejszych części, czyli zrobienie ładnego boxa pod artykuły.
-Najpierw zrobimy tło boxa.
-Ustalamy wymiary.
-Robimy jednolite tło, ja zrobiłem takie jak w panelach bocznych.
-Pamiętajcie, aby wszystko było zrobione w miarę równo.
-Teraz zrobimy nagłówek napisem "Artykuły". Ja zrobię go na tej samej zasadzie co nagłówki w panelach bocznych, tyle że tym razem bez piłki
-Następnie musimy zrobić tekst, tu dużej filozofii nie ma, po prostu wpisujemy ładnie jakiś przykładowy. Może być jeden długi artykuł, kilka mniejszych.
-Mój efekt:
click[ VII ] Stopka1. Ostatnim elementem będzie stopka.
-Stopka fajnie jak jest podobna stylem do topa, więc ja zrobię taki pomniejszony top.
-Oczywiście w stopce nie wstawiamy renderów takich jak w topie, logotypa i wyszukiwarki.
-Do stopki możecie też wstawić reklamy, długi banner.
-Obowiązkowo umieśćcie tam coś w stylu: "xxx design 2007 All Rights Reserved Copyright xxx"
-Oto mój efekt:
click[ VIII ] Ostatnie poprawki1. Ostatnie poprawki kosmetyczne są bardzo ważną rzeczą. Po prostu spoglądamy na laya i oceniamy czego brakuje, co usunąć. Kierujemy się przy tym gustem.
Oto mój efekt po poprawkach:
click-Dodałem kolorowe paseczki, takie jak w topie do nagłówków i stopki.
-Zrobiłem cienie pod panelami bocznymi.
_______
Mam nadzieję, że tut się podobał, wybaczcie, że nie dawałem screenów na bieżąco, ale sądzę, że da się wszystko wywnioskować, bo po każdym dziale pokazywałem efekt.
Pozdrawiam,
Lsr.ikonka:
http://www.gimpuj.info/replacement.pngOpis: Tutorial na standardowy portal internetowy w GIMPie.
Tutoriale
