在上次的LINE主題製作器教學之後,大家也製作了自己的LINE主題了吧,但是在製作的過程中還是有很多朋友們不知道如何製作LINE主題的對話框,在製作LINE主題對話框時必需設定圖片跑圖的設定,而這些設定該如何製作呢?接下來Angus會在教學中告訴各位,要製作漂亮的對話框當然需要好的工具囉,這次使用的是NinePatch Editor來編輯9.png的圖片檔,而之前大家如果在製作中發現有跑圖的問題絕大部分都是因為9.png的圖檔關係,要製作好9.png檔案就必需有耐心唷!
![[教學]iOS、Android如何製作LINE主題對話框 1 line talk11](https://i0.wp.com/wuangus.cc/wp-content/uploads/2013/07/line_talk11.png?w=1320)
文章目錄
使用教學
- ● 軟體名稱 : NinePatch Editor
- ●編輯器與範例檔下載 : 點選我
- ●作者 : kingccb
第一步 開啟對話框編輯器
載好的NinePatch Editor編輯器解壓縮出來之後,執行資料夾內的【9-patch.exe 】。

第二步 載入對話框範例圖片檔
1.點選【導入】並且選擇好下載的範例檔。
2.按下【開啟 】,載入完畢後左邊會有三張載入的圖片。

第三步 載入自己製作好的對話框圖片檔
1.點選【導入】並且選擇自己製作好的對話框圖片檔。
2.按下【開啟 】,載入完畢後左邊會有三張載入的圖片。

第四步 複製範例檔的格式
1.點選【範例圖片】。
2.按下鍵盤【Ctrl+C 】複製。

第五步 覆蓋自製對話框圖片
1.點選【自己製作好的圖片】。
2.按下鍵盤【Ctrl+V 】覆蓋。
※覆蓋完成之後左邊會有三張預覽圖,以下圖片就是成功畫面。

※覆蓋完成之後左邊會有三張預覽圖,以下圖片就是失敗畫面。

第六步 確認圖檔是否正常
1.確認左邊三張預覽圖都沒有問題的話就存檔吧!
2.按下【保存】之後選擇路徑並按下【存檔】。

第七步 製作完成
這樣自製的漂亮LINE主題對話框圖片就製作完成囉!

補充說明
第二種簡單改法
1.將製作好的圖載入
2.在右上方畫上X與Y軸線,只要不押到可愛的小圖就可以了唷
(如圖下所示)
![[教學]iOS、Android如何製作LINE主題對話框 1 line talk11](https://i0.wp.com/wuangus.cc/wp-content/uploads/2013/07/line_talk11.png?w=1320)
請問大大我的對話框修改之後 錄音框播放跟分享的部分被擠出框外了 該怎麼解決呢?
1~4的重疊區域為文字顯示的區域(圖中藍色的範圍即為文字顯示區域)
5為對話框上下寬度的變形位置(避開圖片)
6為對話框左右寬度的變形位置(避開圖片)
android 手機版 line 5.0 對話框如何設定,卜口竹
謝謝
對話框製作都是一樣的沒有分版本
想請問一下 製作好的檔案存的時候是.9.png的檔案
但套進去編輯器的時候就會變成單純的png檔導致對話框失真
試過直接把圖片放箭images但好像也沒有用
怎麼辦呢?
請看第六步驟
存檔案時,記得存檔類型: 9.png文件
才會是正確的9.png對話框檔案
試過了還是不行~~
存檔時時正確的但用的時候就不行了QQ
不過還是謝謝你~
請問對話框可以怎麼「製作」?
教學就是了
不好意思 我是問步驟三的對話框T^T
你好 我製作完保存後的檔案不能使用
我沒更改檔名 直接使用他預設的名字存檔
請問這該怎麼解決? 謝謝
如何不能使用呢? 請重新照最後一個步驟製作就可以了!
不好意思 請問我都下載了 但都無法開啟
有什麼解決方法嗎?
要使用rar解壓縮軟體 ,解壓縮出來的檔案裡面才是執行檔
http://pokedex.com.tw/%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89%E8%80%81%E7%89%8C%E5%AD%907-zip%E8%A7%A3%E5%A3%93%E7%B8%AE%E8%BB%9F%E9%AB%94/
我有解壓縮 但是這個9-patch.exe檔案點它了都沒反應……
有在教怎麼自己作步驟三製作好的對話框圖片檔嗎?
不好意思請問我在電腦上看都成功的樣子,可是用上手機主題還是失真..請問是哪裡弄錯了嗎><
您好^^ 可以參考最後面的 補充說明! 只要沒有壓到十字 就可以了,試試看吧^^
不好意思請問ios line主題怎麼自製呢!!!???
看看這一篇教學吧^^
這個作者寫的蠻詳細的
http://mrmad.pixnet.net/blog/post/150523552-%5Bios%5Dline%E4%B8%BB%E9%A1%8C%E8%A3%BD%E4%BD%9C%E5%A4%A7%E8%A7%A3%E6%9E%90%E8%88%87%E6%95%99%E5%AD%B8
製作這是不是還要下載LINE電腦版的>>
不用唷!!
請問一下~以下的方法我都試過了
為啥麼還是在電腦上看都ok~可是放到手機就不行了呢QQ
我的小圖跟框框都會自己擴展.怎麼喬都一樣ˊ口ˋ
試試看文章的補充說明方法吧!簡單很多哦!
請問一下,這樣是哪裡不對了
為什麼圖片還是失真了呢
看看下面回答的圖案吧!用下放圖片的方法
怎麼做都會這樣子耶?
請問可以怎麼做呢
圖片
看看下面回答的圖案吧!用下面圖片的方法
不好意思請問一下.從哪裡找範例圖檔…..
下載完後解壓縮裡面就有囉! 載點在文章教學開始的地方!!~
超超超超超有用的教學!!!
之前一直很苦惱不知道怎麼改
晚一點來試試
謝謝!!!
感謝你的持續支持喔^^
你好~我想請問一下
我三個圖的紫色框框都有在中間
但不知道為什麼字還是都會跑到外面去耶><
您好,可以將您的圖檔向右偏移試看看,再重新複製套用
1.將製作好的圖載入
2.在右上方畫上X與Y軸線,只要不押到可愛的小圖就可以了唷
(如圖下所示)
不好意思 請問一下
我已經把對話框設計好了
但是我不知道要放在哪裡才可以
可以教我嗎? 謝謝!
放在自己設計的主題資料夾內的images裡面
放在自己設計的主題資料夾內的images裡面?每個手機機型都一樣放法嗎?可以解說仔細一點嗎?
在images裡面的縮圖都可以很清楚的看到,可以自己嘗試更換測試。
我要在哪裡下載? 沒辦法下載
上方的載點,建議用電腦下載
已用上方載點,但電腦顯示無法開啟
你好~可以問一下說..為什麼我修改之後
他存檔還是沒有改變 還是原來的樣子
因為我存好以後匯出後再用9.png修改器從資料夾裡面打開 他還是原來的樣子
並不會變成三種形狀Q___Q
那應該是沒有複製到喔 或是 沒有保存~
請問大大~~
如果紫色框框擋住小圖我該怎麼調整OAO?
SORRY…我剛剛接處比較不懂OAQ
也可以使用別人製作好的對話框來複製喔! 不一定要使用原始檔的對話框來複製~
版主你好,很高興有你的教學,按照你的方式,三張圖片預覽是沒問題的,
存檔以後,我用line主題編緝器,chathistory balloon <—對話框的位置,套用進去後,
回手機看主題,為何對話框的小圖還是失真的~ 失敗了 !!! 為何呢 該如何用呢
請將show patches 與 show content打勾,打勾完畢之後,就會看見您的對話框上面三個圖都有紫色的框框,注意喔!! 當紫色框框擋住您的小圖時,就代表會失真,所以要調整到不會覆蓋到才算完成喔^^
你好~
我想請問
我3個圖的紫色框框都有在中間
但不知道為什麼字還是都會跑到外面去耶><
補充說明已經家在文章上囉
範例圖
才剛在懊惱無法更改而已,就看到有教學文章,太感謝了。
只是第三步那邊的意思是,要先用小畫家之類的東西誌做一個框這樣嗎?
最好還是使用Photoshop去製作比較好喔,因為在對話框以外的圖要去背,這樣才會有完美的對話框^^