ITツール

【storyset】センス溢れる無料イラスト素材集!アニメーションも作れる

storyset-freeillust

Webデザインやブログのアイキャッチなどで使える、無料のロイヤリティフリー素材は、いくつあっても困ることはありません。

さて。今日お話するのは「storyset」というイラスト素材サイト。
無料で使えるロイヤリティフリー画像なのですが、他のサービスとは一味違います。

まず、自分でカスタマイズが可能!イラストの中で使われているパーツの選択や色を、自由に変更することができます。

storyset-freeillust_1
storyset-freeillust_2
同じ画像でも、パーツの出し分けや色をカスタマイズすることで、全然違った雰囲気になりますね。

そして何より、アニメーションが作れてしまいます。イラスト内で使われているパーツを動かして、それをSVGやGIFや動画として出力できます。

実際に作ったのがこんな感じ。同じテンプレートのイラストでも、多様なバリエーション違いを作ることが可能です。

storyset-freeillust_8

無料イラスト素材「storyset」でできること・使い方

それでは実際に、storyset でできることについてご紹介します。

1まず以下のリンクから storyset のサイトにアクセスします。

2 画像を選びます。海外のサイトなので、検索は英語で。左ナビからは、カテゴリやタグから検索できます。

storyset-freeillust_3

3画像のカスタマイズは、右ナビから。「COLOR」から色の変更ができます。

「LAYERS」をクリックすると、イラスト内のパーツの表示/非表示を選べます。「Show all layers」をクリックすれば、変更できるパーツが増えます。

storyset-freeillust_4

静止画でOKなら、右下のDownload SVGDownload PNGをクリックすれば、ダウンロード可能です。

4アニメーションを作りたい場合は、右上のAnimate it!をクリック。

storyset-freeillust_5

5左ナビの「ELEMENTS」から、動かしたいパーツを選択し、右ナビから動き方を調整します。

「ENTRANCE」は、そのパーツの出現方法を。「LOOPING」は、そのパーツの状態を設定できます。

storyset-freeillust_6

「ひとつひとつ丁寧に設定していくのは面倒!」という方は、右上のRandomize!がおすすめ。クリックするたびに、ランダムにアニメーションを作ってくれます。

作り終わったら右下のExportをクリック。
SVGとしてWebサイトに埋め込むこともできますし、GIFや動画としてダウンロードすることもできます。

storyset-freeillust_7

 

【ほぼ日刊】ガジェットへの想いを語るだけ

Yahoo! JAPAN クリエイターズプログラムにて、ぼくの持っているガジェットについてあれこれ語る記事を公開中!いわゆる "レビュー記事" とは違った、ぼくの道具にかける想いをただただ自分勝手に語ります。ほぼ日刊更新中。

あとがき

このサービス、なによりイラストの種類の豊富さが素晴らしいのです。「mobile」と検索しただけでも、かなりの数のイラストがヒットします。

イラストのクオリティもひとつひとつがちゃんとしているので、Webサイトのデザインやアイキャッチ作成にも活用できますよ。

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール
-,

© 2022 あなたのスイッチを押すブログ