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

技術筆記相關文章

  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-6
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-5
  • [指南] 前端自動化開發 Gulp + PHP + Browserify
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-4
  • [指南] CSS Background Patterns 簡易單色背景 CSS 語法產生器
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-3
  • [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-2
  • [指南] 遠端開發實作 – 搭配 Amazon AWS EC2 – Node.js 伺服器設定
  • [指南] 網頁前後端分離開發 常見的跨網域問題解決方式一覽
  • [指南] 給初心者在 AWS EC2 Linux 主機安裝 Laravel 的排解指南
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載 – 1
  • [筆記] Vue 按鈕 / 篩選資料架構
  • [指南] Windows 上使用免安裝 Node.js + Git Bash
  • [筆記] 2020 第二次前端工程師面試全記錄
  • [指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示
  • [指南] Mac 上的快速架站好幫手 MAMP
  • [指南] 你真的需要 jQuery 嘛？ jQuery 和 Vanilla JavaScript 轉換對照表
  • [指南] Vue.js 搭配 Docker 進行佈署
  • [筆記] 簡易型筆記本 Nute 瀏覽器輸入直接存成 TXT 檔
  • [筆記] Vue-Carousel 輕量化輪撥套件介紹
  • [指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果
  • [指南] Chart.js 前端圖表實用工具
  • [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
  • [筆記] 將 Vue 專案自動佈署到 Github Pages 上
  • [筆記] 網頁跨平台文字設定 Font-Family
  • [指南] Dynamic Dummy Image Generator 簡單好用的假圖生產器
  • [筆記] 使用 MySQL Workbench 操作 Heroku 上的 JawsDB MySQL
  • [指南] 特殊符號好難打？兩個網站讓你直接複製貼上
  • [指南] Responsively.app 前端工程師必備的 RWD 一個畫面全覽工具
  • [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用
  • [指南] 在 Vue 專案中，修改 樣式方法
  • [筆記] Figma 前端 設計師協作工具簡單介紹
  • [筆記] 從 Vue CLI 3 開始建立規模化專案
  • [指南] Github 上的 Public APIs 列表
  • [指南] Iconmonstr 超過 4000 種的圖示 SVG, EPS, PSD, PNG 支援
  • [筆記] CSSgram – 輕鬆套用 Instagram 上的濾鏡效果
  • [筆記] Palettable 互動式的挑選配色工具
  • [筆記] Bootstrap 5 Alpha 版本上線囉 來看看新增些什麼
  • [筆記] Vuetify 客製化製作彈出 + 滾動選單
  • [筆記] Vuetify Expansion 客製標題按鈕
  • [筆記] 網頁切版直播班 2020 春季班 – 課後心得
  • [筆記] 如何客製化自己的 Bootstrap 設定檔
  • [筆記] 網頁切版直播班 2020 春季班 – 第八週
  • [筆記] 解決 VS Code Terminal 中無法正常顯示字體的問題
  • [筆記] HTML 與 PUG 線上格式轉換
  • [筆記] 網頁切版直播班 2020 春季班 – 第七週
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼
  • [指南] 如何使用 Google 所提供的 Material Icon
  • [筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
  • [筆記] 網頁切版直播班 2020 春季班 – 第六週
  • [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
  • [筆記] 網頁切版直播班 2020 春季班 – 第五週
  • [筆記] Carbon 程式碼使用 讓你的網頁程式碼顯示的更漂亮
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
  • [筆記] 開始使用 Github Pages
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
  • [筆記] 網頁切版直播班 2020 春季班 – 第四週
  • [筆記] 來訓練你的手指運動 – 英打練習 Typing Pratice
  • [筆記] Emmet 網路開發必備簡碼 加速你的開發流程
  • [筆記] 網頁切版直播班 2020 春季班 – 第三週
  • [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
  • [筆記] HTML5 Input time 時間格式
  • [筆記] 網頁切版直播班 2020 春季班 – 第二週
  • [筆記] 網頁切版直播班 2020 春季班 – 第一週
  • [筆記] MarkMan 跨平台 設計稿標註與量測工具
  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] CodeSandbox 線上編輯器 模擬前端框架
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] 工字型樣板，長方形依照比例縮放
  • [筆記] Element-UI 的自定義表格邊框樣式
  • [筆記] Vue 關於 slot-scope 的簡易認知
  • [筆記] Chart.js 長條圖 最大值用特別顏色表示
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Vue Watch 監聽並延後發送請求
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Element UI Table 表格表頭縱向顯示
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
  • [筆記] CSS 上常見的水平置中 & 垂直置中方法
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Vue2 Perfect-Scrollbar 置底開始
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
  • [指南] 簡單製作自己的 Google 套件 (Extension)
  • [筆記] CSV 檔匯入 PostgreSQL 常見錯誤一覽
  • [筆記] 使用 PGAdmin 操作 Heroku 上的 PostgreSQL
  • [筆記] FlatIcon 免費非商業使用的向量圖示圖庫
  • [筆記] 2020 前端工程師面試全記錄
  • 工程師之路 Learning Programming
  • [指南] 線上 QR Code 產生器
  • [筆記] 台灣縣市二聯式選單 tw-city-selector.js
  • [筆記] Node.js 在 Windows 上的開發環境建置
    • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣：13