안드로이드 카카오톡 테마 만들기 안드로이드 말풍선 응용편! 나인패치의 늘어나는 기준선을 어디에 넣을 것인지, 말풍선 위에 이미지를 넣어 말풍선 응용형을 만드는 방법에 대해 알아보겠습니다.
이전글
카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
1. 늘어나는 기준선
늘어나는 기준선을 어디에 표시해주냐에 따라 나인패치의 이미지가 크게 달라집니다.
1) 위쪽 늘어나는 기준선
나인패치 이미지의 상단의 기준선의 위치에 따라 이미지가 어떻게 변하는지 알아보겠습니다.
*형광 초록색 영역이 나인패치 위치 입니다.
(a) 강아지가 위치한 영역에 기준선을 넓게 표시했을 때
강아지가 위치한 영역에 기준선을 넓게 표시하면 콘텐츠 영역에 따라 강아지 전체가 길게 늘어납니다.
(b) 강아지의 몸에 기준선을 두었을때
강아지의 몸에 기준선을 표시하면 콘텐츠 영역에 따라 강아지의 몸 부분만 길게 늘어납니다.
(c) 강아지의 코에 기준선을 두었을때
강아지의 코에 기준선을 표시하면 콘텐츠 영역에 따라 강아지의 코 부분만 길게 늘어납니다.
(d) 말풍선 영역에 기준선을 표시했을때
강아지가 없는 말풍선 오른쪽에 기준선을 표시하면 콘텐츠 영역에 따라 말풍선 오른쪽 부분만 길게 늘어납니다. 반대로 말풍선 왼쪽 기준선을 표시하면 말풍선 왼쪽이 늘어나서 강아지는 말풍선의 오른쪽에 위치하게 됩니다.
(e) 말풍선 영역 양쪽에 기준선 2개를 표시했을때
강아지가 없는 말풍선 양쪽에 기준선을 표시하면 콘텐츠 영역에 따라 말풍선 양옆이 늘어나서 강아지는 가운데에 위치하게 됩니다.
2) 왼쪽 늘어나는 기준선
나인패치 이미지의 왼쪽의 기준선의 위치에 따라 이미지가 어떻게 변하는지 알아보겠습니다.
(a) 기린이 위치한 영역에 기준선을 표시했을때
기린이 위치한 영역에 기준선을 표시하면 콘텐츠 영역에 따라 기린이 길게 늘어납니다.
(b) 기린의 목에 기준선을 표시했을 때
기린의 목에 기준선을 표시하면 콘텐츠 영역에 따라 기린의 목 부분만 길게 늘어납니다.
(c) 기린이 없는 말풍선 하단에 기준선을 표시했을 때
기린이 없는 말풍선 하단 기준선을 표시하면 콘텐츠 영역에 따라 말풍선 하단 부분만 길게 늘어납니다.
반대로 말풍선 위쪽에 기준선을 표시하면 말풍선 위쪽이 늘어나서 기린은 말풍선 아래에 위치하겠죠?
(d) 기린이 없는 말풍선 양쪽에 기준선을 표시했을 때
기린이 없는 말풍선 양쪽에 기준선을 표시하면 콘텐츠 영역에 따라 말풍선 양쪽이 늘어나서 기린은 가운데에 위치하게 됩니다.
늘어나는 기준점의 위치에 따라 나인패치 이미지가 어떻게 적용되는지 알아보았습니다.
2. 오른쪽 상단에 캐릭터를 넣어 말풍선 만들기
1) 기본형 말풍선 만들어 주기
먼저 색상 모드는 항상 RGB!!!
말풍선 기본형을 만들어줍니다.
기본형 말풍선 만드는 법은 이전 글을 참고해주세요.
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
어피치 카카오톡 테마의 말풍선을 살펴보면서 나인패치 방식을 이용해서 안드로이드용 카카오톡 테마 말풍선 기본형을 만들어보고, 나인패치 오류없이 말풍선을 내보내기 하는 법에 대해서 알
salgudiy.tistory.com
2) 상단에 이미지 추가하기
상단에 넣어줄 이미지는 64 x 90px로 만들어 줬습니다
말풍선 오른쪽 상단에 이미지를 넣어줍니다.
말풍선이 깔끔하게 늘어나려면 늘어나는 기준선이 말풍선의 둥근 모서리와 캐릭터 이미지에 겹치지 않은 곳에 위치해야하기 때문에 어디에 늘어나는 기준선을 넣어줄 것인가 머리속으로 생각하면서 위치를 잡아줍니다.
3) 그룹해주기
말풍선과 캐릭터 이미지를 그룹해줍니다.
4) 대지 만들어주기
대지툴을 클릭하고 그룹한 오브젝트를 클릭해서 대지를 만들어 줍니다.
5) 대지 크기 소수점 없애주기
가운데 기준점을 기준으로 대지의 가로, 세로 크기의 소수점을 없애기 위해 키보드 위 방향키를 한번씩 눌러서 숫자를 정수로 올려줍니다.
6) 말풍선 사이를 띄워줄 여백 만들어주기
말풍선 끼리의 여백과 나인패치가 들어갈 여백을 만들어 주기 위해
사방으로 3px씩 대지를 넓혀줍니다.
가운데 기준점을 기준으로 가로 +6px 세로 +6px 해주세요.
지금 만드는 말풍선은 내가 보내는 말풍선 기준이니까 핸드폰 화면 끝에 너무 붙지 않게 오른쪽 여백을 한 10px정도 더 띄워주세요.
7) 나인패치 기준선 만들어주기
(1)상단 나인패치 늘어나는 기준선
먼저 상단에 나인패치 가로로 늘어나는 기준선을 잡아줍니다.
사각형을 길게 만들어서 캐릭터 이미지나 말풍선의 둥근 모서리에 겹치지 않는 위치인지 확인해줍니다.
만들어준 사각형을 대지의 위로 붙여 정렬해준 후 가운데 상단 기준점을 기준으로 세로 1px로 만들어 줍니다.
(2)왼쪽 나인패치 늘어나는 기준선
왼쪽에 나인패치 가로로 늘어나는 기준선을 잡아줍니다.
사각형을 길게 만들어서 늘어나는 위치를 확인해줍니다.
만들어준 사각형을 대지의 왼쪽으로 붙여 정렬해준 후 왼쪽 가운데 기준점을 기준으로 가로 1px로 만들어 줍니다.
말풍선의 가운데에 기준선을 위치 시키고 싶으면 말풍선과 이미지의 그룹을 해제해주신 후 말풍선과 왼쪽 기준선을 선택후 말풍선을 한번 더 클릭해 키오브젝트로 설정 후 가운데 정렬버튼을 눌러주시면 됩니다.
(3) 콘텐츠 영역 나인패치 기준선 만들기
콘텐츠영역 사각형을 외곽선 없음, 칠 #000000으로 변경해준 후
같은자리에 복제를 하나 더 해줍니다. (Ctrl+C , Ctrl+Shift+V)
사각형 하나를 대지 아래쪽에 붙여 정렬 시키고 가운데-아래 기준점을 기준으로 세로 1px로 만들어줍니다.
남은 사각형을 대지 오른쪽에 정렬 시키고 오른쪽-가운데 기준점을 기준으로 가로 1px로 만들어줍니다.
타이밍을 놓쳐 이제야 말풍선을 이미지와 어울리게 색을 지정해주었습니다.
8) 나인패치 이미지 저장하기
내보내는 파일의 사이즈가 달라지지 않게 왼쪽 상단에 기준점을 두고 X,Y 좌표를 소수점이 없는 정수로 만들어 줍니다.
나인패치 영역만 남겨두고 말풍선과 이미지는 숨겨줍니다.
File > Export > Export As...
파일 형식 : PNG
[V] Use Artboards
옵션을 체크해주고 Export를 눌러줍니다.
Resolution : Screen (72ppi)
Anti-aliasing : None
[체크해제] Interlaced
Background Color : Transparent
OK 를 눌러줍니다.
이번에는 나인패치를 숨기고 말풍선과 이미지만 보이게 합니다.
File > Export > Export As...
파일 형식 : PNG
[V] Use Artboards
옵션을 체크해주고 Export를 눌러줍니다.
Resolution : Screen (72ppi)
Anti-aliasing : Art Optimized (Supersampling)
[V] Interlaced
Background Color : Transparent
OK 를 눌러서 저장해줍니다.
나누어 저장한 이미지 두개를 합쳐주기 위해 포토샵에서
File > Scripts > Load Files into Stack...
을 눌러줍니다.
Browse... 버튼을 눌러줍니다.
내보내기한 이미지 두개를 선택한 후 OK를 눌러줍니다.
OK 버튼을 눌러줍니다
한 캔버스에 두개의 이미지가 레이어로 들어온걸 볼 수 있습니다.
File > Export > Quick Export as PNG 를 눌러주세요
PNG 이미지로 저장해주세요.
저장된 이미지의 확장자를 .png에서
.9.png로 변경해주세요.
10) 안드로이드 스튜디오에서 나인패치 이미지 확인하기
안드로이드 스튜디오에서 나인패치가 오류없이 잘 적용되었나 확인하면 끝!
만약 오류가 있다면 5편의 '4. 나인패치 오류 원인' 부분을 확인해 주세요.
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
안드로이드용 카카오톡 테마 말풍선은 나인패치 방식을 사용합니다. 말풍선을 직접 만들어 보기에 앞서 나인패치에 대해서 가볍게 알아보고, 안드로이드 스튜디오에서 나인패치 이미지를 불러
salgudiy.tistory.com
다음에는 아이폰용 말풍선을 만드는 법에 대해서 알아보겠습니다.
다음글
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
iOS 어피치 카카오톡 테마의 말풍선 이미지와 KakaoTalkTheme.css 문서에서 메세지 스타일을 살펴보면서 아이폰용 카카오톡 테마 말풍선의 원리와 좌표에 대해서 알아봐요 이전글 카카오톡 테마 만드
salgudiy.tistory.com
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi) (1) | 2022.12.02 |
| 카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi) (1) | 2022.12.02 |