フォトショップを使ったサムネイル、アイキャッチの作り方【初心者向】

デザイン
iedene
皆さま今日は!副業サラリーマンiedeneです!
本日はフォトショップを使ったサムネイル、アイキャッチの作り方について
初心者向けに解説していきます。
“おしえてさん”
フォトショップって知ってますけど
難しいって聞きますよ。
初心者でも出来るんでしょうか?
iedene
初心者でも出来ますよ!
一昔前は画像を編集するソフトはフォトショップしかなかったです。
今は色々なソフトが出回っていて、
誰でも簡単に写真に文字を入れたり出来ます。
しかし全てのソフトのベースとなっているのはフォトショップです。
画像編集ソフト界のビートルズみたいな存在ですね。



今回はフォトショップを使ったサムネイル、アイキャッチの作り方をお届けします。

ブログやYouTubeをされている方なら作っている、アイキャッチ画像、サムネイルについて、

フォトショップを使った簡単な作り方について解説していきます。

ちなみにサムネイルとは「Thumb nail」と書き、直訳すると「親指の爪」と言う意味です。

今ではスマホ一つで簡単に画像に文字を入れることが出来ますが、

画像をいじる事ができるソフトといえば元祖はフォトショップ!

かなりややこしい、難しい、でもカッコいい、

旧車に好んで乗るような感じが好きな方、

本物志向でツールにこだわりのある方は是非フォトショップを使って欲しいですね!

【本記事の内容】

■フォトショップを使った簡単な画像制作方法■
・フォトショップとは?
・アイキャッチ、サムネイルの作り方
・適正なサイズについて

【記事を読んで欲しいのはこんな人】

・アイキャッチ画像、サムネイル制作に苦労してる人
・なんだかんだフォトショップを使いたいと思っている人
・ギアにこだわりのある方

フォトショップとは?

フォトショップの基本

Photoshopは世界で最も有名な画像編集ソフトです。

デザイナーを目指す=フォトショ・イラレを使えるようになる。

まずはこれが大前提でした(昔は)。

写真を加工・合成したり、美しいグラフィックを作ったりと本当に色々なことができます。

PhotoshopはAdobe(アドビシステムズ)というアメリカのソフトウェア会社によって提供されています。

とはいえ日本語で使えますし、使用方法の解説書も日本語でたくさん出版されています。

ちなみにAmazonや楽天などのサイトでも販売されていますので参考にして下さい。

機能解説

フォトショップは画像編集ソフトのパイオニアである為

様々な機能がありますが、全てをくまなく使いこなせる必要はありません。

私も全体の20%程度の機能しか使っていないと思います。

ですのでフォトショップの機能を全て説明することは出来ませんが、

一言で言うと想像できる全ての画像の加工が可能となっています。

レイヤーとは?

一番ポイントとなるのがレイヤーの概念だと思います。

レイヤーと言うのは透明なフィルムだと思ってください。

それらを重ね合わせて画像の編集ができる機能と言う事です。

これはイラストレーターでも同様の概念で作業をする事となりますので重要です。

レイヤーと言う機能を理解すると作業の効率がグンと上がります。

前に持ってくる、後ろに隠す、レイヤー毎に編集するなど

レイヤーを使いこなすとかなり複雑な画像編集も可能になります。

まずはレイヤーという概念をきっちり覚えておいてください。

アイキャッチ、サムネイルの作り方

ベースとなる写真を選ぼう

まずはベースとなる写真を選びます。

イラストでもいいです。

これらの画像の上に文字を載せるのが基本的な作りになると思います。

画像もイラストもフリー素材からチョイスで問題はないです。

自分で撮影した写真でもいいんですが、やはりクオリティが、、、、、、

ここはプロの力をお借りした方が賢明かなと思います。



まずフォトショップを立ち上げます。

ファイル→開くを選択



ポップアップウィンドウが出ますので使いたい画像選択して開くを押します。



すると選択した画像が開きますのでベースとなるデータが出来ました。

ここで先ほど話をしたレイヤーはどこにあるのか説明します

通常ですと作業画面の右にあります。

紙が重なっているようなアイコンのメニューがレイヤーになります。

テキストを入力

テキストを入力します。

