高速提升網頁設計執行時的效率，幫助設計師省下瑣碎的複雜工作時間

有別於平面設計這類的「實體輸出」工作，對於網頁設計師來說，執行網頁專案時，除了會使用到的主要工具例如 Photoshop、Illustrator 等之外，其實通常還會伴隨用到其他工具作輔助，例如說想快速了解使用者瀏覽網頁時的「真實體驗」時該如何判斷？在設計會議時，要如何呈現競爭對手的網站各種畫面？還有許多設計過程會碰到的細節，這裡我先列出五大常用的輔助工具，來幫助網頁設計師提升工作效率。

改變瀏覽器視窗大小

工具名稱：Window Resizer

簡介：Chrome 瀏覽器的擴充外掛套件，一鍵安裝超快速。使用它可以快速改變瀏覽器的視窗大小，可以儲存常見的網頁尺寸例如 1920×1080、1440×900、1366×768，包含平板和行動版尺寸。幫助網頁設計師在瀏覽其他網站時可以了解實際使用者看到的畫面是什麼、感受是什麼，尤其是現在很多設計師的電腦都是高解析度超過 2K、4K等更需要這個工具。另外，當我們要展示各種螢幕尺寸的網頁時也比較容易拉到正確比例，而不是用手動方式去大概抓一下比例。

下載網址：連結

捕捉網頁截圖

工具名稱：FireShot

簡介：可以快速捕捉整個網頁頁面或整張網頁，變成圖檔，然後下載使用。我們通常在做競爭網頁比較、優秀網頁參考，甚至有可能要講解網頁的設計時會用到網頁截圖。以往沒有使用專門工具是就是用 Printscreen 截「電腦螢幕圖」然後貼到 Photoshop 進行拼接，煞是麻煩。而這工具同樣可以一鍵截網頁圖檔，快速又方便！
下載網址： 載點

取得網頁中的所有圖片

工具名稱：網頁圖片取得

簡介：可以取得目前網頁中的的圖片，將圖片排列出來，取得網址。有時候在做參考圖片蒐集時超好用！在任一網頁按右鍵 > 取得網頁中的圖片，就完成此網頁的所有圖片抓取，可以直接下載或複製圖片網址連結。而有時候想抓某網頁的某張圖，但該圖片不容易抓取，因為寫在 css 的 background-image 語法中，無法右鍵下載，對於程式生手來講增加了困難度，而此工具也能解決這個問題！
下載網址：連結

字型分析

工具名稱：WhatTheFont!

簡介：用圖片尋找字型，這聽起來真得很神！有時候在逛網站時發現真的超美或特別的字體，想了解該作者或設計師是使用哪種 Font，礙於對於像海量的字體無法一一印在腦中。使用這工具 WhatTheFont 可以辨識字體然後去撈出相似的字體類型，我試了幾次雖然並不一定每次都很準，但至少可以找到好幾款相似度高的選擇，其實也是不錯的ㄅ
下載網址：載點

網頁字體

工具名稱：Google Fonts

簡介：免費可商用，英文字體，上百種任你挑選。但中文字體怎麼辦？對於網頁設計師來說，「中文網頁字體」真的是相當稀有且珍貴，能用的比印刷輸出、平面設計少得太多太多了！Google 和 Adobe 合作推出的免費字體，支援多國語系，而中文思源黑體更是中文網頁字體的救星！不用再使用微軟出的微軟正黑體或標楷體啦！同樣可以在 Google Fonts 中尋找，記得繁體中文是選用 Noto Snas TC。

Google Fonts：前往開心地瀏覽
Noto Sans TC 思源黑體，下載網址：載點

另外，想獲取更多所有合法商用的中文字體，可以另外參考這篇文章：25 個合法免費高品質字體 (附載點)，雖然文章中不是所有字體都是可以用在網頁上，但至少在進行網頁的視覺設計也可以使用，例如可以用在主視覺做成圖片放在網站上也是方法之一。