ブログ

【初心者向け】Photoshopを使ってブログアイキャッチを作る方法

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載>

日々YouTubeやブログを目にしている人にはおなじみの"アイキャッチ"
Youtubeだと”サムネイル”といったりしますね。

『記事の顔』であり多くの人にみられるものなので、きれいに作りたくないですか?

画像が荒かったり色使いが悪くて読みづらかったりすると記事を読んでもらえなかったりします。

ハリネズミくん

きれいに作りたいけど、どうやって作ったらいいんだろう・・・

という方に向けて、この記事を読ではこの記事で使っているアイキャッチ画像の作り方を解説します。

作り方

アイキャッチの背景となる画像を用意する

まずはアイキャッチ画像の背景として使用する画像を用意しましょう。
ここではUnsplashの画像を使って進めます。
Unsplashは無料でも利用でき、商用利用も可能な画像素材サイトです。

今回は「mac」と検索して出てきた画像を使います。

Photoshopを開き、サムネイルのピクセル数を設定する

Photoshopを開き、「新規作成」をクリックします。
表示されたダイアログで、アイキャッチ画像に使用するピクセル数を設定します。

おすすめのピクセル数設定

この記事でも使用しているサムネイルの設定です。

設定箇所単位
設定箇所単位
ドキュメントの種類カスタム-
1200pixel
高さ630pixel
解像度72pixel/inch

ピクセル数を考えるにあたって、Googleの推奨値である幅1200pixelを軸として、縦・横の比率が重要になってきます。
SNSで記事が共有されることが多く、使用するSNSによって比率が異なります。

SNS縦横比率
Twitter1:2
Facebook1:1.9

なお、解像度に関してはWeb上で表示する場合は72pixel以上にしてもきれいにはならないようです。

【補足】設定はプリセットに指定しておくと便利

ダイアログ右の「プリセットを保存…」をクリックして保存しておくと、次回以降「ドキュメントの種類」でプリセットを選択するだけで設定できて楽です。

【補足】Google 検索セントラル での画像サイズ規約

Google検索セントラルでは画像サイズは幅1200ピクセル以上が推奨されています。
また、幅と高さをかけて800,000ピクセル以上との記載があります。

Google検索セントラルドキュメント

画像を読み込む

「ファイル」メニューから「開く」とクリックして画像を読み込みます。
画像ファイルのドラッグ&ドロップでも読み込み可能です。

背景として使用したいので、ドラッグして幅に合うよう引き伸ばします。

位置が決まったら「○」ボタンをクリックして確定します。

アイキャッチ画像に入れるテキストを入力

左ペインの「T」ボタンをクリックします。

タイトルを入力

タイトルを入力します。
ここで気をつけるのは左右の余白です。以下のようなタイトルではアイキャッチ画像で正方形に切られた場合、はみ出てしまいます。

テキストにレイヤー効果をつける

テキストレイヤー部分を右クリックして出てくるメニューから「レイヤー効果…」をクリックします。

「境界線」と「光彩(外側)」にチェックを入れます。

この記事で使用しているアイキャッチ画像では、光彩(外側)のエレメントセクションを調整しています。
スプレッド:50%
サイズ:15px

白い縁がついて、背景と文字を区別しやすくなりました。
※ここで左右の余白直しています。

jpegファイルとして書き出す

「ファイル」メニュー→書き出し→「Web用に保存(従来)」を選択します。

※より画質が良くしたい場合画像の拡張子「PNG」もあり。
 ここでは画質はそこそこで画像サイズを小さくしたいので「Web用に保存(従来)」を選択しています。

書き出し画像サイズを再度確認して、「保存…」をクリックします。

できあがり!

  • この記事を書いた人

ハリネズミくん

このサイトを運営しています。
普段はITエンジニアとして活動しています。
購入したもののレビューや、ゲーム、PCの設定や、筋トレ、その他生活改善情報などを発信していきます。
- 2021年8月ブログ開設 -

オススメの記事一覧

1

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> 友達とプレイする際、一緒にプレイ ...

2

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> タルコフ(Excape from ...

3

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> アイロンがけについて、このように ...

4

健康寿命を延ばしたい!と思ったことはありませんか?老いるということに関して、そういうものなんだ、自然の摂理なんだ、と諦め ...

5

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載> 「睡眠の質」意識されていますか? ...

-ブログ