[筆記] 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

技術筆記相關文章

  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 7 )
  • [筆記] Ultimate AWS Certified Developer Associate (116)
  • [筆記] 前端開發 – 微信 Wechat 瀏覽器 Debug
  • [筆記] Ultimate AWS Certified Developer Associate (115)
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 6 )
  • [筆記] Element Plus UI 將 el-tag 的文字變成可依照大小「自動換行」
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 5 )
  • [筆記] Ultimate AWS Certified Developer Associate (114)
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 4 )
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 3 )
  • [筆記] 用 Svelte 製作 UI 元件前要先知道的 Shadow DOM 和 Custom Element
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 2 )
  • [指南] 初探 – 用 Svelte 製作一個 UI 元件
  • [筆記] Ultimate AWS Certified Developer Associate (113)
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 1 )
  • [筆記] Ultimate AWS Certified Developer Associate (112)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (26)
  • [筆記] Ultimate AWS Certified Developer Associate (111)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (25)
  • [筆記] Vue3 Keep-alive 的操作注意事項
  • [筆記] 網頁 UX 優化 – 用 Gmail 開啟一封新信件表單
  • [筆記] Ultimate AWS Certified Developer Associate (110)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (24)
  • [筆記] Total TypeScript – 解析 TypeScript 所給的錯誤訊息 讓你能夠看懂
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (23)
  • [筆記] Ultimate AWS Certified Developer Associate (109)
  • [筆記] Vue3 加入 Google Analytics 4 心得
  • [筆記] Ultimate AWS Certified Developer Associate (108)
  • [指南] Nuxt3 腳本撰寫採坑記錄
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (22)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (21)
  • [筆記] Ultimate AWS Certified Developer Associate (107)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (20)
  • [筆記] Ultimate AWS Certified Developer Associate (106)
  • [筆記] Vue 監聽頁面離開、關閉的方法
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (19)
  • [筆記] Ultimate AWS Certified Developer Associate (105)
  • [筆記] Vue3 中 reactive 響應式操作陣列 array 的注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (104)
  • [筆記] Ultimate AWS Certified Developer Associate (103)
  • [筆記] Vue3 中用安全的方法取得 Proxy 的值
  • [筆記] Ultimate AWS Certified Developer Associate (102)
  • [筆記] Sheet JS – xlsx 雙向輸出的 JSON XLSX 轉換套件
  • [筆記] Ultimate AWS Certified Developer Associate (101)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (9)
  • [筆記] Nuxt 整合 Sentry Sass 服務導入筆記
  • [筆記] Vue 3 整合 Sentry Sass 服務導入筆記
  • [筆記] Ultimate AWS Certified Developer Associate (100)
  • [筆記] Ultimate AWS Certified Developer Associate (99)
  • [指南] 使用 vue-qrcode 套件出現 No input text 解決方法
  • [筆記] Ultimate AWS Certified Developer Associate (98)
  • [指南] Google Tag Manager 幫 GA 加上 onChange 監聽事件
  • [筆記] Ultimate AWS Certified Developer Associate (97)
  • [筆記] Ultimate AWS Certified Developer Associate (96)
  • [筆記] CSS 的 height auto, initial, inherit 的區別
  • [筆記] Ultimate AWS Certified Developer Associate (95)
  • [筆記] iOS Safari 對於 100vh 的解讀和調整
  • [筆記] Ultimate AWS Certified Developer Associate (94)
  • [筆記] 電腦版上的 hover 效果在手機版的替代方式
  • [筆記] Ultimate AWS Certified Developer Associate (93)
  • [筆記] Ultimate AWS Certified Developer Associate (92)
  • [筆記] 升級 Mac 系統版本 VS Code 出現 Unable to find a Git executable 錯誤解決辦法
  • [筆記] Ultimate AWS Certified Developer Associate (91)
  • [指南] 使用 Bootstrap 的排版系統邏輯時，如何讓卡片維持等高
  • [筆記] Ultimate AWS Certified Developer Associate (90)
  • [筆記] Ultimate AWS Certified Developer Associate (89)
  • [筆記] Country Region Data – NPM 上共同維護的國家地區資料
  • [筆記] Ultimate AWS Certified Developer Associate (88)
  • [筆記] Ultimate AWS Certified Developer Associate (87)
  • [指南] 整合 Google Tag Manager 和導入 Google Analytics 4 概念和問與答
  • [筆記] Ultimate AWS Certified Developer Associate (86)
  • [筆記] Ultimate AWS Certified Developer Associate (85)
  • [筆記] Ultimate AWS Certified Developer Associate (84)
  • [筆記] Vue3 TypeScript 版本的 JSON Editor – vue3-ts-jsoneditor
  • [筆記] Ultimate AWS Certified Developer Associate (83)
  • [指南] Better Ruler 前端開發必備的網頁測量小工具
  • [筆記] Ultimate AWS Certified Developer Associate (82)
  • [筆記] TypeScript Eslint 解決 ES2015 module syntax is preferred over custom TypeScript modules and namespaces. 錯誤
  • [筆記] TypeScript + Vite + Vue3 使用 setup 無法使用 Enum 的探究和解法
  • [筆記] Ultimate AWS Certified Developer Associate (81)
  • [指南] WangEditor 點選工具列選單 噴出 Unable to preventDefault inside passive event listener invocation 錯誤
  • [指南] 用 FormData 傳送 array 陣列資料的幾種方法
  • [筆記] 透過 CSS 將文字以直式的方式呈現
  • [筆記] Ultimate AWS Certified Developer Associate (80)
  • [指南] 前端開發必備 JSONPlaceholder 讓你輕鬆獲取假資料填充網頁
  • [筆記] Ultimate AWS Certified Developer Associate (79)
  • [筆記] Google Tag Manager 之 GA 事件參數取得的各種方法
  • [筆記] Ultimate AWS Certified Developer Associate (78)
  • [指南] 如何讓使用者點擊一個圖片連結，是直接下載而不是在畫面上顯示
  • [筆記] Pure CSS 打造右側出現的 OffCanvas 效果
  • [筆記] Ultimate AWS Certified Developer Associate (77)
  • [筆記] 在 Vue 中用 Vanilla JavaScript 方法來打造無限滾動 Infinite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (76)
  • [筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll
  • [筆記] Git rebase 專案的第一筆 commit
  • [筆記] Ultimate AWS Certified Developer Associate (75)
  • [筆記] Ultimate AWS Certified Developer Associate (74)
  • [筆記] 使用 Normalize.css 時，請記得調整 box-sizing 計算方式
  • [筆記] Ultimate AWS Certified Developer Associate (73)
  • [筆記] CSS 製作漸層色的邊框
    • 按讚加入粉絲團

    延伸閱讀