讓你瞬間變身設計牛人的樣機製作指南

這篇文章教你快速製作出蘋果官網上那美輪美奐的手機、平板、電腦樣機的方法。樣機是這樣的。

或者是裝逼界的實力派鎚子這樣的。

還有這樣的。

這就是樣機（mock up），也叫原型，設計師用來展示給客戶看的真實效果圖，這個機器可以是手機，電腦，平板，智能手錶，街上的廣告牌等等。

是不是顯得很高科技？對小白來說是不是很難搞定？

科技可以讓屌絲變得逼格滿滿，跟著我分分鐘做出這樣的效果，然後去朋友圈裝逼吧。

第一步：找到樣機製作工具

你需要找到製作樣機的工具，我只推介兩個。

一是Smartmockups，二是Magic mockups。

兩個工具的操作大同小異，下面以Magic mockups為例。打開Magic mockups的網站，是英文哦，你需要翻譯成中文，不翻譯也沒關係，基本能蒙著一路操作完畢。

這是一個散發著文藝騷氣的網站。

第二步：找到你要放到樣機中去的圖片

比如我打開我們升學e網通的首頁，將首頁截圖保存到桌面（幫武大做個廣告）。

第三步：將圖片填充到樣機中去

網站的左上角，你可以選擇各種樣機的樣式，有筆記本電腦，電話，IMAC電腦等等，我們選一個顯得有逼格的IAMC。

找到你剛才保存的截圖上傳上去，你就看到下面這個效果圖啦。

第四步：下載樣機圖片

是不是很吊的樣子。

但是，如果你仔細看，會發現這個圖片里實際是有兩個樣機的，左下角還有一個IPAD對不對？OK，我們把它也填充進去試試。

點擊上傳圖片B（沒錯，如果只有一個樣機，這裡就只有一個圖片A的選項，兩個樣機就會有圖片A和B的選項）。你瞧，上傳了圖片B之後，兩個樣機都有填充啦，再下載下來看看。

圖片A和B上傳之後，兩個樣機就都有圖片了。

你瞧，我們就製作了這樣一張逼格滿滿的樣機圖了。但是假如你覺得去網站截圖比較麻煩，甚至你不會截圖怎麼辦？

有更簡單的方法。

請注意，在上傳圖片按鈕的右邊，還有一個捕獲網址的按鈕，這說明只要把你要填充的網站的網址複製粘貼到網址A和網址B，就會自動從網站截圖填充進去啦。

OK，你已經學會樣機製作，太TM簡單了。停不來的話，你可以試試用推介的兩個工具做幾張其他樣機試試。這兩個工具的樣機場景各有特色，值得一試。

欣賞下我做的幾張。

利用這個原理，我們還可以在PPT中做出樣機效果，比如下面的截圖，有時間再詳細說說在PPT中如何製作。

再見。

想GET其他技能的戳二維碼

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