SVG変換ツール「Vectorlab」の30秒紹介動画
PNG・JPG・WEBPの画像を、編集できるSVGのパスに変えるブラウザのツール「Vectorlab」の30秒の紹介動画です。読み込む・整える・書き出すの3手を、サイトの実際の画面に寄って囲みながら見せています。
FablessBridgeによる自主制作の紹介動画
概要
PNG・JPG・WEBPの画像を、編集できるSVGのパスに変えるブラウザのツール「Vectorlab」の30秒の紹介動画です。読み込む・整える・書き出すの3手を、サイトの実際の画面に寄って囲みながら見せています。
動画の要点
- 画像を読み込む最初の手順を、サイトに内蔵されたIllustrationのサンプルを押して、変換の画面が出るところまで見せました。
- プリセットと色数を調整する手順を、元画像とベクターの画面の切り替えと、色数が16から32へ回るカウンターで見せました。
- SVGのパスを書き出す手順と、ファイルが端末の中にとどまることを、ダウンロードの操作と「Your files stay on your device.」の一文で見せました。
動画の流れ
- 00:00ロゴと「Make it vector.」が出ます。右の窓ではロゴが拡大表示になり、ズームの数字が100%から244%まで回ります。
- 00:02「01 / IMPORT」の札で「Start with an image.」と出ます。実際の画面に寄り、カーソルがIllustrationのサンプルを押して画像が読み込まれます。左に作業票のレシートが印字されます。
- 00:08「02 / REFINE」の札で「Find your balance.」と出ます。3D renderのサンプルで元画像からVectorの画面に切り替わり、色数のカウンターが16から32へ回ります。
- 00:14「03 / EXPORT」の札で「Take it anywhere.」と出ます。カーソルが「Download SVG」のボタンを押し、画面下の数値の表示を囲みます。
- 00:20ブラウザの中で使えることを伝える見出しと、「Your files stay on your device.」が出ます。トップの画面に寄って1行を囲みます。
- 00:26作業票のレシートが切り取られて上へ抜け、ロゴと「Make it vector.」、製品のURLを出して締めます。