이전글
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi)
이전글 카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi) 카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi) (작성일 22/01/03) 컴퓨터 바꿔서 작업환경 설정하는김에 겸사겸
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. 안드로이드용
apeach-9.7.5-source > src > main > theme 에서
1. drawable-land-xhdpi
2. drawable-land-xxhdpi
3. drawable-sw600dp
4. drawable-sw600dp-land
5. drawable-xhdpi
6. drawable-xxhdpi
6개의 폴더 안에 들어있는 이미지 파일들을 직접 제작한 이미지들로 교체해주세요.
apeach-9.7.5-source > src > main > theme > drawable-xxhdpi을 예시로 보자면,
이 이미지들과 그 외 5개의 폴더들의 이미지를 교체해주시면 돼요.
2. iOS용
Images 폴더 안에 있는 파일들을 교체해줘요
이 이미지들을 교체해주세요.
iOS 아이폰용 메인탭 아이콘, 잠금화면 불릿 제작시 쉽고 빠르게
파일 이름 자동 지정, @2x 사이즈 자동 변환, 자동 저장하는 방법은 아래글을 참고해주세요
아이폰 카톡 테마 쉽고 빨리 만들기 : 메인탭 버튼 편 (ft. 스크립트 공유)
아이폰 카톡 테마 쉽고 빨리 만들기 : 메인탭 버튼 편 (ft. 스크립트 공유)
카카오톡 테마 만들때 메인탭 아이콘 이미지 이름 바꿔주는것만 해도 여간 귀찮은 일이 아닙니다. 그 귀찮은일을 포토샵에서 버튼 클릭 한번에 파일 이름 다 알아서 변경해서 폴더 안에 넣어주
salgudiy.tistory.com
아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)
아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)
카카오톡 테마 만들때 잠금 아이콘 이미지 이름 바꿔주는것만 해도 여간 귀찮은 일이 아닙니다. 제가 그 귀찮은일을 버튼 한번에 끝내는 방법을 알려드릴게요! 이전 글 : 메인탭 버튼 편 아이폰
salgudiy.tistory.com
작은 팁!
1. 어떤 이미지 파일들은 여러 버전의 사이즈가 필요하기때문에 큰 사이즈를 기준으로 제작을 한 다음 작은 사이즈로 축소하여 줍니다.
2. 이때 말풍선 외의 다른 이미지 사이즈는 원본 사이즈와 같게 해주고 모든 파일은 원본과 동일한 이름과 파일 확장자로 저장해서 기존 이미지들을 덮어쓰기 해주셔야 합니다.
3. iOS용 이미지들 중 2x 이미지는 3x 이미지를 만든 후 크기를 67%로 줄여주시면 돼요
배경화면
1. 스플래시 이미지 (설치 화면에서 적용됨)
(iOS버전에는 스플래시 이미지가 없습니다.)
| 기기 | 이미지 위치 | 세로 버전 | 가로 버전 |
| 안드로이드용 | drawable-xxhdpi | 1440 x 2560 | - |
| drawable-xhdpi | 720 x 1280 | - | |
| drawable-sw600dp-land | - | 2560 x 1440 | |
| drawable-sw600dp | 1440 x 2560 | - | |
| drawable-land-xxhdpi | - | 2560 x 1440 | |
| drawable-land-xhdpi | - | 1280 x 720 | |
| iOS용 | - | - | - |
가장 큰 sw600dp 사이즈에 맞춰
세로용 스플래시 이미지 1440 x 2560
가로용 스플래시 이미지 2560 x 1440
기준으로 스플레시 이미지를 세로, 가로용 2가지 버전으로 제작을 해준 후
나중에 작은 이미지 파일들로 축소 저장해줍니다.
2. 메인 배경 이미지
(친구목록, 채팅방 목록에서 적용됨)
| 기기 | 이미지 위치 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | 1440 x 2880 |
| drawable-sw600dp | 1440 x 2880 | |
| iOS용 | Images | 1125 x 2250 |
가장 큰 sw600dp 사이즈에 맞춰
1440 x 2880
기준으로 메인 배경 이미지 제작을 해주고 나중에 작은 이미지 파일들로 축소 저장해줍니다.
3. 채팅방 배경 이미지
(채팅방에서 적용됨)
| 기기 | 이미지 위치 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | 1440 x 2880 |
| drawable-sw600dp | 1440 x 2880 | |
| iOS용 | Images | 1125 x 2250 |
가장 큰 sw600dp 사이즈에 맞춰
1440 x 2880
기준으로 채팅방 배경 이미지 제작을 해주고 나중에 작은 이미지 파일들로 축소 저장해줍니다.
4. 잠금화면 배경 이미지
| 기기 | 이미지 위치 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | 1440 x 1440 |
| drawable-sw600dp | 1440 x 1440 | |
| iOS용 | Images | 1200 x 1200 |
가장 큰 sw600dp 사이즈에 맞춰
1440 x 1440
기준으로 잠금화면 배경 이미지를 제작하고 나중에 작은 이미지 파일들로 축소 저장해줍니다.
친구 추가 버튼
| 기기 | 이미지 위치 | 버전 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | - | 126 x 102 |
| iOS용 | Images | 2x | 84 x 68 |
| 3x | 126 x 102 |
친구 추가 버튼은
drawable-xxhdpi 126 x 102 기준으로 제작후 축소!
메인탭 배경 이미지
하단바의 아이콘 뒤 배경(구름 모양)이 메인탭 배경입니다.
| 이미지 위치 | 버전 | 사이즈 | |
| 안드로이드용 | drawable-xxhdpi | - | 1440 x 212 |
| drawable-sw600dp | - | 1440 x 212 | |
| iOS용 | Images | 2x | 940 x 98 |
| 3x | 1410 x 147 |
저는 메인탭 배경 이미지는 안드로이드용과 iOS용 이미지 비율이 달라서 각각 따로 만들어 줍니다.
메인탭 아이콘
| 기기 | 이미지 위치 | 버전 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | - | 114 x 114 |
| drawable-sw600dp | - | 152 x 152 | |
| iOS용 | Images | 2x | 76 x 76 |
| 3x | 114 x 114 |
메인탭 아이콘은 가장 큰 drawable-sw600dp 152 x 152 기준으로 제작후 축소!
iOS 메인탭 아이콘 쉽게 저장하는 방법은 아래 글을 확인해 주세요
https://salgudiy.tistory.com/65
아이폰 카톡 테마 쉽고 빨리 만들기 : 메인탭 버튼 편 (ft. 스크립트 공유)
카카오톡 테마 만들때 메인탭 아이콘 이미지 이름 바꿔주는것만 해도 여간 귀찮은 일이 아닙니다. 그 귀찮은일을 포토샵에서 버튼 클릭 한번에 파일 이름 다 알아서 변경해서 폴더 안에 넣어주
salgudiy.tistory.com
잠금화면 불릿 이미지
| 기기 | 이미지 위치 | 버전 | 사이즈 |
| 안드로이드용 | drawable-xxhdpi | - | 132 x 132 |
| iOS용 | Images | 3x | 132 x 132 |
잠금화면 불릿 이미지는 132 x 132 로 제작!
iOS 잠금화면 아이콘 쉽게 저장 하는 방법은 아래 글을 확인해 주세요.
아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)
아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유)
카카오톡 테마 만들때 잠금 아이콘 이미지 이름 바꿔주는것만 해도 여간 귀찮은 일이 아닙니다. 제가 그 귀찮은일을 버튼 한번에 끝내는 방법을 알려드릴게요! 이전 글 : 메인탭 버튼 편 아이폰
salgudiy.tistory.com
테마 기본 프로필 이미지
| 이미지 위치 | 사이즈 | |
| 안드로이드용 | drawable-xxhdpi | 240 x 240 |
| iOS용 | Images | 360 x 360 |
테마 기본 프로필 이미지는 iOS 기준으로 360 x 360으로 제작 후 축소!
테마 기본 프로필 이미지는 1~3개까지 만들수 있어요. 2개 이상으로 만들면 기본 프로필 이미지가 랜덤으로 적용됩니다.
만약 2개 이상으로 만들어 주시면 파일 이름을,
| 안드로이드용 | iOS용 | |
| 기본 프로필 이미지 1 | theme_profile_01_image.png | profileImg01@3x.png |
| 기본 프로필 이미지 2 | theme_profile_02_image.png | profileImg02@3x.png |
| 기본 프로필 이미지 3 | theme_profile_03_image.png | profileImg03@3x.png |
으로 저장해 주시고 저장위치는
안드로이드는
apeach-9.7.5-source > src > main > theme > drawable-xxhdpi 에
iOS는
Images 폴더 안에 저장해주세요.
안드로이드는 그 외에 더 수정할 부분이 없지만
iOS에서는
KakaoTalkTheme.css 파일의 프로필 부분을 수정해주세요.
키패드 프레스 이미지
| 이미지 위치 | 사이즈 | |
| 안드로이드용 | - | - |
| iOS용 | Images | 180 x 180 |
키패드 프레스 이미지는 iOS에만 적용되니까
180 x 180으로 제작!
<이미지 제작 기준 사이즈 총 정리>
| 스플래시 이미지 (가로) | 2560 x 1440 | (안드로이드 기준) |
| 스플래시 이미지 (세로) | 1440 x 2560 | (안드로이드 기준) |
| 메인 배경 이미지 | 1440 x 2880 | (안드로이드 기준) |
| 채팅방 배경 이미지 | 1440 x 2880 | (안드로이드 기준) |
| 잠금화면 배경 이미지 | 1440 x 1440 | (안드로이드 기준) |
| 친구 추가 버튼 | 126 x 102 | (안드로이드 기준) |
| 메인탭 배경 이미지 (안드로이드용) | 1440 x 212 | (안드로이드 기준) |
| 메인탭 배경 이미지 (아이폰) | 1410 x 147 | (iOS 기준) |
| 메인탭 아이콘 | 152 x 152 | (안드로이드 기준) |
| 잠금화면 불릿 이미지 | 132 x 132 | (안드로이드 기준) |
| 테마 기본 프로필 이미지 | 360 x 360 | (iOS 기준) |
| 키패드 프레스 이미지 |
180 x 180
|
(iOS 기준) |
다음글
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi)
카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세
지난 글 3편에서 압축을 풀어준 Android 나만의 카카오톡 테마 만들기 폴더를 안드로이드 스튜디오에서 프로젝트로 불러오는 법, 오류없는 카카오톡 테마 제작을 위한 초기 세팅을 하는 법과 테마
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)
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 5편 - 나인패치에 대해 알아보자 (+자세하게, tmi) (1) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 4편 - 안드로이드 스튜디오에서 테마 파일 프로젝트로 여는 방법 (+자세하게, tmi) (1) | 2022.12.02 |
| 카카오톡 테마 만드는 법 2편 - 카카오톡 테마 만들기 파일 다운받기 (+자세하게, tmi) (8) | 2022.12.01 |
| 카카오톡 테마 만드는 법 1편 - 프로그램 설치 (+자세하게, tmi) (0) | 2022.12.01 |
| 아이폰 카톡 테마 쉽고 빨리 만들기 : 잠금 버튼 편 (ft. 스크립트 공유) (1) | 2022.11.30 |