Sketch Zestaw paneli — panele z podwójną ramką i przyciski

Każda krawędź tego zestawu jest celowo lekko niepoprawna. Kontur jest próbkowany na całej długości i każdy punkt lekko przesunięty, więc żadna linia nie jest naprawdę prosta i żadne dwa narożniki nie zaginają się tak samo — dokładnie to, czego prostokąt kreślony linijką nigdy nie zrobi. Cieniowanie to kreskowanie krzyżowe, a nie gradient, i to właśnie utrzymuje go w odczycie jako rysunek, a nie zaokrąglony prostokąt z filtrem na wierzchu.

Dwa panele nine-slice — ramka okna z podwójną ramką z narożnikami 18 px i wpuszczana ramka wewnętrzna z narożnikami 12 px — pokrywają niemal każde pole, jakiego potrzebuje menu: dialogi, siatki ekwipunku, tła list, podpowiedzi i panele statystyk. Dwa koncentryczne obramowania z przerwą między nimi czytają się jako rzeźbione, a nie rysowane, i to właśnie oddziela dopracowany interfejs od prostokąta z kreską. Oba rozciągają się czysto do dowolnego rozmiaru, bo narożniki nigdy się nie skalują, a środek to wypełnienie płaskie.

Na panelach siedzą cztery stany przycisku o prostych narożnikach: zwykły, hover, wciśnięty i wyłączony. Narysowano je na tej samej bazie 132×46 z narożnikami 10 px, więc podmieniasz teksturę w jednym widgecie przycisku i dostajesz całą pętlę interakcji bez przesuwania prostokąta. Stan wciśnięty opuszcza lico o dwa piksele i usuwa górny rozbłysk zamiast tylko przyciemniać, i to właśnie sprawia, że przycisk sprawia wrażenie klikniętego, a nie po prostu przekolorowanego.

Wszystko dostajesz dwa razy. Źródła SVG to pliki, w których zestaw narysowano — otwórz je, zmień sześć tonów papier złamana biel albo pojedynczy akcent atramentowy błękit i wyeksportuj ponownie. Eksporty PNG są płaskie, przezroczyste i wstępnie przeskalowane do 1x, 2x i 4x dla silników, które chcą bitmap, bez premultiplikowanej alfy i bez wypalonego cienia poza granicami sprite'a.

Creative Commons Uznanie autorstwa 4.0 — Za darmo do użytku komercyjnego. Uznanie autorstwa obowiązkowe. Pełne warunki · Co to znaczy w praktyce