UI 팩

Neon 상점 UI

로우폴리 스타일의 상점과 경제 부품 12개. 다크 인터페이스용, 심우주 블루 팔레트에 시안 강조색. SVG와 투명 PNG 1x/2x/4x.

  • ui
  • svg
  • 투명 png
  • 상점
  • 상점
  • 경제
  • 상인
  • 인벤토리
  • lowpoly
  • low-poly
  • SF
  • hud
  • 사이버펑크
Neon 계열의 상점과 경제 부품(로우폴리) 12개를 투명 체크무늬 위에 배치하고 아래에 픽셀 치수를 적은 시트
미리보기 1600×669투명한 부분은 체크무늬로 표시

이 팩에 대하여

Neon 상점 UI은 로우폴리 스타일로 그린 상점과 경제 부품 12개의 세트입니다. 실루엣은 각진 다각형이고 면은 평평한 삼각형으로 나뉘어 있습니다. 구매 행 네 상태, 선택된 분류 탭과 대기 탭, 소지금 띠, 수량 조절기, 구매 확인 띠, 그리고 셀 수 있는 재고 표시 세 종이 들어 있습니다.

상점 화면에는 소지품 화면에 결코 없는 일이 하나 있습니다. 버튼을 누르기 전에 무엇을 살 수 없는지 알려 주는 일입니다. 무료 세트 대부분은 가격을 붉게 만들어 해결하는데, 그 붉은색을 읽지 못하는 사람에게는 통하지 않고 흑백 스크린샷에서도 통하지 않습니다. 게다가 인터페이스의 나머지가 이미 쓰고 있는 체력 색과 부딪힙니다.

네 개의 삼각형이 중심을 벗어나 만나고 저마다 자기 평평한 색조를 지닙니다. 면으로 나뉜 메시가 음영지는 방식이 정확히 그것입니다. 키트 안에 곡선은 하나도 없고 어느 면에도 그러데이션이 없습니다.

그 스타일 안에서 이것은 Neon의 해석입니다. 심우주 블루 팔레트에 시안 강조색을 얹은 다크 인터페이스로, 닫힌 테두리 대신 놓인 네 모서리 브래킷, 144x36의 모따기 버튼, 12칸으로 나뉜 빈 코어 바, 32px 그리드의 두 가지 색 아이콘을 축으로 짜여 있습니다. 두 계열이 아트 스타일을 공유하면서도 서로 대체되지 않는 이유가 바로 이 치수에 있습니다. 스타일은 가장자리를 어떻게 그릴지 정하고, 숫자는 그 인터페이스가 무엇을 위한 것인지 정합니다.

네 가지 행 상태는 색이 아니라 구조로 갈립니다. 살 수 있는 행은 왼쪽 가장자리에 실선 띠를, 살 수 없는 행은 파선 띠와 가격 칸을 가로지르는 막대를 답니다. 이미 가진 행은 가격 칸을 닫고 오른쪽 위 모서리에 표시를 남깁니다. 덕분에 이 상태는 색 변경에도, 색각 필터에도, 채도를 뺀 스크린샷에도 살아남습니다. 재고 표시가 셀 수 있는 것도 같은 이유입니다. 점 다섯, 점 하나, 점 없음이 단어 하나 색 하나 없이 충분·부족·품절로 읽힙니다.

모든 스프라이트는 편집 가능한 SVG와 1x, 2x, 4x 투명 PNG로 제공됩니다. PNG를 엔진에 그대로 넣어도 되고, 벡터를 열어 색을 바꿔도 됩니다. Neon 계열의 나머지와 같은 치수로 그렸기 때문에, 이 키트와 Neon 패널 키트는 어느 쪽도 크기를 바꾸지 않고 맞물립니다. 로우폴리 게임에 잘 어울립니다.

다운로드

직접 링크 · 가입 불필요 · 대기 페이지 없음
ZIP 내려받기98 kB

전체 세트 — SVG 소스, 1x/2x/4x PNG 내보내기, 라이선스, readme

이 팩에 들어 있는 파일
파일형식용량다운로드
전체 세트 — SVG 소스, 1x/2x/4x PNG 내보내기, 라이선스, readmeZIP98 kB 받기 →
상점 행, 기본, 편집 가능한 SVGSVG831 B 받기 →

사용법

  1. 행의 나인슬라이스는 좌우의 곧은 구간에 적용하세요. 오른쪽 가격 칸은 고정 너비라 긴 아이템 이름이 정렬을 밀어내지 않습니다.
  2. 살 수 없는 행에는 붉은 색조 대신 파선 띠와 가로줄 그은 가격을 쓰세요. 둘 다 색이 아니라 무늬라서 흑백에서도 읽힙니다.
  3. 재고 점은 모든 행이 쓰는 같은 자리에 두고 색이 아니라 개수로 움직이세요.
  4. 확인 띠와 수량 조절기는 높이가 같아서 상점이 둘 다 크기를 바꾸지 않고 한 줄에 놓을 수 있습니다.

라이선스

크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지

복사용 출처 문구
"Neon 상점 UI" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-shop-ui