文章彙整

Chrome瀏覽器插件 “Full Page Screen Capture”分享響應式網頁設計版面截圖

By Steffi 1 year agoNo Comments
首頁  /  網頁視覺設計  /  Chrome瀏覽器插件 “Full Page Screen Capture”分享響應式網頁設計版面截圖

之前介紹過響應式網頁測試工具Resizer,今天要再介紹一個工具,解決你使用Photoshop來預覽所有網頁設計,以及花很多時間進行多個瀏覽器修改的不便。

若你處於前端網頁開發階段,並希望快速分享實際結果的網頁截圖,Google Chrome的擴充套件“Full Page Screen Capture” (全頁截圖) 可協助你更加快速地處理,而不是尚未在瀏覽器上測試過的理論設計

你也不需再剪下或貼上圖檔!

首先,打開Google Chrome瀏覽器,並於Chrome Web Store ( Chrome 的網路商店 )取得Chrome Extension( Chrome擴充套件 )

 

選擇 “Add To Chrome” (加入Chrome)並且安裝於你的瀏覽器。若有需要的話,重新開啟你的瀏覽器或電腦

代表 “Full Page Screen Capture” (全頁截圖)的小圖示會顯示於你的Chrome瀏覽器的選單列上

前往你想要截圖的網站並且點選 “Full Page Screen Capture”(全頁截圖)的小圖示進入以下截圖處理中畫面

當截圖處理中時,請不要點選任何項目,不然會被取消處理

當截圖完成後,會開啟一個 “Full Page Screen Capture”(全頁截圖)的新頁籤。一個全頁解析度截圖會顯示於頁面正中間。於圖上點右鍵並且儲存圖片。

網頁擷取-響應式設計版面

若你想要看到你所在網頁的響應式設計版面,點選F12以開啟Chrome Developer Tools(Chrome開發者工具)。這些工具讓你可以測試你所在頁面的不同解析度尺寸。

 

若你無法看見裝置選項,須確認在Developer Tools(開發者工具)工具列的藍色”Toggle device toolbar”已被選取

點選 “Full Page Screen Capture”(全頁截圖)的小圖示來擷取響應式的版面

於圖上點選右鍵來儲存你的響應式版面的整個解析度截圖

注意事項

網頁上互動式的內容和固定的物件可能無法正確地顯示於頁面截圖。你需不啟用或固定互動式的物件處在你所希望顯示於截圖的畫面。或者,在你送交截圖前,你可以使用第三方圖片編輯工具來優化你的截圖

取得 Google Chrome

取得 Full Page Screen Capture Extension(全頁截圖)套件

延伸閱讀:響應式網頁開發測試工具Sizzy

如何設計響應式電子郵件

更多電商實用資訊,別忘鎖定我們的電子報,以及Facebook粉絲專頁,每天固定更新發文唷!

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網頁視覺設計

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。