UI 팩

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

투영된 빛의 56×56 인벤토리 칸 13개. 빈 칸, 호버, 선택, 잠김, 거부, 놓기 상태와 원형·육각 장비 칸, 핫바, 희귀도 프레임 세 종류.

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

이 팩에 대하여

선만으로 만든 받침을 지닌 56px 칸입니다. 이 스타일에는 채워진 홈이 어디에도 없습니다. 투영에는 파고들 뒷면이 없기 때문입니다.

인벤토리 그리드에 필요한 것은 패널이 아니라 이어 붙는 정사각형입니다. 여기 칸은 모두 56×56로 바깥 치수가 같습니다. 유일한 예외는 큰 아이템용 두 칸짜리로 112×56이며, 늘린 정사각형이 아니라 별도 파일입니다. nine-slice가 아닌 칸을 늘리면 모서리가 일그러지기 때문입니다. 60px 간격으로 배치하면 테두리가 낱개 상자의 줄이 아니라 하나의 그리드로 읽힙니다.

상태는 색이 아니라 구조로 그렸습니다. 선택된 칸은 모서리 표시를, 잠긴 칸은 대각선 해칭을, 호버 칸은 테두리를 한 단 올리고, 거부된 칸은 X를, 놓기 대상은 점선 액센트 테두리를 받습니다. 이는 의도한 것입니다. 인벤토리 화면은 대부분의 게임에서 가장 소란스러운 면이고 온갖 색조의 아이템 그림 아래에 깔립니다. 테두리 색으로만 표현한 상태는 칸에 붉은 검이 놓이는 순간 보이지 않게 됩니다.

거부와 잠김을 별도 스프라이트로 둔 것은 의도적입니다. 잠긴 칸은 나중에 열릴 수 있고, 거부된 칸은 지금 커서에 든 아이템을 받지 않겠다고 말합니다. 둘을 똑같이 그리는 것이야말로 인벤토리가 플레이어에게 잘못된 규칙을 가르치는 경로입니다. 장비 칸이 정사각형을 벗어나는 것도 같은 이유로, 액세서리 칸은 원형이고 보석 칸은 육각형이라 어떤 툴팁보다 먼저 형태가 무엇이 들어가는지 알려 줍니다.

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

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

다운로드

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

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

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

사용법

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

라이선스

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

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