Weebly 架站教學網站
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保

​2023 多媒體工具推薦 - 影音剪輯工具、色碼表、平面設計

ColorZilla - 線上顏色抓取工具

3/8/2021

0 評論

 
開始製作簡報、網站之後, 才深深體會到, 頁面的排版及色彩視覺感受絕對是在第一時間博得讀者的關注及繼續閱讀的重要關鍵. 除此之外, 對作品的專業形象有也有一定程度的加分效果. 一般我們最常使用的顏色挑選工具是色碼表, 或是文書編輯器 (例如: Word、PowerPoint)所提供的色盤.

不過, 這兩者所能提供的顏色有限. 如果你不是調色高手, 那麼, 可以利用平時瀏覽網站、社群媒體或是電子報時, 多注意頁面上的用色, 看到喜歡的顏色, 就用 ColorZilla 擷取並儲存顏色.  ColorZilla 除了可以即時辨別出該顏色的色碼代號, 也可以是你的顏色資料庫, 儲存你偏好的顏色.

圖片


​Colorzilla - Chrom 擴充應用程式

​如果你在某個網站看到喜歡的顏色, 很想知道它的顏色代碼, 那麼 ColorZilla 絕對是最佳工具.
只要開啟 ColorZilla, 將滑鼠移到該顏色, 就能馬上看到該顏色的色碼. 而且, 它會記錄你曾經搜尋的顏色. 對於有色彩相關需求的設計者來說, 真的相當實用.

按
這裡, 將 ColorZilla 加到Chrome.​
圖片

線上抓取顏色 + 顏色代碼

步驟: 
1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Page Color Picker Active"
圖片
​
​4. 這時, 你可以在瀏覽的網頁上任意移動滑鼠. 隨著滑鼠在網頁上移動時所感應到的顏色, 工具列上的色塊也會跟著改變
圖片

5. 最後, 將滑鼠移到你想要抓取的顏色區塊, 按滑鼠左鍵
  • ColorZilla 就會自動記錄該顏色.
  • 你可以馬上在頁面上方的黑色區塊, 看到該顏色的代碼. 
圖片

收藏/查看所有抓取過的顏色/代碼

步驟: 
1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Picked Color History"

可以在這裡, 看到所有曾經抓取的顏色.
圖片

分析網站配色

1. 將ColorZilla 加到 Chrome 之後, 就可以在網頁瀏覽器右上方看到 Colorzilla 的圖示 (滴管)
2. 點擊滴管圖示 > 功能表 (如下圖)
3. 點擊 "Webpage Color Analyzer"

Colorzilla會自動幫你分析這個網頁的用色及顏色代碼. 

圖片

透過ColorZilla, 可以隨時儲存喜歡的顏色, 建立自己的顏色資料庫. "顏色" 在一般的平面設計或是網頁設計都是佔有絕對重要的角色. 強化自己的戰備資源, 就能快速產出專業美觀的作品. 
0 評論



發表回覆。

    免費體驗 Weebly

    Weebly - Websites, eCommerce & Marketing in one place.


    RSS 訂閱

    多媒體工具

    線上平面設計工具 - Fotor
    ​線上平面設計工具 - Canva 
    一鍵快速去背/更換背景 - Picwish
    ​品牌商標設計, 自己來!
    ---------------------

    顏色抓取工具 - ColorZilla
    色碼表
    線上選色/ 配色工具
    ​
    ---------------------
    影音編輯 (簡易) - Bee Cut
    影音編輯 (簡易~中階): Filmora
    影音編輯 (簡易~中階): 威力導演
    --------------------- 
     
    ​螢幕錄製 - ApowerREC
    網頁擷取 - AwesomeScreenshot

    多媒體素材

    推薦圖庫 (背景圖、圖像)
    Icon/ 小圖示 素材
    ---------------------
    背景音樂 - Incompletech
    背景音樂 - Bensound
    ​背景音樂 - Youtube 音樂庫

    網站/網頁工具

    無效連結檢測工具
    ​隨身攜帶大容量網路空間推薦
    ​網站/網頁備份工具

    ​雲端空間一次付費, 終身使用-pCloud

    圖片


    Loading...

    類別

    全部
    Filmora
    PowerDirector
    去背/去除浮水印
    商標設計
    圖片編輯/ 平面設計
    威力導演 影音編輯
    影音編輯軟體
    線上平面設計工具 Canva
    線上平面設計工具 Fotor
    螢幕擷取工具
    螢幕錄影
    選色/配色工具


Weebly 架站教學


認識 Weebly
Weebly 架站四步驟
​Weebly 使用教學
第三方應用程式中心
Vertical Divider

Weebly 常見問題

Weebly 帳號
Weebly 付費/ 收據
Vertical Divider

推薦工具

線上平面設計工具
​多媒體工具
​多媒體素材
Vertical Divider

Weebly 客服中心

如何聯絡 Weebly 客服

Vertical Divider

關於我們

關於我們


版權聲明: 
本站發表的文章、圖片及電子書的版權均屬於本站所有, 如果有轉載需求, 請來信取得授權. 非經授權, 請勿轉載或轉貼. ​
Copyright © 2023
  • 架構網站 - Weebly
    • 網站的用途
    • 認識 Weebly >
      • 選擇 Weebly 七大原因
      • Weebly 的帳號種類
      • 網站管理
      • 網頁管理
    • Weebly 架站四步驟 >
      • Weebly 註冊 + 網域申請
      • 選擇/更換範本
      • 元件使用 - 網頁設計
      • 發佈/隱藏網站
    • Weebly 使用教學 >
      • Weebly 元件
      • 網站/網域設定
      • Weebly 部落格
      • 網頁標題
      • 網站安全 & SEO 優化
      • 第三方應用程式
    • Weebly 客服中心
  • 常見問題
  • 建立線上商城
  • 推薦工具
    • 多媒體工具
    • 多媒體素材
    • 網站/網頁工具
  • 關於我們
  • 公益/環保