Newsletter

Grupa MagazynyInternetowe

Online: 894

Wyszukiwarka

Gimp

Gimp: tworzenie szablonów stron WWW cz. 1

Gimp: tworzenie szablonów stron WWW cz. 1 Artykuł ten rozpoczyna nowy cykl poświęcony przygotowywaniu szablonów witryn WWW w programie GIMP. W każdym odcinku będzie szczegółowo opisany jeden szablon. W dzisiejszym spotkaniu przygotujemy wizytówkę firmy z branży motoryzacyjnej.

Włodzimierz Gajda

Gimp: tworzenie szablonów stron WWW cz. 1 Zdjęcia, od których rozpoczynamy

Gimp: tworzenie szablonów stron WWW cz. 1 Szablon witryny narysowany w programie GIMP

Witryna WWW

Gimp: tworzenie szablonów stron WWW cz. 1 Witryna WWW wykonana przy użyciu szablonu z powyzszego rysunku, jest przedstawiona niżej. Witryna ta może służyć jako wizytówka firmy z branży motoryzacyjnej.

Menu główne witryny zawiera pięć opcji: Lorem, Ipsum, Dolor, Sit oraz Amet. Po wybraniu opcji menu wymieniana jest treść witryny, zaś menu oczywiście pozostaje niezmienione.

Menu witryny jest graficzne i wykorzystuje efekt rollover. Na rys. 6 są przedstawione trzy pierwsze opcje, po naprowadzeniu wskaźnika myszy.

Dostosowanie szablonu do potrzeb indywidualnych sprowadza się do:

  • zmiany logo firmy (białe napisy Lorem Ipsum oraz czerwony napis Dolor),
  • zmiany nazwy opcji menu głównego (Lorem, Ipsum, Dolor, Sit oraz Amet),
  • ewentualnej zmiany liczby opcji menu głównego (zamiast pięciu opcji może być od 3 do 10, ale wówczas konieczne będzie przeskalowanie zdjęć tworzących menu).

Przygotowanie obrazu XCF

Krok 1: czarny obraz z wklejonymi miniaturami

Gimp: tworzenie szablonów stron WWW cz. 1 Tworzymy nowy obraz o wymiarach 1040 x 600 i wklejamy do niego pięć miniaturowych zdjęć przeskalowanych do szerokości 100 x 75.

Gimp: tworzenie szablonów stron WWW cz. 1 Do obrazu dodajemy cztery identyczne białe prostokąty. Prostokąty te wyznaczą odległość pomiędzy opcjami menu. Wykorzystując prowadnice oraz cztery białe prostokąty rozmieszczamy opcje menu tak jak to ilustruje rysunek.

Gimp: tworzenie szablonów stron WWW cz. 1 Wygładzamy brzeg wklejonych fotografii. Najpierw robimy kopie pięciu warstw przedstawiających wklejone zdjęcia.

Następnie kolejno dla każdej fotografii:

  • przekształcamy kanał alfa w zaznaczenie,
  • zmniejszamy zaznaczenie o 2 piksele (Zaznaczenie | Zmniejsz),
  • zaokrąglamy zaznaczenie o 5 pikseli (Zaznaczenie | Zaokrąglij),
  • odwracamy zaznaczenie (Zaznaczenie | Odwróć),
  • czyścimy zaznaczenie (Zaznaczenie | Wyczyść).

Gimp: tworzenie szablonów stron WWW cz. 1 W kolejnym kroku dodajemy jednopikselowe obramowanie każdego zdjęcia. Wykorzystując zdjęcia o ostrych krawędziach (duplikaty wykonane przed zmiękczeniem krawędzi) dla każdego z nich:

  • przekształcamy kanał alfa na zaznaczenie,
  • otaczamy zaznaczenie ramką o grubości jednego piksela (Zaznaczenie | Obramuj)
  • kopiujemy zaznaczenie z czarnego tła,
  • wklejamy skopiowany fragment na nową warstwę,
  • odwracamy kolory wklejonej warstwy (Warstwa | Kolory | Inwersja).

Gimp: tworzenie szablonów stron WWW cz. 1 Wykonujemy duplikaty jednopikselowych ramek. Ustalamy krycie oryginałów na 60, a duplikatów na 40.

19 lipca 2007

Powiązane publikacje

GIMP: Tworzenie szablonów stron WWW cz. 12

GIMP: Tworzenie szablonów stron WWW cz. 12

GIMP Tworzenie szablonów stron WWW cz. 11

GIMP Tworzenie szablonów stron WWW cz. 11

GIMP Tworzenie szablonów stron WWW cz. 10

GIMP Tworzenie szablonów stron WWW cz. 10

Gimp: tworzenie szablonów stron WWW cz. 9

Gimp: tworzenie szablonów stron WWW cz. 9

 
GIMP 2.4.6

GIMP 2.4.6

Gimp: tworzenie szablonów stron WWW cz. 8

Gimp: tworzenie szablonów stron WWW cz. 8

Gimp: tworzenie szablonów stron WWW cz. 7

Gimp: tworzenie szablonów stron WWW cz. 7

Gimp: tworzenie szablonów stron WWW cz. 6

Gimp: tworzenie szablonów stron WWW cz. 6

 
Gimp: tworzenie szablonów stron WWW cz. 5

Gimp: tworzenie szablonów stron WWW cz. 5

GIMP 2.4.4

GIMP 2.4.4

Gimp: tworzenie szablonów stron WWW cz. 4

Gimp: tworzenie szablonów stron WWW cz. 4

Gimp: tworzenie szablonów stron WWW cz. 3

Gimp: tworzenie szablonów stron WWW cz. 3

 
GIMP 2.4.2

GIMP 2.4.2

Semantyczny kod XHTML (cz. 1)

Semantyczny kod XHTML (cz. 1)

Gimp: tworzenie szablonów stron WWW cz. 2

Gimp: tworzenie szablonów stron WWW cz. 2

GIMP 2.4.17

GIMP 2.4.17

 
Skomentuj
ten artykuł

Komentarzy: 1

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum wtorek, 8.12.2009 09:13fan

Staram się powtórzyć kroki z tutoriala, ale coś mi się nie zgadza.
Mam GIMPa (2.6.7) po angielsku i może coś jest inaczej, ale w trzecim kroku ostatni punkt: "czyścimy zaznaczenie (Zaznaczenie | Wyczyść)" powinien chyba brzmieć (Edycja | Wyczyść / Edit | Clear).
Poza tym po wykonaniu tych czynności nie osiągam efektu wygładzenia obrazka, jak to jest w przykładzie. Mam po prostu zaokrąglony obrazek. Może jeszcze czegoś brakuje?

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.