このページは別のブログに移転しました。
デザイナーでもできる、 After Effects からのSVGアニメーション書き出し - LOGzeudon
このページは別のブログに移転しました。
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法
SVGをWeb制作で使うために、ブラウザーに最適化されたSVGファイルの作成、書き出し、最適化の方法をマスターしましょう。 SVGの勉強を始める前に理解したいことがあります。SVGファイルの最適化は、作成から書き出しまで続く工程です。WebページのHTMLと同様、不出来なSVGファイルを完成後に修正するのは大変です。 書き出してから使える最適化ツールもありますが、想定外のことが起こってファイルが壊れる場合があります。SVGを最適化する確かな知識を身につけ、SVGを活用しましょう。 IllustratorでSVGを作成 SVGをIllustratorで作成するには、最終的な出力がWeb用にうまく最適化されるよう考慮して、以下の工程を進めます。 適切なカラースペースを設定 大半のベクター画像用ソフトウェアと同様、Illustratorは印刷物向けに設計されているため、カラースペースはデフォルト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
