이제 이미지 준비가 다 되었다면 카카오톡 테마 배경색이나, 글씨색 같은 색상을 바꿔줘야겠죠? 이번에는 컬러코드 수정하는 법에 대해서 알아봐요.
이전글
카카오톡 테마 만드는 법 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)
1. 안드로이드용 카카오톡 테마 컬러 코드 수정하기
안드로이드용 컬러 코드는 파일 2개를 변경해주셔야 합니다.
1) 테마 구성 컬러 코드 파일
파일명 : colors.xml
파일 위치 : Android_Sample_Theme_220405 > apeach-9.7.5-source > src > main > theme > values
2) 테마 설치창 컬러 코드 파일
파일명 : colors.xml
파일 위치 : Android_Sample_Theme_220405 > apeach-9.7.5-source > src > main > res > values
1) 테마 구성 컬러 코드 파일
먼저 테마 구성 컬러 코드 파일에 대해서 알아보겠습니다.
파일 경로 : Android_Sample_Theme_220405 > apeach-9.7.5-source > src > main > theme > values
테마 구성 컬러 코드 파일이니까 'theme' 폴더 안에 위치해있습니다.
colors.xml 파일을 열어주세요.
처음 .xml 파일을 열면 파일을 열때 사용할 앱을 선택하라는 창이 뜨는데 저는 메모장으로 선택해 주겠습니다. 창 하단에
[V] 항상 이 앱을 사용하여 .xml 파일 열기
에 체크해주시면 앞으로 매번 연결프로그램을 선택해주시지 않고 파일을 열 수 있어요.
이 colors.xml 문서의 HEX 코드 (#뒤에 붙은 문자 숫자로 조합된 6자리의 색상 코드) 를 원하는 색상 코드로 변경해주고 저장하면 끝인 간단한 방식입니다.
9.7.5_UserThemeGuide_Android.pdf 가이드 문서를 확인하시면서 어떤 코드가 어떤 부분을 구성하는지 확인하면서 색상 코드를 변경해주세요.
#RRGGBB로 구성된 HEX 코드는 포토샵이나 일러스트에서 자주 봐서 알겠는데
색상 코드를 바꿔주다 보면
이런 8자리의 색상 코드가 나와서 사람을 당황스럽게 합니다. 너네 뭐야... 무섭게 길어..
가이드 문서 2페이지에서도 설명하듯이 이때 앞의 2자리는 알파값 즉 투명도를 지정하는 것입니다.
| 불투명도 | aa(알파값) | 불투명도 | aa(알파값) |
| 0% | 00 | 5% | 0D |
| 10% | 1A | 15% | 26 |
| 20% | 33 | 25% | 40 |
| 30% | 4D | 35% | 59 |
| 40% | 66 | 45% | 73 |
| 50% | 80 | 55% | 8C |
| 60% | 99 | 65% | A6 |
| 70% | B3 | 75% | BF |
| 80% | CC | 85% | D9 |
| 90% | E6 | 95% | F2 |
| 100% | FF |
알파값 코드 표를 확인해서 원하시는 알파값을 내가 지정한 색상 앞에 입력해주시면 됩니다.
알파값+색상코드
예를 들어 투명도 80%의 #FFCD50 라면
투명도 80%은 'CC'니까 알파값+색상코드로 조합해
#CCFFCD50 으로 입력해주시면 됩니다.
이렇게 하나씩 색상코드를 바꿔주시고 저장해주시면 됩니다.
2) 테마 설치창 컬러 코드 파일
파일 경로 : Android_Sample_Theme_220405 > apeach-9.7.5-source > src > main > res > values
colors.xml 파일을 열어주세요.
statusBarColor 부분은 카카오톡 테마 설치창의 상단바의 색상을 지정해 주는 것입니다.
statusBarColor 옆의 색상 코드를 내가 만든 스플래쉬 이미지와 통일한 색상으로 바꾸고 저장해주세요.
이 부분을 몰랐을 때 제작한 마카롱 테마를 보시면 설치창의 위 상단바가 어피치 테마에서 기본적으로 적용된 분홍색으로 보이는 것을 확인하실 수 있습니다. 나중에 이 부분을 알고난 뒤 제작한 반딧불이 테마를 보시면 설치창 위 상단바가 스플래쉬 이미지와 통일성을 가진 색상으로 지정된 것을 알 수 있어요.
여기까지 수정해주셨으면 안드로이드용 색상 코드 수정 완료!
2. iOS 아이폰용 카카오톡 테마 컬러 코드 수정하기
iOS 컬러 코드는 KakaoTalkTheme.css 문서에서 컬러 코드 부분을 바꿔주시면 됩니다.
9.7.5_UserThemeGuide_iOS.pdf 가이드 문서를 확인하시면서 어떤 코드가 어떤 부분을 구성하는지 확인하면서 색상 코드를 변경해주세요.
iOS 테마는 불투명도를 지정할때 #AARRGGBB의 수치를 사용하는게 아니라 위의 사진처럼 따로 적어줍니다.
0부터 1까지의 값 중에서 사용할 수 있습니다. 1은 완전히 불투명한것, 0.9, 0.8, 0.7 ... 이렇게 조금씩 더 투명해 지다가 0이 되면 완전히 투명한 값이 됩니다.
다음에는 테마 아이콘을 만드는 방법에 대해서 알아보겠습니다.
다음글
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi)
테마 설치 파일 아이콘과 카카오톡 설정 > 테마 리스트에 보이는 앱 아이콘을 만드는 방법에 대해서 알아보겠습니다. 이전글 카카오톡 테마 만드는 법 11편 - 컬러코드 수정하는 법 (+ 자세하게, t
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)
'카카오톡 테마 만들기' 카테고리의 다른 글
| 카카오톡 테마 만드는 법 13편 - ktheme 파일 만드는 법 (+ 자세하게, tmi) (3) | 2022.12.02 |
|---|---|
| 카카오톡 테마 만드는 법 12편 - 앱 아이콘 만드는 법 (+ 자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 10편 - iOS 말풍선 응용형 (+자세하게, tmi) (6) | 2022.12.02 |
| 카카오톡 테마 만드는 법 9편 - iOS 말풍선 기본형 (+자세하게, tmi) (0) | 2022.12.02 |
| 카카오톡 테마 만드는 법 8편 - iOS 말풍선 알아보기(+자세하게, tmi) (0) | 2022.12.02 |