Paczki interfejsu

Sumi Tła ekranów

7 elementy tła i nakładek (cel-shading) do interfejsów w trybie ciemny — laserunek węglem, akcent czerwień laku. SVG i przezroczysty PNG w 1x/2x/4x.

  • ui
  • svg
  • przezroczysty png
  • obraz tła
  • tło ekranu
  • powtarzalny
  • ekran menu
  • celshading
  • cel-shading
  • cel shading
  • tusz
  • ciemny interfejs
  • akcja
Arkusz z 7 elementy tła i nakładek (cel-shading) z rodziny Sumi, rozłożonymi na szachownicy przezroczystości, z rozmiarami w pikselach wypisanymi pod spodem
podgląd 1600×1341przezroczystość pokazana jako szachownica

O tej paczce

Sumi Tła ekranów to zestaw 7 elementy tła i nakładek narysowanych w stylu cel-shading, w którym gruby kontur tuszem otacza dwa płaskie tony rozdzielone twardym ukośnym terminatorem. Zawiera tło menu na pełny ekran, bezszwowy kafelek wzoru, przyciemniającą nakładkę dla okien modalnych, baner tytułowy, separator sekcji oraz tor i wypełnienie paska ładowania.

To jest element, który większość darmowych zestawów interfejsu pomija w całości. Zestaw dający panele i przyciski, ale nic, na czym można je położyć, przestaje być użyteczny przy pierwszym ekranie, jaki złożysz, a tła nie da się podrobić płaskim kolorem tak, żeby całe menu nie wyglądało na niedokończone.

Cień to pojedynczy kształt o twardej krawędzi, bez żadnego zaniku — właściwość definiująca cel shading i rzecz, której gradient nigdy nie podrobi. Kontur używa najciemniejszego tonu palety, a nie tonu obramowania, bo inaczej czyta się jak gruba szara ramka zamiast tuszu.

W obrębie tego stylu to jest odczyt Sumi: interfejs w trybie ciemny na palecie laserunek węglem z akcentami czerwień laku, zbudowany wokół dwóch koncentrycznych ramek, przycisków w kształcie zakładki w 120x48, pasków błyszczących podzielonych na 9 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.

Tło ekranu to miejsce, gdzie styl graficzny ma najwięcej przestrzeni, by się pokazać, więc w każdym narysowano je inaczej: pasma z ditheringiem, mozaika z trójkątów, kreskowany papier, siatka izometryczna, twardy horyzont. Dostajesz je w 640x360 i eksportowane do 2560x1440 w 4x, co pokrywa 1080p z zachowaniem proporcji, więc rozciąga się na dowolną rozdzielczość jednym dopasowaniem pokrycia. Kafelek wzoru zamyka każdy motyw w jego własnych granicach, więc powtarzanie nie pokazuje szwu.

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 Sumi, co oznacza, że ten zestaw i zestaw paneli Sumi pasują do siebie bez skalowania któregokolwiek. Dobrze pasuje do gier cel-shading i renderowanych toonowo.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP31 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 readmeZIP31 kB Pobierz →
Tło menu na pełny ekran, cel-shading, edytowalny SVGSVG585 B Pobierz →

Jak używać

  1. Używaj tła w trybie pokrycia zamiast rozciągania — proporcja 16:9 jest zamierzona, a jej zniekształcenie natychmiast widać na gradiencie.
  2. Powtarzaj wzór za listami i siatkami ekwipunku w 1x dla drobnej tekstury lub w 2x dla grubszej; jest bezszwowy w obu kierunkach.
  3. Rysuj przyciemnienie między grą a oknem modalnym na pełnym ekranie. Korzysta z palety stylu zamiast płaskiej czerni, więc nie szarzeje kolorowej gry.

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
"Sumi Tła ekranów" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sumi-backdrops