內容目錄
做網站設計—靈感！是很重要的一環，但是靈感這種東西是可遇不可求的，現在的設計師都常時間的坐在辦公室要怎麼去獲取靈感呢？通常我們都會大量的看不同類別的網站，看看不同網站設計師的設計巧思及其風格，慢慢改進自己網站的外觀設定。觀看其他企業的網站會常常遇到一個問題就是光光用畫面沒有辦法擷取到最正確的顏色，所以今天鵠學苑就要來介紹一個 Google Chrome 插件 “ brandfetch “ 利用這個插件就可以看到所有網站的主題顏色搭配、 Logo 和 Banner。對於會需要用到某個服務的標誌或顏色就不用再進去原始碼搜尋，是非常方便的工具。要怎麼去操作呢？就繼續跟著鵠學苑一起學習吧！歡迎回到鵠學苑 – WordPress 網頁設計超詳細攻略，接下來跟著鵠學院的腳步，讓我們開始學習吧！
Brandfetch 官方網站
https://brandfetch.io/
Chrome 線上應用程式商店
https://chrome.google.com/webstore/category/extensions
Brandfetch 是什麼
” Brandfetch “就是一個免費的 Chrome 擴充功能，可以快速的擷取網站資訊（其中包括：網站的Logo、顏色、字型和Banner等資訊）。但是這邊要大家注意的是雖然是免費的插件但是數量上是受到限制的！這個工具每個月只有300次的查詢機會，當然沒關係如果你覺得300次一個月太少不夠用沒關係，只需要換一個Mail重新登入就可以繼續使用了，在Mail的數量上倒數沒有做出限制，接下來就繼續學習如何下載吧！
如何下載 Brandfetch 插件
下載方式：點擊Chrome的線上應用程式商店，直接搜尋 “ Brandfetch ” 就可以找到下載插件的窗口。下載完成就可以開始進行設定了！
網頁設計配色網站分享與介紹（三）- Google Art Palette
https://www.design-hu.com.tw/webmaster-toos/google-art-palette.html
Photoshop 版面尺寸 – 修改圖片比例讓網頁圖片具有整齊統一樣式
https://www.design-hu.com.tw/wordpress/wordpress-tools/photoshop-edit-canvas-size.html
開始設定 Brandfetch
設定方式：點擊 Brandfetch 的插件就可以開始使用，但是第一次使用就會被要求輸入 Acces Token，輸入自己的Mail就會得到存取代碼，把取得的代碼輸入進去就可以開始使用了！設定完成後就來看看 Brandfetch 的功能有那些吧！
網頁 icon 資源分享 （一）- iconbros 及 ElegantThemes 介紹與使用方式
https://www.design-hu.com.tw/webmaster-toos/iconbros-elegantthemes.html
Brandfetch -查看網站外觀設定
功能介紹：進入隨便一個網站後，點擊 Brandfetch 按鈕後就可以開始使用了，你會看到插件視窗上顯示網站的Logo、顏色、字型和Banner。當然用鼠標點選就可以下載網站的Logo，再來點選顏色就可以複製顏色代碼到剪貼布，不用到後台程式看所以操作起來十分方便簡單。當然不同的網站都可以進行操作。
也可以在官方網站上進行操作，只需要輸入企業名稱就會自動搜尋（這個就不是每個網站都搜尋得了）
搜尋結果一樣會按照分類把關於這個網站外觀設定告訴你。
Google、Adobe 開放思源宋體 Noto Serif CJK 原始碼！免費字型下載！
https://www.design-hu.com.tw/webmaster-toos/noto-serif-cjk.html
結語：
Brandfetch能夠快速的分析網站外觀設定，而且不需要進行後台操作就可以把裡面的內容擷取下來！對剛剛開始了解網頁設計的人來說是很好的學習工具，可以開始了解顏色之間需要如何搭配才能呈現更好的網站內容！今天的教學到這裡告一段落了，不要忘記點擊 訂閱鵠學苑電子報 ，確保收到最新 WordPress 教學文章，如果有 網頁設計 相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
站內相關文章：
網站架設知識推薦閱讀：
如何使用 Elementor 建立 WooCommerce 單一商品頁？圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學
