當我畫表情時，我在想什麼

本文講述了我畫第一套表情過程中的感受、經驗、趣事。希望能為想畫表情的同學提供些實際參考。

閱讀時間：遠比想像中要長~！字數 1w+， 多畫多動圖。

契機

有沒有過這樣一種感覺：聊天時想表達一種情緒，翻來翻去死活找不到合適的表情？

我有，時常會有。

於是，我決定動手做一套自己的「動態表情」。

這個純真美好的計劃，在心底生根一年有餘。

終於在今年秋高氣爽的一天，忍不住開始發芽了~！

問題

動畫…沒正經玩兒過啊？

用啥做呢？AE? PS 時間軸？C4D？Animate？……

貌似都不大合適，難不成只能用最原始的方法：一幀一幀的畫？

算了吧，太笨了這麼做~！

那咋辦呢？

……

為此，我的「美好表情小計劃」拖延了一年多，都沒有開工跡象……

但，幾經權衡，最後還是採用了最原始的方法，一幀一幀畫出來！

（PS: 哪位小夥伴知道更好的工具，歡迎推薦給我啊，不勝感謝~！）

需求整理

嗯哼，作為一名「用戶體驗設計師」，開工之前分析一下需求還是必要的嘛~

我首先想下，我自己為什麼要用表情？

• 讓情緒更到位：有些話用文字表達，乾巴巴，很無聊。比如「太好了」，只打字，可能看不到背後無比欣喜的情緒。當然也可以「太好了~！！！」但還是欠點火候；再比如為了宣洩情緒「賊不開心」，如果只用文字，打一大排都不夠用，但一個到位的表情「滿地打滾」，就很給力。
• 讓聊天更有趣：圖像、動畫，可以直觀展現文字難以描述的意味，別有一番幽默。圖文間隔，還可為滿屏文字的聊天增色，讓聊天這項活動更加生動和有趣。
• 傳達文字難以表達的複雜情緒：單純用文字，較難讓他人瞬間 get 到一些「表裡不一」的情緒，如「表面微笑，實則扎心」，但表情如果畫到位，看的人就會秒懂。
• 避免尷尬：有些話不方便說，為了避免尷尬，緩解害羞等，發個表情，更為舒服。或者不知道說啥時，有個合適的表情打圓場，氣氛就不那麼僵冷了。
• 減少誤會：單純通過文字，看不到表情，感受不到語氣態度。表情可以一定程度上代替肢體語言，傳達出更豐富細膩的態度，避免誤會。比如：開玩笑地假裝生氣一下，其實並非真正動怒。

發現問題

有一些比較熱門的表情在使用過程中發現：

• 適用場景少：表情第一眼看到感覺好喜歡，但下載後發現，很少有機會用，個人感覺適用場景非常有限。
• 形象同質化高：多數都是白色、圓形、簡潔的形象。
• 性格特徵趨同：基本上是「萌」的天下，其他性格風格的是稀有物種。

我畫表情的目標

• 實用：希望我畫的表情，能真正被用到聊天中去，很好地起到「代替文字傳達更豐富情緒」的作用，而不僅僅是一幅幅自嗨的 gif 圖而已。
• 必須生動！必須生動！必須生動！既然決定做動態表情了，絕對忍受不了毫無生機地僵硬傻動，要鮮活。
• 有意思：希望讓人看了能會心一笑，覺得：誒~有點兒意思哈！
• 形象設計：思來想去，決定這次先和漫畫結合。沿用「小腰果」的形象， 無過多改動。加了個小細節就是長短不一的門牙，感覺這樣比較有「缺陷美」。
• 人設特徵：有意思、鮮活、腦洞、逗趣、調皮、真性情…這類關鍵詞比較貼合氣質。

篩選待畫表情

• 將之前積累的想要但沒找到合適表達的表情，以及覺得用表情表達比文字合適的短語，能想到的全列出來：共有 65 個；
• 再從這 65 個裡挑選出適合用表情表達的；
• 再相互比較，去掉語義重複的；
• 在從剩下的裡面，選出 20 多個我最想要的、能畫得有意思的、平時能經常用得到的；
• 畫的時候會發現，有些意思其實並不適合用表情表達，再不斷調整，隨增隨減；
• 畫完一整套，約有二十六七個吧；
• 再最終篩選，定下最終上傳的 24 個表情。

開工

10.5

