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

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

Smartmockups 是一個(gè)相當(dāng)實(shí)用的在線工具，簡(jiǎn)單來說，幫你把任何圖片或網(wǎng)址截圖無縫結(jié)合到設(shè)備模型中。這個(gè)圖庫(kù)照片以手機(jī)、平板計(jì)算機(jī)、筆電或桌面計(jì)算機(jī)為主，搭配上非常有質(zhì)感的布景，使相片除了豐富文章，也因?yàn)樵O(shè)備上的畫面更顯獨(dú)特性。

如果你是網(wǎng)頁(yè)、應(yīng)用程序或軟件開發(fā)者，也能利用 Smartmockups 來做出更有質(zhì)感的畫面圖或預(yù)覽圖，尤其對(duì)于像我這種沒有繪圖軟件使用經(jīng)驗(yàn)的人來說，輕松「組合」出非常有質(zhì)感照片彈指之間，強(qiáng)力推薦！

Smartmockups

STEP 1

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

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

STEP 2

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

若你使用「URL Screenshot」的話，可以直接輸入一個(gè)網(wǎng)址來擷取網(wǎng)頁(yè)畫面。目前這項(xiàng)功能還在測(cè)試階段，我就直接使用優(yōu)設(shè)網(wǎng)來 進(jìn)行范例操作。

STEP 3

大約幾秒鐘后，優(yōu)設(shè)網(wǎng)首頁(yè)畫面已經(jīng)被整合到 iPhone 6 里了！看起來是不是像自己拍攝取景的呢？非常不賴吧！

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

STEP 4

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

如果你想使用在網(wǎng)站上，Smartmockups 相片容量可能會(huì)有點(diǎn)大，可以先壓縮圖片減少圖片大小。

值得一試的三個(gè)理由：

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

「優(yōu)設(shè)五月精品教程合集」

提升設(shè)計(jì)格調(diào)的漸變教程：
《實(shí)用教程！教你巧妙運(yùn)用漸變色快速提升設(shè)計(jì)格調(diào)！》

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

3個(gè)酷炫的GIF 小動(dòng)畫：
《PS教程！手把手教你繪制3個(gè)效果酷炫的GIF動(dòng)畫效果》

原文地址：free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com