こん◯◯は、ikarushです。
Photoshop前回の「美女画像編」は、今後も継続して色々なパターンやテクニックを紹介するとして、今回はWordPress画像。
特にWordPressのトップを飾るアイキャッチ画像の加工について、お話したいと思います。
- 無料でダウンロードした画像を差別化するために加工したい
- Photoshopでの編集がよくわからない
- 画像の質を上げてCV向上に役立てたい
など、画像の編集や加工となると意外に難しいですよね。
スマホのアプリでは様々な加工アプリがあるので、それらを利用される方もおられるかと思います。
ただ、文字を入れて特定のサイズにトリミングしてなど、様々な要求に応えられるソフトとなるとPhotoshopやGIMPのような、PCでレイヤーを扱う特定のソフトになってしまい、操作方法が良く分からないというケースも多いのではないでしょうか。
そこで今回はそんなWordPressのアイキャッチ画像の加工について、これまで自分がブログで作成、実際に使用している画像の作り方をお伝えいたします。
Photoshopで良くフューチャーされる「人物画像の切り抜き」なども説明していきます。
このブログ記事を読んでPhotoshopを使用すれば、カンタンに画像の加工ができちゃいますよ！
ちなみにPhotoshopを含むAdobeの製品は無料体験版が利用可能です。
以下に体験版ページのリンクを貼りますので、当記事の内容をご覧になって興味ある方は、無料体験版から始めてみると良いと思います。
■Adobe PhotoshopCC 無料体験版
https://www.adobe.com/jp/products/photoshop/free-trial-download.html
目次
Photoshopでの画像加工【WordPressの画像を作る】
それでは早速作業に進んでいきましょう。
ここでは実際の作業に入っていく前に、全体の概要と、今回のブログで作成する実際のアイキャッチ画像を紹介します。
今回の作成していく教材としてのアイキャッチ画像はコチラ。
２日前（5/7）に作成した「【読書】初めての本を選ぶ方法【サクっと読める本ランキング】」
この画像を作成する詳細手順をご紹介します。
なお先に１つ言い訳させてもらうと、全てのアイキャッチ画像の完成データをPhotoshopのファイルデータ（PSDファイル）で保存していないので、ほんのちょっと出来栄えが変わる可能性があります。
またカンタンに作成の流れをお伝えすると、
- 適当なフリー素材を探してきて
- Photoshopで新規ドキュメント作成
- 探してきた素材などをPhotoshopに投入
- 文字のフォント変更や調整、色味の編集をして
- 書き出しを行う
こんな流れです。
それでは、アイキャッチ画像の詳細手順の流れを見ていきましょう。
アイキャッチ画像作成①：適当なフリー素材を探す
今回編集するブログ記事のタイトルは「初めての本を選ぶ方法」です（一部割愛）。
そのため、「本」や「選択」「方法」などがキィワードであり、それに見合った印象を与える画像である事が重要でしょう。
今回はイラストではなく画像（＝写真）にしたいと思いますので、私の行きつけの無料素材サイト「O-DAN」を利用したいと思います。
なおO-DAN含め、私が普段利用している登録フリーの無料画像サイトについては、以下のブログ記事を参照ください。
今回は検索していて目に止まった以下の画像を使いたいと思います。
本がちょっとボロボロになっているのが気になりますが、「お気に入りの１冊！」のように本を抱えている様子が印象的だったので選びました。
またダウンロード時のサイズは念のため、一番大きいサイズを選択しました。
なお今回はこちらの画像のみダウンロードしていますが、普段は候補となりそうなものを数枚ピックアップしてダウンロードしています。
画像加工してみてイメージにそぐわなければ、改めて素材を検索し直す事もありますので、その辺りは自由にしてみてください。
また今回の画像は縦向き画像です。
WordPressやブログでは横向き画像が多いと思いますが、その辺りもPhotoshopで加工できますので、編集を進めていきましょう。
アイキャッチ画像作成②：新規ドキュメントを作成し素材を投入する
次はPhotoshopでの作業です。
まずは台紙となる新規ドキュメントを作成します。
私のブログでは728×364サイズというちょっと大きめの画像サイズにて作成しています。
基準としては使用している有料テーマ：ストークの、一番大きく画像が表示できるレイアウトのためですね。
今後もしかしたら少し小さめのレイアウトにするかもしれませんが、「大は小を兼ねる」にて選択しています。
なお新規ドキュメントの詳細な作成方法・操作方法については、「美女壁紙作成」編でお伝えしておりますので、操作分からない方はご参照ください。
新規ドキュメントを作成して画像を取り込みました。
わざと実際の画像サイズが分かるように画像の稜線を表示させていますが、ドキュメントで作成した枠に収まり切っていません。
そこでこれを加工していきます。
アイキャッチ画像作成③：画像を加工して最適な状態に落とし込む
では改めて画像の加工です。
先ほどの画像は大きすぎるため、サイズを小さくして、モデルの身体全体が収まるように設定します。
操作の方法は画像を選択している状態で「Ctrl＋Ｔキー」で画像の拡大縮小ができます。
画像の拡大縮小は、画像の四隅をD&D（ドラッグアンドドロップ）して操作します。
その際、Shiftキーを押しながら操作する事で、元の画像の比率を保ったまま拡大縮小が出来るようになります。
ここでモデルの身体がドキュメントに収まるようなサイズにしたところ、右側の身体が切れてしまっている事に気づきました。
つまり中央や左側に画像を配置すると、モデルの画像が切れた、ちょっとカッコ悪い画像になってしまいます。
変に切れた画像としたくないので、今回はモデルの画像は右端に追いやって、違和感のない配置にする事にしました。
次はこの大きく広がった余白の処理です。
この余白の処理は大きく２つのパターンで編集が可能です。
- 人物を切り取って背景を差し替える
- モデルの背景を複製して引き延ばす
それぞれ方法を解説します。
余白処理①：人物画像の切り抜き
１つ目の方法はモデルである人物画像のみを切り出し、背景を別に差し替える方法です。
クイック選択ツールを選び、上に表示されている「被写体を選択」をクリックします。
するとモデル画像（の一部）が勝手に選択されるようになります。
これはPhotoshopCCで2018年から導入された、Adobe SenseiというAIを利用した方法です。
Photoshop内のAIが勝手に人物画像を選定し、勝手に選択してくれるというスグレモノです。
ただ選択箇所を見ると本の一部分が選択されていなかったり、髪や身体の一部も選択されていません。
そこで改めて手動にて、実際に操作したい人物画像を選択します。
選択が完了したら、先ほどの「被写体を選択」の隣にある「選択とマスク」をクリックします。
すると選択箇所以外の部分が単色（この場合は赤）になりました。
ここでは、髪の毛の一部で背景が残ってしまっている部分などを選択します。
なお、髪の毛１本１本までキレイに完全な状態で切り抜こうとすればするほど、この作業はシビアなものになります。
詳しくはご自身で色々操作したり、今後このブログでもこの作業について何度か取り上げる予定でいますので、詳しくは後日説明します。
今回は髪の一部を赤い部分に変更し、数値設定するグローバル調整を変更しました。
全て問題なければOKをクリックして、改めて人物画像の選択状態に戻ります。
なおここで削除＝Deleteキーを押すと「選択されている人物画像」それ自体が削除されています。
そこで選択範囲の変更を操作します。
ツールバーの場合は範囲選択＞選択範囲を反転から。
ショートカットキーの場合は「Shift＋Ctrl＋Ｉキー」にて可能です。
選択範囲の反転をしたら、改めて削除をしましょう。
モデルとなっている人物画像の背景が（下のレイヤーの色である）白になれば完了です。
後は適当にダウンロードした背景画像などを合わせれば、それっぽい画像の出来上がりです。
余白処理②：人物画像の背景を複製する
もう１つの方法は、人物画像の下にある背景画像を複製して余白を埋める方法です。
これは複雑な背景、例えばキレイな街並みやハッキリとわかる背景などではあまり使用できないのですが、この画像のように単色やパターン柄のような背景では使用できる方法です。
操作方法はいたってカンタン。
まず長方形選択ツールを使用し、画像の背景を少々含みながら、余白の白い部分を選択します。
次いでツールバーの編集＞塗りつぶしを選択します。
ショートカットキーの場合は「Shift＋F5キー」ですね。
すると塗りつぶしのダイアログボックスが表示されますので、何も数値など変更せずOKをクリックします。
すると、選択していた画像部分を読み取って、余白部分にその読み取った画像を自動的に配置してくれます。
パターン性を読み取っての配置になるため、背景のムラにパターン性が感じられますが、ここから同じ塗りつぶし操作を複数行うなど、少しランダム性のある背景が作れるように編集すればOKです。
実際に使用した画像も、この操作にて作業しましたので、以降はこの画像にて進めて行きます。
アイキャッチ画像作成④：文字の入力
背景画像が出来上がりましたので、最後に文字を入力します。
なお文字フォントについては様々あり、例えばAdobe Fontsなどを利用すれば、優良なフォントを利用できます。
今回はたまたまTwitterで最近見つけた以下のフォント情報を載せておきます。
コリスさんはPhotoshopに限らず、一般的なフォントやWebデザインについての情報を扱っているメディア様です。
このようなフリーフォントなどを好きにPCに取り込んでおいて、自由に選択して使用します。
調整を行って以下のようになりました。
レイヤー効果で境界線、グラデーションオーバーレイ、ドロップシャドウを追加
なお文字の一部が人物画像の下に表示されている個所がありました。
これは先ほどの人物画像のみを切り出す操作で、別レイヤーにコピペして、その人物画像と背景画像の間に文字を入れているようでした。
なお実際に使用した画像は背景が薄くピンク掛かっており、人物画像がクッキリしています。
この辺り、前回案内しました以下のブログを参考に見ていただければ分かると思います。
合わせてご確認ください。
Photoshopでの画像加工【WordPressの画像を作る】：おわりに
いかがでしたでしょうか。
人物の切り抜きや背景パターンの複製など、覚えれば数秒で出来てしまうテクニックと合わせて、アイキャッチ画像の作成法を案内してみました。
アイキャッチ画像の正解という意味で、ブログ記事の中身に合っているという点以外で、本当の正解が何なのかは正直よく分かりません。
分かりませんが、文字を入れたり色味を変更する事で、自身が描くブログ記事のイメージにつなげられる事。
そしてブログに興味を持っていただくための一助に出来る事は、確かなのではないでしょうか。
今後は基本的に「美女壁紙編」の方で、他の画像加工テクニックを紹介して行こうと思います。
他に例えばリクエストなどいただければ、チャレンジしてみたいと考えていますので、質問や感想などいただけると嬉しいです。
では次回は「美女壁紙編」の方でお会いしましょう！
コメントを残す