編者按：今天給大家介紹的這兩個網站，可以讓你直接在線預覽設計稿在不同設備上的效果，還有iPhone X 的展示素材喲！

MockUPhone

這個工具提供 iOS、Android、Windows Phone、平板、筆記本電腦、桌機和電視在內等眾多設備的模型（Mockup），包括最新的 iPhone X、iPhone 8 及 Google Pixel 也在其中。

MockUPhone 的用途是什么呢？簡單來說，選擇你要使用的設備尺寸，然后將圖片上傳（例如網頁或應用程序畫面截圖），即可將畫面「嵌入」設備屏幕。

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

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

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

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

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

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

下圖就是我將網頁截圖畫面放入 MockUPhone 提供的設備中產生的圖片，可以看到我透過 iPhone 6的預覽（4.7 寸），但 iPhone X 是 5.8 寸，放進去后上下會有間距。

那么我就換成MacBook 來測試一下顯示效果，一樣在計算機上先把圖片截取、裁切完整，選擇網站推薦的尺寸 1920 x 1200px，放入 MacBook 模型后產生的圖片成果非常棒，看起來就像在計算機上直接開啟網頁。

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

值得一試的三個理由：

• 即使手邊沒有設備或專業攝影器材，也能制作逼真的產品圖。
• 支持各種 Apple、Android 手機、平板計算機，也提供筆電、桌機和電視。
• 可將圖片自動調整成最適合顯示的尺寸大小。

Dimmy.club

「Dimmy.club」是我最近新發現的免費的網站，可以將屏幕截圖、應用程序畫面等等圖片放入預先設定好的圖庫設備中顯示，讓它看起來很自然。比較特別的是 Dimmy.club 沒有多余的背景設計，純粹就是一個設備加上你上傳的畫面，可以調整背景顏色甚至顯示為透明背景圖。

Dimmy.club 可以選擇要在筆記本電腦、桌面計算機、智能型手機或平板計算機照片中顯示，支持的設備包括 Macbook、Surface Book、iMac、iPhone、Google Pixel、Nokia、iPad 和 HTC Nexus，也可以調整顯示圖片的呈現方式。

開啟 Dimmy.club 網站后，可以看到所有能顯示的設備，包括筆記本電腦、桌上計算機 iMac。

當然現在最不可或缺的智能型手機、平板計算機也在其中，例如最熱門的 iPhone、Google Pixel 等等，比較特別的是 Dimmy.club 能讓我們選擇不同的設備顏色，iPhone 就有玫瑰金、金色、銀色、黑色和曜石黑可以切換，選擇側邊顏色后預覽圖就會自動切換配色。

要如何將屏幕截圖或應用程序畫面套用到設備里預覽呢？很簡單，從網頁上方的「Upload」按鈕點選并選擇圖片，效果就會立即顯示于網頁中。右側有幾個顯示方式，包括：覆蓋（Cover）、填滿（Fill）、置入畫面中（Contain）和延伸顯示（Stretch），前兩個我想不用多做說明，后兩個選項類似于桌布顯示方式，有置中或是延展為符合屏幕大小。

只要點選就能馬上看到效果，可以從這里選擇最適合你的顯示方式。

當然在 Macbook、Surface Book 及 iMac 部分也是可以直接預覽，只是圖片效果不同而已，一樣有不同的配色組合可以切換。

套用后，點選你需要的圖庫素材，開啟更大張的預覽圖還能切換設定。如果你希望呈現出來的效果是平面化效果，可將 Style 切換為「Flat」，從這里可選擇不同的圖片背景顏色，假如你喜歡建立為透明圖，就點選 Background 旁邊的框框將背景取消。

設定完成再單擊下方的「Download」按鈕即可下載圖片。

下圖就是我通過 Dimmy.club 搭配一張屏幕截圖產生的圖片素材，看起來非常有質感吧？完全不用手動打開繪圖軟件編輯，只要有瀏覽器就能在線完成，相信可以解決許多人需要這類圖片時又無法自己制作的問題。

值得一試的三個理由：

• 有多種設備類型，包括桌機、筆記本電腦、手機和平板計算機。
• 可調整設備顏色，讓產生的圖片更多樣化。
• 支持背景選擇或設定為透明背景。

「你值得擁有！本月推薦神器合集」

• 《收錄日本都市圖片素材庫+響應式在線預覽網站》
• 《超全面的Sketch 頭像素材庫+收錄設計軟件快捷鍵》
• 《想為設計添加質感？你缺這些紋理網站！》
• 《快捷實用的在線長圖生成器+分隔線矢量圖下載》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com