[筆記] 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


技術筆記相關文章

  • [筆記] 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 上的開發環境建置
  • [筆記] Heroku Sequelize 佈署細節
  • [筆記] HTML 表格 Table 的 tr td th 用法
  • [筆記] 運用 Heroku 佈署的初始化步驟
  • [筆記] 線上正規表示式測試器
  • [筆記] TinyURL 服務串接
  • 運用 Node.js 建網站的初始化步驟
  • [筆記] JavaScript 雙層選單篩選連動
  • [筆記] Heroku 佈署問題:如何將 Git 的子資料夾專案推上雲端?
  • [筆記] Google, Facebook, Github OAuth 認證設定申請
  • Mongo DB 條件操作符
  • Express Validator 操作介紹
  • 安裝 MongoDB 出現 SocketException: Address already in use 錯誤
  • [筆記] KeyCode & querySelectorAll 全部加上事件
  • [筆記] Can I Use 查詢語法在各瀏覽器上可否正常使用
  • [筆記] JavaScript 將兩個 array 合併一個 array
  • [筆記] 純 CSS 製作圖片輪撥效果
  • [筆記] API 串接, Axios 和綁定DOM事件
  • [筆記] CSS ul li 水平置中方法
  • [筆記] Async 非同步處理和 JSON Object 取值
  • [筆記] textContent, event.target 和 innerHTML
  • [筆記] BootStrap Card + Grid System + Modal 彈出視窗
  • [筆記] Lorem Picsum 網頁開發自動生成縮圖
  • [部落格經營] Contact form 7 表格自動縮放
  • [部落格經營] WordPress 中文 摘要 錯誤修正
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:9