上面這張照片中 Macbook 顯示的是免費資源網路社群網頁畫面，你可能以為我真的借來這麼多道具、佈置成專業的風格拍照，事實上這是合成圖，直接將網站擷圖整合到圖庫中，就能有像是實際拍攝的效果，而這也被稱為 Mockups，我個人最常用的是 Smartmockups，因為它的素材多、經常更新，當我在撰寫文章時，如果沒有適合的首圖通常會自己產生。除此之外還有以下幾項類似的免費服務：
截圖
Mockuptime 裝置模版 PSD 素材免費下載，讓產品畫面更臻質感
之前介紹過不少將應用程式或網頁畫面整合到圖庫的服務，通常稱為 Mockups，這些工具利用已經拍攝好的素材，將使用者選擇的畫面快速置入，讓相片看起來更有質感，也不用自己費心去調整或編輯圖片，有時候要準備展示畫面或擷圖 Mockups 就會相當實用，Smartmockups 是我很喜愛的工具，至少有不少文章的首圖我都是使用它來產生，除此之外，像是 Mockuper、Fotomock 或 Magic Mockups 也都很好用。
Mockuper 將圖片快速合成到平板電腦、手機或看板上
有時候在網路上看到別人製作的插圖很有質感，通常會在圖庫素材中整合自家產品，不但沒有違合感，還能解決類似照片不好拍出來的問題，其實不用透過專業軟體就有一些線上工具可以做到，例如 Smartmockups 除了網頁版以外還能付費購買 Mac 應用程式，其他像是 Magic Mockups、MockUPhone 或 Dimmy.club 都能滿足類似需求，當然圖庫相片多不多也會是選擇的因素之一。
Zoho Notebook 免費筆記應用可快速將網頁內容擷取保存
平常你都如何保存從網路上找到的重要內容呢？可能很多人習慣直接把網頁加入書籤，或是打開其他編輯器來複製、貼上，但隨著 Evernote 和 Google Keep 這類筆記工具出現其實存在雲端更方便，而現今大部分人的生活脫離不了行動裝置，這些工具也多半有對應的應用程式或手機版可以使用。如果你不希望遇到下次打開鏈結卻找不到內容的窘境，直接為網頁擷圖或將文字圖片備份下來是比較安全的方法。
使用 Chrome 內建工具製作網頁長截圖，擷取網站畫面免安裝下載外掛
幾個月前介紹過「Firefox Screenshots」免費網頁擷圖工具，也是火狐瀏覽器 Firefox 內建的快速拍照、分享螢幕功能，在全新 Firefox Quantum 推出後成為內建功能之一，可見不單單只有工作上會用到，對於一般使用者來說網頁擷圖也是相當必要。現在 Google Chrome 也內建網頁擷取工具以及將完整頁面保存下來的「網頁長截圖」製作功能，不用額外下載、安裝外掛或擴充功能，只要輸入指令就能做到。
Fotomock 將擷圖整合免費圖庫素材，打造更專業模型樣板
有時候我們會看到很有質感的模型樣板（Mockups），可能是將網頁或應用程式畫面整合到 Macbook 或 iPhone 手機上，但其實這些照片並不是真正透過相機拍攝而成，而是以線上服務來加以合成，讓它看起來很特別、很不一樣！之前曾介紹過 Smartmockups（也是我個人相當喜愛的服務）、Magic Mockups 和 Dimmy.club 都能做到類似的事，只是本身的圖庫集不太一樣，產生效果多少有點差異，通常我會準備一些類似的服務，從中找出最理想的素材。
MockUPhone 在各種裝置螢幕上顯示產品畫面，支援最新 iPhone X
經常會在各種軟體公司、應用程式或產品官網看到畫面效果，為了吸引使用者目光，也會以裝置內顯示方式呈現，同時還能增進網頁質感，但其實這些圖片多半不是實際拍攝，而是透過一些模板（Mockups）組合而成，不僅在製作上更為簡便，現在也有線上工具可直接將圖片整合到圖庫素材，例如我個人最常使用的 Smartmockups 協助我製作出更引人入勝的文章首圖，或是 Magic mockups、Dimmy.club 能將螢幕擷圖或應用程式畫面放入裝置螢幕中。
Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形
記得幾年前架設 WordPress 網站時，會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境，這個作法通常是將手機使用者引導至另一個佈景主題，專為行動裝置特別設計，無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案，但其實也會出現一些問題，例如：不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等，因此後來趨勢就逐漸轉為使用「自適應網頁設計」（Responsive Web Design）替代。