今年十一，大家歡天喜地地迎來千載難逢的「八天長假」。

對我來說，這更是用來畫表情的大好時機！

然天不遂人願，假期一到，我自動開啟了「荒廢模式」。

一天、兩天、三天，過去了……

假期過半，我還在幻想：不就畫幾個小人兒頭么，2天出草圖，1出成稿，再加1天整理、準備配套圖片，然後就可以上傳啦~！

所以，我一直拖到 10.5 才開工。

開工第一天，我就傻了。

我之前的時間預估，完全就是 impossible ！！！

第一次做動態表情，有太多的坑踩了。

最開始，因為沒做過人物動畫，所以人的面部表情怎麼動，我都得自己自拍一遍，然後在視頻中截選出關鍵幀，作為參考，依據著畫。

初期，即使把關鍵幀畫出來，動起來也是怪怪的。然後也不知要怎麼調才能看起來正常一點。

這就要花很多的時間摸索研究每一幀該設多久，動起來才不那麼奇怪。

這樣一個表情草稿折騰下來，大概1-3 個小時不等。

每畫完一個的草稿，我都要歇好一會兒，吃吃零食，才繼續下一個。第一天下午＋晚上，畫了6個草稿。

收假時，完成所有16個草稿。累死了累死了。

這時畫的表情大概一個4-6幀，都比較簡單，也很粗糙。（事後證明，這種完成度的草稿，是不大適合描線稿的，後來全部重新畫了…）

困難

然後開始探索如何做線稿上顏色。

手繪板好久沒用了，線條慘不忍睹；

最後決定用iPad + Procreate，因為大Pad 剛入不久，Procreate 用起來還不很順，特意去 YouTube 上搜教程，才發現原來很好用！遂決定線稿+上色都交給 Procreate。

第一次做，啥都得探索，包括工作流程，工作設備。

然，探索的過程註定艱辛…

剛開始的線稿和樣稿，自己看著都想撞牆！

舉一個例子：

草稿：

線稿：線條死板，開始畫很容易畫走樣；表情僵硬，全無生氣。

上色：哎呦我去……想死！

第一版樣稿：貌似也沒比之前好多少……

10.15 不想畫了

10月開始，天氣彷彿瞬間從夏天跳躍到冬天。

比天氣更冷的，是心。

覺得怎麼畫都難看，完全畫不下去啊……

接下來的改進：

• 提高草稿的完成度，這樣描線稿時不至於太過跑偏。
• 調整配色方案，豐富陰影。

這是改進版的草稿：

草稿精細一些，會有效減少日後的返工概率。

因為動畫修改的工作量是單張靜止圖片的數倍。改一個地方，就是五六張~十多張的一起修改。

而更花時間的是調整每一幀的時間，盡量讓動起來的效果自然一些。

10.19

知道怎麼改草稿後，逐漸進入狀態，產生了慣性，真開心～！

轉機

10.22 開竅

苦於一直沒什麼進展。

早晨起來搜搜怎麼能讓動畫動得更自然一點，果然在 YouTube 找到很棒的資源，比如 12 Principles of Animation 講解得極其生動到位，看後瞬間明白許多。知道了要先定好人設，要先畫關鍵幀，要先定輔助線……瞬間感覺自己之前做法純粹都是「野路子」。

許多視頻里介紹用 PS 做動畫都採用「視頻圖層」，但我覺得自己手動設不透明度疊加完全能滿足目前需求，而且表情的最終輸出是 gif，無需視頻格式輸出，所以沒採用「視頻圖層」。

感興趣的小夥伴可以去研究下。

這時，線稿已經畫完一般了，但我覺得應該有一套人物各個角度頭像的標準，來統一所有形象輸出，而且會提高以後的工作效率，不用每次從零畫起，直接拖過來改就行，這是比悶頭畫完更重要的事。就好比做產品之前要先定好一套設計規範一樣重要。

我整理的簡易9個角度。（但後來證明還需要側面和背面的）

有了一套標準作為依據，再畫新表情，相互之間不會差得太大。

找的其他厲害的參考（這裡可能涉及到「三庭五眼」等人臉結構問題，畫簡單形象稍微去了解下即可）：

製作了頭部的各角度示意後，覺得應該做個全身的。

就像這種：

定好各個角度的頭像後，所有草稿，全部按照新的標準，重新畫一遍。

10.28

這段時間以來，每天下班只有一件事，就是繼續畫表情。

