Connect with us

Cześć, czego szukasz?

Internet Maker

GIMP i webmastering: Nagłówki stron WWW

W artykule nauczymy się przygotowywać loga (w formie szerokich banerów) na strony WWW: o stałej szerokości, z tłem wypełniającym całe okno przeglądarki oraz z ilustracją powielaną dowolną ilość razy.

W ćwiczeniach wykorzystamy m.in. narzędzie do pobierania koloru, przycisk do zamiany koloru pierwszoplanowego i koloru tła, wypełnianie gradientem oraz odbijanie warstwy lub zaznaczenia.

Witryna Autokomis

{tlo_1}

Krok 1

Tworzymy nowy obraz o wymiarach 800 x 187 pikseli. Do obrazu wklejamy wycięte zdjęcie samochodu.

{/tlo}

{tlo_0}

Krok 2

Warstwę z samochodem powielamy trzykrotnie. Otrzymane cztery samochody skalujemy do malejących rozmiarów i przesuwamy na prawą stronę.

{/tlo}

{tlo_1}

Krok 3

Wykorzystując narzędzie do pobierania z obrazu koloru, pobieramy dwa odcienie koloru niebieskiego z dowolnego samochodu. Najpierw wybieramy warstwę aktywną (narzędzie do pobierania koloru działa w odniesieniu do aktywnej warstwy!). Pobieramy kolor.

Następnie zamieniamy kolor tła i kolor pierwszoplanowy (skrót klawiszowy X), po czym pobieramy drugi z kolorów. Gdy oba kolory są ustalone, tworzymy nową warstwę i wypełniamy ją gradientem liniowym.

{/tlo}

{tlo_0}

Krok 4

Dodajemy do obrazu warstwę białą i umieszczamy na niej napis Bryka.

{/tlo}

{tlo_1}

Krok 5

Warstwę białą z czarnym napisem rozmywamy algorytmem Gaussa o parametrach 5, 5 (Filtry | Rozmycie | Rozmycie Gaussa).

{/tlo}
{tlo_0}

Krok 6

Na warstwie zawierającej gradient wytłaczamy rozmyty napis Bryka. Warstwą aktywną powinien być gradient. Wykonujemy filtr Filtry | Odwzorowania | Mapowanie wypukłości.

{/tlo}
{tlo_1}

Krok 7

Tekst Bryka wypełniamy gradientem liniowym o odwrotnym kierunku.

{/tlo}
{tlo_0}

Krok 8

Wytłoczony napis Bryka wyraźnie odróżnia się teraz od tła.

{/tlo}

{tlo_1}

Krok 9

Dodajemy jeszcze jeden napis oraz czarne prostokąty przysłaniające obszar pod samochodami.

{/tlo}

{tlo_0}

Krok 10

Włączamy widoczność odpowiednich warstw. Baner jest skończony.

{/tlo}

Witryna HTML

{tlo_1}

Krok 1

W narzędziówce podwójnie klikamy narzędzie Wypełnienie gradientem koloru. Ujrzymy okno dialogowe umożliwiające ustalenie właściwości gradientu. Z listy dostępnych gradientów wybieramy gradient o nazwie Horizon 2.

{/tlo}

{tlo_0}

Krok 2

Gradientem tym wypełniamy obraz o wymiarach 800 x 89.

{/tlo}

{tlo_1}

Krok 3

Do obrazu dodajemy nową przezroczystą warstwę. Na warstwie tej umieszczamy poziomą siatkę. Wykorzystujemy do tego filtr Filtry | Renderowanie | Deseń | Siatka.

{/tlo}

{tlo_0}

Krok 4

Zmieniamy przezroczystość warstwy na 40% oraz rodzaj krycia (oznaczony jako Tryb w oknie warstw) na Wydobycie ziarna.

{/tlo}{tlo_1}

Krok 5

Dodajemy do obrazu niebieski napis HTML.

{/tlo}

{tlo_0}

Krok 6

Dodajemy jeszcze napis HTML w kolorze białym.

{/tlo}

{tlo_1}

Krok 7

Napis niebieski umieszczamy powyżej białego. Tekst biały przesuwamy o jeden piksel do dołu i o dwa piksele w prawo (wykorzystujemy do tego narzędzie do przesuwania warstw oraz klawisze strzałek na klawiaturze).

{/tlo}

{tlo_0}

Krok 8

Teraz z listy dostępnych warstw wybieramy warstwę z niebieskim napisem HTML. Zaznaczamy nieprzezroczyste piksele niebieskiego napisu: w oknie warstw klikamy warstwę z niebieskim napisem prawym przyciskiem myszy; z menu kontekstowego wybieramy operację Kanał alfa na zaznaczenie.

