콘돔회사 디자이너의 [게더타운 디자인] 가이드라인 1
섹슈얼웰니스 브랜드, 세이브(SAIB) 디자이너가 알려주는 디자인 TIP
안녕하세요! 여성이 여성을 위해 만든 건강하고 안전한 섹슈얼웰니스 브랜드, 세이브(SAIB)의 디자이너 제인&세미입니다!
COVID19의 상황이 악화되면서 많은 기업들이 게더타운을 활용한 이벤트 기획에 열을 올리고 있는 요즘이네요. 하지만 메타버스라는 플랫폼이 익숙하지 않은 사람에게는 게더타운 내 공간을 만들고 이벤트를 기획하는 게 그리 쉽지만은 않죠. 게더타운 사용법과 관련된 유료강의까지 나올 정도니까요.
제인&세미가 디자인한 당당페 맵그래서 준비했습니다! 게더타운 고인물이라는 별명까지 생긴 디자이너 제인 & 세미가 알려주는 게더타운 에셋 커스터마이징 방법! 유튜브나 다른 콘텐츠를 통해 기본적인 사용 방법을 익히셨다면,, 그 다음 단계인 커스터마이징에 대해 알아보도록 해요.
게더타운을 브랜드 컨셉에 맞게 잘 활용하고 싶으신 분들, 원하는 오브젝트가 없어서 방황하시던 분들 모두 주목 주목 주목!!! 지금부터 게더타운의 맵과 오브젝트를 활용하여 포토샵으로 커스터마이징하고, 새로운 오브젝트를 제작하는 방법까지 쌲~다 알려드릴게요! ४'ٮ'४
아참! 혹시 당당페 by SAIB의 사례로 영감을 받으셔서 더 좋은 맵 혹은 오브젝트를 만드셨다면 댓글로 공유해주시면 감사하겠습니다! ˚✧₊⁎( ˘ω˘ )⁎⁺˳✧༚ 저희도 알고 싶어요~~!!!
게더타운 커스터마이징
참고) 게더타운의 그리드
게더타운은 32*32(px) 사이즈의 그리드가 모여서 이루어진 모눈종이라고 보시면 됩니다.맵 편집을 하기위해 Edit in Mapmaker 버튼을 누르면 확인할 수 있어요. 게더타운에서 표기하는 사이즈 즈 3×3 은 (32*3)×(32*3) = 96*96(px) 이니 참고해주세요!
[커스터마이징 방법] 1. 기존 에셋 조합하기
커스터마이징하는 첫 번째 방법은 기존 에셋을 활용하여 조합하는 방법입니다. 맵 이미지와 오브젝트 이미지를 다운받아서 사용하는 방법이에요. 다운받은 이미지를 포토샵으로 옮겨서 작업을 하면 맵과 오브젝트의 컬러를 원하는 방향대로 편집하여 커스터마이징 할 수 있습니다.
⌦주의사항
맵 이미지와 오브젝트를 다운로드하여 조합하는 방법은 '단일 이미지'로 만들어 업로드 하는 방법입니다. 맵 내에서 오브젝트가 많아지면 서버가 무거워져 지연이 발생해요. 때문에, 인터랙션이 필요하거나 추후 수정이 필요한 오브젝트가 아니라면 이렇게 단일 이미지로 업로드 하는 것을 추천합니다!
그럼 맵과 오브젝트를 다운받는 방법부터 설명드리겠습니다.（*´▽｀*）
1.1 맵 선택하기
우선 목적에 알맞은 맵을 만들기 위해 + Create a new space 버튼을 클릭해주세요. Templates 페이지에서 다양한 맵을 선택할 수 있어요.
1.2 맵 이미지 다운로드
맵 이름을 설정하고 만들어진 맵에 진입 후 다음 경로로 이동해주세요. Build > Edit in Mapmaker > Menu > Background & Foreground 에서 백과 포어 이미지 모두 다운받으면 됩니다.
맵에 배치할 오브젝트를 다운로드하는 방법도 간단해요. More Objects > Object 창에서 원하는 오브젝트를 우클릭 복사해주세요.
1.3 맵 + 오브젝트 조합하기
다운로드한 맵 이미지를 Photoshop에서 열고, 복사한 Piano 오브젝트를 붙여넣어 원하는 위치에 배치한 후 컬러를 변경해보겠습니다. 기존 에셋의 컬러는 Hue/Saturation (Command + U / Ctrl + U)으로 자유롭게 변경할 수 있어요.
작업이 완료된 이미지는 저장 후 게더타운 맵 페이지 내 좌측 하단 Build > Edit in Mapmaker > Menu > Background & Foreground에서 백 또는 포어 업로드를 해줍니다. 단일 이미지 배경이므로 포토샵으로 배치한 오브젝트는 수정이 필요한 경우 다시 포토샵으로 작업 후 새로 이미지를 적용 해야 한다는점 알아두세요!
⌦주의사항
기존 에셋의 사이즈 변경은 되도록 지양하는 걸 추천해 드립니다. 사이즈를 변경할 경우, 해상도가 낮게 조정되어 이미지가 깨져버립니다. 정말 꼭 사이즈 조정을 해야 한다면 새로 제작하는 방법을 추천해 드려요. (새로운 오브젝트를 제작하는 방법은 아래에서 자세히 설명해 드릴게요!)
[커스터마이징 방법] 2. 새로운 오브젝트 제작하기
커스터마이징하는 두 번째 방법은 완전히 새로운 오브젝트를 제작하는 방법입니다. 여러가지 방법이 있겠지만, 저희는 포토샵을 이용했어요!
2.1 오브젝트 만들기
먼저, 게더타운의 그리드와 아바타를 기준으로 오브젝트 사이즈 기획이 필요합니다.
⌦주의사항
사이즈 기획 없이 작업을 진행하면, 추후 리사이징이 필요할 때 처음부터 다시 제작을 해야합니다 (사이즈 조정을 할 경우 해상도가 맞지 않아 이미지가 깨져버리기 때문!). 그러므로 꼭! 기준 오브젝트를 정하고 작업에 들어가시길 바랍니다.
아래 파란 선택 보더라인 영역은 오브젝트의 투명한 캔버스 영역입니다. 아바타는 게더타운 그리드에 맞추어 32px 단위로 이동하기 때문에 32px 배수의 캔버스 사이즈에서 작업하는 것이 편리해요!
2.2 오브젝트 그리기 (픽셀아트)
픽셀아트를 해보신 분이라면 이해하기가 더 쉬울 텐데요. 1px로 설정된 연필툴로 원하는 이미지를 한 픽셀 한 픽셀 채워준다고 생각하시면 됩니다! 오브젝트를 새로 제작하기 위한 포토샵 설정은.. 우선 32px 배수의 캔버스 영역을 설정합니다. 게더타운의 그래픽은 명암이 표현된 오브젝트에 검정색으로 1px Stroke(테두리)가 둘러져 있어요. 그래서 1px 크기의 정방형의 연필툴로 작업하면 게더타운의 전체적인 그래픽과 비슷한 무드로 제작할 수 있습니다!
⌦주의사항
연필 모양이 정방형이 아니면 정확한 라인으로 그려지지 않아요. 제작한 오브젝트는 투명한 배경을 유지하여 png로 저장합니다. (입체감을 살리고 싶다면 그림자를 추가해 주세요!)
2.3 게더타운 업로드
Build > Upload image 버튼을 누르고 제작한 오브젝트를 업로드 해주세요. 이 창에서 오브젝트에 링크삽입 등의 인터랙션을 설정할 수 있습니다!
2-4. 캐릭터 복사하기
오브젝트와 마찬가지로 아바타도 우클릭 복사하여 사용할 수 있습니다. 게더타운에 로그인 한 뒤 프로필 사진을 누르거나, 혹은 맵 진입 페이지에서 Edit Character를 누르면 다양한 아바타를 볼 수 있답니다.
(아바타도 포토샵으로 불러와 커스터마이징이 가능해요!)
2-5. 폰트 사용하기
오브젝트에 텍스트를 사용하고싶다면, 픽셀아트에 최적화된 폰트를 찾는 것이 좋습니다. 폰트 설정은 -
1. 픽셀형태의 폰트와 폰트가 깨지지 않는 사이즈로 지정
2. 안티엘리어싱 옵션은 반드시 None으로 지정.
만약 폰트 사이즈가 너무 작아서 사용할 수 없다면, 그려야 합니다..ㅋㅋㅋㅋ
2-6. 원형 그리기
그려야 하는 원의 사이즈가 커지면 연필 툴만으로 그리기는 어렵기 때문에 Ellipse Tool로 스케치하는 방법을 추천드려요.
1. 아래 이미지와 같이 Ellipse Tool로 대강 스케치해두었습니다.
2. View > Rulers 체크 > Snap 체크 > Snap to 에서 Guides 체크로 설정해둡시다.
3. 화면 좌상단에 나타난 Ruler클릭 후 드래그 시, Guide를 그릴 수 있습니다. 스케치한 원 사방에 모두 Guide를 만들어주세요.
4. 이후 Ellipse Marquee Tool을 선택하면 Guide에 Snap되어 정확한 원을 그릴 수 있습니다.
사실 정해진 방법은 없고, 빠르게 할 수 있는 방법을 찾으면 됩니다..!
저희가 준비한 게더타운 커스터마이징 방법은 여기까지입니다! 쉽게 설명한다고 했는데 이해가 잘 되셨나 모르겠어요~! (๑>ᴗ<๑)
저희가 소개해드린 첫 번째와 두 번째 방법을 활용하여 게더타운을 디자인한다면, 더욱이 브랜드, 혹은 행사 컨셉에 알맞은 디자인이 가능할 뿐만 아니라 브랜드 아이덴티티를 살릴 수 있으며 더 가벼운 서버 환경을 구축할 수 있답니다. 그럼 이 방법을 활용하여 어떻게 메타버스 성 페스티벌을 디자인 하였는지 다음글에서 확인해보세요~! '◡'✿
✱세이브(SAIB)
여성이 여성을 위해 만든 건강하고 안전한 섹슈얼웰니스 브랜드, 세이브(SAIB)는 사회에 만연한 성에 대한 가부장적이고 보수적인 편견(BIAS)을 뒤집고자 시작되었습니다. 세이브는 국내 최초로 콘돔 전성분을 공개했으며, 여성의 몸에 불필요한 유해 물질을 배제하고 천연 유래 성분만 남긴 안전한 제품만을 만듭니다.
❤︎ 세이브 제품이 궁금하신 분들은 여기를 클릭해주세요!
✱당당페를 미처 즐기지 못한 분들을 위한 선물
✱ 3,OOO원 쿠폰
세이브 자사몰에서 1만원 이상 구매 시 사용가능.
쿠폰 코드 : SAIBLOVE09
✱ 쿠폰 등록 방법
1. 세이브 자사몰 방문 후 카카오로 5초 회원가입
2. MY PAGE > 나의 쿠폰 내역 > 쿠폰번호 등록하기
#메타버스 #게더타운 #게더타운포토샵 #게더타운디자인 #게더타운케이스 #게더타운포토샵디자인 #게더타운에셋디자인 #당당페 #당당페스티벌 #세이브앤코 #saibnco #세이브 #saib #세이브콘돔 #세이브청결제
