MockUPhone 在各種裝置螢幕上顯示產品畫面,支援最新 iPhone X

MockUPhone 在各種裝置螢幕上顯示產品畫面,支援最新 iPhone X

經常會在各種軟體公司、應用程式或產品官網看到畫面效果,為了吸引使用者目光,也會以裝置內顯示方式呈現,同時還能增進網頁質感,但其實這些圖片多半不是實際拍攝,而是透過一些模板(Mockups)組合而成,不僅在製作上更為簡便,現在也有線上工具可直接將圖片整合到圖庫素材,例如我個人最常使用的 Smartmockups 協助我製作出更引人入勝的文章首圖,或是 Magic mockupsDimmy.club 能將螢幕擷圖或應用程式畫面放入裝置螢幕中。

本文要推薦一款類似的免費服務「MockUPhone」,這個工具提供 iOS、Android、Windows Phone、平板、筆記型電腦、桌機和電視在內等眾多裝置的模型(Mockup),包括最新的 iPhone X、iPhone 8 及 Google Pixel 也在其中。

MockUPhone 的用途是什麼呢?簡單來說,選擇你要使用的裝置,然後將圖片上傳(例如網頁或應用程式畫面擷圖),即可將畫面「嵌入」裝置螢幕。

顯然這些圖片都會被加工、應用到網頁開發或其他專案中,因此 MockUPhone 產生的圖片是完全去背的透明背景圖,讓圖片得以被使用在更多不同顏色的背景,使用者不用自己去除背景,非常實用,製作出的圖片畫質很高,而這項服務完全免費,無須註冊就能使用!

網站名稱:MockUPhone
網站鏈結:https://mockuphone.com/

使用教學

STEP 1

開啟 MockUPhone 網站,可以從首頁上方的圖片看到 MockUPhone 產生的範例效果,底下有 iPhone X、iPhone 8 和 Google Pixel 按鈕可快速跳到特定裝置。

網站利用不同平台來分類裝置,除了智慧型手機、平板電腦,也有一般電腦和電視,看了一下 Apple 產品線確實很完整,目前最早的是 iPhone 5,其他像 iPhone SE、iPhone 6 Plus、iPhone 7 Plus 等等也都能從網站中找到。

MockUPhone

Android 部分則有目前最新的 Google Pixel、Galaxy、HTC One、Moto 和 Nexus。將游標移動到裝置圖片上方,會出現直立和橫式兩種不同的效果。

MockUPhone

STEP 2

點擊選取你要使用的裝置後,將圖片拖曳到網站虛線框,要特別注意為了符合最佳效果,盡量使用提示的圖片長寬,而根據裝置螢幕大小不同,也會出現不一樣的數值,例如 iPhone X 就會指定使用 1125 x 2436px 大小的圖片,否則若圖片尺寸不符,可能會讓產生的圖看起來不太正確。

MockUPhone

如果上傳的圖片尺寸和 MockUPhone 提示尺寸不符,網頁會出現一個紅色驚嘆號,雖然它也會盡量讓圖片可以放入裝置螢幕中,不過效果可能會不盡理想,因此還是盡量將圖片縮放到網頁提示的圖片大小。

MockUPhone

STEP 3

下圖就是我將網頁擷圖畫面放入 MockUPhone 提供的裝置中產生的圖片,可以看到我透過 iPhone 6 抓圖(4.7 吋),但 iPhone X 是 5.8 吋,放進去後上下會有間距。

MockUPhone

STEP 4

那麼我就換成以 MacBook 來測試一下顯示效果,一樣在電腦上先把圖片擷取、裁切完整,選擇網站推薦的尺寸 1920 x 1200px,果然放入 MacBook 模型後產生的圖片成果非常棒,看起來就像在電腦上直接開啟網頁。

MockUPhone

點擊下方的「Download My Mockups」藍色按鈕可以打包、下載產生的圖片(有些裝置可以一次產生數張圖),不過必須輸入你的 Email 才能收到下載鏈結。如果不想那麼麻煩,更快的方法是直接保存網頁上方產生的預覽圖,一樣也是透明背景。

MockUPhone

值得一試的三個理由:

  1. 即使手邊沒有裝置或專業攝影器材,也能製作逼真的產品圖
  2. 支援各種 Apple、Android 手機、平板電腦,也提供筆電、桌機和電視
  3. 可將圖片自動調整成最適合顯示的尺寸大小
分享本文