シナリオ執筆の為、更新停滞気味です

YoutubeサムネイルやTRPGトレイラーで使える画像の作り方。無料ツールを使っての画像作成の仕方、動画サムネ画像を簡単作成!インストール不要なツールCanva無料版にて作成

これでTRPGのトレイラーからサムネイル画像まで作成が可能!
チャットノベル形式で、ブラウザ画像編集ツールCanvaの使い方を紹介!

この講座では
「画像作るの初めて…!
レベルからやるからね
初心者も安心だよ

岸かれか
岸かれか
目次

サムネイルを作る流れについて!

岸かれか
岸かれか

まず今からやる事を
紹介します

①有名な方のサムネイルをお借りして、
それをまねてみる

↑ここまでは
一緒に作るよ!

岸かれか
岸かれか

②テンプレートは変えずに、
色を変えたり内容を変えて自分流にアレンジ

↑ここの辺りもやるけど
 結構ぱぱっとやるよ♡

岸かれか
岸かれか

模写から入って、自分なりのスタイルを確立していく

絵も勉強するときは
誰かの模写から入るでしょう?

岸かれか
岸かれか
岸かれか
岸かれか

その感覚で
複数人のサムネイルを
そっくり作成する
トレーニングをするの!

良いサムネイルには法則がある!→でも法則分からない!→体で覚えろ!

デザインは数学である。
……とか言われても分からない。

好きなものを模写してみると
自分だけの
”なんとなくこれいいかも!”
という感覚が身に付く

デザインには
決まりがあるの

岸かれか
岸かれか

でも勉強やだなーって
なるでしょ?

岸かれか
岸かれか

なら、
やらなきゃいいじゃん

岸かれか
岸かれか

これは、
背中で語るのを
盗め的な考えと一緒

岸かれか
岸かれか

自分が好きって思うものを
たくさん真似て、真似て
いつか自分のオリジナルを
作れるようにする!

岸かれか
岸かれか

つまらない作業、
したくないでしょ?

岸かれか
岸かれか

良いサムネイルの見本のサイト!

ひとことで言っちゃえば、
「真似ろ」「目を慣らせ」

はい、こちら。

岸かれか
岸かれか

これはね、
綺麗なサムネイルが
集まっているサイト。

岸かれか
岸かれか
岸かれか
岸かれか

ピンタレスト
Youtubeで
好きなサムネイルを
探しても可!

このサムネイルを
真似て学んでみよう!

岸かれか
岸かれか

お手本にするサムネイルは何でも可!(有名な人やPV数が高い方が勉強になる)

岸かれか
岸かれか

誰をお手本にすると
良いかって?

売れている人のサムネイルや、
自分がお手本にしたいと思える
サムネイルを複数人

岸かれか
岸かれか

ジャンル違いは
似ていても、
違っていてもOK

岸かれか
岸かれか

今回は
男性っぽいサムネイルを作って
ちょこっと変えるだけで
可愛くする例にしてみるよ!

岸かれか
岸かれか

無料版Canvaを使う(インストール等は不要、新規登録でOK)

今回は
Canva」という
サイトを使うよ

岸かれか
岸かれか

私有料会員だけど
半年ぐらい無料で
使ってたから
無料でいい
んじゃないかな?

岸かれか
岸かれか

画像透過機能や、有料フォントの追加などなので、別のサイトで足ります

Youtubeサムネイル用の画像のサイズはいくつ?選択の仕方

Youtubeサムネイルの画像サイズについて
幅1280Px × 高さ720Px
(CanvaでYoutubeサムネイル選択でOK!)

ログインすると、
このページに飛ばされると思う

岸かれか
岸かれか

「デザインを作成」を
押してみて!

岸かれか
岸かれか

Youtubeサムネイル
選択だけでOK!

岸かれか
岸かれか

ちなみに
Twitter用画像とか
インスタ画像のサイズとか
調べても出てくるよ!

岸かれか
岸かれか

CanvaでYoutubeサムネイルを作ってみる!

↑のパレットに
画像や文字を置けば完成

楽でしょ

岸かれか
岸かれか

Canva内の写真挿入の仕方

これを見る限り、
背景は黒い大理石か
何かかな…?

岸かれか
岸かれか

右欄の写真をクリックして、
「大理石」と打ってみて!

岸かれか
岸かれか

んー……
ちょっと違う感じの
大理石が多いかな…?

岸かれか
岸かれか

Unsplushから画像を持ってくる

Unsplush
使おうかな?

岸かれか
岸かれか

某男子Cはオーダン派だけど
私はUnsplush派

岸かれか
岸かれか

Unsplushの方が
直ぐに可愛い画像を
見つけられるし、
色で選べるから♡

岸かれか
岸かれか

※Unsplushは英語での検索が必須の為、オーダンかUnsplushかは好みの問題
著者はUnsplushがないと生きていけません

Unsplushの使い方1 英語翻訳でキーワードを見つける

