圖片太多怎么擺有創意，用這個SVG創意排版技巧
胖友們大家好啊，我是三兒。今天又是一期干貨教程噢，大家備好零食快樂水，來一起漲漲姿勢吧。
很多胖友在排版的時候，會遇到有多張圖片需要排版的情況，三兒一般會建議新手小白們先按最簡單方式上下、左右平鋪排列，這樣最不容易出錯。
這么說，難道還有高階的玩法？先賣個關子，來看看三兒下面做的這個圖片展示的案例吧。
點擊人物展開圖片
怎么樣，用SVG來展示這5張圖片，是不是更有創意了！
這種圖片展開，人物跟隨移動的效果使用的是SVG編輯器的『點擊展開同時上層物體移動-自定義觸發』組合，展開內容中的圖片數沒有限制，想放幾張就放幾張！
想學嗎？來看看三兒是怎么做出來的吧↓
通過135編輯器左側入口進入svg編輯器
或者直接在瀏覽器輸入svg編輯器網址進入：
http://m.vrlw.com.cn/svgeditor/
找到『點擊展開同時上層物體移動-自定義觸發』，點擊將組合添加到中間的編輯區
在編輯頁面右側點擊『添加圖片』按鈕，為素材添加觸發展開圖和小元素圖片
鼠標拖動紅色方框，為小元素圖片設置觸發熱區的大小和所在位置。
為展開的內容設置動畫時長，數值越大，展開的時間越慢；數值越小，展開的時間越快
點擊編輯器右側『編輯展開內容』進入新的編輯頁面，編輯展開內容
選擇『批量無縫圖（點擊不可彈出）』或『無縫圖（點擊不可彈出）』素材，上傳好圖片即可
注意：
該效果展開內容只支持放不可彈出無縫圖，除了小元素圖片以外的底部所有背景圖都需要寬度一致
展開內容編輯完成后，點擊頁面上方的『完成』按鈕，返回主編輯頁面
制作好的SVG文章可以通過使用『同步』或『導出』功能，保存到微信公眾號平臺（ps:不知道咋同步和導出的胖友，點擊按鈕，根據提示操作即可）
注意：
如使用導出代碼功能，則需根據SVG效果的使用平臺（135編輯器/微信后臺），選擇對應平臺的代碼進行復制，盡量不要直接粘貼代碼，以免效果有誤。
以上就是
『點擊展開同時上層物體移動』的使用教程
除了這種圖片展示方式
SVG編輯器里還有更多
酷炫又有創意的圖片展示SVG
『點擊放大換圖展開』
『自動拼圖分裂式換圖展開』
『點擊開門展開』
......
下一期你想看什么
歡迎在評論區留言呀~
·END·
本文素材僅供交流學習使用
■ ■ ■ ■
立即登錄
