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

Posted onAuthorANDY LIEN

章節連結

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

下載並安裝

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

如何使用

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

技術筆記相關文章

  • [筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 12
  • [筆記] 2024 從 Jest 轉移到 Vitest 過程筆記
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 11
  • [筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 10
  • [筆記] Vite Plugin 生產正式環境下 過濾 Public 資料夾
  • [筆記] 如何在桌機瀏覽器上模擬 touch 事件
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 9
  • [筆記] Vueform Vue3 Multiselect 封裝
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 8
  • [筆記] Vite 開發與生產環境，注入內容到瀏覽器 window 物件中
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 7
  • [筆記] Promise.allSettled TypeScript 和批次 Batch 發送寫法
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 6
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 5
  • [筆記] HTML Vue3 Click Outside 實作與誤區
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 4
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 3
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 2
  • [筆記] 讓 SVG 得以自適應寬高縮訪放的方法
  • [筆記] Express + TypeScript + http-proxy-middleware 架設簡易開發 Proxy 伺服器
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 1
  • [筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest
  • [筆記] 解決 Google Chrome 的 Added non-passive event listener to a scroll-blocking event 錯誤
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 80
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 79
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 77
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 76
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 75
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 74
  • [筆記] 增加 Dev Proxy 的指向彈性 – 多個 Axios 實例 Instance
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 72
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 71
  • [筆記] Tailwind CSS Safelist 設定
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 70
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 69
  • [筆記] 純 CSS Blur 創造模糊效果
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 68
  • [筆記] Vue3 搭配原生 swiper js 進行使用
  • [筆記] 使用 Google Maps 的自製地圖 iFrame 來標示多個地點
  • [筆記] Vue3 onMounted 無法獲得 DOM 的原因和解法
  • [筆記] JavaScript 跨日判斷與非連續時間範圍檢查
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 67
  • [筆記] Jest Vue3 測試含有 Teleport 的元件
  • [筆記] 理想中的 HTML Modal 切版作法
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 66
  • [筆記] JavaScript HTML 多個 Modal 避免底層捲軸滾動
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 65
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 64
  • [筆記] npm-run-all 傳遞參數
  • [筆記] Vue3 Jest Composition API Setup TypeScript 測試取得 computed 的型別
  • [筆記] unplugin-icons 搭配 Jest 使用時得以編譯過的方法
  • [筆記] Vue3 TypeScript Vite 多頁面模版製作開發心得
  • [筆記] 在 pnpm 上使用 npx 語法
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 60
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 58
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 56
  • [筆記] HTML height:0 到 height: auto 的動畫效果實現
  • [筆記] 如何隱藏 Scrollbar 但保有滾動效果
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 52
  • [指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法
  • [筆記] Chrome DevTools 改寫特定 API 的 Respose Header 加速開發
  • [筆記] Nuxt 關於 SCSS 的引入寫法注意事項
  • [筆記] Sticky Footer 實作方式收集
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 44
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 43
  • [筆記] Node.js Express 撰寫單元測試 Unit Test 思路和踩坑記錄
  • [筆記] QR Code 之 Quiet Zone 的重要性
  • [指南] 從頭開始 – 前端網頁工程師之開發環境架設
  • [筆記] 在一台電腦上 操作多個 Git Config
  • [筆記] HTML5 InnerHTML InnerText 的差異
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 21
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 29 – Toast
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 28 – Modal
  • [面試] 2024 前端工程師面試心得
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 26 – Progress Bar
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 25 – Skeleton
  • [筆記] HTML z-index 父層 子層 和 Stacking Context
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 24 – Spin
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs
  • [筆記] Vue3 Teleport Drawer 抽屜實作心得
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 21 – Drawer
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 6
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 20 – Select
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 19 – Dropdown
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 18 – Breadcrumbs
  • [筆記] Ultimate AWS Certified Developer Associate (178)
  • [筆記] Ultimate AWS Certified Developer Associate (177)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 17 – Infitite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (176)
  • [筆記] Ultimate AWS Certified Developer Associate (175)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 16 – Table
  • [筆記] 使用 Vite TypeScript 模版開發一個 npm 套件
  • [筆記] Ultimate AWS Certified Developer Associate (174)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 15 – Carousel
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 14 – Card
    • 按讚加入粉絲團

    延伸閱讀