ウェブ

SVGでアニメーションを簡単に作れるツールSVG Artista【プログラミング知識不要】

SVGアイキャッチ画像

Web上で動くファイル形式GIFがありますが、ファイル形式SVGでもアニメーションを作成することができる便利ツールがあり、プレビューでアニメーションを確認しながら簡単にアニメーションを作成できるのでSVG画像を用意するだけ。

アニメーション参考例 ↓
Run Penをクリック&タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

▪SVG Artista
https://svgartista.net/

SVG Artista
SVG Artista

サクッと作れるように簡単に解説していきます。

プル

プログラミング知識0でも気軽に実装可能です。

サイトの動作確認

サイトの右上にあるPLAYをクリックすることでデフォルトの動作を確認することができます。

playをクリック
playをクリック

</>GET CODEをクリックでHTMLCSSが自動で発行される仕組みです。

GET CODE
GET CODE

illustratorで作成

まずは、illustratorで1文字に対して1レイヤーを作っていきます。

レイヤーを分ける
レイヤーを分ける

ポイントは最初に表示させたい文字を下に配置すること。

SVG ArtistaのサイトにSVGをアップロードした時に下のレイヤーから順番に表示される仕組みになっているためです。

レイヤーの順番
レイヤーの順番

SVGに書き出し

レイヤーの配置が完了した後はSVGの書き出しをします。

ファイル書き出し形式を選択。

SVG書き出し
SVG書き出し

ファイルの種類がSVGであることを確認して書き出しを選択。

SVG形式
SVG形式

※illustratorでSVGの書き出しが出来なかった場合はPNG~SVG変換サイトなどでSVGに変換しましょう。

▪ Convertion (画像変換サイト)
https://convertio.co/ja/image-converter/

Convertion
Convertion

↓illustratorの使い方をしっかりマスターしたい方はこちらの本がお勧めです。

▪Illustrator 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応]
これからIllustratorを習得する人や、一度チャレンジしたけど挫折した人におすすめの一冊です。すべての手順・考え方を丁寧に解説されておりずっと役立ちます。
この一冊があればIllustratorを使いこなせるようになります。

book
created by Rinker
¥2,640 (2022/10/04 17:55:06時点 楽天市場調べ-詳細)

SVGをアップロード

▪SVG Artistaのサイトに作成したSVGファイルをアップロードします。
https://svgartista.net/

OPEN SVGを選択。

OPEN SVG
OPEN SVG

作成したSVGファイルを選択して「開く」をクリック。

SVGアップロード
SVGアップロード

PLAYをクリックすることで文字が流れるアニメーションが完成しました。

SVG PLAY
SVG PLAY

動作に問題がなければGET CODEを選択してHTMLCSSを出力します。

左側がHTMLで右側がCSSとなっています。HTMLコードコピーはCOPY SVGを選択、CSSコードコピーはCOPY TRANSITION CODEを選択でコピーできます。

HTMLとCSS
HTMLとCSS

後は、コピーしたコードを張り付けたら動作します。

▪参考例になります↓
Run Penをクリック&タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

Code Penの使い方は下記↓の記事で解説していきます。

codepen使い方
Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】「自分で書いたコードを共有したい」「記事内にコードを埋め込みたい」「コードのプレビューを表示したい」この悩みを解決してくれる便利な機能が揃ったサイトを紹介します。無料会員で自由にコードが書ける「Codepen」ブラウザ上でHTML・CSS・JSのコーディングがプレビュー付きで利用できるサービスで、プレビューがリアルタイムで反映されるのでコードの修正にも使用可能です。...

↓下記本はPhotoshopの基本が身についたお勧めの本で、10年以上使えそうです。

Photoshop 10年使える逆引き手帖【CC完全対応】
Photoshop 10年使える逆引き手帖【CC完全対応】

▪Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応]
Photoshopの「必修の基本テクニック」から「ワンランク上のプロ技」まで完全網羅して、この一冊でPhotoshopを使いこなせるようになります。

book
created by Rinker
¥2,640 (2022/10/05 01:11:42時点 楽天市場調べ-詳細)
プル

illustratorとコーディングの知識両方持っていると、仕事の幅が広がるので使えるようになっていると便利です。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA