提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯(lián)系!
還是那句老話:轉(zhuǎn)載著名出處和蛋哥哥我的大名!商業(yè)用禁止!
*因為怕泄露公司信息,這里的二維碼都被我修改了,所以掃不出內(nèi)容的,所以別掃了哈哈哈哈*
好久沒出現(xiàn)了!實在是太懶了,出來刷刷存在感。。。
前幾天是公司的頭腦風暴日。。。大概就是在兩天內(nèi)讓碼農(nóng)+產(chǎn)品組的人都要搞點新花樣出來。。。本蛋絞盡腦汁都不知道做啥。。。因為畢竟不會編程,本著渾水摸魚的心態(tài),我就做個動態(tài)二維碼吧。(非商用,僅僅只是公司內(nèi)部好玩)
但是,本蛋屬于超級無敵大懶人,一不怎么會動效二視覺做的也就那樣,關(guān)鍵是ps ai什么的早就不會用了。所以這里用到的工具是sketch+ae(簡單動效)+ps(導(dǎo)gif用)。
這里我會盡可能很詳細把我學習怎么做二維碼的步驟寫下來,寫給萌新們看的,dalao可以自動忽略了謝謝!
*特別感謝我找到的一些參考資料:
http://www.zcool.com.cn/article/ZMzgxMDQ4.html (非常詳細解說二維碼原理的文章)
http://www.htnj110.cn/detail/167482.html (借鑒了里面一些元素)
https://www.behance.net/laylow 借鑒了大神的風格*
還要感謝大表(mai)狗我的哥給我發(fā)的忘記哪個公眾號的二維碼教程!
(這里也呼吁大家無論是轉(zhuǎn)載別的設(shè)計師的文章或者圖都能表明出處,行業(yè)內(nèi)更需要互相尊重)
廢話說完了,現(xiàn)在開始正題:
1. 生成二維碼
先去讀一讀我之前發(fā)的二維碼那個鏈接,讀不懂沒關(guān)系,只要知道:
(圖片來自http://www.zcool.com.cn/article/ZMzgxMDQ4.html,侵刪)
然后搜索“二維碼生成”會跳出來一大堆網(wǎng)站,這里我選的是http://cli.im/ (給廣告費?。?,選這個的原因是因為這個網(wǎng)站有個“美化器” 如圖:
容錯率選擇30%,我理解的是這樣你可以改動的區(qū)域就越大。并且這個美化器可以讓你放個logo在中間,放什么不重要,重要的是告訴你了中間區(qū)域其實是可以被遮擋的!??!
2 構(gòu)思二維碼
就是畫草圖啦,想想怎么搞你的二維碼。根據(jù)我的經(jīng)(cai)驗(ce)。沒有軸測或者變形會讓二維碼更容易識別。但是我不想做正視圖,不能被我組的碼農(nóng)看不起(設(shè)計師的尊嚴 咦)我打算做軸測。
看了一些別人做的二維碼,畫了幾張草圖,這里的小建議是 可以把二維碼轉(zhuǎn)換成軸測圖以后調(diào)低透明度打印下來,并在此之上畫草圖。。。
我的草圖如上。。。大概是一個未來城市/星球的概念,那些小人就是我們大產(chǎn)品組的人!草圖有了,就可以開始在此基礎(chǔ)上設(shè)計了。
3 設(shè)計
這一步真沒啥好說的,你喜歡用啥軟件就用啥軟件,但是一定要構(gòu)思好那些是要動起來的,尤其是用sketch的人,畢竟和ae不兼容。
因為我的ae很爛,屬于只會基本動畫的人,所以我打算盡量減少動起來的部分。所以我打算把整個城市做成靜態(tài)的,然后中間logo可以做成一閃一閃的燈,再加一個ufo飛來飛去就好。(動效完全取決于你的能力,我相信你是最棒的!
先從二維碼開始畫:
注意,二維碼不能反色,黑色就只能保持重色,白色只能保持亮色,對比度一定要強,可以調(diào)成黑白模式檢查,一定要一邊做一邊掃!
我本來打算像之前參考資料里的人一樣把二維碼變得很有透視感,但是構(gòu)思就花了我一個上午,整個項目時間是2天,根據(jù)我對自己的了解,我還是放棄了。所以這里的二維碼我只做了一些簡單的修改, 比如直角變圓角,增加一點點反透視。 如圖:
中間圓餅的部分就是美化器里logo的位置,我是不是很機智。
再次強調(diào):深色可以有很多種,淺色也是,但是對比一定要強。
以前的黑色區(qū)域只要保持70-80%都沒被改變 就可以被掃出來。
二維碼畫好以后就可以加背景啦,我一開始用黑色做底,發(fā)現(xiàn)掃不出來,所以換成深藍色,我發(fā)現(xiàn)背景用太多深色也會導(dǎo)致識別錯誤,所以我全部用的是比較亮和淺的顏色。
大色調(diào)大概就是這樣啦,然后就是加細節(jié)做局部調(diào)整,跟著Romain大佬飛。
底圖就做好了!感謝萬能的sketch!然后就是做要動起來的部分,這里我分開做了,雖然還是用sketch,一個是暗色的中間的拼圖,一個是盤旋ufo,最后就是ufo的光(這個最后用ps做了,不知道為啥。。。)。
如圖:
然后就是把底圖,拼圖,ufo都扔進ps,然后我又用ps畫了三道不同顏色的光:
弄好以后作為psd導(dǎo)出。
4 毫無技術(shù)感的動效
終于有了psd!那么下一步就是用ae做毫無技術(shù)含量的動效啦!
首先打開你的ae,倒入psd,注意要選擇保持圖層:
動效就是簡單的
位移+透明度+逐幀動畫,如圖所示 不能更簡單,我相信稍微有點技術(shù)的都能完爆我十條街 (我tm連曲線都沒調(diào)整
最后就是導(dǎo)出啦!然后拉入ps里,存為gif!就大功告成了!(這一步不會可以百度。。。
(別掃了真的掃不出來的。。。。被我改了哈哈哈哈)
-------------完---------
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