App演示素材那麼貴，不如來用 Sketch 插件自己做吧

現在 Apps 的網站都設計得很精美，其中最重要的莫過於那張用於演示 apps 的素材圖。去年的時候給大家推薦過一款叫做「Promotee」的應用，它提供了各種機型的高清素材圖，將做好的設計稿拖到應用中就能生成對應透視效果圖。

「Promotee」雖然方便，可素材的更新速度太慢並且只有純設備圖，實際應用到網頁中還需要再次設計。Placeit 平台上的素材固然都很贊，但29美金每月9張下載的價格實在也貴得令人咂舌。

好在有人為 Sketch 開發了一款免費的透視插件 - MagicMirror ，通過它可以快速創建任何透視效果。即使設計能力不強也能輕鬆做出不錯的效果。

這款小工具已經打包成 Sketch 插件，下載之後雙擊安裝即可。接下里就給大家介紹下如何使用。

首先找兩張感覺還不錯的實景拍攝圖（為了尊重版權，建議大家使用無版權或自行拍攝的圖片），我們將把下圖中手機里的界面通過 MagicMirror 替換成我們的設計稿。

將素材拖入到 Sketch，在屏幕上方添加一個矩形（也可以直接用鋼筆勾）。

為了方便調整，建議先將矩形的透明度調整到50%左右（按數據鍵5可直接設置成50%透明度，其他百分比一次類推）。

雙擊矩形，將矩形的四個節點拖到屏幕四個角對應的位置。

完成後記得將透明度調整回100%（按數字鍵0），否則透視後的圖片也會存在透明度。

接下來建立一個Artboard（畫布），將準備好的設計稿拖入其中。畫布尺寸設置成與設計稿一樣（這裡選擇了一款應用的截圖做演示）。

將剛才勾好的矩形和畫布設置成同名，比如我在這裡將它們都命名為「Phone1」。這一步很重要，是將設計圖與矩形建立聯繫的最關鍵部分。

同時選中畫布和矩形路徑，在 Plugin 菜單中選擇 MagicMirror - MagicMirror 將圖片填充到矩形路徑中產生透視效果。（快捷鍵 Control+Shift+m)

看看最終效果，應該還算不錯。想要效果逼真，就需要在勾畫矩形路徑的時候做得夠仔細。

MagicMirror 共提供了三個操作：

1. Jump to Artboard（Control+Shift+J），跳到透視圖對應的圖片源

2. MagicMirror（Control+Shift+M），將圖片填充到路徑中
3. Rotate Points（Command+Control+Shift+R），旋轉路徑中的填充素材

MagicMirror 是一款免費插件，有興趣可以在其官網進行下載：

http://magicmirror.design/

如果你對移動產品設計感興趣，想進一步了解和設計相關的話題，歡迎訂閱 PinDesign。

PinDesign是 Pinapps 新推出的一檔關於移動互聯網產品設計的訂閱周刊，每周我會和大家聊一些關於移動產品設計的話題，我希望能將它做成對設計師最有用的設計類周刊，為設計師和想成為設計師的同學們提供一些幫助。

感謝大家支持我將它做成對設計師最有用的設計類周刊。會員計劃剛剛上線，目前正在進行對摺活動，稍後將會恢復原價。

如果你想進一步了解PinDesign 移動產品設計會員計劃，可以訪問下方地址或掃描下方二維碼：

PinDesign 移動產品設計會員計劃 （5折優惠中）