[筆記] MarkMan 跨平台 設計稿標註與量測工具

Posted onAuthorANDY LIEN

章節連結

前幾週在六角學院的線上課程看到有個好用的 MarkMan 線上平台工具可以使用，讓你可以輕鬆的讀取和量測圖片上的顏色、大小。雖說不能夠讀取圖片上的字體，但在不開啟如 Photoshop 之類的軟體就能達到工作需求，算是很實用了。
markman logo

下載並安裝

1. 登入 MarkMan 官網後，點選左方的下載按鈕開始安裝
markman official website 2. 此安裝包是利用 Adobe AIR，如果沒有這個軟體的，要先上 Adobe 的官網下載，才能成功開啟安裝檔
markman website download

如何使用

1. 開啟程式後，就將要用來分析的圖片運用”拖拉放”的技巧到程式畫面中央。
markman screen2. 完成了。你可以運用下方的滴管和量測尺，就可以得知色碼(Hex)和距離像素。
markman demo markman logo demo2

技術筆記相關文章

  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (40)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)
  • [筆記] Ultimate AWS Certified Developer Associate (27)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 10 Mongoose 額外補充和模組化
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (36)
  • [筆記] Ultimate AWS Certified Developer Associate (26)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 9 Mongoose 連線基本操作
  • [筆記] Ultimate AWS Certified Developer Associate (25)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (35)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 8 – Promise, async 和 await
  • [筆記] Ultimate AWS Certified Developer Associate (24)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (34)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 7 – MongoDB 操作 CRUD 相關指令(下)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (33)
  • [筆記] Ultimate AWS Certified Developer Associate (23)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 6 – MongoDB 操作 CRUD 相關指令
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (32)
  • [筆記] Ultimate AWS Certified Developer Associate (22)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (31)
  • [筆記] Ultimate AWS Certified Developer Associate (21)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 5 – MongoDB 環境建置
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (30)
  • [筆記] Ultimate AWS Certified Developer Associate (20)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (29)
  • [筆記] Ultimate AWS Certified Developer Associate (19)
  • [指南] Heroku 自動佈署子資料夾的專案
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 4 – 佈署到 Heroku 遠端
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (28)
  • [筆記] Ultimate AWS Certified Developer Associate (18)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 3 – POSTMAN 和自建 TodoList API Server
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (27)
  • [筆記] Ultimate AWS Certified Developer Associate (17)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 2 – npm
  • [筆記] 前端、行銷需知道的 GTM 綁定 Google Analytics 用 JavaScript 客製化追蹤
  • [筆記] Ultimate AWS Certified Developer Associate (16)
  • [筆記] 前端特殊字元處理邏輯
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 1 – Node.js 介紹和 node 模組原理
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (26)
  • [筆記] Ultimate AWS Certified Developer Associate (15)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (25)
  • [筆記] Ultimate AWS Certified Developer Associate (14)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (24)
  • [筆記] Ultimate AWS Certified Developer Associate (13)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (23)
  • [筆記] Ultimate AWS Certified Developer Associate (12)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (22)
  • [筆記] Ultimate AWS Certified Developer Associate (11)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (21)
  • [筆記] Ultimate AWS Certified Developer Associate (10)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (20)
  • [筆記] Ultimate AWS Certified Developer Associate (9)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (19)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (18)
  • [筆記] Ultimate AWS Certified Developer Associate (8)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (17)
  • [筆記] Ultimate AWS Certified Developer Associate (7)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (16)
  • [筆記] Ultimate AWS Certified Developer Associate (6)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (15)
  • [筆記] Ultimate AWS Certified Developer Associate (5)
  • [筆記] PHP 中傳入 JavaScript 的參數值到網址列 Query
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (14)
  • [筆記] JavaScript 不重整頁面動態修改 URL 中的 Query 參數
  • [筆記] Ultimate AWS Certified Developer Associate (4)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (13)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (12)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (11)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (10)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (9)
  • [筆記] CSS all:revert – 讓 CSS 設定部分還原成瀏覽器預設狀態
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (8)
  • [指南] SVG Icons 提供 Single Path 的 SVG 檔案
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)
  • [指南] 免管理員權限 – 跨平台的 NVS 來管理多版本 Node.js + Git Bash + CMD
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)
  • [指南] Vuetify 2 Dark Mode 配色設定與一些細節
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)
  • [指南] 申請 Patreon 創作者的每月訂閱付款後台設定
  • [指南] 如何加入官方 Github Sponsors 的等候清單
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)
  • [筆記] 初探 WordPress Restful API – 用 JSON 方式取得文章
  • [指南] 替 Vue-SFC-Rollup 開發的 Vue 套件做個於 Github Pages 的 Demo 頁面
  • [筆記] BLISK 執行 Mobile Test 的實用瀏覽器
  • [筆記] Nuxt js 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page
  • [筆記] JavaScript 按鈕自動下載類型與程式碼
  • [筆記] Vue Router & Vuex 合用解決動態路由和重新整理刷新問題
  • [指南] Python 非管理員權限安裝並架設虛擬環境 Windows
  • [筆記] Google Adsense App 不能使用後的替代方案
  • [筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
  • [筆記] 用原生 JavaScript 製作 Debounce 效果
  • [指南] 免管理員權限安裝 MongoDB 本機端開發環境
  • [筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
  • [筆記] 使用 ASCII Tree Generator 視覺化工具產生樹狀圖
  • [筆記] jQuery css 加入 !important 的注意事項
  • [指南] IPInfo.io 查詢你的 IP 位置的相關細節資訊
    • 按讚加入粉絲團

    延伸閱讀