UI 팩

Mallwave 인벤토리 칸 — 56px 그리드

아트리움 빛의 56×56 인벤토리 칸. 빈 칸, 호버, 선택, 잠김의 네 상태와 희귀도 프레임 세 종류. SVG와 투명 PNG.

  • ui
  • svg
  • 투명 png
  • 인벤토리
  • 인벤토리 칸
  • 아이템 프레임
  • 희귀도
  • 그리드
  • 베이퍼웨이브
  • 파스텔
  • 레트로
  • hud
체크무늬 배경에 놓인 정사각형 인벤토리 칸의 한 줄. 빈 칸, 호버, 모서리 표식이 있는 선택, 대각선 빗금의 잠김 상태에 이어 색상 희귀도 프레임과 여덟 칸 그리드가 놓여 있습니다
미리보기 1600×629투명한 부분은 체크무늬로 표시

이 팩에 대하여

빽빽한 그리드에 맞춘 치수의 56px 칸입니다. 희귀도 표식을 모서리에 묶어 두어, 모든 셀이 차 있어도 상점 그리드를 훑을 수 있습니다.

인벤토리 그리드에 필요한 것은 패널이 아니라 반복되는 정사각형입니다. 56×56 파일 7개, 바깥 경계가 모두 같아서 한 줄로 늘어놓아도 간격 계산이 필요 없습니다. 60 px 띄워 배치하면 테두리가 낱개 상자의 줄이 아니라 하나의 그리드로 읽힙니다.

상태는 색이 아니라 구조로 그렸습니다. 선택된 칸에는 모서리 표식이, 잠긴 칸에는 대각선 빗금이 붙고, 호버 중인 칸은 테두리가 한 단 올라갑니다. 이는 의도한 것입니다. 인벤토리 화면은 대부분의 게임에서 가장 시끄러운 면이고 온갖 색조의 아이템 그림 아래에 깔립니다. 테두리 색뿐인 상태는 빨간 검 하나가 들어오는 순간 보이지 않게 됩니다.

세 개의 희귀도 프레임은 계열의 나머지에서 체력·마나·스태미나 색을 그대로 가져오고, 색 테두리에 더해 모서리 표식도 갖습니다. 그래서 희귀도로 정렬하는 사람은 두 개의 신호를 읽게 되고, 그중 어느 것도 칸 가운데의 아이템 그림과 다투지 않습니다.

전부 편집 가능한 SVG와 1x, 2x, 4x의 플랫한 투명 PNG로 수록했습니다. 칸 안쪽은 투명해서, 구워 넣은 배경색 대신 그리드 뒤에 렌더링한 것이 그대로 비칩니다.

다운로드

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

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

이 팩에 들어 있는 파일
파일형식용량다운로드
전체 세트 — SVG 소스, 1x/2x/4x PNG 내보내기, 라이선스, readmeZIP53 kB 받기 →
빈 칸, 편집 가능한 SVGSVG1.3 kB 받기 →
모서리 표식이 있는 선택 칸, 편집 가능한 SVGSVG1.8 kB 받기 →

사용법

  1. 칸은 60 px 간격으로 배열하세요. 56 px 스프라이트에 4 px 여백이라는 배분이며, 그래야 테두리가 겹쳐 두꺼워지지 않고 1픽셀만큼 떨어져 보입니다.
  2. 아이템 아이콘은 칸 가운데에 약 39 px 크기로 그리세요. 안쪽 홈이 50 px라서 그보다 크면 테두리에 닿아 프레임을 삼킵니다.
  3. 선택과 잠김 상태는 색을 덮는 대신 칸 스프라이트를 통째로 바꾸세요. 모서리 표식과 빗금이 스프라이트의 일부입니다.
  4. 희귀도 프레임은 빈 칸을 그대로 대체합니다. 바깥 경계도 홈도 같아서, 희귀도 변경은 레이아웃을 건드리지 않는 텍스처 교체 한 번으로 끝납니다.

라이선스

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

복사용 출처 문구
"Mallwave 인벤토리 칸 — 56px 그리드" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/mallwave-inventory-slots