Przez ostatni czas kilka osób niezależnie zaczęło zadawać mi pytania dotyczące programu Inkscape. Inkscape to darmowy program do tworzenia grafiki wektorowej, który możecie pobrać tu. Jego atrakcyjność polega przede wszystkim na tym, że jest darmowy, ale również na tym, że zapisuje pliki do formatu .SVG. Format ten przez wielu, w tym przeze mnie, jest uważany za przyszłość Weba.

Kiedy niedawno jeden z Czytelników Tutsów zapytał, czy planuję jakieś tutoriale z wykorzystaniem Inkscape przyznam, że coś u mnie zaskoczyło. Nie wyrzekam się mojego ukochanego Photoshopa – mam go świetnie obcykanego i tworzenie w nim to sama przyjemność. Ale chętnie spróbuję czegoś nowego.

Moje pierwsze spotkanie z Inkscape było dość niefortunne – od razu z wyglądu przypomniał mi program Corel Draw, a z nami grafikami jest tak, że albo coś kochamy, albo nienawidzimy. Zwykle ci kochający programy Adobe nie chcą mieć nic wspólnego z Corelem… Tak przynajmniej wynika z moich prywatnych obserwacji ;) Tak też spojrzałam na Inkscape – jak na coś, z czym nie chcę mieć nic wspólnego, bo w żaden sposób nie przypomina wygodnego Photoshopa.

Po chwili namysłu, stwierdziłam jednak, że zapomnę o moich uprzedzeniach i postaram się bardziej. I tak zaczęłam uczyć się obsługi Inkscape. A swoimi obserwacjami ze zdobywania umiejętności z obsługi tego programu chętnie podzielę się tu z Wami.

Na początek coś bardzo prostego – tworzenie kształtów i nadawanie im kolorów. Pokażę Wam, jak to robić na przykładzie, który jest mi najbliższy, a mianowicie na UI’u do gry – stworzymy razem prosty przycisk startu gry, wykorzystując narzędzie Create rectangles and squares.

Zakładając, że macie już zainstalowany program Inkscape przechodzę od razu do konkretów:

Do czego dążymy:


Jak w Inkscape stworzyć prosty przycisk, element UI do gry, w stanie normal (normalnym), active (po najechaniu kursorem) i pressed (wciśniętym)?

W tutorialu wykorzystuję jedno zewnętrzne źródło – znany już niektórym Czytelnikom font Boogaloo. Używam także darmowego programu Inkscape.

Krok 1

Otwieramy program – naszym oczom ukazuje się taki oto widok:

Z lewego panelu z narzędziami wybieramy narzędzie Create rectangles and squares, a w dolnej podręcznej palecie kolorów wybieramy kolor 10% Gray.

W obszarze roboczym rysujemy dowolnej wielkości prostokąt.

Teraz nadamy mu odpowiednie parametry, bo po narysowaniu kształtu pojawił się nam górny panel właściwości, w którym możemy sprecyzować jednostki miary (px), dokładną szerokość (400px), wysokość (130px) i zaokrąglenie rogów (radius – Rx i Ry ustawiamy na 50px)

Krok2

Teraz z bocznego panelu z narzędziami wybieramy narzędzie Select and transform objects. Klikamy na klawiaturze kombinację Ctrl+C.

I wciskamy Ctrl+V – teraz mamy dwa identyczne zaokrąglone prostokąty.

Przeciągamy nasz nowy prostokąt tuż nad ten poprzedni, tak aby go zakrywał (ten poprzedni ma wystawać tylko odrobinę na dole) i nadajemy nowemu kolor z podręcznej palety #FFCC00 (pomarańczowy).

Jeśli nie jesteśmy zadowoleni z położenia nowego prostokąta względem poprzedniego możemy precyzyjnie przesunąć go za pomocą właściwości X i Y, dostępnych w górnym panelu właściwości.

Pozostając z zaznaczonym nowym prostokątem znów wciskamy Ctrl+C i Ctrl+V.

Temu najnowszemu prostokątowi nadajemy żółty kolor #FFFF00 z podręcznej palety kolorów.

I tak jak poprzednio – najnowszy prostokąt ustawiamy nad dwoma poprzednimi, tak aby oba lekko spod niego wystawały na dole. W ten sposób zbudowaliśmy tło naszego przycisku.

Krok 3

