就這么簡單！一秒生成高格調網站/APP展示模版圖的在線神器

編者按：人靠衣裝設計靠包裝，無論你是網頁設計師/UI設計師/App獨立開發者，如果想要讓你的作品看起來更有格調，一個好的展示模版必不可少。今天介紹的這個神器，可以幫你快速生成模版展示大圖，免去了在PS里裁剪、調整等等一系列繁瑣操作，方便到沒朋友。

對于經常寫文章的人來說，一定能體會要找到引人入勝的首圖實在很不容易，大多數情況我都是直接從免費圖庫素材來找尋合適的圖片，但有時找不到好看的圖，我就會選擇取網站首頁或 Logo 來做為代表。通常首頁設計都不會太糟糕，否則也難以吸引人加入使用，但有好像又缺少一點什么，直到發現 Smartmockups 才徹底解決這個問題。

Smartmockups 是一個相當實用的在線工具，簡單來說，幫你把任何圖片或網址截圖無縫結合到設備模型中。這個圖庫照片以手機、平板計算機、筆電或桌面計算機為主，搭配上非常有質感的布景，使相片除了豐富文章，也因為設備上的畫面更顯獨特性。

如果你是網頁、應用程序或軟件開發者，也能利用 Smartmockups 來做出更有質感的畫面圖或預覽圖，尤其對于像我這種沒有繪圖軟件使用經驗的人來說，輕松「組合」出非常有質感照片彈指之間，強力推薦！

Smartmockups

STEP 1

開啟 Smartmockups 網站后，可以找到許多的免費圖片范例，這些圖片都有個共通點，就是里頭的裝置都有個藍色畫面顯示「Your Design Here」，意思是你可以自己選擇手邊的圖片來把畫面加進去。

其中也依照 iOS、Android、Windows Phone 或性別、手機、平板計算機和桌面計算機來加以分類，選擇其中一張你要的相片后就可以開始來進行在線合成。

STEP 2

舉例來說，我選擇一個黑色 iPhone 6 放在紙上的畫面，右側會出現讓我上傳圖片或使用網址在線截圖的選項。如果你使用「Upload Image」上傳圖片，還會有裁切工具來協助你取得合適圖片范圍（才可以無縫拼接到相片里）。

若你使用「URL Screenshot」的話，可以直接輸入一個網址來擷取網頁畫面。目前這項功能還在測試階段，我就直接使用優設網來 進行范例操作。

STEP 3

大約幾秒鐘后，優設網首頁畫面已經被整合到 iPhone 6 里了！看起來是不是像自己拍攝取景的呢？非常不賴吧！

點選右側的「Download Full Image」按鈕來免費下載圖片，Smartmockups 網站很棒的是不會強迫使用者注冊或登入賬戶，能在線取得各種尺寸大小圖片，例如印刷、網頁、部落格文章等等皆有不同大小圖片，點選后就能下載啰！

STEP 4

以下兩張圖是我使用 Smartmockups 制作、下載下來的范例，可以看到網站上收錄的免費圖庫都能將我輸入的網址或應用程序畫面整合到相片里，看起來非常漂亮有質感，也更加吸引人！

如果你想使用在網站上，Smartmockups 相片容量可能會有點大，可以先壓縮圖片減少圖片大小。

值得一試的三個理由：

1. 收錄 iOS、Android、平板計算機、桌上計算機等各式圖片圖庫
2. 輕松將網站截圖、應用程序或軟件畫面整合到相片中
3. 下載各種圖片尺寸大小，亦能獲取原圖

「優設五月精品教程合集」

提升設計格調的漸變教程：
《實用教程！教你巧妙運用漸變色快速提升設計格調！》

將人物照轉成素描！
《PS教程！巧用濾鏡快速將人物照片轉成素描肖像》

3個酷炫的GIF 小動畫：
《PS教程！手把手教你繪制3個效果酷炫的GIF動畫效果》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com