把圖片 key 進螢幕裡超簡單 (A Easy and Free Mockup Generator – Mockuper)
小蛙之前在找資料的時候，看到這種 Mockup Generator 覺得很有趣，只要選中一張底圖，再上傳一張自己的圖就可以輕易做出把螢幕裡的畫面換成自己的效果，這篇文章把使用 Mockuper 的教學記下來。
有一次看到阿咕用 PS 要做這個效果，因為有些情況下是沒有這些專業軟體的，小蛙就找到了一個免費的線上工具，真的是非常強大，快來看看吧～
什麼是 Mockup
在開發設計流程裡，常常可以看到 wireframe,mockup及 prototype 三個專有名詞，wireframe，prototype，mockup到底有何不同？ 這篇文章指出包含可操作互動功能的為 Prototype，不可操作下，wireframe 為功能設計不注重外觀，而mockup重視的則為豐富的視覺細節。
如果還是不太懂的話，以下說明更淺顯易懂
在平面設計裡的Mockup指的是把設計好的圖像合成到馬克杯、海報、招牌等等上，讓客戶可以想像設計展出或是應用在商品上的時候會是什麼樣子。在UI設計裡的Mockup指的是把wireframe繪製成使用者實際使用的畫面，但無法和使用者直接互動。在國外，有時候Mockup會和Prototype混用，但在業界基本上還是會把無互動的稱作Mockup，可互動的稱作Prototype。
UX流程簡介（下）：Mockup to Usability Testing
Mockuper.net 能做什麼？
Mockuper.net 能將想要展示的畫面呈現在特定的媒介上，例如上面提到的把設計好的圖像合成到馬克杯、海報或招牌上，或者是常見的將視覺樣式合成到書本封面、卡片、電腦或手機螢幕上，而且 Mockuper.net 操作非常簡單重點是免費！
如何使用 Mockuper.net？
連進 Mockuper 右手邊就可以看到一張超大畫布，左邊可以瀏覽想要的模板
模板的種類非常多，有桌上型螢幕、筆記型電腦、行動裝置、平板電腦、智慧手錶以及其他像是畫框、書本等等模板可以直接使用
每個類別拉到最下面點擊 View All 就能切到該類別分頁下，可查看該類別下的所有模板
找到要使用的模板後，點選畫面上的 VIEW
進到詳細說明後，再點擊圖面上的 USE IT
接著開啟編輯器
所有的設定 Mockuper 都已經處理好，我們唯一要做的事情就是點擊左邊的上傳圖片選項 (Upload screenshot)
點擊右下角的 DONE 後開始上傳螢幕畫面圖片
上傳完成就合成完了～
左側可以調整反光的樣式及強度，可以自己試試看調出最適合的樣子，來看看成果吧！小蛙用 YouTube 的影片封面當作測試，效果看起來真棒，是不是很簡單呢？快把 Mockuper 加入書籤吧！以後有需要這種功能就不用求人囉！
如何使用自己的素材製作 mockup
如果 Mockuper.net 提供的素材沒有合用的，mockuper.net 也可以自己上傳素材進行合成，選擇左上角的 CUSTOM MOCKUP。
小蛙從 Pixabay 找了一個漂亮的底圖 (Pixabay 介紹可參考 【 免費素材 】Pixabay 超過 230 萬個優質圖片、影像及聲音素材)
接著點擊 Add layer -> Screenshot 加入要挖空的部份
將要挖空的區域調整好
接下來的步驟就跟前面提到的一樣了，可直接參考前面操作的部份，下為完成圖
mockuper.net 是屬於簡單型的工具，沒辦法處理較複雜、不規則或是圓弧面的合成，如下圖，因為手遮住螢幕造成把圖合成上去的時候，手指頭被切掉了 …
非常驚悚
如果有單純矩形的需求，不妨試試 moucker.net 吧！
圖片相關文章：
- 2 個去背的簡單方法 – iPhone, remove.bg
- 1 學就會的免費 AI 繪圖、AI 圖片生成 – 使用 Edge
- PicPick – 全方位的免費螢幕截圖、螢幕錄影軟體
- HitPaw Photo AI 開箱實測 – 圖片的事都交給它！
- iPhone 長截圖的 3 個方法學 (iOS)
- Mac OSX 螢幕截圖 / 錄影的方法
- 上傳圖片卻遇到圖片太大的問題？XnView 輕鬆幫你調整圖片大小
- 哎呀！私密資料不能公開啦！XnView 幫你的圖片馬賽克(pixelate)
- 圖片太大啦！要調整的那麼多張怎麼辦？XnView 幫你批次調整圖片大小
- 把圖片 key 進螢幕裡超簡單 – Mockuper
免費素材系列文章：
这里太强大了，必须顶！！
😄