[教學]iOS、Android如何製作LINE主題對話框

12731

在上次的LINE主題製作器教學之後,大家也製作了自己的LINE主題了吧,但是在製作的過程中還是有很多朋友們不知道如何製作LINE主題的對話框,在製作LINE主題對話框時必需設定圖片跑圖的設定,而這些設定該如何製作呢?接下來Angus會在教學中告訴各位,要製作漂亮的對話框當然需要好的工具囉,這次使用的是NinePatch Editor來編輯9.png的圖片檔,而之前大家如果在製作中發現有跑圖的問題絕大部分都是因為9.png的圖檔關係,要製作好9.png檔案就必需有耐心唷!

 

使用教學

● 軟體名稱 : NinePatch Editor

●編輯器與範例檔下載 : 點選我

●作者 : kingccb

第一步 開啟對話框編輯器

載好的NinePatch Editor編輯器解壓縮出來之後,執行資料夾內的【9-patch.exe 】。

LINE_2_1

 

第二步 載入對話框範例圖片檔

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

LINE_2_2

 

第三步 載入自己製作好的對話框圖片檔

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

LINE_2_3

 

第四步 複製範例檔的格式

1.點選【範例圖片】。
2.按下鍵盤【Ctrl+C 】複製。

LINE_2_4

 

第五步 覆蓋自製對話框圖片

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

LINE_2_5

 

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

LINE_2_8

 

第六步 確認圖檔是否正常

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

LINE_2_6

 

第七步 製作完成

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

LINE_2_7

補充說明

第二種簡單改法

1.將製作好的圖載入
2.在右上方畫上X與Y軸線,只要不押到可愛的小圖就可以了唷
(如圖下所示)

 

您可能會有興趣的文章

Facebook留言

55 意見

    • 1~4的重疊區域為文字顯示的區域(圖中藍色的範圍即為文字顯示區域)
      5為對話框上下寬度的變形位置(避開圖片)
      6為對話框左右寬度的變形位置(避開圖片)

  1. 想請問一下 製作好的檔案存的時候是.9.png的檔案
    但套進去編輯器的時候就會變成單純的png檔導致對話框失真
    試過直接把圖片放箭images但好像也沒有用
    怎麼辦呢?

  2. 你好 我製作完保存後的檔案不能使用
    我沒更改檔名 直接使用他預設的名字存檔
    請問這該怎麼解決? 謝謝

  3. 不好意思請問我在電腦上看都成功的樣子,可是用上手機主題還是失真..請問是哪裡弄錯了嗎><

  4. 請問一下~以下的方法我都試過了
    為啥麼還是在電腦上看都ok~可是放到手機就不行了呢QQ
    我的小圖跟框框都會自己擴展.怎麼喬都一樣ˊ口ˋ

  5. 超超超超超有用的教學!!!
    之前一直很苦惱不知道怎麼改
    晚一點來試試
    謝謝!!!

  6. 你好~我想請問一下
    我三個圖的紫色框框都有在中間
    但不知道為什麼字還是都會跑到外面去耶><

  7. 不好意思 請問一下
    我已經把對話框設計好了
    但是我不知道要放在哪裡才可以
    可以教我嗎? 謝謝!

  8. 你好~可以問一下說..為什麼我修改之後
    他存檔還是沒有改變 還是原來的樣子
    因為我存好以後匯出後再用9.png修改器從資料夾裡面打開 他還是原來的樣子
    並不會變成三種形狀Q___Q

  9. 版主你好,很高興有你的教學,按照你的方式,三張圖片預覽是沒問題的,

    存檔以後,我用line主題編緝器,chathistory balloon <—對話框的位置,套用進去後,

    回手機看主題,為何對話框的小圖還是失真的~ 失敗了 !!! 為何呢 該如何用呢

  10. 才剛在懊惱無法更改而已,就看到有教學文章,太感謝了。
    只是第三步那邊的意思是,要先用小畫家之類的東西誌做一個框這樣嗎?

    • 最好還是使用Photoshop去製作比較好喔,因為在對話框以外的圖要去背,這樣才會有完美的對話框^^

留下一個答复

Please enter your comment!
Please enter your name here

迴響審核已啟用。您的迴響可能需要一些時間才會顯示。