Paczki interfejsu

Sketch Interfejs wytwarzania

13 elementów wytwarzania i receptur (rysunek odręczny) do interfejsów w trybie jasny — papier złamana biel, akcent atramentowy błękit. SVG i przezroczysty PNG w 1x/2x/4x.

  • ui
  • svg
  • przezroczysty png
  • wytwarzanie
  • receptura
  • warsztat
  • kuźnia
  • ekwipunek
  • kreska odręczna
  • rysunek odręczny
  • rysowany ręcznie
  • szkic
  • zeszyt
  • jasny interfejs
Arkusz z 13 elementów wytwarzania i receptur (rysunek odręczny) z rodziny Sketch, rozłożonymi na szachownicy przezroczystości, z rozmiarami w pikselach wypisanymi pod spodem
podgląd 1600×597przezroczystość pokazana jako szachownica

O tej paczce

Sketch Interfejs wytwarzania to zestaw 13 elementów wytwarzania i receptur narysowanych w stylu rysunek odręczny, w którym każda krawędź jest próbkowana i lekko przesuwana, więc żadna linia nie jest naprawdę prosta. Zawiera trzy stany pola składnika, powiększone pole wyniku, strzałkę łączenia i strzałkę odzysku, znak łączenia, trzy wskaźniki jakości, wiersz receptury znanej i nieodkrytej oraz stopniowany pasek wytwarzania.

Wytwarzanie to jedyny ekran, na którym pole musi powiedzieć coś, czego pole ekwipunku nie mówi nigdy: nie co w nim leży, lecz czy masz tego dość. Posiadane, brakujące i częściowo posiadane to trzy stany, a zestaw z jednym sprite’em pola zmusza silnik do odpowiadania na to pytanie tekstem pod każdym polem.

Drżenie jest deterministyczne, a nie losowe: to samo pudełko drży tak samo w każdym buildzie, i to właśnie pozwala mu żyć w systemie kontroli wersji. Cieniowanie to kreskowanie krzyżowe, bo gradient pod rysowaną linią czyta się jak filtr, a nie jak ręka.

W obrębie tego stylu to jest odczyt Sketch: interfejs w trybie jasny na palecie papier złamana biel z akcentami atramentowy błękit, zbudowany wokół dwóch koncentrycznych ramek, przycisków o prostych narożnikach w 132x46, pasków pasmowych podzielonych na 10 segmentów i ikon konturowych na siatce 32px. To właśnie te wymiary tłumaczą, dlaczego dwie rodziny mogą dzielić styl graficzny, nie będąc wymienne: styl decyduje, jak rysuje się krawędź, a liczby decydują, do czego interfejs służy.

Pole składnika dostajesz we wszystkich trzech stanach, a różnicę niesie obramowanie, nie wypełnienie: pole skompletowane jest zamknięte, brakujące przerywane, częściowe zamknięte tylko w dolnej połowie. Czyta się to przy 56 pikselach i czyta się bez koloru. Strzałka łączenia i strzałka odzysku to osobne pliki, a nie jedna obrócona strzałka, bo obie stoją na tym samym ekranie, a odbita strzałka przerzuca cieniowanie na złą stronę. Pole wyniku narysowano celowo o jedną trzecią większe: produkt receptury nie jest kolejnym składnikiem i nie powinien mieścić się w tym samym pudełku.

Każdy sprite dostajesz jako edytowalny SVG i jako przezroczysty PNG w 1x, 2x i 4x, więc możesz wrzucić PNG prosto do silnika albo otworzyć wektor i zmienić kolor. Narysowany w tych samych wymiarach co reszta rodziny Sketch, co oznacza, że ten zestaw i zestaw paneli Sketch pasują do siebie bez skalowania któregokolwiek. Dobrze pasuje do gier zeszytowych i baśniowych.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP178 kB

Komplet — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readme

Pliki zawarte w tej paczce
PlikFormatWagaPobieranie
Komplet — źródła SVG, eksporty PNG w 1x/2x/4x, licencja i readmeZIP178 kB Pobierz →
Pole składnika, posiadany, edytowalny SVGSVG1.3 kB Pobierz →

Jak używać

  1. Pola składników układaj ze znakiem łączenia pomiędzy nimi, a strzałkę łączenia przed polem wyniku; każdy element narysowano pod ten porządek czytania i wspólny środek w pionie.
  2. Stan pola steruj liczbą sztuk w ekwipunku, a nie barwieniem jednego sprite’a: przerywany, gdy brakuje, domknięty w połowie przy częściowym, zamknięty przy komplecie.
  3. Wskaźnik jakości czytaj po liczbie nacięć, nie po długości. Nacięcia są stałe, więc wynik pięcionacięciowy da się policzyć obok trzynacięciowego.
  4. Na czas wytwarzania używaj paska stopniowanego, a nie paska zasobu. Wytwarzanie postępuje odrębnymi krokami, a płynne wypełnienie sugeruje, że można je przerwać na dowolnej wartości.

Licencja

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

Linijka uznania do skopiowania
"Sketch Interfejs wytwarzania" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sketch-crafting-ui