Otrzymamy zaznaczenie odpowiadające niebieskiemu napisowi. Zaznaczenie powiększamy o kilka pikseli (Zaznaczenie | Powiększ), po czym rozmywamy (Zaznaczenie | Zaokrąglij). Tak otrzymane zaznaczenie wypełniamy czarnym kolorem na nowej, przezroczystej warstwie.

{/tlo}

{tlo_1}

Krok 9

Obraz zawiera trzy warstwy z napisem HTML: niebieską, białą oraz czarne rozmycie.

{/tlo}

{tlo_0}

Krok 10

Włączamy widoczność warstwy z gradientem oraz warstwy z siatką. Baner jest skończony.

{/tlo}

{tlo_1}

Krok 11

Ostatnim krokiem jest przygotowanie obrazów tła. Z otrzymanego banera wycinamy plasterek o szerokości kilku pikseli i pełnej wysokości (z obszaru leżącego poza napisem HTML).

Zaznaczamy odpowiedni prostokąt, po czym wykonujemy operację Skopiuj widoczne oraz Wklej jako nowy. Otrzymany obraz zapisujemy do pliku tlo-gora.png.

{/tlo}

{tlo_0}

Krok 12

Górne tło odbijamy w pionie i zapisujemy do pliku tlo-dol.png.

{/tlo}

{tlo_1}

Krok 13

W podobny sposób wykonujemy ćwiczenia zatytułowane Bazy danych, CSS, GIMP, JavaScript, PHP.

{/tlo}

Witryna firmy Talar

{tlo_1}

Krok 1

Rozpoczynamy od przygotowania tła. Z ilustracji przedstawiającej monety wycinamy interesujący fragment.

{/tlo}

{tlo_0}

Krok 2

Wycięte monety wklejamy kilkakrotnie do nowego, białego obrazu. Każdą wklejoną kupkę monet umieszczamy na osobnej warstwie. Warstwy układamy tak, by granica pomiędzy poszczególnymi kupkami monet była niewidoczna.

{/tlo}

{tlo_1}

Krok 3

Przygotowujemy tło, które będzie powielane w nieskończoność. Długą kupkę monet rozcinamy na dwa fragmenty A oraz B. Fragment A przesuwamy na prawo, fragment B na lewo.

Fragmenty nasuwamy na siebie tak, by otrzymać obraz o wymaganej szerokości (np. 800 pikseli). Środek obrazu musi dawać efekt płynnego przejścia z fragmentu A na B.

{/tlo}

{tlo_0}

Krok 4

Otrzymany obraz może być przyklejany do siebie dowolną liczbę razy, dając efekt nieskończonej kupki monet. Obraz zapisujemy do pliku tlo-gora.png.

{/tlo}

{tlo_1}

Krok 5

Plik tlo-gora.png kopiujemy. Przystępujemy do wykonania banera, ale zachowujemy niezmienione tło. W witrynie będą potrzebne zarówno tło, jak i baner. W banerze na tle umieszczamy napisy Talar usługi finansowe.

{/tlo}

{tlo_0}

Krok 6

Dodajemy dwie nowe warstwy: jedną z białym prostokątem, drugą z czarną obwódką.

{/tlo}
{tlo_1}

Krok 7

Zmniejszamy krycie warstwy z białym prostokątem.

{/tlo}

{tlo_0}

Krok 8

Dodajemy podobny prostokąt z obwódką, przeznaczony na opcje witryny.

{/tlo}

{tlo_1}

Krok 9

Wprowadzamy nazwy opcji.

{/tlo}

{tlo_0}

Krok 10

Na zakończenie dodajemy czarne prostokąty, które posłużą do wykonania efektu rollover.

{/tlo}

Może cię też zainteresować

Internet Maker

BaseKit ma stworzyć dynamiczne strony z plików Photoshopa. Jeśli wydaje cie się, że otrzymasz Dreamwavera działającego w przeglądarce to masz rację. Wydaje ci się.

Internet Maker

Adobe Photoshop to bezsprzecznie najlepszy edytor grafiki. Za świetne narzędzie trzeba jednak zapłacić, a w przypadku Photoshopa mówimy już nie o setkach, a tysiącach złotych. Może warto więc sprawdzić, jakie bezpłatne aplikacje...

Internet Maker

Prezentowany szablon bazuje na układzie stałej szerokości. Wykorzystano w nim trzy triki: kafelkowanie (ang. sprites), pozycjonowanie względnie bezwzględne oraz FIR (ang. Fahrner Image Replacement).

Internet Maker

Szablon ten prezentuje menu z efektem rollover oraz wskaźnikiem wybranej opcji. Oba efekty są wykonane w CSS z wykorzystaniem kafelkowania (ang. sprites). Wskaźnik wybranej opcji wymaga dodania do kodu XHTML...