1. 首頁
    2. >>
  2. 筆記 Notes
    3. >>
  3. [筆記] MarkMan 跨平台 設計稿標註與量測工具

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

Posted onAuthorANDY LIEN

章節連結

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

下載並安裝

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

如何使用

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

技術筆記相關文章

  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 12 – GCP Security Rules
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 17 – Card 卡片
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具
  • [筆記] 初次開發 Google Chrome 套件時要注意的事項
  • [指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 15 – 摺疊面板
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 14 – 導覽元件
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 13 – 通用設計
  • [指南] Vue3 搭配 vue-i18N 的全域注入設定
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 12 – 色彩
  • [筆記] 用 vuex-persistedstate 來保持你的 vuex 狀態
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 佈署階段
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 開發階段
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 11 – 文字
  • [筆記] 用 Python 批次轉換經緯度實作 – 注意事項
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 10 – 連結和圖示
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [指南] JSON Formatter / Differ 驗證和比較你的 JSON 檔
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [指南] AbuseIPDB 查詢和回報可疑的 IP 位置資訊
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 5
  • [指南] Vue-Cli 發佈時輸出 Copyright 於 CSS 和 JS 檔內
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 4
  • [筆記] Bootstrap 5 新增自適應 RWD 的字體大小
  • [筆記] JavaScript 強迫終止瀏覽器的 Request 指令
  • [筆記] Google Chrome 實驗中的便利新功能 – 閱讀清單
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 3
  • [筆記] Bootstrap 5 Icons 無論你是否有用 Bootstrap 都可用
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 2
  • [筆記] JQuery 中的 .data() 方法妙用
  • [指南] IconDuck 免費圖示 ICON 集合下載站
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 15
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 14
  • [指南] 用 Vue-SFC-Rollup 開發 Vue 2 版本套件
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 13
  • [指南] Kaspersky Mac 造成的 curl 連線失敗問題解決方式
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 12
  • [指南] 用 Python 批次轉換經緯度實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 10
  • [筆記] Python3 Portable 免管理員權限版本
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 6
  • [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件
  • [指南] JSON Diff – 讓你快速判別兩個 JSON 檔間的差異
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 5
  • [筆記] Google / 百度 Baidu 中文地址轉換經緯度平台
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 4
  • [筆記] ECharts 客製化 Tooltip
  • [筆記] jQuery Bootstrap 藉由 CSS 開關調整 Dropdown 的方式
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 3
  • [筆記] jQuery DataTable 輸出 Excel 的設定調整初嘗試
  • [筆記] Vue3 / Vue-cli4 與 Vuex, TypeScript 和 Vue-i18N 的實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 2
  • [筆記] Vue3 / Vue-cli4 在 Composition API 中取得 Vue Instance
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 16
  • [筆記] WordHTML 將 Word 排版迅速轉換成 HTML 格式
  • [筆記] 將 Google Sheet 變身成 API Server ( 匯入 JSON 和輸出 JSON )
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 14
  • [筆記] Textgen 附有白話、文言文等選項的中文假字產生器
  • [指南] 整合 Vue-i18N 國際化 和 TypeScript 到現有的 Vue 2.X 專案
  • [指南] 前端開發 JSON-server 由多個 json 檔來快速模擬 Restful API
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 10
  • [指南] jQuery 浮動跳出框 ( Modal ) 的按鈕事件記得取消
  • [指南] 來訓練你對字距的感覺 前端設計 KernType
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip
  • [指南] 輕量化的 JavaScript i18N 多國語言套件
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9
  • [筆記] jQuery 搭配 Async / Await 一同使用
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
  • [指南] Amazon Amplify 初探 – 佈署一個結合身分認證的 Vue.js 應用
  • [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
  • [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • [筆記] Lodash 比較物件 Object 是否更動的一些細節
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [指南] Vue TestCafe + TypeScript 導入 E2E 測試
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [指南] Windows 中用 DOS 輸出資料樹狀圖
  • [指南] Amazon EC2 安裝 Matomo ( Google Analytics ) 來代替 Google Analytics
    • 按讚加入粉絲團

    延伸閱讀