iOS 어피치 카카오톡 테마의 말풍선을 살펴보면서 아이폰용 카카오톡 테마 말풍선 기본형을 만들어보고, 좌표를 지정하고 CSS 문서를 수정하는 법에 대해서 알아봐요
이전글
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
iOS 어피치 카카오톡 테마의 말풍선 이미지와 KakaoTalkTheme.css 문서에서 메세지 스타일을 살펴보면서 아이폰용 카카오톡 테마 말풍선의 원리와 좌표에 대해서 알아봐요 이전글 카카오톡 테마 만드
salgudiy.tistory.com
카카오톡 테마 만드는 법 모아보기
카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)
1. 카카오톡 말풍선 기본형 이미지 만들기
카카오톡 어피치 테마에서 보낸말풍선 두번째 이후에 보여지는 말풍선 이미지를 기본으로 나만의 아이폰용 카톡 테마 말풍선을 만들어봐요.
이미지 위치 : Images
이미지 파일명 : ChatroomBubbleSend02@3x.png
수치를 비교하면서 만들 수 있게 내가 보낸 두번째 이상 말풍선(그룹)의 이미지 파일을 열어주세요.
이전 글에 이어서 콘텐츠 박스 사이즈는 36px 54px 입니다.
(이전글 : 콘텐츠 박스 크기, 위치 찾는 법은 8편을 참고해 주세요.)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
iOS 어피치 카카오톡 테마의 말풍선 이미지와 KakaoTalkTheme.css 문서에서 메세지 스타일을 살펴보면서 아이폰용 카카오톡 테마 말풍선의 원리와 좌표에 대해서 알아봐요 이전글 카카오톡 테마 만드
salgudiy.tistory.com
36px 54px 사각형을 하나 그려주세요. 저는 일러스트레이터 프로그램을 사용해서 만들겠습니다.
콘텐츠 박스를 기준으로 말풍선의 상하좌우 여백의 사이즈는 위로 27px, 왼쪽으로 30px, 아래로 18px, 오른쪽으로 30px 넓혀주면 되겠네요.
이 수치를 참고해 말풍선을 만들어 줍니다.
적당히 외곽을 굴려줍니다. 저는 사방을 33px 코너값으로 굴려줬습니다.
말풍선의 간격을 띄워주는 여백을 사이즈를 확인해줍니다.
위의 수치를 참고해서 대지를 만들어 줍니다.
(*대지의 위치는 항상 왼쪽 상단 기준점을 기준으로 x, y 정수에 위치해야합니다.
이와 관해선 6편 글을 확인해 주세요.)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
어피치 카카오톡 테마의 말풍선을 살펴보면서 나인패치 방식을 이용해서 안드로이드용 카카오톡 테마 말풍선 기본형을 만들어보고, 나인패치 오류없이 말풍선을 내보내기 하는 법에 대해서 알
salgudiy.tistory.com
말풍선에 색을 입혀주었습니다. 말풍선에 테두리선을 주고 싶다면, 오브젝트 안쪽으로 3px으로 주시면 어피치 말풍선과 동일한 굵기의 테두리 선을 만드실 수 있습니다.
콘텐츠 박스를 숨겨주면 png로 내보내기할 준비 완료!
File > Export > Export As...를 눌러줍니다.
Use Artboards 체크 해주시고 Export 해주세요.
옵션에서
Resolution : Screen 72ppi
Anti-aliasing : Art Optimized (Supersampling)
[V] Interlace
Background Color : Transparent
로 설정해주고 OK를 눌러 PNG 파일로 내보내기 해줍니다.
2. 좌표값 알아보기
1) 콘텐츠 박스 영역 좌표값 찾기
Ctrl+Y를 눌러 가시성을 위해 아웃라인 뷰 모드로 바꿔주세요.
(일러스트 메뉴바에서 View > Outline를 눌러주셔도 됩니다.)
Ctrl+U를 눌러 스마트 가이드를 켜주세요. (View > Smart Guides)
대지 왼쪽 상단 끝에서 콘텐츠 박스 상단 왼쪽 끝까지 사각형을 그려줍니다. 사각형 사이즈가 W : 33px H: 30px 인걸 Properties(속성)창에서 확인하실 수 있습니다. 지금 작업한 말풍선 이미지는 @3x 버전이니까 이 값에서 나누기 3을 해주시면 (위 30px 왼쪽 33px ÷ 3)
위 10px, 왼쪽 11px라는 좌표값을 확인하실 수 있습니다.
대지 오른쪽 하단에서 콘텐츠 박스 영역의 오른쪽 하단끝까지 사각형을 그려주세요. 이 값은 W : 51px H: 21px로 여기에서 3을 나누면 (아래 21px 오른쪽 51px ÷ 3)
아래 7px 오른쪽 17px라는 값을 얻으실 수 있습니다.
위 10px, 왼쪽 11px 아래 7px 오른쪽 17px을 반시계방향으로 차례대로 쓰면
10px 11px 7px 17px 이 값을 해당 위치에 넣어주면 됩니다.
2) 늘어나는 기준점 찾기
1px 1px 짜리 사각형을 하나 만들어 주시고 말풍선을 키오브젝트로 설정하고 가운데 정렬해서 작은 사각형을 말풍선의 가운데로 옮겨주세요.
대지의 왼쪽 상단에서 작은 사각형의 왼쪽 상단까지 사각형을 그려줍니다.
사각형의 크기가 W: 50.5px H: 52px 라는걸 확인 하실 수 있습니다.
50.5px 52px를 가장 가까운 3의 배수인 정수로 바꾸면 51px 51px이 됩니다. 이 수치에서 3을 나눠주면
17px 17px의 X좌표값, Y좌표값이 나옵니다.
1. 좌표 위치를 구한 사각형을 왼쪽 상단을 기준으로 3의 배수인 51px 51px로 변경해줍니다.
2. 작은 사각형을 좌표값을 구해준 사각형 끝으로 옮겨줍니다.
3. Ctrl+Y를 한번 더 눌러 아웃라인 뷰를 해제해주시면 늘어나는 기준점 위치(빨간 사각형 부분)를 확인하실 수 있습니다.
17px 17px 이 값을 해당 위치에 넣어주면 됩니다.
다음에는 iOS (아이폰용) 말풍선 응용형을 만드는 방법에대해 알아보겠습니다.
다음글
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
iOS 카카오톡 테마 말풍선 위에 이미지를 넣어 말풍선 응용형을 만들고, 응용형 말풍선의 좌표값을 같이 알아봐요! 이전글 카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi) 카카오톡
salgudiy.tistory.com
카카오톡 테마 만드는 법 모아보기
카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 3편 - 카카오톡 테마 구성 이미지 파일 알아보기 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi)
카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi)
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 14편 - apk 파일 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 15편 <마지막편> - 안드로이드용 말풍선 응용형2 + 작업방식 (+ 자세하게, tmi)
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi) (2) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi) (6) | 2022.12.02 |
| 카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi) (4) | 2022.12.02 |
| 카카오톡 테마 만드는 법 6편 - 안드로이드용 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |