Zasada „bycia witanym przez ubranie” dotyczy nie tylko ludzi, ale także witryn. Sukienka strony to jej projekt. I to projekt decyduje o wrażeniu, jakie odwiedzający ma w pierwszych kilku sekundach przeglądania zasobu. To wrażenie jest szczególnie ważne, ponieważ determinuje jego przyszłe zachowanie. Pierwszym elementem projektu, który widzi każdy użytkownik odwiedzający witrynę, jest jej „nagłówek”. Czapka jest twarzą zasobu internetowego. Dlatego każdy początkujący web designer chce przede wszystkim nauczyć się tworzyć nagłówki dla witryn.
Niezbędny
- - dostęp do Internetu;
- - nowoczesna przeglądarka;
- - edytor grafiki rastrowej (GIMP, Photoshop);
- - opcjonalnie: edytor grafiki wektorowej (CorelDraw);
- - opcjonalnie: środowisko modelowania 3D (Blender, 3DStudio);
- - opcjonalnie: kartka, ołówek lub długopis.
Instrukcje
Krok 1
Opracuj koncepcję przyszłego nagłówka witryny. W idealnym przypadku koncepcja powinna być oparta na oryginalnym pomyśle. Gdy brakuje pomysłów, inspirację można uzyskać analizując istniejące dobre rozwiązania. Odzwierciedlaj wynik twórczych poszukiwań w formie szkicu na kartce papieru. Szkic powinien odzwierciedlać strukturę przyszłego nagłówka strony ze wskazaniem miejsc „gumowych” i obszarów wypełnionych obrazami. Na tym etapie warto przemyśleć przybliżoną kolorystykę projektu nagłówka.
Krok 2
Wybierz rozmiar nagłówka. Właściwie warto jasno określić tylko jeden z jego parametrów - wysokość. Z reguły wysokość nagłówków witryny jest stała i nie zależy od rozdzielczości logicznej, która wpływa na parametry wyświetlania czcionek. Innymi słowy, powinieneś wybrać wartość wysokości nagłówka w pikselach. W takim przypadku warto wziąć pod uwagę możliwość umieszczenia w nagłówku banerów lub bloków reklamy kontekstowej. Jeśli chodzi o szerokość, należy określić minimalną wartość, podkreślając przynajmniej jeden „gumowy” obszar, który pozwala na dostosowanie nagłówka do różnych rozmiarów strony internetowej.
Krok 3
Utwórz szablon nagłówka w edytorze graficznym. W nowym dokumencie dodaj przezroczystą warstwę, na którą przeciągniesz szkic zgodnie z wybranymi parametrami geometrycznymi. Wysokość warstwy powinna odpowiadać wysokości nagłówka. Szerokość można przyjąć jako dowolna, ale większą od minimalnej, pozostawiając miejsce na poziome obszary „gumowe” „W szablonie wyznaczyć strefy o stałych i zmiennych rozmiarach, strefy przeznaczone do wypełnienia obrazami statycznymi, obrazy tła.
Krok 4
Wyszukaj lub utwórz statyczne obrazy do umieszczenia w szablonie nagłówka. Logo i niektóre unikalne elementy można stworzyć w edytorze wektorowym lub środowisku modelowania 3D. Dosyć łatwo jest znaleźć tematyczne obrazy w darmowych fotobankach w Internecie.
Krok 5
Wstaw tło, logo i statyczne obrazy do szablonu nagłówka witryny w edytorze graficznym. Dodaj tło i każdy obraz do osobnej przezroczystej warstwy. Ułóż warstwy w najlepszy sposób. Przesuwając obrazy warstwami, uzyskaj ich idealny układ, odpowiadający wcześniej stworzonemu szablonowi.
Krok 6
Zapisz wynikowy obraz nagłówka. Zapisz projekt roboczy w natywnym formacie edytora graficznego. Następnie zapisz spłaszczony obraz nagłówka w formacie bezstratnym (na przykład PNG).
Krok 7
W razie potrzeby utwórz szablon nagłówka HTML. Otwórz spłaszczony obraz w edytorze. Wytnij z niego obrazy odpowiadające obszarom o stałym rozmiarze. Z miejsc odpowiadających obszarom „gumowym” wytnij obrazy o szerokości 1 piksela. Zapisz wszystkie obrazy na dysku. Układ nagłówka HTML za pomocą zapisanych obrazów.
