publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
9 skomentuj »

TAGI: gimp , szablon , skórka , strona www

2009-05-27 15:33  |  Wojciech Wowra

Jak stworzyć grafikę dla strony WWW w programie GIMP?

Jak stworzyć grafikę dla strony WWW w programie GIMP?

GIMP to dostępny dla wielu systemów operacyjnych, wolny i darmowy edytor grafiki bitmapowej, dający grafikowi duże możliwości. Dzięki tej aplikacji można szybko i łatwo przygotować atrakcyjnie wyglądający styl wizualny dla naszego bloga czy innego serwisu internetowego.

W poniższym poradniku przedstawimy krok po kroku, jak przygotować taką skórkę dla prostej strony internetowej. Zakładamy, że czytelnik zna podstawowe elementy interfejsu programu.

1. Tworzymy nowy obrazek o rozmiarach 780 na 1000 pikseli. Ustawiamy jego tło, albo w kreatorze, albo za pomocą narzędzia Wypełnianie kubełkiem zmienić kolor tła. W naszym wypadku zastosujemy kolor #ededed (jasnoszary). Potem dodajemy nową warstwę, nadając jej nazwę „Nagłówek”. Kolejnym krokiem jest zaznaczenie na warstwie obszaru o szerokości 780 i wysokości 125 pikseli. Dzięki prowadnicom nie powinno stanowić to problemu.

Kliknij, aby powiększyć.


