身為一個文字工作者,我對於文章排版和圖片相當堅持,特別是每篇教學都會用到的螢幕畫面擷圖,要怎麼設定抓取範圍、呈現都經過相當長時間的不斷研究摸索,才能盡力維持甚至改善文章品質。或許你無法花太多時間擷取螢幕畫面,但又希望擷圖能有不錯的效果,考慮為圖片加上好看的視窗外觀也會讓質感更為提升,之前介紹過 FrramesBrowser Frame 都是類似服務,或是利用 Screely 將圖片轉為帶有 Mac 視窗陰影效果。

本文要介紹的「BrowserFrame」是一個很好用的線上工具,可以將擷圖或任何圖片加上瀏覽器外框,支援各種作業系統瀏覽器,包括 Google Chrome、Firefox、Safari、Opera、IE 和 Edge,也有 Windows 和 Mac 兩種版本(外框看起來不太一樣),很多人偏好的深色佈景主題也在這項服務提供的素材清單。

開啟 BrowserFrame 輸入要擷取的網址會立即擷圖,或者可以上傳自己想要呈現的圖片效果,從網站選取外框,套用後預覽,喜歡就直接下載,非常簡單!文章最前面的免費資源網路社群畫面縮圖就是以 BrowserFrame 製作產生。

網站名稱:BrowserFrame
網站鏈結:https://browserframe.com/

使用教學

STEP 1

開啟 BrowserFrame 後先從右側找到上傳功能。

可以輸入網址直接產生擷圖,或點選其他部分跳出提示,可上傳、使用自己的圖片。

STEP 2

接著從左側選單點選要套用的瀏覽器視窗外框,選擇後右邊的圖片會即時更新。

BrowserFrame 提供的瀏覽器選項很多,包括 Windows、Mac 兩大常見的作業系統,還有不同的配色佈景主題,比較可惜的是沒有提供行動裝置版本。在選單裡可找到 Google Chrome、Firefox、Opera、Safari、IE 和 Edge。

STEP 3

在左下角還有一些細節設定,像是視窗顏色、寬度、高度或間距等等,有需要微調的話可以試試看從這裡調整。

最後,按下右下角的綠色「下載」按鈕就會取得視窗擷圖,如果要重新製作,則是點選旁邊的「取消」叉叉圖案,整體操作並不會太難,而且製作出來的擷圖效果相當理想,推薦給需要的讀者朋友試試。

值得一試的三個理由:

  1. 輸入網址就能線上擷取網頁畫面產生擷圖
  2. 套用各種不同瀏覽器外框,包括 Windows 和 Mac
  3. 一鍵下載圖片,可針對細部選項進行設定微調