[美化] Line主題包美化教學－sarli7357491的部落格

自從Line升上3.7.0後，新增加了一個可以更換主題的功能
發了2篇美化後，發現很多人在討論怎麼修改主題色系、文字顏色
PM問相關問題的人也多了，感覺大家對這一個新功能很感興趣
尤其可貴的是，這一次我發現論壇的大家都進步了，不再只是求檔案
而是在詢問怎麼修改，也想自己動手試試看的心態來學習
在此我先給各位一個大大的讚!

這一篇引用了論壇中M大與J大的教學文
嚴格說起來應該要算是懶人+流氓教學文吧，呵呵呵
在此要特別感謝M大與J大，讓我少寫好多字，少編輯好多圖

先說一下主題包的結構，Line的主題包有兩個檔案，一個是product，一個是themefile
product
是一個PNG的檔案，所以只要加上附檔名.png，就可以顯示出圖片來
是用在主題更換的封面，也就是你在設定-->主題，裡面看到的那張圖片
themefile
是zip的壓縮檔，使用解壓縮軟體解壓後會有theme.json與images資料夾
--------theme.json檔案，文字與聊天事背景的顏色在這裡更改
--------images資料夾，圖片在這個資料夾中作更換

A.修改主題的色系
這個修改主要是要動到images資料夾中的圖檔
將圖檔進行色系的變更，在這裡我是使用Photoshop

依序修改要變換色系的檔案即可

PS.偷吃步為使用批次修改，論壇裡面已經有非常詳細的教學文
因此在此就不在說明了，詳細使用方式請參閱@menglingli大大的教學文
M大的Photoshop教學

B.9.png修改
9.png是在Android平台下的一個特殊的檔案格式，該檔案圖片
會有自行調節大小的功能，但為了再縮放之間不要造成失真問題
我們必須標示出可以進行縮放的位置
因此如果有動到9.png的檔案，就必須要進行另一項進行修改
其他沒有9.png的檔案，換完顏色就可以瞜，不用再做甚麼動作

有關9.png檔案的教學，論壇裡面也有詳細的教學
這一邊我們要拜讀的是junda大大的文章
J大的9.png教學

C.圖片的檔名
針對幾個比較會更換的圖片，在這裡做個整理

1	封面	product
2	歡迎畫面LOGO	images/splash_img_01.png
3	歡迎畫面背景	images/splash_img_02.jpg

＊	分頁的背景	gnb_bg_pattern.png
4	好友頁面使用中	ic_gnb_friends_on.png
4a	好友頁面未使用	ic_gnb_friends_off.png
5	聊天頁面使用中	ic_gnb_chat_on.png
5a	聊天頁面未使用	ic_gnb_chat_off.png
6	動態消息使用中	ic_gnb_timeline_on.png
6a	動態消息未使用	ic_gnb_timeline_off.png
6b	動態消息有新消息	navi_noti_new.png
7	其他頁面使用中	ic_gnb_etc_on.png
7a	其他頁面未使用	ic_gnb_etc_off.png
8	手機通訊錄	add_menu01_group.png
9	行動條碼	add_menu02_qr.png
10	搖一搖	add_menu03_shake.png
11	ID搜尋	add_menu04_id.png

12	朋友發言框一般	img_chats_bg_01.9.png
12a	朋友發言框按壓	img_chats_bg_01_pressed.9.png
13	自己發言框一般	img_chats_bg_02.9.png
13a	自己發言框按壓	img_chats_bg_02_pressed.9.png
	這四個檔案為 9.PNG，需要作畫黑線與去黑線動作

14	免費通話	chat_menu01_call.png
14a	免費通話不可用	chat_menu01_call_dim.png
15	邀請	chat_menu02_add.png
15a	邀請不可用	chat_menu02_add_dim.png
16	提醒OFF	chat_menu03_off.png
16a	開啟提醒	chat_menu03_on.png
17	封鎖	chat_menu04_block.png
17a	解除封鎖	chat_menu04_unblock.png
18	贈送禮物	chat_menu05_gift.png
18a	贈送禮物不可用	chat_menu05_gift_dim.png
19	變更名稱	chat_menu06_name.png
19a	變更名稱不可用	chat_menu06_name_dim.png
20	照片	ic_chats_menu_photo.png
21	聊天設定	chat_menu07_setting.png
22	選擇照片	opt_menu01.png
23	拍攝照片	opt_menu02.png
24	選擇影片	opt_menu04.png
25	拍攝影片	opt_menu03.png
26	傳送聲音訊息	opt_menu05.png
27	傳送位置訊息	opt_menu06.png
28	好友資料	opt_menu07.png

29	編輯群組	chat_menu08_edit.png
29a	編輯全組不可用	chat_menu08_edit_dim.png
30	退出群組	chat_menu09_leave.png
30a	退出群組不可用	chat_menu09_leave_dim.png
31	好友--分享的框架	image_02_shape_01_left.9.png
31a	好友--分享框架的背景	image_01_shadow_01_left.9.png
32	自己--分享的框架	image_02_shape_02_right.9.png
32a	自己--分享框架的背景	image_01_shadow_01_right.9.png

31	沒有動態消息	timeline/common_st_mente.png
32	加入好友	more_menu01.png
33	設定	more_menu02.png
34	貼圖小舖	more_menu03.png
35	官方帳號	more_menu04.png
36	最新資訊	more_menu05.png

D.文字顏色與聊天室背景顏色
這一個部分進入到theme.json檔案，使用文字編輯軟體將其打開
我使用的是PSPad這個軟體，免費的，去GOOGLE一下就有了

講到這個就不得不說色碼，色碼是由6個字元組成，採用16進位置的表示法
比如說 #000000是黑色 #FFFFFF是白色 #FF0000是紅色....等等
要怎麼知道顏色的色碼，我是使用Photoshop
只要選中想要的顏色，然後點擊背景色的區塊，就會知道色碼了

知道色碼後就可以開始來進行文字顏色的調整了
有幾個方式來進行調整
1.慢工出細活
抓住幾個大原則來調整
text.color 就是文字顏色
text.shadow 就是文字陰影顏色
background.color 就是背景顏色
dimmed 一般在按鈕上，當不能按下時呈現的文字顏色

2.偷吃步
如果知道要更改的文字顏色色碼的話
比如我們要將兔兔的檔案中聊天的文字顏色#444444
全部跟換成藍色#0000FF

點下搜尋-->替換

在尋找的地方輸入444444，替換的地方輸入0000FF

點選全部皆是

如此，所有444444的色碼將會全部轉換為0000FF

PS.記得修改好要按儲存才會有修改.....

E.壓縮、覆蓋

當修改好所有想要修改的部分後，就可以開始進行最後的工作了

1.將解壓縮出來的theme.json與images資料夾重新壓縮

2.將product.png，拿掉副檔名

3.將完成的product與themefile 注意這兩個檔案現在都應該沒有副檔名
複製到原檔案位置進行覆蓋
phone\Android\data\jp.naver.line.android\theme\a07..........XXXX

4.進入LINE，欣賞自己的作品吧

後記
進入LINE之後，若沒有看到更換後的封面或是主題並未改變
a.進入LINE中的其他分頁-->設定-->主題-->在基本的地方點下套用
b.一樣再進入設定-->主題，在兔兔選擇套用