Jak zrobić klasyczny button na stronę www? (tutorial) w programie GIMP

Transkrypt

1 Jak zrobić klasyczny button na stronę www? (tutorial) w programie GIMP Niniejszy tutorial jest wyłączną własnością Doroty Ciesielskiej Zapraszam na moją stronę studio.pl oraz studio.pl strona - 1

2 Klasyczny, bardzo prosty w wykonaniu przycisk z górnym, białym błyskiem i napisem. Przyciski tego typu są często umieszczane na stronach internetowych również jako belki górne boksów bocznych. Tutorial dla osób, które słabo znają program Gimp i chcą na konkretnym przykładzie poznać jego podstawowe funkcje i możliwości. Etapy tworzenia przycisku: I. Stwórz nowy dokument GIMP....3 II. Narysuj przycisk na nowej warstwie...4 III. Wykonaj zaokrąglenie rogów zaznaczenia...5 IV. Wypełnij zaznaczenie kolorem...6 V. Zmniejsz zaznaczenie na warstwie przycisku...7 VI. Odetnij część zaznaczenia...8 VII. Wypełnij zaznaczenie gradientem...9 VIII. Zaznacz obszar przycisku aby dodać cień...10 IX. Umieść na przycisku tekst o dowolnej treści...12 X. Dodaj cień pod napis aby stał się on bardziej widoczny...13 XI. Przesuń warstwę z czarnym napisem w poziomie była widoczna spod warstwy czarnej...15 XII. Zapisz plik na dysku...16 strona - 2

3 I. Stwórz nowy dokument GIMP. Kliknij Plik i wybierz Nowy. Określ szerokość i wysokość obrazu. Dodatkowo kliknij opcje zaawansowane i określ rozdzielczość obrazu. Wypełnienie pierwszej warstwy obrazu ustaw na Białe. strona - 3

4 II. Narysuj przycisk na nowej warstwie Dodaj nową przezroczystą warstwę w oknie warstw. Wybierz w przyborniku zaznaczanie prostokątne i trzymając lewy przycisk myszy na nowej warstwie narysuj prostokąt, np. o wymiarach 400px szerokości i 120px wysokości. strona - 4

5 III. Wykonaj zaokrąglenie rogów zaznaczenia Kliknij Zaznaczenie i z rozwijanego menu wybierz Zaokrąglenie. Ustaw promień zaokrąglenia np. 30%. Promień możesz regulować zmniejszać/zwiększać przesuwając suwak lub wpisując wartość numerycznie z klawiatury. strona - 5

6 IV. Wypełnij zaznaczenie kolorem W przyborniku kliknij kolory aby otworzyć okno zmiany aktywnego koloru. Możesz dodać wybrany kolor do listy ostatnio używanych kolorów. Kliknij ikonkę kubełek w przyborniku a następnie wypełnij zaznaczenie kolorem klikając w środku zaznaczenia. strona - 6

7 V. Zmniejsz zaznaczenie na warstwie przycisku Kliknij Zaznaczenie i z rozwijanego menu wybierz opcję zmniejsz. Zmniejsz zaznaczenie o np. 4px. strona - 7

8 VI. Odetnij część zaznaczenia. Kliknij ikonkę zaznaczanie prostokątne w przyborniku. Będąc na warstwie przycisku i trzymając lewy ctrl na klawiaturze trzymaj lewy klawisz myszy i rysuj myszką prostokąt. Gdy go narysujesz puść klawisz ctrl i klawisz myszy. W ten sposób odejmiesz dolną część od zaznaczenia, która jest nie potrzebna przy rysowaniu górnego błysku na przycisku. strona - 8

9 VII. Wypełnij zaznaczenie gradientem. Dodaj nową warstwę przeźroczystą w oknie warstw i przesuń ją nad warstwę przycisku. Kliknij w przyborniku ikonkę gradient. Pierwszy aktywny kolor kolor ustaw jako biały. Wybierz rodzaj gradientu. Z dostępnych opcji wybierz kolor pierwszoplanowy na przezroczystość. W ten sposób podczas ewentualnej zmiany koloru przycisku kolor górnego błysku nie zmieni się. Przejdź na nową, dodaną przed chwilą przeźroczystą warstwę. Trzymając lewy ctrl na klawiaturze i lewy przycisk myszy przesuń myszkę od górnej granicy zaznaczenia do dolnej granicy czyli wypełnij gradientem zaznaczenie od góry do dołu zaznaczenia w linii prostej. Przekroczenie granicy zaznaczenia spowoduje, że więcej białego koloru zostanie w obszarze zaznaczenia. strona - 9

10 VIII. Zaznacz obszar przycisku aby dodać cień. Przejdź na warstwę na której znajduje się przycisk. Na warstwie przycisku kliknij prawym przyciskiem myszy i z rozwijanego menu wybierz opcję kanał alfa na zaznaczenie. W ten sposób będziesz mieć pewność, że cień będzie otaczał dokładnie ten element, który chcesz. Kliknij Filtry i z rozwijanego menu wybierz Światło i cień a w nim opcję rzucanie cienia aby dodać cień do zaznaczonego obszaru. strona - 10

11 Filtr rzucanie cienia umożliwia przesunięcie cienia od zaznaczonego obszaru w poziomie (przesunięcie X) i pionie (przesunięcie Y). Tutaj możesz też wybrać kolor cienia klikając w obszar kolor, jak również zwiększyć bądź zmniejszyć krycie cienia przesuwając suwak lub wpisując wartość numerycznie z klawiatury. Ustaw przesunięcie X na 8, przesunięcie Y na 8, promień rozmycia na 15 oraz krycie na 60. Gdy korzystasz z gotowych filtrów Gimp automatycznie tworzy nową warstwę na której umieszcza efekt w tym wypadku cień. Nadaje też warstwie nazwę Drop Shadow. Najczęściej warstwy cienia Drop Shadow umieszczane są automatycznie jako pierwsze w oknie warstw. Gdy projekt ma więcej warstw może być koniecznie przesunięcie warstwy z cieniem niżej aby nie zasłaniała elementów których cień nie dotyczy. Wtedy użyj strzałek w oknie warstw obok ikonki nowa warstwa lub przenieś warstwę, którą możesz chwycić i przesunąć w oknie warstw trzymając lewy przycisk myszy. strona - 11

12 IX. Umieść na przycisku tekst o dowolnej treści Kliknij ikonkę A w przyborniku a następnie kliknij myszką w obszar przycisku aby otworzyć okno edytora tekstowego programu Gimp. W nim napisz tekst, który chcesz umieścić na przycisku. Napis zostanie automatycznie umieszczony na nowej warstwie. W przyborniku określ rodzaj czcionki, rozmiar i kolor. Zamknij okno edytora dopiero gdy określisz te parametry. Jeśli twój napis znajduje się poza obszarem przycisku przesuń go. Aby przesuwać obiekty musisz mieć włączone przesuwanie obiektu w przyborniku. W tym celu musisz kliknąć ikonkę + która włącza tryb przesuwanie warstw i zaznaczeń. Tryb przesuwania włączysz również klikając klawisz m na klawiaturze. Napis możesz też złapać myszką trzymając lewy przycisk myszy i przesunąć go w wybrane miejsce lub skorzystać z strzałek na klawiaturze. strona - 12

13 X. Dodaj cień pod napis aby stał się on bardziej widoczny. Cień pod napis możesz dodać wykorzystując gotowy filtr Światło i cień i opcję rzucanie cienia. Możesz też dodać cień w inny sposób. Na warstwie napisu kliknij prawym przyciskiem myszy i wybierz w podmenu kanał alfa na zaznaczenie. Dodaj do projektu nową warstwę przeźroczystą. Wyłącz widoczność warstwy z napisem białym klikając w ikonkę oko w oknie warstw aby nie zasłaniała widoku tworzonej czarnej warstwy Z widocznym wokół napisu zaznaczeniem ustaw w przyborniku pierwszy kolor na czarny a następnie kliknij kubełek i zamaluj zaznaczenie kolorem czarnym klikając myszką w obszar zaznaczenia. Kliknij w przyborniku ikonkę zaznaczanie prostokątne i kliknij na obszarze obrazka ale poza zaznaczeniem aby usunąć zaznaczenie wokół napisu. Ten sam efekt osiągniesz używając klawisza r na klawiaturze. strona - 13

14 Przesuń nową warstwę z czarnym napisem pod warstwę z napisem białym klikając ikonkę strzałka na dole okna warstw w rzędzie obok ikonki nowa warstwa. strona - 14

15 XI. Przesuń warstwę z czarnym napisem w poziomie była widoczna spod warstwy czarnej. Włącz z powrotem widoczność warstwy białej. Wróć na warstwę z napisem czarnym i przesuń ją w poziomie i lekko w pionie. Kliknij ikonkę + aby włączyć tryb przesuwania warstw w przyborniku a następnie użyj strzałek na klawiaturze przesuwając element np. o 2 ruchy w prawo i 1 ruch w dół. Pamiętaj gdy używasz klawiatury kursor myszy musi znajdować się nad obrazem który tworzysz. strona - 15

16 XII. Zapisz plik na dysku. Kliknij Plik i z podmenu wybierz opcję zapisz jako nadaj nazwę i zapisz plik z rozszerzeniem xcf nazwa_pliku.xcf w wybranym przez siebie katalogu. W ten sposób zachowasz warstwy co pozwoli po ponownym otwarciu pliku na zmiany napisu czy koloru przycisku. Format.xcf jest formatem programu Gimp i nie jest stosowany na stronach internetowych. Na strony internetowe umieszcza się pliki zapisane jako nazwa_pliku.jpg lub nazwa_pliku.gif. Można też umieszczać pliki nazwa_pliku.png Gimp pozwala na zapisanie plików w każdym z tych formatów. strona - 16

17 Efekt końcowy: Pozdrawiam mam nadzieję że tutorial był pomocny. Dorota Niniejszy kurs jest wyłączną własnością Doroty Ciesielskiej Zapraszam na moją stronę studio.pl oraz studio.pl strona - 17