感覺逐漸與世隔絕了都。

如果一件事歷時超過3周，就別每天只做它了。穿插些其他事做，否則容易做吐了。

其實，我開始只是想畫 16 個的，但畫完 16 個還有幾個想畫的，且覺得 24 個更有誠意一點，就咬咬牙，奔著 24 個出了。

而且，畫「面部表情」，失之毫釐謬以千里，每一個五官的細微變化，都可能形象整體的面部情緒。所以刪了重畫是常有的事兒。

到最後，豈止是只畫幾十個小人啊，估計成百上千個都有了。

有時周末，畫到一個比較複雜的表情草稿，從早很起來，一直畫到下午三點。

沮喪。

自嘆：一個表情我差不多得花一天……

核桃：這是值得的。

我：（一點開心）值得呀~？

核桃：總比你吃一天東西強。

我：……

核桃見此狀，不甘心：你想想你如果吃一天東西而不是畫畫，到了晚上你又要懊惱，不僅後悔一天啥也沒幹，又吃撐了難受……

我：不要再說了！！！

步入正軌

10.29

這段時間，感覺畫表情開始逐步走上正軌，也越來越熟練了，逐漸可以畫出之前畫不出來的感覺，和複雜動作了，動畫也從簡單四五幀，延長到10幾幀。比如「Hi」的機械舞蛇形手臂出場表情。

嗯，後來給小夥伴看了問我：她這是被絆了一跤嗎？

我聽了後哈哈大笑：

這時也開始有意識地去想如何把每一幅表情往好的方向改進一點。

比如「驚嚇」的表情，這是原始樣子。

加了手勢，效果就會豐富一點。

再改下文案，感覺就又生動一點點。

經常拿不定注意，選不出哪個更好，就拿給核桃看。

每當這時，核桃會無比痛苦的說：你別總拿兩個一樣的圖問我哪個好，好不好呀~~！！

然後我很無奈地解釋：速度快慢有區別、頭髮擺動幅度有區別、腦袋的角度有區別……

上圖這個，是很明顯的了，星星位置不一樣……

而且的確，零點幾秒的畫面一閃而過，可能再花半小時調整，動起來看，效果也和沒調前一毛一樣……

所以，精益求精的同時也考慮一下二八法則，很可能80%的時間，都對最終效果提升不大。無論何時，抓重點都是首要任務。

而且考慮到實際心理感受：連續畫了將近一個月，還都是一片白花花的草稿，有點想吐，還有點絕望，身心疲憊……

後來，核桃也學聰明了，他會迅速隨便挑一個說：這個好！就這個了！

11.06

工作狀態不大好。

表情狀態也不好，一個線稿畫三五遍，還是不行。

11.11

上午腦洞大開，畫了個「逗你噠」草稿。

下午完成所有精細版草稿。

晚上去喝砂鍋粥~！

11.15 一幅幅的描線、上色

線稿、上色，遠遠沒畫草稿好玩。

雖然想創意勾草稿花時間最多，也最痛苦，但最開心。

看蔡志忠演講說：「畫漫畫速度一定要快，否則吃不上飯，現在漫畫師，一個月畫二三十張。我當年，2天就要至少畫出30張！」

我鬱悶地說：我一個月才畫三五張…

核桃聽了：畫那麼快乾嘛？有的油畫不是還一畫畫兩三年的么？

我：哎呀「油畫」和「漫畫」不一樣！

核桃：嗯？

然後反應過來了，說：哦，原來你那「漫畫」是「快慢」的「慢」。

我：……

畫完「開心」表情的草稿，給核桃看。

核桃看了說，不錯~！手指像會放電似的！

我：那是打響指！

核桃定睛一看：誒？是食指和拇指打的！

又看看我，做得意狀：你這麼打一個~！

我捏起食指和拇指。。。。。。。滿臉黑線！

哼！

看來，以後畫人設的精細程度要細到手指…

11.16 發現椎名林檎

一邊聽椎名林檎，一邊畫表情上色，很帶感啊~~~！

翻出她幾乎所有現場來看，感覺她唱歌時，是閃閃發光的。應該每每唱起歌時，她都很開心吧！

每一個找到「甘願傾其一生投入做之事」的人都是幸運的。

我想做的事，是什麼呢…？

推薦2015《百鬼夜行》live，燃炸！

（註：能接受的人很少；能量極高，不宜「每天」當 BGM 放）