英語での検索が必須だから
まず、英語翻訳で
「大理石」を打つ

岸かれか
岸かれか

まーぼぅ
これで下準備はOK

岸かれか
岸かれか

Unsplushの使い方2 検索をする

それでMarbleと
入れて検索をする!

岸かれか
岸かれか

ピンクの部分は
有料素材だから
注意
してね!

岸かれか
岸かれか

Unsplushで「欲しい画像の色の選択」仕方!

好きな色の画像だけ
表示することができる
よ!

岸かれか
岸かれか

右上の
「Any color」
クリック

岸かれか
岸かれか

……それで、
黒を選択して

岸かれか
岸かれか

これとか、
そのテクスチャ…
っぽいよね!

岸かれか
岸かれか

ダウンロードフリーと
書かれた緑のボタンで
お持ち帰り♡

岸かれか
岸かれか

Canvaで、自分の画像を使うやり方

持ち帰った画像を
早速Canvaに貼っちゃおうね

岸かれか
岸かれか

クリックすると、
ぽんって出て来るよ

岸かれか
岸かれか

出てきた画像の
上で右クリックすると
メニューが出るよ!

岸かれか
岸かれか

それを押すと
画像いっぱいに背景として
表示してくれる!

岸かれか
岸かれか

これは良い感じ…

岸かれか
岸かれか

次は、四角くて
黄色のラベルを作ろうかな!

岸かれか
岸かれか

Canvaでの画像挿入の仕方

写真と同じ要領で

岸かれか
岸かれか

これは素材の欄から、
四角を検索!

岸かれか
岸かれか

すると、また真ん中に
ぽんっと置かれる

岸かれか
岸かれか

図形を動かして
理想の形にする!

岸かれか
岸かれか

※お手本の画像を見ながら&透けさせながら四角の形を合わせて行く

・・・

そして、
出来たものが此方になります

岸かれか
岸かれか

Canvaでの画像の色の変え方(できない画像もあります)

じゃあ、
画像の色変えだね!

岸かれか
岸かれか

右の四角を押すと
カラーパレットが出てく
るよ

岸かれか
岸かれか

この四角は選択した
画像の色になっていたり、
レインボーになっていたりするかも!

岸かれか
岸かれか

とりあえず黄色で!

岸かれか
岸かれか

無料会員でも詳しい色に
変更することもできたはず!

岸かれか
岸かれか

同じ要領で
「まる」と検索して
丸の図形を持ってきて色を変える

岸かれか
岸かれか

色変えられるのは
「線と図形」で調べると
一発だよ!

岸かれか
岸かれか

・・・。

そして、
出来上がったものが
こちらになります

岸かれか
岸かれか

本物と比べると
テクスチャが入ってない…?

岸かれか
岸かれか

なら、
透明度を
あげようかな

色も調整しよ

岸かれか
岸かれか

Canvaで写真や画像を透明にする方法

説明簡単になっちゃうけど、
右上のマークを押すと
透明度を調整できるよ

岸かれか
岸かれか

透明にして、
色も寄せて
こんな感じ?

岸かれか
岸かれか

私、天才♡

じゃあ、左下のイラストを
つけちゃおうねー

岸かれか
岸かれか

Canvaで素材、特にイラストの入れ方

岸かれか
岸かれか

やり方は素材の入れ方と
変わらないけど、
タブの「グラフィック」を
クリックすると、
画像だけになる
にゃん

例では有料素材使うけど、
フリーアイコンサイトから
引っ張ってきたりしていいからね!

岸かれか
岸かれか

あくまで
それっぽい画像を
置く練習!

岸かれか
岸かれか

Canvaでの画像や写真の反転の仕方

岸かれか
岸かれか

置いたけど、
向きが反対だから
向きを反転させるね

その場合は左上の
「反転」をクリック

岸かれか
岸かれか

今回は、
「水平」で

岸かれか
岸かれか

これだけで
簡単に方向転換!

岸かれか
岸かれか

顔は、これでいいかな?

岸かれか
岸かれか

今のままだと、
このお兄さんが
黄色よりも
前に出ているね…?

岸かれか
岸かれか

こっちがびっくりしたい

岸かれか
岸かれか

画像の優先順位の変え方

このお兄さんの上で
右クリックすると
画像の優先順位を変えられる
よ!

岸かれか
岸かれか

ふふん、こんな感じ♡
ちょっと空白が少ないけど、
画像が違うから多めに見てね

岸かれか
岸かれか

あとは
テキストかな…?

岸かれか
岸かれか

Canvaでのテキストの作り方、貼り方

基本的には、
いちばん大きい
「見出しを追加」で!

岸かれか
岸かれか

フォントについて

フォントはサムネイルの雰囲気を作る大事な要素
なるべく似たフォントを選ぶこと!
最低でもゴシック体と明朝体は合わせる!

フォント、
かなり使えるよ!

