擷取.JPG (164.21 KB, 下載次數: 1)
2013-7-11 10:53 上傳
.9邏輯解說
.9圖檔的延伸區域是由左.上兩黑邊來定義
以數字鍵盤為例 每格代表一個像素 所以是個3x4的小圖
9.JPG (10.56 KB, 下載次數: 0)
2013-7-11 12:55 上傳
假設一個字佔一個像素 表示可以打12個字
當字數超過12時 對話框就必須延展 而畫黑邊的部分會重複出現
134.jpg (9.06 KB, 下載次數: 0)
2013-7-11 08:48 上傳
,,9d.jpg (19.03 KB, 下載次數: 0)
2013-7-11 09:15 上傳
黑線的方向就是延伸的方向 如果黑邊不只一點 則會 視有畫的部分平均延展
123.jpg (10.81 KB, 下載次數: 0)
2013-7-11 08:48 上傳
,,4367457.jpg (26.8 KB, 下載次數: 1)
2013-7-11 09:15 上傳
把 口Show patches打勾 就會以螢光筆的方式呈現要複製的部分
25436.jpg (9.44 KB, 下載次數: 0)
2013-7-11 09:07 上傳
,,0780.jpg (18.1 KB, 下載次數: 0)
2013-7-11 09:07 上傳
第一部分:畫延伸區
只要記得
1. 螢光區的部分(延展區域)
水平A區/垂直B區 延展部分依黑邊平均分配 交叉C區會變型延展
473658.jpg (24.73 KB, 下載次數: 0)
2013-7-11 09:32 上傳
到這裡要做出一般簡易的對話框是沒問題了
那如果想做特別點 有人物/圖騰在邊邊的這種對話框
ef2.JPG (11.71 KB, 下載次數: 1)
2013-7-11 09:53 上傳
畫黑邊的時候就要更細心一點
經過縮圖後圖案本來就很小了 但是還要留對話框的部分 圖案能用的像素更少了
魚與熊掌不可兼得 所以建議
想要精細點的人物就搭配簡一的對話框 想要華麗的對話框就配簡單的圖案
像是上面Mario原圖是1100萬畫素的去背圖任意門 縮成56x51人物已經夠悲劇 只能犧牲對話框品質了
2. 螢光區部分(延展區域)以對話框為中心 切勿壓到圖案
由於螢光區的部分會延展 如果人物畫進去就會變形 (瑪利歐的鞋底)
11111.jpg (147.54 KB, 下載次數: 1)
2013-7-11 10:50 上傳
這裡建議可以將主角及對話框分別置於對角 畫線會比較好對喔
假如希望像這樣四邊都花花的 不會說對話框明顯突兀
img_chats_bg_01.9.png (11.37 KB, 下載次數: 1)
2013-7-11 11:18 上傳
可以先想好螢光區的範圍 再去對圖做修改 把範圍內對話框外的雜點(瑪利歐的鞋底)去除 才不會延展後看起來髒髒的
j9j9.JPG (149.13 KB, 下載次數: 1)
2013-7-11 13:10 上傳
3. 對話框部分其實主要只是四個角的形狀
因為.9延展的特性 完美顯示的情況下 圓形的對話框伸縮後會變成鈍角的長方形
所以其實直接畫圓形就好 這樣四角會比直接畫鈍角長方形還圓滑 (因為有較多像素描繪四角)
sdww.JPG (64.61 KB, 下載次數: 1)
2013-7-11 11:52 上傳
345t34ty43.JPG (54.21 KB, 下載次數: 1)
2013-7-11 11:52 上傳
像這種鈍角弧度已定
img_friendlist_aword.9.png (9.58 KB, 下載次數: 1)
2013-7-11 11:41 上傳
畫線就不能壓到有弧度的邊464.jpg (2.48 KB, 下載次數: 2)
2013-7-11 11:41 上傳
第二部分:畫顯示區
顯示區相較之下就簡單多了 只要針對對話框部分自己視情況調整就好
把 口Show content打勾 深色區塊就是能夠顯示的部分
先畫好四個邊角
23214141.JPG (91.55 KB, 下載次數: 0)
2013-7-11 12:05 上傳
再把中間填滿 (不用填滿也行 因為是畫區間)
236y45yhu43h.JPG (90.15 KB, 下載次數: 2)
2013-7-11 12:05 上傳
這樣就完成囉 其實不難吧:)
以上是基本 完美顯示的畫法 不同的畫法變形呈現出的風格也會不同
例如 這樣畫就會有Mario越長越高的感覺
353425433532.JPG (142.4 KB, 下載次數: 0)
2013-7-11 12:42 上傳
但若是打出來文字比例太極端(扁長型) 這種圖 形變就會很怪
crt2tc3.JPG (127.52 KB, 下載次數: 1)
2013-7-11 12:42 上傳
(之前有看到有人說單行文字顯示正常 但超過一行就會變形
建議最後存檔前可把PatchScale倍率調最大 做最後確認)
大家可以邊試邊玩 激發創意囉
最後幾點注意事項
畫完的.9請直接到image覆蓋原檔
因為Line Theme Editor 0.3不支援.9 丟進去會轉換為一般png
出來效果就跟這樣畫一樣 新版Line Theme Editor 0.3.2是不是依然 就不曉得了
5474373.JPG (92.88 KB, 下載次數: 0)
2013-7-11 12:05 上傳
另外要是遇到不論顯示區怎麼調 字始終都跑掉 可以把.json留白空間刪掉
mij09.JPG (103.75 KB, 下載次數: 13)
2013-7-11 12:54 上傳
最後附上載點
9 Patch Editor 1.0.0.3.zip
(743.25 KB, 下載次數: 141)Nine-Patch Edit
在APK.TW發文很辛苦,有幫助到你就賞個鑽吧!
有問題都可以發問,但請確保是此文章幫不上忙的.
作者: bkbkbbkbbk 時間: 2013-7-11 13:25
解說的那麼詳細，一定要學習，太感謝了！
作者: oka84rqq 時間: 2013-7-11 13:38
本帖最後由 oka84rqq 於 2013-7-11 16:05 編輯
真是細心指導 該碰到的問題 都幫我忙設想到了^^
請問如何把對話框跟圖合而為一 而不會造成圖片變形~~ 我目前只試到您說的圖框可以調 跟單純圖案可以調 怎麼把兩個整合在一起又不會有拉長或變矮的情形發生阿??
作者: zoey77 時間: 2013-7-11 17:41
你先將對話框的圖和想附加上去的圖先合成一個圖，再使用.9的軟體，劃黑邊就可以囉～但要小心不要畫到附加的圖案哦
作者: junki0417 時間: 2013-7-11 22:34
大大說明的好詳細！
看各位大大們做出好多好漂亮的主題，
看了也很想自己嘗試～
改天來做看看～
作者: oka84rqq 時間: 2013-7-12 09:54
恩恩 之後是成功了~~畫黑線 沒畫好 真的有差>"<
作者: c830306 時間: 2013-7-12 23:22
不好意思 我的對話框字會有點超出來耶> <
是我畫線畫錯了嗎 可以幫我看一下嗎~ 謝謝><
https://apk.tw/forum.php?mod=attachment&aid=NjYwNjQ3fDgxMzZlZDNmMDkxZTk5NTMzMTVmNDU3NTIxY2E2MjlmfDE3NTM0Mjc5OTc%3D&request=yes&_f=.jpg
https://apk.tw/forum.php?mod=attachment&aid=NjYwNjQ2fDJlZTM1MGZiNWRmZjE4Y2M1Y2Y5ODUwOTViZTdiOWVifDE3NTM0Mjc5OTc%3D&request=yes&_f=.jpg
作者: sky10515 時間: 2013-7-12 23:31
c830306 發表於 2013-7-12 23:22
不好意思 我的對話框字會有點超出來耶> <
是我畫線畫錯了嗎 可以幫我看一下嗎~ 謝謝><
https://apk.tw/forum.php?mod=attachment&aid=NjYwNjQ3fDgxMzZlZDNmMDkxZTk5NTMzMTVmNDU3NTIxY2E2MjlmfDE3NTM0Mjc5OTc%3D&request=yes&_f=.jpg ...
最後一點有提到 把theme.json裡padding值清除應該就好了
作者: TNTNT 時間: 2013-7-15 11:49
請問用舊版的Line Theme Editor就可以改善對話框失真的問題嗎??
因為我是用Line Theme Editor V0.3.2 來編輯
也用了(Nine-Patch Edit)還有(Draw 9-patch)分別編輯過了
對話框還是失真
請問大大有沒有舊版的軟體載點??
作者: sky10515 時間: 2013-7-15 15:41
其實新舊版差在新版有附可以編輯.9的插件
至於輸入的圖檔.9的內容有沒有被洗掉就要試了才知道
不過要是直接把改好的.9覆蓋image資料夾裡的原檔 是絕對沒問題的
這樣編輯器的版本就沒有影響了
如果還是跑掉 就應該是你.9沒畫好的關係
作者: TNTNT 時間: 2013-7-15 22:25
可以麻煩你看一下我做的檔案??
我傳ZIP給你喔
theme.zip
作者: sky10515 時間: 2013-7-16 15:51
你這很明顯 不是沒畫.9就是.9畫滿
你用nine patch把image裡的檔案打開看 就知道了根本沒有畫.9呀
文中寫得很清楚了
"最後幾點注意事項
畫完的.9請直接到image覆蓋原檔
因為Line Theme Editor 0.3不支援.9 丟進去會轉換為一般png"
文章要看仔細喔
另外你的畫法是沒問題的 只是要記得....畫完的檔要放進去="=
作者: love890704 時間: 2013-7-20 01:03
謝謝大大的分享...已下載摸索中~~
作者: 芷嫣 時間: 2013-7-30 03:18
蟹蟹大大分享 目前正在研究對話框 3Q
作者: willy1462 時間: 2013-8-1 17:04
請問自己做的對話框要自己修正大小嗎?
還是不管多大結果都會自己修正?
因為我用的外加圖片有點大用專業軟體縮太小都會失真
作者: sky10515 時間: 2013-8-1 17:20
因為對話框的大小還涉及到字的大小比例等
修改起來可能會有很多的問題 所以我沒試
建議還是以原本的大小56x51去改
不過原本圖檔本來就不大 太精細的圖失真是必然的
要避免失真只能盡量挑些線條簡單的圖案囉
作者: willy1462 時間: 2013-8-1 17:26
不好意思噢請問
我怎麼畫好線後按保存存的.9圖都顯示不出來...
打開圖片寫著"無法開啟，檢視器不支援"
QAQ
作者: sky10515 時間: 2013-8-1 20:19
這樣問有點籠統 附個圖線索比較多
可能原因有很多 要試過才知道問題在哪
作者: kokoto 時間: 2013-8-11 08:42
請問大大能幫我看看嗎~我做的對話框只要一多字就會整個糊掉
img_chats_bg_02_pressed.9.png (3.14 KB, 下載次數: 1)
2013-8-11 08:41 上傳
img_chats_bg_02.9.png (3.22 KB, 下載次數: 0)
2013-8-11 08:41 上傳
img_chats_bg_01_pressed.9.png (2.96 KB, 下載次數: 1)
2013-8-11 08:41 上傳
img_chats_bg_01.9.png (3.45 KB, 下載次數: 1)
2013-8-11 08:41 上傳
作者: sky10515 時間: 2013-8-12 13:03
因為你把圖的部分也畫進了伸縮區所以才會糊
作者: coolkiller 時間: 2013-8-12 13:29
大大解說好詳細哦～
一定要推一個的！
作者: vxv 時間: 2013-9-10 14:47
耶~ 個性簽名 成功!!
但是.....聊天室對話框還是失敗了.前前後後總共測試了16次
使用不同的themefile、.json也刪除了、也覆蓋儲存、重新區分點不同的地方、使用是別人的檔案仿冒製作..等
它~就是不肯下來
麻煩大大能幫我看一下.你這樣可以知道我錯在哪嗎??
作者: 修羅蝶 時間: 2014-7-15 04:10
本帖最後由 修羅蝶 於 2014-7-15 04:13 編輯
感謝大大詳細解說~~找了老半天~原本方法在大大這~~好感動~
~來改改看~~謝謝~~辛苦了~~對了~~請問大大~~畫線圖的尾端會跑線出來怎麼辦呢？再次感謝~~~
沒有左上右下的留白空間~~~要下載哪個版本丫？謝謝~~
作者: 黃靜靜Jessica 時間: 2014-8-21 16:18
請問版主要怎麼弄對話框的顏色???
作者: lovezox 時間: 2014-9-8 19:32
但是覆蓋原檔之後回編輯器儲存套用下去一還是會跑掉
| 歡迎光臨 Android 台灣中文網 (https://apk.tw/) | Powered by Discuz! X3.1 |