2. Kolejnym etapem jest wypełnienie zaznaczonego obszaru. W tym celu należy skorzystać z narzędzia Gradient – jako kolor pierwszoplanowy wybieramy czarny (#000000), jako kolor tła na #3a4146 (ciemnoszary). Następnie ustawiamy wskaźnik myszy przy lewym górym rogu obrazu. Klikamy lewym przyciskiem myszy i przytrzymując go, przeciągamy wskaźnik aż do prawego dolnego brzegu zaznaczenia.

Kliknij, aby powiększyć.

3. Następnym krokiem jest dodanie tekstu. W tym celu możemy posłużyć się np. czcionką Trebuchet MS Bold w rozmiarze 60 pikseli i kolorze #e6e6e6 (jasnoszarym). Od razu warto skopiować warstwę (komenda Duplikuj warstwę po kliknięciu prawym klawiszem myszy nazwy warstwy) i skorzystać z opcji lustrzanego odbicia (menu Warstwa | Przekształcenie | Odbij pionowo).

Po ustawieniu nowej warstwy, w odpowiedniej pozycji dodajemy maskę (menu Warstwa | Maska) i stosujemy gradient z przykładowym kolorem tła #3a4146 (takim samym jak wcześniej). Tym razem zamiast opcji kolor pierwszoplanowy na kolor tła wybieramy kolor pierwszoplanowy na przezroczystość.

Kliknij, aby powiększyć.

4. Kolejnym etapem jest stworzenie nowej warstwy i wybranie obszaru poniżej nagłówka (780 na 20 pikseli). Pomocna może być w tym wypadku informacja na pasku stanu, pokazująca, ile dokładnie pikseli ma aktualne zaznaczenie. Następnie korzystając z gradientu kolor pierwszoplanowy na przezroczystość wypełniamy ten obszar, zaczynając kilka pikseli powyżej zaznaczenia i kończąc 30 pikseli pod nim. Proponowane kolory to: #0276cf i #82c9ff.

Kliknij, aby powiększyć.


5. Następnym krokiem jest stworzenie nowej warstwy o nazwie „Karta”. Potem rysujemy prostokąt o szerokości kilkadziesięciu pikseli i wysokości około 20-25 pikseli. Trzeba jeszcze zaokrąglić jego wierzchołki – służy temu odpowiednie polecenie, dostępne w menu kontekstowym pod hasłem Edycja. Kolejnym etapem jest wypełnienie przycisku gradientem, przy użyciu tych samych niebieskich kolorów i powielenie go.

Kliknij, aby powiększyć.

6. Na koniec warto jeszcze wyśrodkować wszystkie karty oraz dodać do nich opisy. Warstwy możemy wygodnie razem przemieszczać po zaznaczeniu symbolu łańcucha w menedżerze po prawej stronie ekranu. Następnie tworzymy nową warstwę, nadając jej nazwę „Lewy pasek boczny”. Rysujemy prostokąt obejmujący całą lewą stronę witryny i wypełniamy go kolorem (na przykład #232323 – ciemnoszary).

Kliknij, aby powiększyć.


7. Kolejnym etapem jest stworzenie warstwy „Linia”. Rysujemy prostokąt o wysokości 1 piksela i szerokości nieco mniejszej od lewego paska bocznego. Wypełniamy go kolorem #232222. Następnie rysujemy tuż pod spodem drugą taką samą linię i nadajemy jej barwę #4e4c4c. Finalnie powielamy linie wedle uznania i wstawiamy tekst – mogą to być podkategorie działów, które zostały wyszczególnione w górnym menu.

Kliknij, aby powiększyć.


8. Na koniec można jeszcze dodać warstwę „Stopka” i umieścić na dole jakieś dodatkowe informacje. Ostatecznie projekt wygląda tak:

Kliknij, aby powiększyć.

Zachęcamy do samodzielnego eksperymentowania z przedstawionymi tu technikami.

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
9 skomentuj »

Warto przeczytać

Nie przegap, czyli TOP5 najchętniej czytanych tekstów minionego tygodnia
GIMP 2.8 w finalnej wersji już na Was czeka: po latach nowy interfejs i sprzętowa akceleracja
Nie przegap, czyli TOP5 najchętniej czytanych tekstów minionego tygodnia
GIMP 2.8 przyniesie nam sprzętową akcelerację operacji na grafice

Komentarze

  • adminik

    #1 adminik 2009-05-27 20:23:10 0

    Okrutne...

    Już lepiej samym CSS`em zrobić...

    IP: 83.7.25.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.11 (KHTML, like Gecko) Chrome/2.0.181.1 Safari/530.11

  • Castor

    #2 Castor 2009-05-28 09:15:59 0

    popieram - to wyglada jak ... jednym słowem dżizas...

    IP: 83.25.54.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

  • dAREuS

    #3 dAREuS® 2009-05-28 12:25:27 0

    Tu nie chodzi o to, jak to wygląda. Chodzi o to, żeby się nauczyć posłiugiwać podstawowymi narzędziami GIMP-a.

    IP: 84.225.4.[...] Opera/9.64 (Windows NT 6.0; U; pl) Presto/2.1.1

  • jankoprowski

    #4 Jan Koprowski® 2009-05-28 23:17:23 0

    Świetny artykuł. Prosty i pokazuje konkrety. Nic skomplikowanego ot pokazanie dwóch trzech funkcji w które wyposażony jest GIMP.

    IP: 89.79.166.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.28 Safari/530.5

  • gatto

    #5 gatto® 2009-05-31 19:56:04 0

    @Jan Koprowski, jeśli to co tutaj jest nazywasz 2/3 funkcjami gimpa to znaczy że tego programu nie widziałeś od 2 lat ;) 

    IP: 91.90.117.[...] Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/531.0 (KHTML, like Gecko) Chrome/3.0.183.0 Safari/531.0

  • morfis

    #6 morfis® 2009-05-31 20:48:16 0

    gatto® nie wywołuj flamów, Jan Koprowski® napisał "dwóch trzech" co inaczej można zapisać  "2 , (przecinek) 3"  a nie "2/3"

    Czytaj uważnie zanim skrytykujesz.

    IP: 217.173.198.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)

  • Kocur

    #7 Kocur 2009-06-07 13:23:58 0

    Robie wedle instrukcji i nic mi z tego nie wychodzi. Chyba coś autro pominął w opisie ważnego.

    IP: 62.87.247.[...] Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 2.0.50727)

  • szibul

    #8 szibul 2009-06-27 14:53:51 0

    Zeby sie nauczyć obsługi gimpa należy skorzystać z tutoriali. Ten co zaprezentował autor nie wyglada :D jak koledzy wspomnieli lepiej użyć samego CSSu. lepszy efekt będzie...

    IP: 79.186.110.[...] Mozilla/5.0 (X11; U; Linux x86_64; pl-PL; rv:1.9.0.10) Gecko/2009043018 Ubuntu/9.10 (karmic) Firefox/3.0.10

  • regoat

    #9 regoat 2009-09-12 02:23:26 0

    ale ludzi to tempe tłuki. jak wam sie nie podoba wygląd to sobie wymyslcie lepszy. autor tutaj nie mial w planie zrobienia za was projektu tylko pokazania jak to zrobic.

    leniwe toturialowe trole

    IP: 95.178.23.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

Odśwież

Uwaga! Możesz zarejestrować się w serwisie i w ten sposób zarezerwować swój nick oraz ominąć konieczność ciągłego odczytywania wyrazów.

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.

Popularne 7 dni 30 dni

Społeczność komentarze forum

Polecane książki

Praca

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł