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.