Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖

如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢？可能很多人會選擇打開網頁，將視窗調整到適當大小後擷圖即可，這個答案好像也沒有錯，只是相較於使用 Mockup 工具來說會更費時費力，其實只要透過像是 BrowserFrame 或 Mobile Mockup 就能在輸入網址後快速製作出模型圖，看起來會比自己擷取還要更有質感。如果是 Mockup Photos、Smartmockups 還能直接套用免費圖庫提供的高品質相片，免費資源網路社群有一部分的文章首圖都是以類似工具處理，看起來很自然而且能提昇質感。

本文要介紹的「Screenshot Rocks」協助使用者快速建立漂亮的瀏覽器、手機畫面模型，簡單來說，只要打開網站輸入要擷取的網站網址，Screenshot Rocks 就能將網頁畫面顯示在瀏覽器或手機上。透過選項立即切換不同的視窗樣式、顏色、尺寸大小、背景圖案或顏色，選擇是否顯示視窗控制鈕、網址列、網址、導覽按鈕、設定按鈕或陰影等等，可自訂性很高。

Screenshot Rocks 製作出來的圖片可以正確顯示中文內容，除了幾個預設的背景圖案，也能使用純色背景、漸層色或是不帶背景，即使不是使用 Mac 依然可以製作出具有視窗陰影質感的模型圖。製作完成將圖片輸出為 PNG、JPEG 或 SVG 格式，整體操作非常簡單易用，完全不用安裝軟體。

Screenshot Rocks
https://screenshot.rocks/

使用教學

STEP 1

開啟 Screenshot Rocks 後在網址欄位輸入要擷取的鏈結（不是上方的網址列），或是直接將圖片拖曳進去上傳，如果你想製作為手機版記得勾選「Mobile」然後按下送出。

STEP 2

稍待片刻就會看到網頁被擷取、顯示於瀏覽器視窗上，比較特別的是上方網址列可以自行設定。

如果有勾選手機版選項，網頁就會出現在手機畫面中，對於使用自適應網頁設計（RWD）的網站來說應該都能正常顯示，不確定使用 User-agent 判斷是否會跳轉到行動版網頁。

STEP 3

從網站左側選項可以進行細部調整，像是瀏覽器外框樣式、顏色（也可以自訂各種顏色），還能夠調整視窗的長度、寬度，設定不同的背景圖案，Screenshot Rocks 提供四種背景圖片，或是選擇單色、漸層色或沒有背景。

調整設定後會即時顯示於右側預覽畫面。

STEP 4

在左下角的設定項目可以控制是否顯示視窗左上角的按鈕、網址列、網址文字、導覽按鈕、設定按鈕或顯示陰影，如果是手機版則會有顯示音量或照相機鏡頭的選項。

完成後從下方選擇要下載的圖片格式，Screenshot Rocks 提供 PNG、JPEG 和 SVG 三種格式，然後按一下下方的下載按鈕就能取得圖片。

下圖是我使用 Screenshot Rocks 製作的瀏覽器模型範例，在輸入網址後自動擷取、將畫面整合到瀏覽器視窗，網址列部分還能自訂，我選擇不使用背景圖案，純粹只有瀏覽器外框，帶上一些陰影看起來還蠻真實，對於要展示網頁畫面來說如果不想自己製作素材的話也是一個不錯的方法。