11.18

畫表情到半夜。

原來，上色也有上色的樂趣。比如，深夜給小人敷個臉：

換個頭髮顏色，心情立刻明朗一下下。

有時原本一條連續的線，畫出來中間會有折斷，不知怎樣避免時不時的這種情況呢……

11.19

差不多畫完了,勝利在望。

小人已經鋪滿屏幕啦，看著小有成就感吶~！

11.25

所有表情最後統一修改、調整。

這個時候，內心已經趨於淡然——因為歷時太久，都快習慣這種狀態，不悲不喜了。

11.26 最後整理工作

準備上傳素材，還要做好幾張banner 圖什麼的。

因為最近晚飯經常直接買個蛋糕就解決了，所以banner畫了好多甜點——它們是支撐我畫下去的強大動力~！

自己吃晚飯時，經常直接拎個蛋糕回去，幸福感大大的！

甜點啊，給我力量吧！

但嚴嚴冬日，還是核桃晚上做的一碗熱湯麵最暖。

提交

11.27

11.26 夜，算11.27 了, 12:30 上傳完所有表情文件。

然後我11.27晚上回來又好奇試了下撤回編輯，這樣應該算11.27晚提交的吧。

吁~~~~~！終於告一段落。

點了「提交」提示等待耐心審核後，還是小開心一下下。

然後就是耐心的等待啦！

12.1 審核通過

周一提交，周五下午就通知我「審核通過」啦~！比我預想中快好多！

約個好日子，9號上架，哦也哦也~~~！

買個甜甜圈慶祝一下~！??（這個敲好吃哦~！）

畫完表情，核桃說：你要火??啊你要火～！

我：別這麼說，才不會呢。

核桃不甘心，繼續興高采烈說：you are fire ！

我：那是「被解僱」的意思！

核桃：那是 fired…

經驗總結

設計過程：

• 最開始定好人設：首先把人設的各個角度都畫好。這就好比像做一套產品設計前，要制定設計規範一樣重要。有了各個角度的頭像，不僅能讓所有畫面效果統一，而且大大提高效率——需要哪個角度，直接從標準人設里拖過來，做相應改動就好。遠比每次都從零開始畫起要快。
• 先定關鍵幀，再畫補間幀：我開始從第一幀畫到最後一針，這樣很容易中途跑偏，後來在 youtube 上找教程，發現原來「先定關鍵幀」才是合理方法。知道這，再畫就順利多了，先出大框架，然後再看哪裡缺幀，哪裡需要放慢動作，再補就好了。
• 善用輔助線：將前一幀設成半透明，再在此基礎上畫新一幀，以保證不會動得太離譜；涉及到人物表情、角度變化，最好先打好輔助線再畫。（配圖：頭、身體的輔助線）回頭看看，我的人設也很不嚴謹，比如同事對此的評價就是：「發現一個特徵：牙齒和手臂可隨意縮放」。
• 學習一些動畫理論知識：這對做表情很有好處，比如這個：12 Principles of Animation 看完立馬感到醍醐灌頂，豁然開朗許多！
• 草稿盡量精細推敲好：否則畫好後再修改，就可能是10幾幀10幾幀的一起改。
• 找到自己時間精力的平衡點：動畫這種東西，很容易投入大把大把的時間去調。所以最好先出大體成果，謹記二八法則。抓重點，在「精益求精」和「過度糾結於細節」之間，自己尋找平衡。

過程 & 工具：

• 草稿階段： PS + 手繪板，繪製每一幀畫面，然後「創建幀動畫」看動起來的整體效果。
• 線稿+上色：iPad Pro + Procreate，iPad 上畫畫更舒服一些。
• 最後加工：導回 PS。 加 2px 白色描邊；先把背景調黑，檢查背景上是否有無效白點；調整細節；調整動畫流暢度。輸出 gif。
• 壓縮文件：我把 gif 都丟到這個網站上：Compress GIF Animations Online 一個大概能壓縮 30%。保證每個文件小於 100k。

末尾放張我最初的草稿吧——「嘚瑟」：

看，即使開始畫成這樣，最後也可以畫出一套看得過去的表情~！想畫表情的同學加油哦！

最後，若我的表情能讓各位會心一笑，吾心足矣~！

哦對了，放個碼體驗最終完整版。如果好用，告訴我哦~

https://w.url.cn/s/AGycvg7 (二維碼自動識別)