Metaliczny button z deseniem.

Transkrypt

1 Metaliczny button z deseniem. 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 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

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 Przezroczysta. Kliknij ok strona 3

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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

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. Życzę ciekawych eksperymentów podczas poznawania możliwości Gimp ZAPRASZAM NA MOJĄ STRONĘ INTERNETOWĄ studio.pl oraz na stronę 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