Czas na etykietkę – napis. Z bocznego panelu z narzędziami wybieramy narzędzie Create and edit text objects. Klikamy w dowolnym miejscu w obrębie tła przycisku i wpisujemy treść naszej etykietki – ja postanowiłam, że będzie to przycisk „PLAY”.
Zauważyliście pewnie, że w międzyczasie przybliżyłam sobie trochę widok obszaru roboczego, żeby dokładniej widzieć szczegóły. W Inkscape przybliżamy widok scrooll’ując kółkiem myszki z wciśniętym klawiszem Ctrl lub wciskając + na klawiaturze. Oddalanie – kółko w drugą stronę, lub –.

Na górze pojawił nam się nowy panel właściwości związanych z narzędziem Create and edit text objects. Możemy w nim wybrać font spośród wszystkich, jakie mamy zainstalowane pod naszym systemem. Ja polecam Wam świetny font Boogaloo na licencji SIL Open Font License. Jest darmowy i idealnie nadaje się do gier.
Po wybraniu fontu ustawiamy jego wielkość na pasującą do przycisku – w tym wypadku jest to 64pt i wyrównanie Align center. Zmieniłam też kolor fontu, wybierając znany nam już pomarańczowy z podręcznego próbnika kolorów – #FFCC00. I tyle.

Krok 4

Ponieważ chciałam mieć pewność, że wszystkie poszczególne elementy mojego przycisku są względem siebie wyrównane centralnie, zaczęłam szukać takiej opcji w programie. Znajdziecie ją w menu Object – Align and Distribute.

Po wciśnięciu tego polecenia po prawej stronie pojawi Wam się panel z właściwościami dotyczącymi ułożenia obiektów względem siebie. Od razu odnalazłam ikonkę sugerującą interesujące mnie wyrównanie – Center on vertical axis.

Na koniec postanowiłam jeszcze odrobinę przesunąć w dół pomarańczowy i żółty prostokąt, razem z napisem, tak aby jeszcze bardziej przysłoniły szary prostokąt. W tym celu wybrałam znane nam już narzędzie Select and transform objects i z wciśniętym klawiszem Shift zaznaczyłam wszytkie trzy obiekty: żółty i pomarańczowy prostokąt oraz napis.
Korzystając z górnego panelu właściwości – zmieniłam odrobinę wartość parametru y – tak, żeby ułożenie wszystkich elementów mi odpowiadało.

Krok 5

Ponownie z wybranym narzędziem Select and transform objects i z wciśniętym klawiszem Shift zaznaczyłam wszystkie elementy mojego gotowego przycisku. Wcisnęłam Ctrl+C i Ctrl+V, aby uzyskać dokładną kopię całego buttona. Kopię przeciągnęłam tuż pod pierwotny przycisk.

Krok 6

Z zamiarem stworzenia stanu active, czyli takiego, jaki ma przycisk po najechaniu na niego kursorem, postanowiłam nadać mu coś w rodzaju „podświetlenia”. A miało się ono sprowadzać do zmiany koloru żółtego prostokąta. Chciałam, żeby zmiana była delikatna, więc nie mogłam skorzystać z kolorów dostępnych w poręcznym próbniku kolorów.
Wybrałam więc menu Object, a w nim opcję Fill and Stroke.

I znów po prawej pojawił mi się panel z wieloma właściwościami dotyczącymi koloru wypełnienia i obramowania.
Przesunęłam delikatnie suwak kanału B (Blue) i uzyskałam odrobinę jaśniejszy żółty odcień dla mojego przycisku w stanie active.

Krok 7

Powtórzyłam krok 5 i skopiowałam pierwotny przycisk. Przesunęłam nowy przycisk pod oba już istniejące. To będzie mój stan pressed, czyli wciśnięty.

Żeby stworzyć iluzję wciśnięcia guzika zaznaczyłam żółty prostokąt i napis i przesunęłam oba elementy w dół.

Krok 8

Dzięki temu, że wszystkie trzy przyciski znajdują się jeden pod drugim mogę teraz z łatwością wygenerować plik .png – tzw sprite sheet, czyli obrazek ze wszystkimi stanami danego elementu, do którego odwołuje się w późniejszym etapie kod gry/aplikacji/etc. Wystarczy, że wybiorę z menu polecenie File, a w nim Export PNG image

Znów po prawej mam mnóstwo opcji do wyboru – tym razem niczego nie zmieniam, bo opcje są ok. Klikam Export i mam gotowy przycisk – idealny do użycia w grze.

Efekt końcowy:


Udostępniam Wam także plik źródłowy .svg z powyższego tutoriala.

No i jak? Czy moi Czytelnicy zainteresowani tematem Inkscape mają ochotę na więcej takich tutoriali? Czy ktoś, tak jak ja, zapragnął nauczyć się obsługi tego programu? Dajcie znać w komentarzach :)

Podziel się dobrocią!