【Html&CSSゲーム作成】CSSバックグラウンドスライド式のアニメーション用pngをInkscapeで作成する方法
2021/05/24
2022/08/14

ベクター画像でパラパラアニメを作る意義

Inkscapeでイラストを作る すぐに作れる ずっと使える Inkscapeのすべてが身に付く本
Inkscapeでの作業手順
ガイドを作る
パターンフィル

168 x 368 [px]



パターン


[オブジェクト] > [パターン] > [オブジェクトをパターンに]

pattern****
368x100=36800[px]
[パターン]

フレームごとのアニメーション作成
曲線の作成



位置の調整

ベクター画像をコピペできる利点

png画像へのエクスポート
[フィル/ストローク]
不透明度

[PNG画像にエクスポート]
選択範囲

選択されていないものは出力しない

Inkscapeでイラストを作る すぐに作れる ずっと使える Inkscapeのすべてが身に付く本
CSSアニメーションの実行

Inkscapeでイラストを作る すぐに作れる ずっと使える Inkscapeのすべてが身に付く本
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー