2分で分かる!手書き風ロゴアニメーションはこう作る【SVG】

たまに見かける手書き風のアニメーション。
こんなやつ。

完成イメージ

お洒落で目を惹きますよね。

キービジュアルやロゴを紹介するときなど、
魅せる場面で使えそうです。

デモサイトはこんな感じです。

これを正確に作る方法を紹介します。

このようなアニメーションをwebサイトに埋め込みたい時は、
SVGというベクター画像を使います。

SVGとは
Scallable Vecter Graphocs(スケーラブル・ベクター・グラフィックス)の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです。 SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます。

手順1:使いたい画像を用意

今回アニメーションさせたい画像を用意して、
Illustratorで開きます。

開いたら、新しいレイヤーを作成して、
なぞるように上からパスを描いていきます。

(画像の黄色部分がパスです。) Illustratorでパスを描いていきます

・線幅
・線端
・角の形状
をしっかり合わせて本来の画像とズレがないようになぞります。

・線幅・線端・角の形状を調整

こんな感じでパスが引けた! パスが引き終わりました べジュ曲線…
意外と難しいですよね。笑

ざっくり、元の画像通りパスが引けたので、
元画像のレイヤーは非表示にして、
パスの色を好きな色に変えます。(私の場合は黒にしました) パスの色を変更

パスの単純化で滑らかに!
今回、僕は使わなかったですが、
全体的に滑らかなパスにしたい場合は、
パスの単純化で滑らかにできます。

パスを選択した状態で、Illustrator画面、上のメニューから、
オブジェクト>パス>単純化
を選択。 Illustratorパスの単純化のやり方 こんな感じ。
若干、滑らかになってる!
BEFORE
パスの単純化前
AFTER
パスの単純化後

手順2:SVGデータで保存

Illustratorから、
ファイル>書き出し>書き出し形式…>SVGを選択して保存

SVGデータで保存

手順3:LAZY LINE PAINTERにアップロード

LAZY LINE PAINTERにアップロードします。

サイト:LAZY LINE PAINTER
http://lazylinepainter.info/

LAZY LINE PAINTERでアップロード

編集画面に変わりますので、
特にいじらずそのまま、
「Download Zip」をクリックしてデータをダウンロードします。

速さや動きを変更したい方はこの画面で変更できるので
いじってみてください。

LAZY LINE PAINTER編集画面

手順4:数字と色の変更

ダウンロードデータ内の、
index.htmlをエディタ開きます。

上から53行目辺りにある、
scriptの数字と色を変更します。

変更前:
"strokeWidth":1,"strokeOpacity":1,"strokeColor":"#222F3D","strokeCap":"square"<br>
変更後:
"strokeWidth":10,"strokeOpacity":1,"strokeColor":"#000","strokeCap":"round"

これでOK!
しっかりアニメーションがされていれば問題ありません!

このアニメーションをつけたSVGをサイトに埋め込む際は、
LAZY LINE PAINTERからダウンロードした際に
データ内に一緒についてきた、

「lazy-line-painter-1.9.6.min.js」を
一緒に読み込むことをお忘れなく。

コメントを残す