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

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

---

下載並安裝

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

如何使用

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

---

技術筆記相關文章

[筆記] Nuxt Utils 搭配 Auto-Import 如何自定義分類

[筆記] TailwindCSS 4 修改 placeholder 顏色於 Chrome 瀏覽器失效的解決方案

[筆記] 原生 HTML Select 選項下拉符號 CSS

[筆記] 網頁測試各類測試檔案下載

[筆記] Line LIFF 初步串接 Vue3 設定心得

[筆記] 程式必修課！離散數學與演算法 – 142

[筆記] 監理站 Email 詐騙樣態

[筆記] Line SDK Web init 啟用限制

[筆記] 程式必修課！離散數學與演算法 – 139

[筆記] 瀏覽 Github Repository 出現 404 的幾種可能

[筆記] 程式必修課！離散數學與演算法 – 138

[筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch

[筆記] Buefy Material Design Icon 沒有顯示

[筆記] 程式必修課！離散數學與演算法 – 137

[筆記] 程式必修課！離散數學與演算法 – 136

[筆記] 程式必修課！離散數學與演算法 – 135

[筆記] 程式必修課！離散數學與演算法 – 134

[筆記] 程式必修課！離散數學與演算法 – 133

[筆記] 程式必修課！離散數學與演算法 – 132

[筆記] Sass @import 取消後 改用 @use 取代方法

[筆記] 程式必修課！離散數學與演算法 – 130

[筆記] og:image:width 和 og:image:height Facebook 分享圖片抓取

[筆記] 程式必修課！離散數學與演算法 – 129

[筆記] 程式必修課！離散數學與演算法 – 128

[筆記] 讓 Line Page Poker 得以暫時使用的方法

[筆記] Open Graph 設定與利用 opengraph.dev 檢查

[筆記] 程式必修課！離散數學與演算法 – 127

[筆記] 解決 Chart.js Canvas 元素造成的水平滾軸問題

[筆記] 程式必修課！離散數學與演算法 – 126

[筆記] CSS Grid 的 items-stretch 實現卡片等高佈局

[筆記] Requesty 結合 Roo Code 來替代 Github Copilot

[筆記] 解決 Cannot find type definition file for ‘../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts’ 問題

[筆記] 程式必修課！離散數學與演算法 – 125

[筆記] primevue/nuxt-module 升到 Nuxt4 錯誤暫時解法

[筆記] Nuxt 解決 non-passive event listener 問題

[筆記] Nuxt SSG Static Site Generation 動態路由產出方法與相關邏輯

[筆記] Nuxt navigateTo 跳頁強迫更新 layout 方法

[筆記] 手動移除 pnpm 方法

[筆記] Nuxt4 pnpm nuxt upgrade 指令升級錯誤依賴安裝儲存位置解決

[筆記] VueUse useIntervalFn 用法

[筆記] 程式必修課！離散數學與演算法 – 121

[筆記] 程式必修課！離散數學與演算法 – 120

[筆記] Primevue nuxt-module AutoImport tree-shaking 問題

[筆記] PrimeVue4 忽略 PrimeVue 的 computed Property 警告

[筆記] 程式必修課！離散數學與演算法 – 119

[筆記] 實作簡易 PrimeVue4 DataTable 卡片版本

[筆記] Nuxt3 切換頁面自動重置所有 Pinia Store 的狀態

[筆記] 程式必修課！離散數學與演算法 – 118

[筆記] Vue3 實作 Chart.js Composable – 以折線圖為例子

[筆記] ‘__VLS_ctx.$t’ is of type ‘unknown’ Vue-i18n

[筆記] 程式必修課！離散數學與演算法 – 117

[筆記] chartjs-plugin-datalabels 在 Chart.js 產出的圖表上加 label

[筆記] vue-router 避免跳頁傳送未事先定義的變數

[筆記] 程式必修課！離散數學與演算法 – 116

[筆記] PrimeVue4 參考既訂主題進行微調方法

[筆記] 程式必修課！離散數學與演算法 – 115

[筆記] PrimeVue4 利用 PanelMenu 和 TieredMenu 實作 Sidebar

[筆記] Nuxt3 使用 useState 於 layout、components、composable、middleware、pages 共享資料 – 全域登入與生成路由清單

[筆記] 程式必修課！離散數學與演算法 – 114

[筆記] Nuxt3 bundle 結果視覺化呈現 揪出那些特別龐大的 js

[筆記] VS Code 搭配 Nuxt3 解決 /.well-known/appspecific/** 問題

[筆記] 程式必修課！離散數學與演算法 – 113

[筆記] 程式必修課！離散數學與演算法 – 112

[筆記] 程式必修課！離散數學與演算法 – 111

[筆記] Tailwindcss 3 升 4 後維持原有 3 的樣式內容

[筆記] 程式必修課！離散數學與演算法 – 110

[筆記] wangEditor 5 搭配 Tailwindcss 4 的樣式衝突問題

[筆記] Vite 開發遇上 431 Request Header Fields Too Large

[筆記] 程式必修課！離散數學與演算法 – 109

[筆記] 動態監聽元素高度 JavaScript Vue 自製 hook

[筆記] 程式必修課！離散數學與演算法 – 107

[筆記] 實作 ColorPicker Vue3 元件

[筆記] Vue3 運用 Pinia 實踐前端篩選排序的邏輯建議

[筆記] VS Code 修正 command not found: code 錯誤

[筆記] 程式必修課！離散數學與演算法 – 105

[筆記] Vue3 實作拖曳點擊上傳結合圖片預覽元件

[筆記] 程式必修課！離散數學與演算法 – 104

[筆記] 端對端 E2E 前端測試 自動開啟瀏覽器 start-server-and-test

[筆記] 程式必修課！離散數學與演算法 – 102

[筆記] 調整系統時間 模擬未來 new Date()

[筆記] 程式必修課！離散數學與演算法 – 101

[筆記] 程式必修課！離散數學與演算法 – 100

[筆記] Node.js http-proxy-middleware 部分更改路由 pathRewrite

[筆記] Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

[筆記] import type 和 import 的差異 TypeScript

[筆記] Nuxt3 加入 Sentry 相關設定和注意事項

[筆記] 程式必修課！離散數學與演算法 – 97

[筆記] Vite-ssg 執行完成後進行自動化操作並壓縮

[筆記] 重新命名 Github Repo 名稱並更換已下載的 Repo 路徑位置

[筆記] 程式必修課！離散數學與演算法 – 96

[筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器 – 2

[筆記] 程式必修課！離散數學與演算法 – 95

[筆記] HTML 按鈕上用 after 偽元素作對角線

[筆記] 程式必修課！離散數學與演算法 – 94

[筆記] 程式必修課！離散數學與演算法 – 93

[筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器

[筆記] Nuxt3 使用錨點導航導致 router meta 資料遺失的替代方案

[筆記] 程式必修課！離散數學與演算法 – 92

[筆記] 用 media query 來撰寫僅支援 hover 的樣式

[筆記] 程式必修課！離散數學與演算法 – 91

按讚加入粉絲團

延伸閱讀

• [筆記] 老化全方位應對手冊 – 14
• [筆記] Nuxt Utils 搭配 Auto-Import 如何自定義分類
• [筆記] 老化全方位應對手冊 – 13
• [筆記] TailwindCSS 4 修改 placeholder 顏色於 Chrome 瀏覽器失效的解決方案
• [筆記] 原生 HTML Select 選項下拉符號 CSS