因為工作需要我每天都會用到螢幕擷取工具,以前多半是使用 TechSmith 的 Jing 做為首要選擇(後來已經以 TechSmith Screencast 替代),搭配上 Skitch 進行標註或是馬賽克處理,後來對 Mac 更熟悉就改用內建的擷取功能,內建的拍攝截圖工具可以變更預設檔案儲存格式、自動儲存路徑和快照檔名,搭配上 iCloud 或是其他同步工具就能在多台電腦間進行寫作。如果你平常比較沒有擷圖需求,但偶爾又需要保存網頁畫面的話,可以參考接下來要介紹的瀏覽器內建擷圖工具。
網站擷圖
Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形
網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。
ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果
早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。
Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用
ShotSherpa 利用全球各城市網路節點查看你的網站顯示效果
PicPick 全功能免費螢幕擷取軟體,內建編輯器和各項實用工具
以前在 Windows 都是用 FastStone Capture 做為擷圖軟體,後來才知道另一款 PicPick 也非常強大!雖然曾寫過介紹,不過已經有相當長的時間,剛好這幾天更新到全新 v5.0,介面全部換新,或許該找機會重新介紹一下了。PicPick 是一款全功能的設計工具,適合各種職業使用,更準確地說它就是一款螢幕擷取軟體,內建簡易圖片編輯功能,包括一些增強效果或畫線、箭頭、加入文字都可以做到,對於平常會需要用到畫面擷取功能的朋友來說是非常好的選擇。
Zoho Notebook 免費筆記應用可快速將網頁內容擷取保存
平常你都如何保存從網路上找到的重要內容呢?可能很多人習慣直接把網頁加入書籤,或是打開其他編輯器來複製、貼上,但隨著 Evernote 和 Google Keep 這類筆記工具出現其實存在雲端更方便,而現今大部分人的生活脫離不了行動裝置,這些工具也多半有對應的應用程式或手機版可以使用。如果你不希望遇到下次打開鏈結卻找不到內容的窘境,直接為網頁擷圖或將文字圖片備份下來是比較安全的方法。