岸かれか
岸かれか

フォントだけど、
色々試したけど
UD角ゴ_ラージ Bold
ヒカリ角ゴBあたり?

岸かれか
岸かれか

ヒカリ角ゴBは
無料版でも使えるよ

岸かれか
岸かれか

※××の倒し方だと申し訳なかったので、初めから「サムネイルの作り方」にしています

上の文字も
やっちゃおっか

岸かれか
岸かれか

きい文字と
さい文字があるから
注意して真似て勉強して
ね!

岸かれか
岸かれか

・・・。

もうだいぶ
それっぽいよね?

岸かれか
岸かれか

テキストのデザインには
Canvaは弱いから
寄せる感じでいこうか

岸かれか
岸かれか

Canvaでの文字の装飾の仕方

Canva内でのコピーして
貼り付けの場合は
違うページでも
「同じ位置に載ってくれる」よ

岸かれか
岸かれか

だから、
細かい作業は
別ページで行うのが楽

岸かれか
岸かれか

文字は
先に用意してみたよ

岸かれか
岸かれか

エフェクトの詳細画面が
出るから、
「ネオン」を押して!

岸かれか
岸かれか

ネオンの下
「輝度」を100%で♡

岸かれか
岸かれか

それで、
元のページに貼り付け

岸かれか
岸かれか

これで一通り完成!

岸かれか
岸かれか

お手本と見比べて、違いを確認する

もっと極めたい人は
違いを確認して
反省会するといいよ

岸かれか
岸かれか

やっぱ顔の辺り
余白少ない…

あとは、
文字が黄色ラインの
沿ってなくて
見栄えちょっと悪いかも…?

岸かれか
岸かれか

あと全体的に白いね…!?
後ろの画面を
黒にしてから
透過すれば良いかな…

岸かれか
岸かれか

②テンプレートは変えずに、
色を変えたり内容を変えて自分流にアレンジ

こっからの作業は
正直、直感で
この方が可愛い!を
追求してるよ♡

岸かれか
岸かれか

これを

岸かれか
岸かれか

これに変える!

岸かれか
岸かれか

このサムネイルで伝えたいことの確認

このサムネイルで
伝えたいこと!

岸かれか
岸かれか

・わたしの顔、かわいい
・映えてる感じ欲しいよね♡
・「サムネイルの作り方」であることが一発で分かるように
・あとやっぱりわたしの顔、可愛い♡

これを元に作っていくよー

岸かれか
岸かれか

背景の明度を似たものにする→編集が楽!

簡単に言っちゃえば、
背景が暗いから
暗い背景にすると
編集が楽

岸かれか
岸かれか

暗い背景で
映える背景は「夜空

はい、夜空採用♡

岸かれか
岸かれか

そのまま、
「背景を差し替えます」で!

岸かれか
岸かれか

なんだか宇宙猫…

岸かれか
岸かれか

使っている色を少なくする!

なんか色が
ごちゃごちゃしてる…

岸かれか
岸かれか

とりあえず、
私の服の色とか目の色と
同じ色だけを使うようにしよ♡

岸かれか
岸かれか

ほら、わたしの色って
全てがかわいいから♡

岸かれか
岸かれか

カラーパレットで
全部わたしの色にしただけ

岸かれか
岸かれか

色を統一するだけで
こんなに、それっぽくなる

岸かれか
岸かれか

色を変えたbeforeafter

before

after

ちょっと
美白になったよね♡

パーソナルカラーで
身を固めるの大事

岸かれか
岸かれか

目線誘導と目的

これだと、
「何故筋トレ画像…?」
ってなるし
可愛くないから削除

岸かれか
岸かれか
岸かれか
岸かれか

文字も
それっぽく変えたよ!

でもやっぱり
画像ないと寂しいから
「サムネイルっぽい画像」
貼ろう!

岸かれか
岸かれか

色がわたしの
邪魔をしている


わたしと、文字を
見てもらえるような
向きにも
したいな…?

岸かれか
岸かれか
岸かれか
岸かれか

それと
配信サムネイルっぽく
「LIVE」とかつけちゃう…?

現在のサムネイルの完成形

できたーーーー!

顔が天才♡、頭が天才♡
プロポーションが天才♡

岸かれか
岸かれか

おわり(どうでもいい会話)

春原うめこ
春原うめこ

すっごく喜んでるな?

飲み過ぎの頭に響くから
静かに…

夏日まわり
夏日まわり

でも、頑張ったね☆

皆して
態と欠席しやがって
わたしはお怒りです

岸かれか
岸かれか
春原うめこ
春原うめこ

よし、締めよう

そうだった!?

岸かれか
岸かれか

じゃあ、
また”世界”で
逢いましょうか…♡

岸かれか
岸かれか
春原うめこ
春原うめこ

一々、中二病だけど
間違ってはないから
否定出来ないんだよな

0

多くの方に教えてくださると、喜びます!
目次
閉じる