別人笑我太瘋癲，我笑他人看不穿。不見五陵豪傑墓，無花無酒鋤作田。（好詩好詩）昨天雖然被pass掉了，但是吖傑依然不忘約定爲大家講解這個動態二維碼的原理和設計思路。
有了上一篇文章的基礎，我們就可以很高效的設計出一個高端大氣上檔次的二維碼了。就拿我們公衆號爲栗子。打開草料二維碼網站，輸入公衆號選擇生成一個容錯率爲15%的二維碼。當然你可能想問爲什麼不是7%或者是30%的，很明顯，太高的容錯率複雜程度大，不易製作二維碼而太小又容易發生錯誤不易識別，具體可以去查看我的上篇文章。
設計思路
還是拿我們公衆號爲栗子。“於你供讀”讀書給你聽，寓意和你一起讀書，一起學習一起成長。提供一個IT技術訓練營，分享更多幹貨供大家互相交流學習。這樣我們就可以發散思維構思一個畫面，一個場景的佈置，以讀書、和你讀書爲畫面。
圖形構造
ok，明確了以讀書爲主體，我們開始腦洞一下有關於讀書的形象圖形。書籍、書架、圖書館、人、電腦、眼鏡，咖啡等等，甚至你還可以想到花草樹木、藍天白雲什麼的只要相關的東西我們都可以發揮想象構思出來。
顏色
在設計前確定顏色或者說定下主色調是非常重要的，可以定下你設計的方向，不至於在後面的構圖當中跑偏，統一風格。由於二維碼的特殊性我們需要選擇顏色對比較強的顏色。我用了一個淺橙色的背景與深藍色的圖案作爲這次設計的主色調。藍色代表科技指示我們從事的行業科技IT，橙色代表歡快活潑，屬於暖色系與藍色冷色系相互平衡整個設計。剩下還有紅色、綠色和黃色等作爲部分的點綴色，豐富整個畫面。
繪製圖形
我們可以把前面下載好的二維碼導入AI，降低不透明度鎖定在畫布當中。然後把之前構思好的圖形，書籍、書架、人等等繪製出來。在繪製的過程中我們需要按照一定的大小來繪製。譬如這個看書的小人物按照二維碼兩個豎着“方塊”的大小來繪製，而眼鏡則佔橫向的兩個“方塊”，一杯咖啡則代表一個“方格”，以及按照黑白“方格”二維碼的佈局來設計一個場景來達到設計的理念。這樣繪製出了多種“方格”佈局的圖形後按照二維碼原來的位置一個個擺放回去。佔住黑白區域以達到二維碼的效果不止於擺錯導致識別不了。
當然因爲我們這裏選擇的是15%容錯率的二維碼，所以允許出現不超過15%的錯誤。所以可以超出或者少於這個“方格”區域位置不超過15%都是可以識別的。
測試
最重要的來了，前面做的那麼多要是最後不能識別的都是徒勞的。所以我建議邊做邊測試。就是做了一部分然後導出二維碼放到微信長按測試一下，要是能識別的之後做動效時一般都可以識別出來，這個就不用擔心了。
導入PS
把設計好的文件按要運動的部分直接複製到PS當中，以智能對象方式存儲，這樣便於修改和減少文件的大小，更好的製作動態效果。以我們的公衆號爲例。把要轉動的咖啡杯、熱氣球、火箭、飛機、白雲等單獨合併導出到PS，重新命名保存文件。
導入AE
把剛剛保存的文件直接導入AE當中。然後製作動效就行了。由於我做的實例都是非常簡單的動效。改透明度、大小和位移等效果，所以我就不在這裏獻醜了。哈哈！省略一萬字，自行腦補。
最後再把製作好的動效導出成png序列（爲什麼導出png序列可以參考我之前的文章《歡迎動畫的思路與教程》），再導入PS上製作成GIF文件就可以了，一個高大上的動態二維碼就此誕生。雖然有點醜，但是有沒有覺得很有成就感。哈哈！
你有什麼獨特見解或者想法歡迎留言告訴我！讓我聽到你們的聲音，山頂的朋友！
