パターンBでは、Aよりもポップで明るい印象の画像を作成します。
- 画像の背景透過
- 範囲を指定しての整列
- パターン素材の使用
など、Photoshopでよく使う操作方法を学びながら、サムネイル画像を作っていきましょう。
制作条件
アイキャッチ掲載事項
以下表のテキスト、素材画像を使ってアイキャッチを作成します。
| シリーズ名 | 成果につながる企業SNS運用 |
|---|---|
| タイトル | 企業が抱えるSNS運用の課題と解決策 |
| サブタイトル |
SNS運用の成功事例を独自にパターン化! 業種・ターゲット別に活用方法を徹底解説 |
| 出演者 |
女性) 株式会社EDesign 代表取締役社長 高橋 春香氏 |
|
男性) 株式会社イグニス マーケティング部部長 Jake Smith氏 |
|
| 画像素材 |
|
|
|
| その他記載情報 |
限定公開コンテンツ 会員様限定で、2024年1月31日までは無料で読めます |
画像のサイズについて
前回と同様の幅1200px × 高さ630pxで画像を作成します。 一緒に操作をされる方は、Photoshopで新規ドキュメントを作成してください。
1.必要な要素を配置
前回と同様に、アートボード上で文字や画像など掲載必須事項を大まかにレイアウトしていきます。
1-1.ガイドとグリッド
今回は、Photoshopの「グリッド」という機能を使ってみましょう。 方眼のようなマス目を表示してくれる機能で、こちらもレイアウトに便利です。
表示メニュー > 表示・非表示 > グリッドを選択します。
グリッドの表示非表示は、以下のショートカットキーでも行えます。
- Win：Ctrl + ＠
- Mac：command + ＠
グリッドのサイズは、編集 > 環境設定 > ガイド・グリッド・スライスから変更できます。 初期状態だとmm設定ですので、Web用画像制作がメインの場合はpxに変更しておくと良いでしょう。
解説では80px、4分割（小さい1マスが20px）に設定してみました。
グリッドとガイドは両方表示することも出来ます。 センターラインなどはグリッドで合わせようとすると大変。ガイドの方が設定しやすいです。
このあたりは制作するレイアウトや、ご自身の操作・確認のしやすさに合わせて設定してください。 グリッドもガイドも、人によって使う使わない・設定内容などが大きく異なる部分です。
1-2.背景とメインテキスト配置
ゲスト情報を除いた部分を作っています。 “A”のアイキャッチのように簡単に配置して後で整えても、フォントサイズなどを調整しながら配置しても構いません。
背景色設定・テキスト設定は、前回行った“A”とほぼ同じのため割愛します。 この時点で使っているのは、文字ツールと長方形ツールのみです。
今回はフォントに『凸版文久見出しゴシック StdN』を使っています。 こちらもAdobeのフリーフォント、アクティベートするだけで使えます。 くっきりしていてインパクトがあり、読みやすい書体ですので、ぜひ使ってみてください。
1-3.ゲスト情報のレイアウト
写真配置場所に長方形ツール（シェイプ）で160px × 160pxの正方形を2つ作ります。 スペースの関係上、社名と役職のフォントサイズは小さく設定しました。
●選択範囲を使った整列
右側、グリッド３マスの範囲内で、写真と文字を中央揃えで配置したいと思います。
こうした場合、Photoshopでは選択範囲を使って整列させることで位置を整えます。 長方形選択ツールを使って、整列させたい範囲を決めます。
整列の対象にしたいレイヤーを全て選択。
移動ツールに持ち替えて、水平方向中央揃えをクリックします。
↓
選択範囲内で、中央に揃います。
整列が終わったら、使用した選択範囲は解除してください。 選択範囲の解除が出来ない場合は、選択範囲ツールを選択している状態で、アートボード上で右クリック。右クリックメニュー内の「選択を解除」を選択するのが確実です。
2.人物の背景を透過させる
写真をまるく切り抜いた“A”のアイキャッチと異なり、今回は人物の背景を透過します。
解説では、写真の透過はアイキャッチ画像と別のPDFファイルを作成して行っていきます。 人によっては「透過素材作り」なんて呼び方をする作業工程になります。
素材化する写真など、ファイルを分けて作業することで以下のようなメリットがあります。
- 大きい状態で透過処理→縮小して配置するほうが綺麗に見える
- バリエーションを作る場合など、再利用しやすい
- 画像素材としての補正、作成する画像に合わせた加工と段階を分けられる
2-1.透過用PSDファイルを作成
Photoshopのファイルメニューもしくはショートカットキーで、素材画像を開きます。
ショートカットキー
- Win：Ctrl + O
- Mac：command + O
背景レイヤーを標準レイヤーに変更します。 背景レイヤーをダブルクリック、もしくは右クリックメニューで背景からレイヤーへ…を選択。
上書き保存、もしくは別名で保存を行います。 ファイルの種類で「Photoshop」が選ばれていることを確認し、保存してください。
これで背景透過用のPSDファイルができました。
2-2.背景を透過させる
Photoshopはワンクリックで、かなり高精度な背景透過が出来ます。やってみましょう。
プロパティパネルを開いてください。 写真のあるレイヤーを選択した状態で、プロパティパネルの“背景を削除”をクリック。
本当に写真の背景を削除するわけではなく、レイヤーマスクを使って隠している形です。 このため、自動設定で欠けてしまった部分・髪の毛のような細かいところは、自分でマスクを編集すれば調整も可能です。
今回はそこまで厳密に切り抜かなくて良いので、そのまま上書き保存してください。
2-3.もう一つの写真も背景透過
同様の手順で、女性の素材写真の方も背景透過します。 使いたいのは胸から上のあたりです。下図のように、下半身部分は上手く背景が透過できていなくても問題ありません。
こちらもPSDファイルで保存してください。
3.透過画像を配置
アイキャッチを制作中のドキュメントに、作成した透過素材を配置します。 psdファイルも、通常の画像ファイルと同じようにアートボードにドラッグ・アンド・ドロップするだけでOKです。
背景を透過した画像が配置されていますね。
用意したスペース内に、肩から上がおさまるくらいの大きさに調整して配置します。
今回の画像は背景が透過されています。 クリッピングマスク機能を使うと長方形が透けてしまうので、写真のレイヤーにレイヤーマスクを適用します。
【レイヤーマスクの作成手順】
- 写真のレイヤーを選択する
- 長方形レイヤーの描画ピクセルを選択（※）
- レイヤー > レイヤーマスク > 選択範囲外をマスク
- 長方形レイヤーを非表示にする
※レイヤーの描画範囲は、以下の操作で行なえます。 Windows：Ctrl、Mac：commandキーを押しながら、長方形レイヤーのサムネイルをクリック。
同じ手順で女性の写真も配置、レイヤーマスクを適用してください。
4.調整と装飾
ここまでで、画像に入れ込む必要のある画像やテキストの配置はできました。
ちょっとバランスが悪いですし、簡素な印象ですね。 バランスを整えつつ、見栄えがするように装飾を追加していきましょう。
4-1.ゲスト写真に装飾
背景透過した写真を貼り付けたところに、少し装飾を加えてみます。
- 楕円形ツールを使って正円を2つ追加
- 写真よりも背面（下）に、円のレイヤーを移動する
- 写真に合わせて円の位置、大きさ、色を調整
オレンジの方は色が強すぎるので、塗りの％を少し下げると良いです。
4-2.パターンを使った装飾
追加した円にもう一捻り。 パターンを使って、装飾要素感をアップさせてみましょう。
パターン素材の追加
Web上ではPhotoshopで使えるパターンファイルが沢山提供されています。 自作は手間と時間がかかるので、使えるものは有り難く活用させていただきましょう。
今回は以下サイトで提供されているパターンを使わせていただきました。
http://www.ar-ch.org/photoshop_pat_130404
ダウンロードしたファイルを解凍すると、拡張子が.patのファイルが出てきます。
この.patファイルをPhotoshopのパターンパネルへドラッグ・アンド・ドロップすると、パターン素材が使えるようになります。
パターンのパネルが無い方は、ウィンドウメニューから表示させてください。
塗りにパターンを適用する
パターンが追加されたら、使ってみましょう。
白い円が描かれている楕円形レイヤーを選択。 プロパティパネルのアピアランス > 塗りをクリックします。 塗りの種類アイコンの右端「パターン」を選択し、斜線のパターンを適用します。
パターンの大きさは左下、拡大縮小のスライダーで設定できます。
レイヤー効果からパターンを適用する
オレンジ色の円は、レイヤー効果から“パターンオーバーレイ”を適用してみましょう。
“パターンオーバーレイ”を使うと、現在の塗り色の上にパターンをのせることができます。
パターンを適用した2つの楕円形レイヤーを複製。 移動ツールで女性の写真の後ろに配置します。
4-2.シェイプを使って吹き出しを作る
メインタイトルの「企業が抱える」部分を、吹き出し風の装飾にします。 「企業が抱える」部分のテキストは、別のテキストレイヤーに分けておきます。
長方形ツールで「企業が抱える」の文字よりも少し大きい長方形を作ります。 塗りはなし、線に見やすい色を設定。 三角形ツールに持ち替えて、下向きの三角形を描画します。
三角形・長方形、２つのレイヤーを選択。 移動ツールに持ち替えて、水平方向中央揃えに整列します。
三角形が吹き出しのしっぽ部分になります。 お好きなサイズ、位置に調整してください。
三角形・長方形レイヤー選択状態のまま、レイヤーパネルで、レイヤー名あたりを右クリック。 表示されるメニューの中から、シェイプを結合を選択します。
シェイプが結合され、線が重なっていた部分が消えました。
長方形選択ツールで、長方形の上半分位を囲います。
レイヤーマスク > 選択範囲をマスク。
上があいている、吹き出し風の図形が出来ました。
作成した図形の位置、線の太さや色を調整してください。 【2-3.ゲスト情報のレイアウト】で行った選択範囲を使った整列で、下図のような中央配置もすぐできます。
写真の後ろに使った円を複製して装飾を足す、左上のシリーズ名を一行にする、などするとバランスが良くなります。
ガイドやグリッドの表示・非表示を切り替えながら、調整してみてください。
これで完成！ 時間があるときに、装飾を増やしたり、背景を入れるなどアレンジしてみても良いですね。
企業系ではなく、ご自身の好みに合わせて架空のアイキャッチを作ってみても楽しいですよ。 他人への公開はNGですが、憧れの人（芸能人など）の写真を使ってみても良いでしょう。
ご自身が楽しめる方法で、Photoshopを使ってみてください。