非公式E-mote<えもふり>不完全初心教程(上)

好物!!

◆Anti-DX◆:

【寫在前面】

本教程只為安利同好而做,雖粗糙簡陋又廢話連篇,但請尊重po主勞動,商用or盜用者全家處刑!!(

轉載請保留作者及出處信息,謝謝m(__)m

作者:Yukiri <YU>

出處:antidx.lofter.com | weibo.com/antidx


眾所周知前幾天應推特和P站終於可上傳動圖的佳音影響(??),E-mote<えもふり>這軟件也出了free版供一般愛好者玩耍,從此讓自家的2D孩子們動起來再也不是高深的夢想哦液ヾ(*´∀`*)ノ~


于是應召喚把這兩天自己琢磨的結果記錄一下做個簡單的不完全初心教程,希望對日語苦手的同學們能有所幫助w (雖然po主也是渣語力;;;)

以下說明帶※號的部分為注意事項和po主的實戰心得之類,歡迎各種學術討論ww


簡單的說來這類Live2D的技術原理就是將角色圖像按部件分層,然後軟件中使用九宮格變形并自行生成過渡幀的方式來讓角色產生簡單的動態效果。


以這次的試驗體狛枝君為例,如下圖這樣的角色動態圖



製作時使用的文件大致是下圖這樣一張PSD:


首先留個軟件官網和介紹頁面,語力OK的同學可自行擴展鑽研:

公式站:http://emote2.mtwo.co.jp

公式教程-基本體正面胸像psd文件製作:http://emote.mtwo.co.jp/emote_ofc_manual3_emofuri/manual.html 

公式教程-基本體正面半身立繪文件製作:http://emote.mtwo.co.jp/emote_ofc_manual3_parts/manual.html

公式教程-動畫文件製作:http://emote.mtwo.co.jp/emote_ofc_manual3_motion/manual.html 

※po主自行琢磨完后才發現有這麼些個教程頁...所以之後提到的實戰方式可能會與公式教程有所不同請注意((


軟件下載似乎需要翻墻,于是也順道搬運到網盤來造福下群眾。

※E-mote只傳了free的版本,另一個專業版只有90天的免費期,差別在於可用於輸出遊戲製作用的資源;咱一般民眾用free版做做小視頻和動圖也足夠玩了w

http://vdisk.weibo.com/lc/f5X1rQK4DIGnjL239  密码:U7K1

※※非日語系統用戶安裝和使用軟件需要用apploc轉碼,否則會亂碼無法識別模板文件,apploc也一起上傳了(版本古老一直沒更新過,不過不影響正常使用)

http://vdisk.weibo.com/lc/f5X1rQK4DIFfJux7b   密码:IQD4


使用方式:

1. 先安裝apploc((

2. 啟動apploc,在下圖第二個窗口瀏覽選擇E-mote的安裝程序,之後看中文按是人都懂的軟件安裝方法一路下一步就可以


用apploc裝好E-mote后以後啟動也都需要通過applo開啟,方法和↑類似,在啟動應用程序處選擇E-mote的運行文件或快捷方式就好w


******************************

于是準備工作就緒,可以開始製作自家角色的PSD源文件。

前文原理說明的部分有提到過,E-mote的工作原理是導入角色PSD分層文件然後通過軟件處理來達到動畫效果,所以做角色PSD文件時請注意各部件圖層命名必須按照軟件規定的名稱來進行,否則導入E-mote時會無法自動識別而需手動關聯(←雖然手動關聯也不難,but導一次就要一層層分別關聯還是很麻煩,所以還是推薦正確命名)


角色的可用部件PSD模板在安裝好的E-mote程序目錄下有附帶,可以自行對比查看

路徑是:m2tools CheeseWare\EmoteMovieMaker\template\E-mote3.0テンプレート\E-mote3.0テンプレート基本画像(正面).psd

   

      是不是略鬼畜略有釘在墻上扎人偶的衝動呢....可一旦接受了這樣的設定還是覺得有點萌的相信俺(x  


※ 模板中的各部件并不都是必須項,根據自己希望的動畫效果只製作最低限度部件就OK(←劃分的部件越細緻、能完成的動態層次感就越豐富w)

※※「首中心」、「原点」、「腰中心」、「枠」文件夾中的東西和所有命名為「.....枠」的圖層都是必須項,軟件判定部件範圍和運動中心點時會調用的,請務必別漏層哦~

※※※ 圖層順序可不受模板影響,根據圖像的遮蓋順序放置就好

※※※※ 實際角色身上有、而基礎模板中沒有的部件(比如呆毛、帽子、衣服上的裝飾品、受持武器等),都可以作為追加部件加入,圖層命名方式為「追加パーツ_○○」(○○可自行命名,字符數不限)

※※※※※ PSD文件的大小比例可參照模版或使用差不多的高寬比自定義,只要橫幅不超過5000px似乎都不會出問題


E-mote里支持的角色部件和各部件所支持的最大表情數量以下歸納一下,截圖依然以狛枝君為例w

1. 【輪郭】,腦袋的基本素體(傳說中的吳克((


※前髪的陰影可以直接畫在吳克上;若想做動態陰影的話就單獨分層,之後會說明如何綁定w


2. 【目】,眼睛共支持6種表情:通常、閉眼、半閉、笑閉、特殊1+2(角色特有的表情,比如狛枝的圈圈眼之類都可設置在特殊類w)。

可以追加兩種【淚】表情在眼睛位置。



閉眼以外的眼睛需要分成三個層來製作:眼臉(マブタ)、瞳孔、眼白,文字上都很好理解,日語苦手的同學可以複製模板上的圖層名稱來命名比較保險w

瞳孔要畫出完整的圓形,超出眼臉的範圍也無所謂,軟件中實際調整表情的時候眼眶是可以瞪得比圖層文件稍微大一點的;瞳孔的顯示區域根據眼白區域決定(類似PS中的圖層蒙版),所以眼白部分不要畫超過眼眶的大小就行w


※※※眼睛和眉毛都可加入單獨的陰影,看個人繪畫喜好,陰影可之後單獨建立影部件文件夾來放置,個人覺得意義不大可有可無于是不做特別說明了,有需要的同學可自行研究模板PSD中的「影パーツ」部分w


3. 【眉】,構成表情的重要部件,一共可支持6種眉表情



※ 需要更直觀的表現表情的話可以把眉毛圖層放在前髪層之上;若想表現眉眼被前髪遮住的厚重感就把兩者都放在前髪層之下,根據個人喜好選擇w


4. 【鼻】,分為正面和左右側一共三種,很簡單就不截圖說明了~


5. 【クチ】,嘴也是一共可支持6組表情,每組表情都分為閉口和開口兩種狀態

※實際軟件中操作表情時開口狀態的大小是可以調節的,所以可以把開口狀態畫得盡可能大一些

※※ 兩個特殊狀態也可和眼睛部件一樣用來表現角色的特有性w


6. 【頬】臉頰部分可支持4種表情,比如紅暈和流汗之類凡是在臉部表現的都屬於此部件



※ 表情需要注意一下圖層疊加的順序w 正片疊底之類的圖層屬性在軟件中都是可以被支持的~


*********************************

于是影響面部表情相關的大致就是以上部件,接下來說下影響畫面動感的其他重要基礎部件


7.【前髪】,角色的留海        (所以果然短留海的娃子趣味少啊基本這塊就沒啥能大動的了不然會很怪異(x    


※前面提過如果想做動態陰影效果的話可以把陰影單獨作為追加部件來分層,這裡用的就是這樣的方式單獨製作了前髪的陰影部件↓,綁定參數之後用到時會再說明


8. 【後髪】,一般都放置在身體層之下,角色腦後的頭髮


※軟件中運動時很可能會露出PSD靜態圖中被其他部件遮住的部分,所以最好是把后髪的層次也盡可能畫完整嘍


9. 【橫髪L+R】,根據角色造型需要可選用的部件,這裡為了運動層次更豐富一些于是把狛枝脖子兩旁的頭髮都做在了橫髪上



※ 呆毛型的角色如果想使動態更富有情感的話,可以把呆毛作為追加部件單獨分層,綁定方式之後會說w



10. 【耳L+R】,增加角色轉頭時立體感的部件,所以最好是分層畫出并放置在吳克層下((

很簡單就不截圖說明了


11.【胴体】,角色的上半身軀干,這部分根據運動需要來分層,po主本次初嘗試的分層並不合理所以不必參考了((

女性角色的話還可以單獨做胸部件的乳搖,可狛枝那84cm還是不讓他搖了吧(((


※ 如果想導入軟件后能讓腦袋傾斜度更大的話,箭頭所示頸部和腦袋連接的位置最好做成圓弧型,否則容易穿幫


12. 【腕L+R】, 如動態立體要求不高的話手其實可以不用分層直接和軀干做在一起,以及手部似乎一共可支持3組動作的,這次沒來得及研究就不做說明了;;po主這次的分件方案也不太正確所以不用參考;;



13. 【下半身】,為滿足露小腰的惡趣味于是單獨分了層ww 啥時再能開發點下♂半♂身的機能就好了QuQ;;;(醒醒



14. 【スカート】,女性角色的裙子之類,這次嘗試的給狛枝的外套邊用了這部件位置,在有風的時候運動效果就比較明顯,但部件分配還是不太合理于是可不必參考;;



15. 【追加パーツ_】/【追加_】,于是基礎部件大致就是上述這堆,剩下的為豐富畫面動態和根據角色造型需要都可拆分成追加部分來加入,比如這次希望分層運動的帽繩、頭部陰影、褲子上的鏈子,以及外套上的帽子等都單獨拆分了部件。圖層命名方式↑兩種皆可,下劃綫后的字符使用中文或英文都OK且不太限制字符長度。


※一共可支持30個追加部件,但如果追加部件體積比本體還大的話就很容易出問題

※※例子中的帽繩原本是放在同一層上的,可綁定時固定點的位置不好掌握所以就分了兩層


**************************

于是至此角色圖像部分的文件就製作完畢了☆,接下來是製作導入E-mote時必須的幾個系統用圖層(很重要!千萬別漏了


16.【中心点】,角色運動時圍繞旋轉的各部分支撐點,一共分為「首中心」、「原点」、「腰中心」三個。

「首中心」-角色扭頭的旋轉點,一般定在下巴上去一點的位置旋轉效果會比較自然



「原点」- 整個角色的位移中心點,大概定在上下高度一分為二的胸口位置就好(題外:這準星文件還真適合彈丸233 其實實際製作時候點一個點就OK了,po主為自己看的爽才搬的個準星圖((



「腰中心」-角色傾斜上半身的旋轉點,顧名思義定在腰部就好



17. 【枠】,E-mote中用於系統識別和輸出元件所用的區域規劃,實際製作方式就是用一個長方形把指定區域完整的框起來并填充即可,填充圖層的透明度和顏色都可以任意指定

系統必須的枠如下:眉L枠、眉R枠、目L枠、目R枠、鼻枠、頬枠、クチ枠、頭部全体枠、胴体全体枠。

製作枠時請把涉及到的圖層全部顯示,務必保證方形區域把部件都框選進去咯~,以本圖的眉毛部分來舉例:



所有枠製作完畢后大概就是這樣個狀態:


※「頭部全体枠」是需要把頭髮后髪部分也都框選進去的,尤其是長髮角色請注意檢查好這點www


于是至此PSD的部分就製作完畢了,接下來就用apploc打開E-mote,開始咱嫁們的動畫之旅吧ww~☆  (((


(文字太長所以分了上下篇,下篇請走:http://antidx.lofter.com/post/beca6_170fba8

查看全文

鹫峰!虽然不高但是还是很累OTZZZZZ

现在出去玩确实很合适!

春光大好~摄于中关村软件园~

日哟!

lofter要被全职刷屏了!!!

查看全文

删号客栈主角,准备画一套全角色,表情可以有ver2猥琐版……

来回切账号略烦……早知道建一个子博客了

以后UI方面的东西就放在另一个lofter里,特此声明……

查看全文

【转】小课堂UI-线性小icon教程

UI设计师:

推荐大家这个博客:http://www.xiaoketang.net 小课堂,教很多ui技巧。

treelessing2014.01.20


查看全文

【转】Android设计中的.9.png

UI设计师:

Android设计中的.9.png

偶米伽2013.08.20

在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。
本文结合一些具体的例子来看下.9.png的具体用法。

首先看下普通的.png资源与.9.png的资源区别:

普通的png资源就不多介绍了,可以明显看到.9.png的外围是有一些黑色的线条的,那这些线条是用来做什么的呢?我们来看下放大的图像:

放大后可以比较明显的看到上下左右分别有一个像素的黑色线段,这里分别标注了序号。简单来说,序号1和2标识了可以拉伸的区域,序号3和4标识了内容区域。当设定了按钮实际应用的宽和高之后,横向会拉伸1区域的像素,纵向会拉伸2区域的像素。如下图:

拉伸的含义应该比较容易理解,但是内容区域的标注有什么意义呢?我们来看下图:

这里程序设置的文字垂直居中,水平居左的对齐方式。对齐方式是没有问题的,但是对于这种大圆角同时又有些不规则边框的的图形来说,错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。

 
把横向的内容区域缩短到圆角以内,纵向的内容区域控制在输入框的高度以内,这样文字就可以正常显示了。 

这里还有一种特殊情况,就是本身是.9.png的资源,但是在修改过程中你希望这张.9.png不能被拉伸(在做皮肤的情况中有可能会遇到),那怎么办呢?只要把拉伸区域的点点在透明像素的地方就可以了,这样拉伸的时候会拉伸透明部分的像素,而不会拉伸图像本身。如下图:

 
大家可以看到拉伸区域的黑点是可以不连续的。 

说了半天.9.png的用法,那.9.png如何输出呢?有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者简单一点,用photoshop直接输出。输出的方式是先输出普通的png资源,然后扩大画布大小,上下左右各空出一个像素,再用一个像素的铅笔工具(颜色选择纯黑色),上下左右分别画点就可以了,保存的时候注意把后缀修改为.9.png。
有两点需要特别注意下:
1.最外围的一圈像素必须要么是纯黑色,要么是透明,一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有;
2.文件的后缀名必须是.9.png,不能是.png或者是.9.png.png,这样的命名都会导致编译失败。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/android-ui-9-png.html)

偶米伽2013.08.20

在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”。这种图片是用于Android开发的一种特殊的图片格式,它的好处在于可以用简单的方式把一张图片中哪些区域可以拉伸,哪些区域不可以拉伸设定好,同时可以把显示内容区域的位置标示清楚。
本文结合一些具体的例子来看下.9.png的具体用法。

首先看下普通的.png资源与.9.png的资源区别:

普通的png资源就不多介绍了,可以明显看到.9.png的外围是有一些黑色的线条的,那这些线条是用来做什么的呢?我们来看下放大的图像:

放大后可以比较明显的看到上下左右分别有一个像素的黑色线段,这里分别标注了序号。简单来说,序号1和2标识了可以拉伸的区域,序号3和4标识了内容区域。当设定了按钮实际应用的宽和高之后,横向会拉伸1区域的像素,纵向会拉伸2区域的像素。如下图:

拉伸的含义应该比较容易理解,但是内容区域的标注有什么意义呢?我们来看下图:

这里程序设置的文字垂直居中,水平居左的对齐方式。对齐方式是没有问题的,但是对于这种大圆角同时又有些不规则边框的的图形来说,错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。

 
把横向的内容区域缩短到圆角以内,纵向的内容区域控制在输入框的高度以内,这样文字就可以正常显示了。 

这里还有一种特殊情况,就是本身是.9.png的资源,但是在修改过程中你希望这张.9.png不能被拉伸(在做皮肤的情况中有可能会遇到),那怎么办呢?只要把拉伸区域的点点在透明像素的地方就可以了,这样拉伸的时候会拉伸透明部分的像素,而不会拉伸图像本身。如下图:

 
大家可以看到拉伸区域的黑点是可以不连续的。 

说了半天.9.png的用法,那.9.png如何输出呢?有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者简单一点,用photoshop直接输出。输出的方式是先输出普通的png资源,然后扩大画布大小,上下左右各空出一个像素,再用一个像素的铅笔工具(颜色选择纯黑色),上下左右分别画点就可以了,保存的时候注意把后缀修改为.9.png。
有两点需要特别注意下:
1.最外围的一圈像素必须要么是纯黑色,要么是透明,一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有;
2.文件的后缀名必须是.9.png,不能是.png或者是.9.png.png,这样的命名都会导致编译失败。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/android-ui-9-png.html)


查看全文

删号客栈的每日一涂,另外终于打完了零轨碧轨……

美术教室:

《各种各样手的画法和一些其他的东西)

原地址   絵のあれこれ

汉化:@哑庙

镇痛寺:

发一发当时清空微博时清掉的手总结()

图大慎点

© 安禅制毒龙 | Powered by LOFTER