当ブログはSWELLを使用しています。

商用利用可能なおすすめフリーイラスト素材「stories by freepick」の使い方

URLをコピーする
URLをコピーしました!
Illustration by Freepik Stories

こんにちは、キグルミ(@kigurumiblog)です。

前回のまとめでもランクインしたstories by freepickについて

使い方をご紹介致します。

おすすめポイント

・ブログのおしゃれ感がアップする

・写真よりイメージに合うものが見つかる

・アニメーションなど使ってオリジナリティを演出できる

・カラー変更でブログのテーマカラーに合わせる事ができる

使用する為にちょっとだけ注意事項があるので

使い方と合わせて解説します。

目次

stories by freepickの特徴

色が変えられる

画像を選択するといくつかのオプションを選択できます。

こうして自分のイメージに合った配色に変更する事ができるのは

非常に使い勝手に優れています。

またレイヤーの概念があるので

Illustration by Freepik Stories

この様に人とライトを消すといった一部を消去する事ができます。

フリー素材でありがちな「ここがもう少しこうだったら」という

かゆい所に手が届く素敵仕様です。

アニメーションを付けられる

最高に魅力的なアニメーション機能をご紹介します。

初めて見た時はおどろきました。

Illustration by Freepik Stories
キグルミ

一発で印象に残る良い機能ですよね笑

動きの種類は多くないので割とシュールな感じになりがちですが

個性的なブログを作るにはもってこいの機能です。

登録不要、完全無料でダウンロードし放題

無課金だとダウンロード数に制限があったりする素材サイトですが

stories by freepickは無料でダウンロードし放題です。

ありがたやありがたや。

ライセンス表記は必要

画像を使用したらライセンス表記をしましょう。

ダウンロードした後にこの様に表示されますので

コピーボタンを押してから段落に貼り付けでOKです。

↓このようにリンクが作られます。

Illustration by Freepik Stories

stories by freepickの使い方

それではstories by freepickの使い方を順番に見ていきましょう。

stories by freepickを開く

こちらからstories by freepickに行ってみましょう!

イラストを選びましょう

選び方は3種類用意されています。

・キーワードから選ぶ

・STYLESから選ぶ

・TAGSから選ぶ

キーワードから選ぶ

サイト上部の検索窓からキーワードを入力できます。

日本語検索には対応していないので英語で入力しましょう。

STYLESから選ぶ

5つのスタイル、というか画風から選ぶ事が出来ます。

それぞれに特徴があって見てるだけでも割と楽しくなっちゃいます。

僕は立体感のある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(詳細)から選びましょう。

Hidden
Simple
Details

Illustration by Freepik Stories

背景を選んだら次はレイヤーを選びましょう。

このイラストの場合、願い事や男の子、サンタさんを消す事が出来ます。

クリスマスにはまだ早いのでサンタさんには消えてもらいます笑

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という表記もあるのでそれで良いのかもしれません。(現在調査中)

高品質な素材で良いブログを書きましょう!

またブログ以外でもサイトや広告、説明資料などでも活躍しそうですね。

アニメがめっちゃ楽しいので僕はこれを多用すると思います笑

この記事が気に入ったら
フォローしてね!

Share Information
URLをコピーする
URLをコピーしました!

この記事を書いた人

2020.9.22ブログ開設
高校中退→接客業→中小企業商社に就職
勤続15年目に代表取締役社長に就任
自分のマインド/学んだ事/面白い!
と思った事を発信しています。

コメント

コメント一覧 (1件)

コメントする

目次
閉じる