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

章節連結

• 下載並安裝
• 如何使用
• 技術筆記相關文章

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

---

下載並安裝

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

如何使用

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

---

技術筆記相關文章

[筆記] 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 批次轉換經緯度實作

按讚加入粉絲團

延伸閱讀

• [筆記] 使用 Crypto.getRandomValues() 來抓取亂數
• [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Selenium 的簡介
• [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 為什麼抓不到動態資料
• [筆記] Nuxt js 初探筆記 1 – 基礎環境建置
• [筆記] Bose SoundLink Revolve 喇叭無法正常充電，該怎麼辦