Creative Tool / Web
Pixel Art
Generator
從圖片轉換到逐格編輯，讓像素創作在同一個瀏覽器工作區完成。
- 我的角色
- 產品設計、前端開發、Canvas 編輯器實作
- 方法
- 功能拆解、狀態設計、響應式介面
- 成果
- 可儲存專案與匯出 PNG 的像素畫工具
01 / OVERVIEW
從一次轉換，
變成可持續編輯的工具。
這是一款支援圖片像素化、手繪編輯、專案儲存與 PNG 匯出的線上像素畫工具。重點不只在產生效果，而是把輸入、修改、保存與輸出整理成容易理解的完整創作流程。
02 / WORKFLOW
一個畫布，完成四個步驟。
- 01
Import
匯入圖片或從空白畫布開始。
- 02
Convert
調整解析度並產生像素化結果。
- 03
Edit
用繪圖工具逐格修正與創作。
- 04
Save
保存專案狀態或匯出 PNG。
03 / PRODUCT DECISIONS
讓功能增加時，
工作區仍然容易理解。
- 兩種創作起點
- 圖片像素化與手動繪製可以自由銜接，不限制使用者的開始方式。
- 狀態可以回來
- 將畫布、設定與編輯進度一起保存，讓一次嘗試成為可延續的專案。
- 跨裝置操作
- 重新安排小螢幕下的工具與畫布關係，保留基本編輯能力。
- TypeScript
- React
- Canvas
- Web Storage