Sketch+principle聯動製作可交互可愛動物肖像
使用工具:sketch、principle
需要的網站:
PrincipleUX: 心之所向 至美設計做這個設計之前其實我也沒有把握可以真正做好,因為這可能算是正式做principle+sketch作品的前幾個,做這個之前先是在principleux上看到這個模版,再一點一點學做的,自己在做的過程中發現設計類軟體還是要動手實際操作,哈哈希望可以做的更好。
設計來源於生活,高於生活,但是忠於生活,設計畢竟不是藝術,接下來進入正題
首先在sketch中把小動物畫好,這點很基礎,可以是各種風格,不過扁平化加上一點點光影的效果是最適合用來製作動效的,不僅有立體感,而且有很多細節,看起來真的十分賞心悅目。
在做的過程中要建好畫板並且對圖層進行分組管理,這真的很重要,因為設計工作通常不是一個人來完成,而是團隊合作,所以注意基本的禮儀當然是很有必要的。
2013新版 - 40條網頁設計師需了解的Photoshop禮儀畫完以後調整了細節,把principle打開,點擊import
直接從sketch中導入(分組的重要性再次體現)
接下來就是漫長的調整過程了,稍後我會把源文件上傳,但是我主要會把我在製作中踩過的坑告訴大家,這個裡的調整不是常用的animate而是principle里另外一個非常非常有用的功能:driver
其實在principle的學習中還是強烈推薦大家去在principle光中把幾個教學視頻看過了,這樣很容易幫你了解principle里所有的功能:
Principle - Animated Design這裡是driver的詳細教程:
https://youtu.be/VLnh439EXiI
這裡以上圖為例子給大家講一講driver里各部件的含義(個人理解)
scroll下面的部件就是要調整和交互的部件
scroll右邊的scroll Y就是上下方向滑動交互
而center Y就是上下交互時圖層各組件的相對位置
(強烈建議大家在跟著教程製作的時候參考我的driver相對位置,不過不需要生搬硬套,一切以自己畫面效果為參考)
到了這一步,基本上就算完工了
感謝大家,看到這裡不妨留個贊再走吧~
工程文件鏈接:
https://pan.baidu.com/s/1mkd1Vyo密碼: 7g3i
推薦閱讀:
※Google 設計團隊發布 Sketch2AE,解決 Sketch 文件導入 AE 問題
※用PS十倍無損壓縮GIF動效圖
※動效乾貨——貝塞爾曲線插值器原理(進階準備)
※那些創意十足的Loading動效原型合集(一鍵復用!)
※[Framer] 添加 SVG 圖層,讓工程師追著打的效果成為現實