Metaliczny button z deseniem. Tutorial w programie GIMP Niniejszy tutorial jest wyłączną własnością Doroty Ciesielskiej Zapraszam na moją stronę http://www.direktorek03.wm studio.pl oraz http://www.porady.wm studio.pl strona 1
Interesujący metaliczny button, wytłoczony w głąb tła z deseniem nałożonym na wierzch przycisku. Ciekawie wygląda na stronie internetowej. 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. Wypełnij warstwę kolorem pierwszoplanowym...4 III. Narysuj przycisk na nowej warstwie...5 IV. Wykonaj zaokrąglenie rogów zaznaczenia...6 V. Wypełnij zaznaczenie kolorem...7 VI. Zmniejsz zaznaczenie i dodaj nową przezroczystą warstwę do projektu...8 VII. Wypełnij nowe zaznaczenie kolorem...9 VIII. Nazwij warstwy projektu...10 IX. Zapisz warstwę do kanału i rozmyj krawędzie maski w kanale...11 X. Wykonaj mapowanie wypukłości z użyciem stworzonych masek...13 XI. Nałóż deseń na przycisk...15 XII. Zapisz plik na dysku...17 strona 2
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 Przezroczysta. Kliknij ok strona 3
II. Wypełnij warstwę kolorem pierwszoplanowym W przyborniku kliknij kolory aby otworzyć okno zmiany aktywnego koloru. Możesz dodać wybrany kolor do listy ostatnio używanych kolorów. Wybierz kolor szary. Kliknij ikonkę kubełek w przyborniku a następnie wypełnij warstwę kolorem klikając myszką na środku obrazu. Możesz dodać bieżący kolor do historii kolorów. Gimp zapamiętuje 12 ostatnio użytych kolorów. Kliknij ok strona 4
III. 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 o dowolnych wymiarach. strona 5
IV. Wykonaj zaokrąglenie rogów zaznaczenia Kliknij Zaznaczenie i z rozwijanego menu wybierz Zaokrąglenie. Ustaw promień zaokrąglenia np. 25%. Promień możesz regulować zmniejszać/zwiększać przesuwając suwak w okienku Script Fu: Zaokrąglenie lub wpisując wartość numerycznie z klawiatury. Kliknij ok strona 6
V. Wypełnij zaznaczenie kolorem W przyborniku kliknij kolory aby otworzyć okno zmiany aktywnego koloru. Zmień kolor na biały. Kliknij ikonkę kubełek w przyborniku a następnie wypełnij zaznaczenie kolorem białym klikając myszką na środku zaznaczenia. strona 7
VI. Zmniejsz zaznaczenie i dodaj nową przezroczystą warstwę do projektu Z menu wybierz Zaznaczenie a z podmenu Zmniejsz. W oknie Zmniejszenie zaznaczenia wpisz 10 zmniejszysz w ten sposób zaznaczenie o 10px. Kliknij ok Dodaj nową przezroczystą warstwę. strona 8
VII. Wypełnij nowe zaznaczenie kolorem Ponownie wybierz kolor biały w przyborniku i kliknij ikonkę kubełek a następnie wypełnij zaznaczenie kolorem klikając myszką na środku zaznaczenia. Nowy przycisk ma znajdować się na nowej warstwie. strona 9
VIII. Nazwij warstwy projektu Nazwy warstw możesz dowolnie zmieniać w zależności od potrzeb. Kliknij dwukrotnie lewym przyciskiem myszy na nazwę warstwy i zmień ją wpisując nową nazwę. Warstwę większą nazwij duża, warstwę nową zmniejszoną o 10px nazwij mała. strona 10
IX. Zapisz warstwę do kanału i rozmyj krawędzie maski w kanale. Kliknij prawym przyciskiem myszy na warstwie mała i z podmenu wybierz kanał alfa na zaznaczenie. Wokół warstwy pojawi się zaznaczenie. Kliknij Zaznaczenie i z podmenu wybierz zapisz do kanału. Masce w kanale nadaj nazwę male. Będzie ci łatwiej wybrać odpowiednią maskę podczas mapowania wypukłości. Zaznacz w przyborniku ikonkę zaznaczanie prostokątne a następnie kliknij myszką w obszarze projektu ale poza poza białym środkiem przycisku. W ten sposób wyłączysz zaznaczenie. Teraz wykonaj rozmycie krawędzi maski w kanale. Kliknij Filtry i z podmenu wybierz Rozmycie a w nim Rozmycie Gaussa. Ustaw promień rozmycia na 10 poziomo i 10 pionowo. Te same czynności wykonaj z warstwą duża, czyli zapisz warstwę duża do kanału, wyłącz zaznaczenie klikając myszką poza obszarem białym, nazwij maskę w kanale duze a następnie wykonaj na niej rozmycie Gaussa z promieniem 10 w pionie i 10 w poziomie. strona 11
X. Wykonaj mapowanie wypukłości z użyciem stworzonych masek. Wyłącz widoczność kanałów i wróć na warstwy. Włącz tylko widoczność warstwy Tło. Widoczność warstwy włączamy klikając w ikonkę oko. Wybierz warstwę Tło na której będziesz mapować wypukłości przycisku. Kliknij Filtry z podmenu wybierz Odwzorowania a w nich Mapowanie wypukłości W okienku mapowanie wypukłości wybierz maskę duze i zaznacz myszką okienko przy opcji Odwracaj mapowanie wypukłości. Inne opcje ustaw tak jak na obrazku poniżej. Kliknij ok strona 12
Teraz nadal pozostając na warstwie Tło ponownie wybierz Filtry z podmenu wybierz Odwzorowania a w nich Mapowanie wypukłości. W okienku mapowanie wypukłości wybierz maskę male i nie zaznaczaj okienka przy opcji Odwracaj mapowanie wypukłości. Inne opcje ustaw tak jak na obrazku poniżej. Kliknij ok. strona 13
XI. Nałóż deseń na przycisk. Włącz widoczność warstwy mala klikając w ikonkę oko. Kliknij prawym przyciskiem myszy na warstwie mala wybierz z podmenu kanał alfa na zaznaczenie. Kliknij Zaznaczenie i z podmenu wybierz Zmniejsz zaznaczenie. Stopień zmniejszenia zaznaczenia ustaw na 5px. Kliknij ok. strona 14
Dodaj nową przezroczystą warstwę w oknie warstw i ustaw ją jako pierwszą od góry. Warstwę możesz przesunąć za pomocą strzałek obok ikonki nowa warstwa w oknie warstw. Zaznacz ikonkę kubełek w przyborniku Gimpa Zamiast kolor pierwszoplanowy, który pozwala na wypełnianie zaznaczenia wybranym z palety kolorem wybierz w trybie wypełnienia opcję deseń a z palety deseni wybierz Wood. Gimp układa desenie alfabetycznie więc szukany deseń powinien znajdować się na dole palety. W oknie warstw zmień tryb na Pokrywanie. Kliknij myszką w środek zaznaczenia aby pokryć obszar zaznaczenia deseniem. Zmniejsz krycie deseniem przesuwając suwak na wartość 76,2. strona 15
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. Życzę ciekawych eksperymentów podczas poznawania możliwości Gimp ZAPRASZAM NA MOJĄ STRONĘ INTERNETOWĄ http://www.direktorek03.wm studio.pl oraz na stronę http://www.porady.wm studio.pl gdzie zamieszczam tutoriale na temat GIMP, Inkscape oraz Open Office. Ciekawe, gotowe ikonki na strony internetowe wykonane w Gimp znajdziesz na moim chomiku Przyciski z piktogramami na strony internetowe w wysokiej rozdzielczości umieszczam na moim profilu na Zapraszam! strona 16