こんにちは、キグルミ(@kigurumiblog)です。
前回のまとめでもランクインしたstories by freepickについて
使い方をご紹介致します。
・ブログのおしゃれ感がアップする
・写真よりイメージに合うものが見つかる
・アニメーションなど使ってオリジナリティを演出できる
・カラー変更でブログのテーマカラーに合わせる事ができる
使用する為にちょっとだけ注意事項があるので
使い方と合わせて解説します。
stories by freepickの特徴
色が変えられる
画像を選択するといくつかのオプションを選択できます。
こうして自分のイメージに合った配色に変更する事ができるのは
非常に使い勝手に優れています。
またレイヤーの概念があるので
この様に人とライトを消すといった一部を消去する事ができます。
フリー素材でありがちな「ここがもう少しこうだったら」という
かゆい所に手が届く素敵仕様です。
アニメーションを付けられる
最高に魅力的なアニメーション機能をご紹介します。
初めて見た時はおどろきました。
一発で印象に残る良い機能ですよね笑
動きの種類は多くないので割とシュールな感じになりがちですが
個性的なブログを作るにはもってこいの機能です。
登録不要、完全無料でダウンロードし放題
無課金だとダウンロード数に制限があったりする素材サイトですが
stories by freepickは無料でダウンロードし放題です。
ありがたやありがたや。
ライセンス表記は必要
画像を使用したらライセンス表記をしましょう。
ダウンロードした後にこの様に表示されますので
コピーボタンを押してから段落に貼り付けでOKです。
↓このようにリンクが作られます。
Illustration by Freepik Stories
stories by freepickの使い方
それではstories by freepickの使い方を順番に見ていきましょう。
stories by freepickを開く
こちらからstories by freepickに行ってみましょう！
イラストを選びましょう
選び方は３種類用意されています。
キーワードから選ぶ
サイト上部の検索窓からキーワードを入力できます。
日本語検索には対応していないので英語で入力しましょう。
STYLESから選ぶ
５つのスタイル、というか画風から選ぶ事が出来ます。
それぞれに特徴があって見てるだけでも割と楽しくなっちゃいます。
僕は立体感のあるAmicoがツボです。
Rafiki
Illustration by Freepik Stories
Bro
Illustration by Freepik Stories
Amico
Illustration by Freepik Stories
Pana
Illustration by Freepik Stories
Cuate
Illustration by Freepik Stories
TAGSから選ぶ
それぞれのイラストにはタグが付けられています。
お探しのキーワードのタグがあればそちらを見てみましょう。
カスタム方法を解説します
使いたいイラストを選んだら、いよいよカスタムです。
イラストを選択するとこの様な画面になります。
右上の赤部分でカラー選択が出来ます。
クリックするとカラーパレットが出てくるのでお好きな色を選択しましょう。
次にその下、BACKGROUND（背景）を決めます。
Hidden（無し）・Simple（簡易）・Details（詳細）から選びましょう。
Illustration by Freepik Stories
背景を選んだら次はレイヤーを選びましょう。
このイラストの場合、願い事や男の子、サンタさんを消す事が出来ます。
クリスマスにはまだ早いのでサンタさんには消えてもらいます笑
カスタム出来たらSVGかPNGで保存して完成です。
アニメーションさせてみよう
このサイトの一番の売りであるアニメーションについて使い方を説明します！
先程の画面のCOLORの左側【Animate it】をクリックしましょう。
するとアニメーションの操作画面に移ります。
①COLOR：色を選択できます。
②ELEMENTS：アニメーションさせる対象を選択します。この画像の場合は「願い事」「子供」「サンタさん」「クリスマスツリー」「影」「背景」です。
自由度高すぎます笑
③ENTRANCE：最初の効果を選びます。例えばside upだと下からぼわーっと登場します。
④Easing：動きに加減速を加えます。この辺はいろいろぽちぽちしてみて気に入ったものを選びましょう。
⑤Duration：効果時間を設定します。
⑥Delay：表示開始から効果発生の時間を遅延させる事ができます。
⑦LOOPING：アニメーションし続ける動きを選択できます。
英語が分からなくても直感でなんとかなります笑
納得がいくまでアニメーションを作り込んだら
⑧Exportで書き出しましょう
①SVG+CSSが使用出来ます。カスタムHTMLで作った画像を埋め込む事が出来ます。
②GIFかMP4で保存する事もできますがENTRANCEを選ぶと最初だけ
LOOPINGを選ぶと最初が無しで永続的にアニメーションする様に保存されます。
こうして作成したのが冒頭のこの画像です。
Illustration by Freepik Stories
まとめ
今回はフリーイラスト素材の「stories by freepick」をご紹介しました。
ライセンス表記が若干面倒ですがフッターに埋め込めばOKという表記もあるのでそれで良いのかもしれません。（現在調査中）
高品質な素材で良いブログを書きましょう！
またブログ以外でもサイトや広告、説明資料などでも活躍しそうですね。
アニメがめっちゃ楽しいので僕はこれを多用すると思います笑
コメント
コメント一覧 （1件）
[…] 商用利用可能なおすすめフリーイラスト素材「stories by freepick」の使い方フ… Illustration by Freepik Stories Stories by Freepikを見る […]