手把手教你做多層相冊邊框

在這次更新的模板中，我們有這樣一個系列的模板：

在首推中，我們提到這個模板是將三個布局嵌套到一起後，在定位中調整寬度和偏移數據就能得出以上這種效果。

那麼，下面將會為你拆解這個模板，一步一步演示它是如何呈現出來的：

01

添加一層布局到編輯區域中，設置背景色為rgb(255, 255, 255)，陰影模糊為3px，顏色為rgba(81, 81, 81, 0.54)；設置定位中段前距為10px，段後距為20px：

GIF/372K

02

將上步驟做好的布局複製到剪貼板，再拖到布局內；設置段前距5px，段後距為-5px；繼續將剪貼板中的布局拖入第二層布局中，設置段前距5px，段後距為-5px：

GIF/231K

這時候如果我們關閉布局模式，會發現這三層布局並沒有與模板中顯示多層邊框那樣，是因為我們沒有設置偏移數據：

03

繼續在布局模式下，在定位中調整第一層布局偏移5px；第二層與第三層布局均為-5px：

GIF/316K

這樣，多層相冊邊框就製作好了，我們插入圖片：

04

設置第三層布局上下左右四個邊距為8px，插入圖片，調整圖片段前/後距為0；

GIF/323K

製作完成後，如果在微信上預覽，會發現有部分像被裁剪了一樣：

這是因為在100%布局裡有兩個偏移模板，已經完全超出了畫面範圍，所以我們需要調整布局寬度，將第一層布局寬度設置在85-90%之間都是可以的，最後再調整布局為居中對齊：

GIF/136K

看完全過程，是不是覺得很簡單呢？另外這種多層相冊邊框也還可以製作成多圖樣式，比如下面這個就是在第三層布局中，添加了一個橫向滑動布局：

>

製作的話也很簡單，我們將之前的單圖去掉，添加一個橫向滑動布局，再往裡面添加圖片就好：

GIF/1926K

這個系列模板還有另外三個，在定位中設置不同的段前/後距離以及偏移數據，就可以得出另外一個樣式，快去試試吧~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！