視覺設計 ? PS制作心跳二維碼動畫 學會后能增加粉絲關注率哦

PS制作心跳二維碼動畫 學會后能增加粉絲關注率哦

發表于: 視覺設計. 評論
Sponsor

現在二維碼到處都是,若想用戶關注到你的二維碼,必須搞點新花樣才行哦,早期我們分享過「設計靈感:二維碼也玩創意」一文,里面有很多不錯的設計創意,然而有沒有想過自己他創建一個可以長按識別并且是動態的二維碼呢?來,今天達人制作了一個心跳動畫效果的二維碼PS教程,保證讓你的粉絲關注量快速增加哦!

PS心跳二維碼制作

這個Photoshop教程你學可學習到什么?

1. 學會使用PS做簡單的GIF動畫圖片;

2. 學會制作一個能增加關注量的動態微信二維碼。

使用工具:Photoshop CC

教程難度:初中級

Step 1 排版

在做創意二維碼前,要先想好文案、排版設計,等最終效果圖出來的才能開始創作動畫,否則后期修改比較麻煩。

因為是突出二維碼心跳感,排版不用花哨,一句文案足已。

Step 2 創建二維碼動畫圖層(圖層順序隨意)

首先我們要知道這個心跳動畫的原理,它的效果是從原此大小從小突然快速變大再變小,明白原理后,就可以開始制作動畫了。

圖層1:二維碼尺寸為150PX,全命為「中(正常狀態)」

圖層2:二維碼尺寸為160PX,全名為「大」

圖層3:二維碼尺寸為140PX,全名為「小」

Step 3 動畫制作

打開菜單「容器 – 時間軸」面板,開始創建動畫。第一幀隱藏「大、小」這兩個圖層,時間為0秒,如下圖:

Step 4 心跳變小的過渡動畫

4.1 新建第2幀,隱藏「大、中」圖層

4.2 選擇1,2幀,并點擊「過渡動畫」圖標。

4.3 設置要添加幀數為 4,然后點確定。如下圖:

確定后,此時時間軸應該有6幀了:

Step 5 心跳變大動畫

新建第7幀,此時要顯示「大」圖層的二維碼,隱藏「中、小」圖層,如下圖:

然后用4.2步驟方法去創建6、7幀的過渡動畫,注意「要添加幀數」數值為:2。

確定后,目前就會有9幀動畫了

Step 6 心跳從大變小動畫

6.1 新建第10幀,隱藏「大、中」圖層,顯示「小」圖層。

6.2 過渡動畫:然后選中第9和10幀,做過渡動畫,「要添加幀數」數值為:2,設置后目前一共有12幀了。

Step 7 心跳從小變到「中 – 正常狀態」動畫

7.1 新建第13幀,隱藏「大、小」圖層,顯示「中(正常狀態)」圖層。

7.2 過渡動畫:選中第12和13幀,做過渡動畫,「要添加幀數」數值為:2,設置后目前一共有15幀了。

7.3 將第15幀時間改為 1 秒,讓心跳有點停頓效果,不然不停的快速跳動,會XX的……

Step 8 輸出GIF

菜單「文件 – 存儲為Web所用格式…」,把「預設」選項改為 「GIF 32 仿色」,再點儲存即可轉出GIF動畫了。

最終效果

好了,快做一個還動畫效果的心跳二維碼,讓你的粉絲爆增吧!

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }