mockuper – 記下來 https://noter.tw 一路上踩到的坑、遇到的問題，一點一滴記下來，希望能幫助到需要的人~ Tue, 14 Feb 2023 07:56:45 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.6.3 https://noter.tw/wp-content/uploads/cropped-old-1130742_1920-1-32x32.jpg mockuper – 記下來 https://noter.tw 32 32 把圖片 key 進螢幕裡超簡單 (A Easy and Free Mockup Generator – Mockuper) https://noter.tw/9310/mockup-%e6%8a%8a%e5%9c%96%e7%89%87-key-%e9%80%b2%e8%9e%a2%e5%b9%95%e8%b6%85%e7%b0%a1%e5%96%ae/ https://noter.tw/9310/mockup-%e6%8a%8a%e5%9c%96%e7%89%87-key-%e9%80%b2%e8%9e%a2%e5%b9%95%e8%b6%85%e7%b0%a1%e5%96%ae/#comments Fri, 28 Jan 2022 08:57:50 +0000 https://noter.tw/?p=9310 小蛙之前在找資料的時候，看到這種 Mockup Generator 覺得很有趣，只要選中一張底圖，再上傳一張自己的圖就可以輕易做出把螢幕裡的畫面換成自己的效果，這篇文章把使用 Mockuper 的教學...

這篇文章 把圖片 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 操作非常簡單重點是免費！

記下來頻道 iMac mockup
將小蛙的頻道首頁合成到螢幕素材中
記下來頻道 mobile mockup
將小蛙的頻道首頁合成到螢幕素材中

如何使用 Mockuper.net？

連進 Mockuper 右手邊就可以看到一張超大畫布，左邊可以瀏覽想要的模板

Mockuper.net 1

模板的種類非常多，有桌上型螢幕、筆記型電腦、行動裝置、平板電腦、智慧手錶以及其他像是畫框、書本等等模板可以直接使用

Mockuper.net 桌上型螢幕
Mockuper.net 筆記型電腦
Mockuper.net 行動裝置
Mockuper.net 平板電腦
Mockuper.net 智慧手表
Mockuper.net 其他

每個類別拉到最下面點擊 View All 就能切到該類別分頁下，可查看該類別下的所有模板

Mockuper.net 2

找到要使用的模板後，點選畫面上的 VIEW

Mockuper.net 3

進到詳細說明後，再點擊圖面上的 USE IT

Mockuper.net 4

接著開啟編輯器

Mockuper.net 5

所有的設定 Mockuper 都已經處理好，我們唯一要做的事情就是點擊左邊的上傳圖片選項 (Upload screenshot)

Mockuper.net 6

點擊右下角的 DONE 後開始上傳螢幕畫面圖片

Mockuper.net 7 mockup

上傳完成就合成完了～

Mockuper.net 8 mockup

左側可以調整反光的樣式及強度，可以自己試試看調出最適合的樣子，來看看成果吧！小蛙用 YouTube 的影片封面當作測試，效果看起來真棒，是不是很簡單呢？快把 Mockuper 加入書籤吧！以後有需要這種功能就不用求人囉！

Mockuper.net 9 mockup
Mockuper.net 合成成果

如何使用自己的素材製作 mockup

如果 Mockuper.net 提供的素材沒有合用的，mockuper.net 也可以自己上傳素材進行合成，選擇左上角的 CUSTOM MOCKUP。

Mockuper.net 10
點擊 CUSTOM MOCKUP可自行上傳底圖素材

小蛙從 Pixabay 找了一個漂亮的底圖 (Pixabay 介紹可參考 【 免費素材 】Pixabay 超過 230 萬個優質圖片、影像及聲音素材)

Mockuper.net 11
上傳底圖 https://pixabay.com/photos/communication-workplace-imac-2805785/

接著點擊 Add layer -> Screenshot 加入要挖空的部份

Mockuper.net 12

將要挖空的區域調整好

Mockuper.net 13

接下來的步驟就跟前面提到的一樣了，可直接參考前面操作的部份，下為完成圖

Mockuper.net 14

mockuper.net 是屬於簡單型的工具，沒辦法處理較複雜、不規則或是圓弧面的合成，如下圖，因為手遮住螢幕造成把圖合成上去的時候，手指頭被切掉了 …

Mockuper.net 15

非常驚悚

Mockuper.net 16
https://pixabay.com/photos/telework-technology-laptop-6795505/

如果有單純矩形的需求，不妨試試 moucker.net 吧！

圖片相關文章：

免費素材系列文章：

這篇文章 把圖片 key 進螢幕裡超簡單 (A Easy and Free Mockup Generator – Mockuper) 最早出現於 記下來。

]]> https://noter.tw/9310/mockup-%e6%8a%8a%e5%9c%96%e7%89%87-key-%e9%80%b2%e8%9e%a2%e5%b9%95%e8%b6%85%e7%b0%a1%e5%96%ae/feed/ 2