9305查看|14回覆

[美化教學] Line主題包美化教學

[複製網址]
主題 帖子 好友

  離線 

發表於 2013-6-20 16:54 | 顯示全部樓層  | 

本帖最後由 royhsueh 於 2013-7-4 14:34 編輯

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

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

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

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

3.JPG

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

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

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


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

C.圖片的檔名
針對幾個比較會更換的圖片,在這裡做個整理
5.JPG
1封面product
2歡迎畫面LOGOimages/splash_img_01.png
3歡迎畫面背景images/splash_img_02.jpg


6.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


7.JPG
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,需要作畫黑線與去黑線動作


8.JPG
14免費通話chat_menu01_call.png
14a免費通話  不可用chat_menu01_call_dim.png
15邀請 chat_menu02_add.png
15a邀請  不可用chat_menu02_add_dim.png
16提醒OFFchat_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


9.JPG
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


10.JPG
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
只要選中想要的顏色,然後點擊背景色的區塊,就會知道色碼了
11.JPG

12.JPG

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

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


點下搜尋-->替換
14.JPG

在尋找的地方輸入444444,替換的地方輸入0000FF
15.JPG


點選全部皆是
16.JPG

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

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

E.壓縮、覆蓋

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


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

18.JPG

2.將product.png,拿掉副檔名
19.JPG


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



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


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




您好!您無法瀏覽文章的全部內容,請登入 | 沒有帳號? 註冊帳號
主題 帖子 好友

  離線 

發表於 2013-6-26 14:16 | 顯示全部樓層  | 


想請問一下
紅色圈起來的地方的顏色要去哪邊改呢?

151039s22vux4uua394clh.jpg

點評

你要改甚麼? 字的顏色? 圖案? 還是背景?  發表於 2013-6-27 12:41
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-6-27 21:47 | 顯示全部樓層  | 

謝謝,很娘的兔兔版終於可以下台了。

點評

注意發言 新人請看版規  發表於 2013-6-27 21:51
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-6-28 11:15 | 顯示全部樓層  | 

聊天旁邊紫色的背景部分
謝謝
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

 樓主| 發表於 2013-6-28 15:29 | 顯示全部樓層  | 

llin1027 發表於 2013-6-28 11:15
聊天旁邊紫色的背景部分
謝謝

這個部分要去修改images資料夾中的圖檔 Screenshot_2013-06-28-15-23-51.jpg
左邊粉紅色的位置,要修改
btn_topbar_02_nomal.9.png
btn_topbar_02_pressed.9.png

中間藍色的位置,要修改
img_topbar_bg.9.png

右邊橘色的位置,要修改
btn_topbar_01_nomal.9.png
btn_topbar_01_pressed.9.png

點評

知道了,謝謝  發表於 2013-6-28 18:56
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-6-29 13:50 | 顯示全部樓層  | 

上次有幫我女友用一組史迪奇的主題
雖然我覺得只是聊個line,換主題好像沒啥必要
但看我女友用的很開心也就算囉~
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-7-3 12:12 | 顯示全部樓層  | 

感謝大大
回覆

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-7-4 14:01 | 顯示全部樓層  | 

本帖最後由 angeline210 於 2013-7-4 14:18 編輯

3歡迎畫面背景images/splash_img_01.jpeg
這個我解壓縮出來看到的是images/splash_img_02.jpeg






                               
登入/註冊後可看原圖

做出來變成這樣了~~出了什麼錯呢???

點評

你02那張圖的尺寸不對喔所以才會這樣  發表於 2013-7-4 14:33
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-7-4 14:44 | 顯示全部樓層  | 

angeline210 發表於 2013-7-4 14:01
這個我解壓縮出來看到的是images/splash_img_02.jpeg

02圖也是用1032*463
我是改圖沒改大小說

點評

我會建議你用603*1072  發表於 2013-7-6 21:51
回覆 按個讚

使用道具 檢舉

主題 帖子 好友

  離線 

發表於 2013-7-6 17:45 | 顯示全部樓層  | 

angeline210 發表於 2013-7-4 14:44
02圖也是用1032*463
我是改圖沒改大小說

寬=W  高=H
1032(W)*463(H) 簡單說 你現在你的寬(W)是1032  高(H)是463 所以變成橫向的 要改463*1032
還有你的images/splash_img_01.jpeg  用PS去背完之後存檔時檔名要用PNG
會有無 或 交錯式 2個選項 你選無底色就變白的 選交錯式底色是透明的
這樣你的images/splash_img_01 就只有圖案和你文字 在搭splash_img_02.jpg 就比較好看

回覆 按個讚

使用道具 檢舉

手機版|Android4tw

© 2013-2014 Android4tw by Discuz!

GMT+8, 2014-11-23 11:04 , Processed in 0.558829 second(s) , Gzip On.