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

章節連結

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


下載並安裝

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

如何使用

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


技術筆記相關文章

  • [筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題
  • [筆記] 使用 Crypto.getRandomValues() 來抓取亂數
  • [筆記] Nuxt js 初探筆記 1 – 基礎環境建置
  • [筆記] Vuetify select autocomplete 套件限制多選數量
  • [筆記] 判斷瀏覽器為手機端還是 PC 端的方法
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 38 – 專案協作上的常見問題
  • [指南] 串接金流開發用 – 測試用信用卡產生器 Credit Card Generator
  • [指南] Emoji Finder 方便你於電腦中複製貼上 iOS 的表情符號
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 37 – 如何與工程師互動 2
  • [指南] Redirect Checker – 301, 302 以及更多的 http 狀態碼
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 36 – 如何與工程師互動
  • [指南] V-Calendar 限制時間選取範圍
  • [指南] Fast or Slow – 由 Wordfence 維護的網站測速工具
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 在靜態網站中獲取資訊
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 35 – 原型設計的種類與技巧
  • [筆記] Google SpreadSheet API V4 改版 – 當作前端開發所需的 API 來源
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 34 – 設計標註檔
  • [筆記] Echarts 利用 visualMap 讓折線圖實現分段不同顏色
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 BeautifulSoup 來解析網頁原始碼
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 33 – 切圖命名與格式
  • [筆記] 善用 ECharts 中的 MarkArea 和 MarkLine 來製作出圖表上區域色塊
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 32 – 設計規範
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 Requests 模擬請求和攔截回應
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 31 – 深色模式
  • [筆記] Dayjs 解決時區、夏令時間 和 UTC 間的轉換問題
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 從網頁溝通架構到爬蟲運作原理
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 30 – 頁面
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Python 的基本語法
  • [筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 29 – 改變頁面狀態來提升使用者體驗
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 28 – 響應式排版
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 網頁爬蟲的起源和處理策略
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 27 – 高轉換的登陸頁
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 資料科學與網頁爬蟲
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 26 – 模板
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 20 – GCP 儲存類別和生命週期
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 25 – 運用常見的介面版型排出好設計
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 19 – GCP Cloud Storage 架構和版本控管
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 24 – 頁尾
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 18 – GCP Cloud Storage
  • [筆記] Vue-ECharts RWD 設定與封裝
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 23 – 頁首
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 17 – AWS EC2 vs GCP Compute Engine
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 22 – C.R.A.P. 四個幫助你優化介面的設計準則
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 16 – Machine Image
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 21 – Form 表單
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 15 – Persistent Disk 方案比較
  • [筆記] Vue-cli HTTP 431 Error 錯誤排查解決記錄
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 20 – DataTable 資料表
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 19 – Alert 警告訊息
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 14 – GCP Local SSD vs Persistent Disk
  • [指南] Vue-Router 的巢狀路由和 Empty View 妙用
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 13 – GCP Compute Engine
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗
  • [筆記] 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 批次轉換經緯度實作
  • 按讚加入粉絲團

    延伸閱讀