TinySnap 製作好看網頁擷圖的神器，內建編輯器與多種實用功能（Chrome 擴充功能）

平時工作上經常會需要拍攝螢幕畫面，我已經很習慣使用 Mac 內建擷圖功能（可參考另一篇「變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名」），然後搭配 Shottr、Skitch 進行編輯，雖然這兩個程式本身有擷圖選項但還是偏好分開進行。如果你想要製作好看的網頁擷圖，現在也有不少瀏覽器擴充功能可以做到，除了擷圖還內建編輯器，讓使用者可以對擷圖進行美化或是簡單編輯。

本文要介紹的「TinySnap」是免費瀏覽器擴充功能，主要特色是能製作出很美觀、具有質感的擷圖，依照說明，TinySnap 適用於所有人，特別是為創業者、開發者和營銷團隊建立的螢幕截圖軟體，幾乎不用任何學習時間、技巧就可以製作出很精緻精美的螢幕擷圖，也能依社群平台快速裁切為最合適的尺寸。

不僅如此，TinySnap 還提供使用者選擇自己的圖片帶入編輯器，或是將程式碼轉為圖片。

TinySnap 將擷圖變成三個簡單的選項：擷取可見區域、選定區域或是整個頁面，本身就自帶自動滾動擷取完整頁面的功能，在擷取後就會對擷圖加入陰影、漸層背景效果，直接讓擷圖更有質感。此外，還有一些標記、線條、箭頭、文字工具，也能調整邊框距離、陰影、位置、背景、邊框、影像大小或加入浮水印，這些功能都很實用，讓使用者可以快速製作出好看的網頁截圖。

雖然 TinySnap 有分為免費、付費版（TinySnap Pro），但 99% 功能在免費版都能用！而且也沒有任何限制，除非需要用到雲端儲存、產生分享鏈結、加入步驟註釋或表情符號才需要升級，使用者可在沒有付費情況下享受到這個外掛程式的強大功能。

TinySnap
https://tinysnap.app/zh-tw/

免費下載 TinySnap
Chrome 線上應用程式商店 | Microsoft Edge Addons

使用教學

STEP 1

開啟 TinySnap 應用程式商店頁面，點選「加到 Chrome」下載、安裝，TinySnap 也有在 Edge 外掛程式商店上架，可依照自己的需求進行選擇。

安裝後點選右上角 TinySnap 功能，會顯示三個主要的擷圖選項，分別是擷取可見區域、選定區域或整個頁面，除此之外，使用者也能選擇本地圖片帶入編輯器，或是開啟一個「程式碼轉為圖片」功能。

其實大部分製作網頁長擷圖、將完整頁面轉為圖片的技術都類似，就是以自動滾動方式擷取，最後將所有擷圖組合成單張圖片，對於要從頭到尾部完整截取就會很有用，不過最大影像高度是 10000 畫素。

STEP 2

擷取後就會將圖片自動帶入 TinySnap 編輯器，因為有中文介面，操作上感覺更親切，右側可調整內外邊距、圓角弧度、陰影、圖片位置、背景、邊框、影像比例或加入浮水印，在預設情況下都不進行任何調整看起來就已經很專業，設定任何選項時會即時呈現預覽圖。

STEP 3

上方是圖片編輯功能時常會看到的工具，像是加入矩形、圓形、線條、箭頭、文字、畫筆工具等等，也可選擇顏色或是粗細大小。

STEP 4

另一個預設不會出現、但可能很多使用者會用到的功能就是加入「邊框」，可選擇 macOS 或 Windows 淺色或深色模式，就能在圖片加上視窗效果，更像是直接從視窗中擷取後的樣式。

TinySnap 還有一個很值得推薦的功能是調整「影像比例」，除了幾個經常用到的圖片大小，還能找到各種常見常用的社群平台建議的圖片尺寸，這個功能直接節省後續還要使用者手動編輯調整的時間。

STEP 5

最後再來推薦一下 TinySnap 可以為擷圖加上「浮水印」的功能，只要將右下角浮水印打開、設定要顯示的浮水印文字、顏色、透明度、方向，就會在擷圖上面快速打上浮水印囉！若擔心浮水印會影響畫面，還能選擇「只在背景上顯示」，下圖就是浮水印效果（看起來很不明顯，可自己調整選項）。

如果要在浮水印使用自己的品牌 LOGO 需要付費升級 TinySnap Pro 才能開啟這項功能。

從右側的背景功能快速切換純色或是漸變色背景，選擇 Unsplash 圖庫背景也是付費功能。

STEP 6

編輯完成後點選右上角「完成」就會顯示複製或儲存選項，儲存時會使用 PNG 格式保存到裝置上。

STEP 7

順帶一提，TinySnap 除了支援使用者將現有圖片匯入編輯器外，也提供一個「將程式碼轉為圖片」功能，這個就和之前介紹過的線上工具類似，可以將一段程式碼以更好看的方式轉為圖片，選項上和編輯器差不多，只差在可選擇程式語言類型（應該是能帶入高亮效果），有需要的朋友可以玩玩看。