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

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

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

網站名稱：Smartmockups
網站鏈結：http://smartmockups.com/

使用教學

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 相片容量可能會有點大，可以先透過之前介紹的 TinyPNG、TinyJPG 來線上壓縮圖片，減少圖片大小。