iOS 카카오톡 테마 말풍선 위에 이미지를 넣어 말풍선 응용형을 만들고, 응용형 말풍선의 좌표값을 같이 알아봐요!
이전글
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi)
iOS 어피치 카카오톡 테마의 말풍선을 살펴보면서 아이폰용 카카오톡 테마 말풍선 기본형을 만들어보고, 좌표를 지정하고 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. 오른쪽 상단에 캐릭터를 넣어 말풍선 만들기
1) 기본형 말풍선 만들어 주기
2) 상단에 이미지 추가하기
상단에 넣어줄 이미지는 64px 90px로 만들어 줬습니다
말풍선 오른쪽 상단에 이미지를 위치 시켜줍니다.
말풍선이 깔끔하게 늘어나려면 늘어나는 기준점이 말풍선의 둥근 모서리와 캐릭터 이미지에 겹치지 않은 곳에 위치해야하기 때문에 어디에 늘어나는 기준점을 넣어줄 것인가 머리속으로 생각하면서 위치를 잡아주세요
이미지와 말풍선을 그룹해줍니다.
대지툴이 선택되어있는 상태에서 그룹된 오브젝트를 클릭해 대지를 만들어줍니다.
대지의 크기가 소수점으로 되어있다면 올림해서 정수로 만들어 주세요
대지를 사방으로 3px씩 늘려주세요
보내는 말풍선이 카카오톡 화면 끝에 너무 붙지 않게 대지의 오른쪽을 조금 더 넓혀주세요. 저는 10px 더 넓혀줬어요
현재 대지 사이즈는 W :128px, H:172px 인데
@2x 버전을 만들때 대지의 크기가 달라지지 않게 이 수치를 이 값보다 더 큰 3의 배수인 정수로 만들어줄거예요.
W :128px
128 보다 더 큰 3의 배수인 정수는 129
H:172px
172보다 더 큰 3의 배수인 정수는 174
대지를 가운데 기준점을 두고 가로 129px 세로 174px로 키워주세요.
대지의 위치가 왼쪽 상단을 기준으로 소수점이 있는 x,y좌표에 위치해 있습니다.
png로 내보내기 할때 크기의 오류가 생기지 않게 이 수치를 정수로 만들어주세요!
이 값은 커지던, 작아지던 상관 없이 그냥 정수이기만 하면 됩니다.
대지의 위치도 왼쪽 상단을 기준으로 해서 정수로 만들어주세요!
말풍선에 색을 입혀주고 콘텐츠 박스 영역을 숨김해주면 아이폰 말풍선 응용형 이미지 파일 완성!
이제 png 파일로 내보내기 해줄게요
File > Export > Export As...
파일 형식 : PNG
[v] Use Artboards
Export
Resolution : Screen (72ppi)
Anti-aliasing : Art Optimized (Supersampling)
[V] Interlaced
Background Color : Transparent
OK 버튼을 눌러주면 png로 이미지 파일 저장 완료!
3) 응용형 말풍선 좌표 찾기
Ctrl+Y를 눌러 가시성을 위해 아웃라인 뷰 모드로 바꿔주세요.
(일러스트 메뉴바에서 View > Outline를 눌러주셔도 됩니다.)
Ctrl+U를 눌러 스마트 가이드를 켜주세요. (View > Smart Guides)
3-1) 콘텐츠 박스 영역 좌표값 찾기
대지의 상단의 왼쪽 끝에서 콘텐츠 박스 왼쪽상단 모서리까지 사각형 1개,
대지 하단의 오른쪽 끝에서 콘텐츠 박스 오른쪽하단 모서리끝까지 사각형 1개
총 2개의 사각형을 그려주세요.
첫번째 사각형은 크기가 W : 33.9734 px, H : 96.3245 px 이네요.
이 수치와 가장 가까운 3의 배수의 정수이면서, 콘텐츠 박스 안쪽으로 들어오는 값을 찾아주세요.
W : 33.9734 px과 가까운 3의 배수이면서 정수는 33이나 36인데
콘텐츠 박스 안쪽으로 들어오는 값은 36입니다.
H : 96.3245 px과 가까운 3의 배수이면서 정수는 96 또는 99인데
콘텐츠 박스 안쪽으로 들어오는 값은 99입니다.
따라서 36px(왼쪽) 99px(위) 라는 값을 찾아낼 수 있습니다.
첫번째 사각형을 왼쪽 상단 기준점을 기준으로 가로 36px 세로 99px로 변경해주세요.
두번째 사각형은 크기가 W : 58.0266 px, H : 21.6755 px 이네요.
이 수치와 가장 가까운 3의 배수의 정수이면서, 콘텐츠 박스 안쪽으로 들어오는 값을 찾아주세요.
W : 58.0266 px과 가까운 3의 배수이면서 정수는 57이나 60인데
콘텐츠 박스 안쪽으로 들어오는 값은 60입니다.
H : 21.6755 px과 가까운 3의 배수이면서 정수는 21 또는 24인데
콘텐츠 박스 안쪽으로 들어오는 값은 24입니다.
따라서 60px(오른쪽) 24px(아래) 라는 값을 찾아낼 수 있습니다.
두번째 사각형을 왼쪽 상단 기준점을 기준으로 가로 60px 세로 24px로 변경해주세요.
콘텐츠 박스 크기 영역이 조금 줄어들었지만 괜찮습니다.
36px(왼쪽) 99px(위) 60px(오른쪽) 24px(아래) 라는 값을 찾아냈습니다.
이걸 3으로 나눠주면
12px (왼쪽) , 33px (위) , 20px (오른쪽), 8px (아래)
값이 되고 이걸 반시계방향으로 차례대로 입력해주면 (위 왼쪽 아래 오른쪽)
33px 12px 8px 20px
이 값을 CSS 문서에 적어주시면 됩니다.
3-2)늘어나는 기준점 찾기
1px 1px짜리 사각형을 만들어줍니다.
말풍선이 깔끔하게 늘어날 수 있게 캐릭터 이미지나 말풍선의 둥근 모서리에 겹치지 않는 위치에 1px 1px짜리 사각형을 잘 위치시켜줍니다.
저는 이 부분에 작은 사각형을 위치시켜줬습니다.
대지 왼쪽상단부터 작은 사각형 왼쪽 상단까지 사각형을 그려주시고 크기를 확인해주세요.
W : 39.1149 px
H : 118.3245 px
라는 것을 확인하실 수 있습니다.
콘텐츠 박스 영역 구하는것과 같이 이 수치와 가장 가까운 3의 배수의 정수이면서, 말풍선 코너나 이미지와 겹치지 않는 위치의 값을 찾아주세요.
W : 39.1149 px 과 가까운 3의 배수이면서 정수는 39나 42인데
말풍선 코너나 이미지와 겹치지 않는 위치의 값은 39, 42 둘다 해당되기때문에 저는 그냥 42를 선택해주겠습니다.
H : 118.3245 px 과 가까운 3의 배수이면서 정수는 117나 120인데
말풍선 코너나 이미지와 겹치지 않는 위치의 값은 117, 120 둘다 해당되기때문에 저는 그냥 120을 선택해주겠습니다.
W : 42px H : 120px
이 수치에서 3을 나눠주면
14px (X좌표) 40px (Y좌표) 좌표값이 나옵니다.
14px 40px
이 값을 CSS 문서에 적어주시면 됩니다.
다음에는 카카오톡 테마 색상을 구성하는 컬러코드에 대해서 알아봐요
다음글
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi)
이제 이미지 준비가 다 되었다면 카카오톡 테마 배경색이나, 글씨색 같은 색상을 바꿔줘야겠죠? 이번에는 컬러코드 수정하는 법에 대해서 알아봐요. 이전글 카카오톡 테마 만드는 법 1편 - 프로
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)
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi) (0) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, tmi) (2) | 2022.12.02 |
| 카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 7편 - 안드로이드용 말풍선 응용형 (+자세하게, tmi) (4) | 2022.12.02 |