デザイン

デザイン

イチオシのSVGフィルタ素材&チュートリアルのご紹介!

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、10 Best SVG Filter Resources & Tutorials
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

471 views

読了時間 : 約1分52秒

SVG(スケーラブル・ベクター・グラフィックス)は、普通の画像よりも優れています。画面の大きさに対応して拡大縮小しても、そのクオリティは変わらないからです。

 

また、SVGは画像だけではありません。画像を加工してカッコイイ文字を作るフィルタ機能もついています。今回は、とっておきのフィルタ素材とそのチュートリアルをご紹介します。

 

SVG Filters 101

 

まずはじめに、入門的な素材をご紹介しましょう。チュートリアルを参考に、独自のデザイン設計やさらなるSVGフィルタへの理解が深まります。

 

 

The Art Of SVG Filters

 

これはSmashing Magazineの手がけたSVGで、デザインに持ってこいのフィルタ素材です。あらゆる文字に適用可能な基本フォーマットも備わっています。

 

 

SVG Filters on Text

 

これも文字を加工するのにぴったりのSVG素材です。フィルタを作成するツールプロセスも、チュートリアル内で紹介されています。

 

SVG Drop Shadows

 

 

オブジェクトにドロップシャドウ効果をかけられるSVGです。フィルタの動作とコードを確認出来るので、好きなように修正することが出来ます。

 

SVG Blur Effects

 

先ほどと似ていますが、これはぼかし効果のあるSVGです。コードを修正し、デザインに合わせてオプションを変えていくことが可能です。

 

 

The Gooey Effect

 

クールでかっこいいデザインは、このチュートリアルでやり方が紹介されています。プロジェクトの人気も高まること間違いなしです。

 

 

SVG Filters

 

残念ながらチュートリアルは用意されていませんが、この素材リストもデザインに大変便利です。文字や画像などに適用可能なSVGがたくさん載っています。

 

Masked Blur Effect

 

マスクのかかった面白いぼかし効果のかけ方は、ここから学ぶことが出来ます。ヘッダーの見せ方を工夫すれば、益々面白いサイトになるでしょう。

 

 

Practical SVG Filters

 

このチュートリアルには、SVGとは何か、またその使い方が載っています。実践的なテクニックも盛り込まれているので、すぐにデザインに活用出来るでしょう。

 

SVG Light Source Filter Tutorial

 

ライト効果をかっこよくデザインに使いたかったら、このチュートリアルは見逃せません。3種類の方法を用いて、そのやり方が説明されています。

 

 

まとめ

 

デザインに深みを与えるには、SVGのフィルタ機能が欠かせません。また、タグを用いることによってDOMにも活用出来るので、ぜひチュートリアルを見てSVGの使い方をマスターしてください。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 
【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

プロモーション コードを追加するで「JP20gd6nv7」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

 

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

おすすめ新着記事

おすすめタグ