グログのアイキャッチ画像もYouTubeのサムネも目立って、ユーザーが見たい!と思わなければ意味がありません。

文字の配置や大きさを変えたりと色々な方法があり、

皆それぞれの成功パターン(個性)をお持ちです。

ですので私はその辺りは解説しません。

あくまで文字の載せ方の解説になります。

まずツールバーから文字入力のメニューを選択します。



次に画面の中央でクリックすると仮の文字が入力されます。

ここでは「Lorem Ipsum」と入力されました。

レイヤーを見ると文字レイヤーが増えている事がわかります。

ここで重ねたい文字を入力すればOKです。

今回は本記事のアイキャッチ画像を制作します。

文字レイヤーを選択し「フォトショップを使った簡単な画像編集方法」と入力します。

文字の大きさを上部のフォントサイズで修正して終了です。

改行は文字入力と同じ方法でenterキーで出来ます。



最後に文字の色と行間を設定します。

画面右のメニューからフォントをクリックします



フォント編集のポップアップが開きますので行間と色を変えます

色はポップアップ右下の赤い色をクリックします



色のポップアップが開きますので今回は白い文字にします

白にする場合は四角で囲んだ数値を上から0、0、100、にします。

ちなみに黒にしたい場合は0、0、0、にします。



下が完成形になります。文字の大きさと行間は見やすいサイズに調整して下さい。

文字を読みやすくする

文字を写真に乗せただけだと読みにくい場合があります。

文字を目立たせるテクニックとして3つの方法をご紹介します。

文字の色と大きさを変える

文字の色と大きさを変えるのは基本中の基本です。

やり方は簡単で先程の「フォント編集のポップアップ」を使います。

ポップアップウィンドウの中に色と大きさを変更できる箇所がありますのでそこで調整します。

文字に縁どりをする

こちらは少し上級編です。色々なやり方がありますが私は「レイヤー効果を使います」

レイヤーウィンドウの下の部分のこの部分を押すとレイヤースタイルウィンドウが開きます。

このウィンドウで選択した効果を、選択したレイヤーに与える事が出来ます。

文字に縁取りを入れたい場合は「境界線」を選択して編集します。

文字の下に色を敷く

こちらもよくあるテクニックだと思います。

文字の下に文字が目立つように色を敷きます。

敷く色はなるべく写真の中にある色にした方が違和感がありません。

しかしポイントがあります。

敷く色と文字の色が違うことはもちろんなんですが、「明度差」をつけるようにして下さい。

「明度差」とは「明るい、暗いの差」という意味です。

文字が明るければベースは暗く、文字が暗ければベースは明るくして下さい。

こちらも慣れてくれば良い組み合わせが見えてくると思うのでストックしておくといいと思います。



レイヤーウィンドウの下部分にある「レイヤー追加ボタン」から

新規レイヤーを追加します。



次に選択ツールを使って色を敷きたい範囲を選択します。

選択された部分は点線で表記されます。



最後に選択された場所に「塗り潰しツール」を使って

色を入れれば完成です。

適正なサイズについて

ブログのアイキャッチ画像適正サイズ

600×314 ピクセルで比率 1.91:1 が基本となります。

これ以上大きなサイズ(比率)だとはみ出した部分が切り取られます。

多少切り取られてもいいように文字情報は中心部分に持ってくるといいと思います。

YouTubeサムネ適正サイズ

1280×720 ピクセルとなります。

アップロードする画像ファイル形式は、JPGGIFBMPPNG、です。

その他の適正サイズ

例えばTwitterのヘッダー画像サイズは 1500×500 ピクセルとなります。

そのほかTwitterカードの画像サイズ比率は1:1だったりします。

何れにせよはみ出した部分は切り取られてしまうので覚えておきましょう。

まとめ

いかがでしたでしょうか?

フォトショップを使った画像編集は高度な技術を要します。

今はもっと簡単なソフトも多数あります。

有名なものではCANVAというフリーソフトがあります。

こちらを使われている方も多いのではないかと思います。

しかし画像編集ソフトの元祖はフォトショップです。

一度覚えてしまえば写真の色味調整なども自由にできるので覚えておいて損はないと思います。

音楽でいうとビートルズ的な存在のフォトショップです。

こだわりのある方にはおすすめです。