【何でも作れる⁈】Photoshopを使ったサムネイルの作り方
※こちらの記事はYouTubeの台本がもったいないので、そのまま貼っているものになります。記事の最後に実際の動画も張ってあります。
サムネ
3分で完成！
タイトル
【何でも作れる⁈】Photoshopを使ったサムネイルの作り方
挨拶
どうも。児島です。
今回はですね、Photoshopを用いた、YouTubeのサムネイルの作り方を解説していきたいと思います。
で、今回の動画を最後まで見て頂ければですね、基本的にサムネもそうなんですけど、簡単なバナーとかなら一旦作れるようになると思います。
なので、例えばリスティング広告のバナーだったりとか、SNS広告の画像だったりとかっていう感じですね。
さらに、SNS広告の画像って基本的にテキストが少ない方がimpが増えるって言われているので、あんまりデザインにこだわりまくる必要ってないんですよね？
なので、実はそこまでこういった画像編集ソフトのスキルって必要ないんですよ。
つまりはですね、サムネを作れれば、結構な数の画像制作みたいなのができるようになるので、地味に役立つスキルになるので、是非身に着けて頂ければと思います。
はいじゃあ、まずPhotoshopをダウンロードしておいてください！
ここに関しては、「Photoshop ダウンロード」とかって検索すれば出てくると思うので、そんな感じで検索してください。
で、Photoshopを実際に開いたとことから解説していきます！
（ここでPhotoshopの画面に切り替わる）
はい、じゃあ早速解説をしていくんですけども、今回はこの動画のサムネイルを作っていきたいと思っています。
で、制作を本格的に初めて行く前にですね。他の方の動画とかでも解説してたりするんですけども、サムネイルを作る際での注意点についても説明させて頂ければと思います。
この注意点を守って頂ければですね、YouTubeでの表示回数UPも望めると思います。
で、注意点なんですけど、YouTubeのサムネイル制作においては注意点が3つありまして、
検索したときに上がっているチャンネルのサムネイルの特徴を真似する
文字はできるだけ大きく
背景はダークカラー
みたいなところですね。
ちなみに3つ目は最近入手した情報になるので、検証とかも出来てないのと、僕のちょっと前の動画とかは守れてない可能性がありますね。
まず、1つ目について解説していくと、YouTubeの検索も基本的にはAIみたいなもので、表示する検索結果を決めていたりするんですけど、AIっていうのは基本的に似ているものを上げるっていう性質があるんですよね。
なんでかっていう話をすると若干難しいのでそういうものって思ってもらえればいいんですけど。
実際、この動画見終わった後とかでも検索してみると分かりやすいと思います。結構似たようなサムネイルの画像とかが上がってくると思います。
なので、基本的には検索ワードで人気そうな動画のサムネイルの特徴を少しパクってあげてください。
文字の色だったりとか、配置だったりとかですね。
で、次に文字を大きくっていうところなんですけど、これについては説明するまでもないかなと思うので割愛します。
で、3つ目ですね、背景がダークカラーにしてあげると、まあそもそものYouTubeの背景が白いので、視認性が高いんですよね。
なので、ダークカラーにしてあげると視認性が上がって、クリック率が上がるって言われています。
はい、じゃあサムネイル制作におけるポイントみたいなところをお話したので、実際に作って行きたいと思います。
まずは新規作成ですね、クリックしてあげてください。
ここで、サイズを選ぶ画面になるんですけど、サイズは「1280×720」ですね。
適当にWebの中からとか選んで上げて自分でサイズを調整してあげて下さい。
で、新規作成が出来ると、こんな感じで下地がいきなり出来上がります。
ここで、まずはさっき説明したダークカラーの背景を設定していきたいので、まずはこの手のひらマークの上の部分で四角を作ります。
四角になってない人は、右クリックで形も選べるので、四角にしてあげてください。
四角にしたらこの下地をが隠れるくらいの大きさで、四角を作ってあげます。
作り方は左上から右下に向かってドラッグアンドドロップですね。はみ出してしまって大丈夫です。
こうすることで、まずは背景の色を自由に変えられるようになりました。
で、こうすると、右のところに、属性っていうタブが表示されると思うので、ここで色を変えていきます。
今回はダークカラーにしたいので、色を変えるときは、ここにある四角の左の部分をクリックしてあげます。
右の四角は縁の色になるので、今回はスルーですね。
で、ここクリックしてあげるとあとはまあ好きな色をクリックするだけで、色が自由に変えられるんですけど、今回はちょっと特殊なグラデーションでダークカラーの背景を作って行きたいと思います。
で、グラデーションのやり方なんですけども、右から2つ目の四角をクリックします。
ここをクリックするとこういった画面になります。
そうすると、また四角をたくさん選べるようになるので、この中の今回は、この青と黄色のモノをクリックして作っていきます。
で、この真ん中の部分を少し明るい青にしていきたいので、ゲージの真ん中の黄色い四角をダブルクリックします。
そうするとグラデーションをかける色が選べるようになります。
で、この中で明るい青色を選んであげてですね、はい。これでダークカラーの背景が完成しました。
今度はこの上に、私の写真をのっけて上げます。
のっけ方として一番簡単なのは、おそらくフィルだからドラッグアンドドロップだと思うので、その方法でやります。
写真のある、フォルダを開いて上げて、そこからこのPhotoshopの上にドラッグアンドドロップしてあげれば、こんな感じで画像をPhotoshopに読み込めます。
で、今度はこの写真の背景が邪魔なので、私の部分だけ切り抜いていきます。
で、ここでPhotoshopはすごく便利でして、上の部分の「選択範囲」のところをクリックしてあげて、その中の「被写体を選択」をクリックしてあげます。
で、少し待つと、こんな感じで自分を選択してくれます。
で、もしかすると、こんな感じで、少し背景も残ってしまったりするので、そしたら、上から4番目のクイック選択ツールを選択してあげます。
これでですね、現状の選択範囲を微調整できます。
もしかしたら、一気に広がりすぎる設定のままかもしれないので、そんな時は、左上のここクリックしてあげて、「面積」って部分の小さくしてあげればより微調整が出来ます。
これで、微調整をしてあげて、今度右下の、四角に穴が空いたみたいなボタンをクリックしてあげます。
そうすると、こんな感じで切り抜けます。
これでも若干背景余ったりするので、そんな時は消しゴムツールとか使って消して上げます。
これですね。
これもさっきと同じように面積の調整がここでできるので、小さくしたり大きくしたりして調整して下さい。
ここまで出来れば、ほとんど完成で、今度は文字入れですね。
ここでのポイントは冒頭で説明したように、大きく見やすい文字ですね。
今回は背景がダークカラーなので、白文字で書いていきます。
文字入れるときは左のTって書いてあるところをクリックして、行います。
はい、こんな感じで文字入れも完了ですね。
文字に関しては、右のAみたいのが書いてある部分でですね、斜めにしてみたりとか、レイヤーのところをダブルクリックしてあげて、境界線を浸けてあげたりとかが出来ます。
詳しくは実際に自分の手で試してみてください。
はい。これで、サムネイルの完成ですね。
で、最後はctrl+shit+sで画像で保存してあげましょう。
拡張子をjpgに変更して、名前を付けて保存します。
加えて、一応デザインデータも残したいよっていう人は、ctrl+sで通常のPSDが保存できます。
以上でサムネイルの作り方が完了ですね。
はい！
今回はYouTubeに必須のサムネイルの作り方をPhotoshopを使って解説させて頂きました！
これ以外にもですね、Photoshopを持っておくと、マーケターだったり、Webディレクターみたいな仕事をしている方でしたら、ちょっとバナーを微調整したり、LPを微調整したりとかもできるので、この動画をきっかけにですね、是非導入してみてはいかがでしょうか？
概要欄に一応。PhotoshopのインストールURLもおいてあります。
今後もですね、こういったWeb関係の仕事をしている人にとって為になる情報をどんどん発信していきますので、今回の動画が為になったなみたいな人は是非、高評価とチャンネル登録をお願いします！
ありがとうございました！
児島のYouTube
http://www.youtube.com/channel/UC8nMZCY5Bfxnxh4asB9MiGg
児島のツイッター
https://twitter.com/miwabasket
児島の代理店の公式HP
https://xn--u9jvfpb7ab2fze8gid0hg2ir931dtb6a.jp/
趣味メディア
この記事が気に入ったらサポートをしてみませんか？