⛳
diagrams.net(draw.io)でChrome拡張のアイコンを作っている話
Chrome拡張のアイコンを作るとき、diagrams.netで使っているのでメモ。
旧draw.ioで名称が変わっているのだけど入口ページのドメイン名は元のままですね。
draw.ioのいいところ
- 無料
- xmlで管理できる
- (私はAWSのお絵描きで慣れている)
前提
- 絵は適当
- サイズは128,48,32,16px とする
お絵描き
Gridサイズを1に設定
- File -> Page setup
- 紙のサイズも小さくしていますが、あまり関係ないかも
Backgroundを作る
Layersを開いてBackgroundと名前をつける。128x128のSquareを中心が (0,0)になるように置く。
iconレイヤに描く
iconレイヤを作ってアイコンを描く。
エクスポートする
- Backgroundが見えない状態で、エクスポート(png)
- エクスポート設定はデフォルトのままでよい
- 背景は透明にしない
Chrome拡張用にサイズを変更する
変換してくれるサービスもありますが、自作スクリプトで。
-
16.png,...というファイル名になる - 正方形でないとエラーとする
- (正方形に変形するには下のスクリプトで)
- icon_name_prefixを前に追加可能
- PILをインストールすること
おまけ
pngファイルのサイズを微調整するためのスクリプト
上下左右とピクセルを指定してその方向からトリミングするものです。
Discussion