Twitchは近年のゲームのあり方を変え、Twitchのトップストリーマーはお気に入りのゲームをプレイして大金を稼いでいます。多くの視聴者にとって、Twitchはソーシャルメディアの新しい形のようなもので、最近Twitchのルールが変更されたにもかかわらず、これまで以上に人気が高まっています。

ストリーミングでお金を稼ぎたいなら、Twitchで大きな評価を得る必要があり、そのためには自分のストリームをプロフェッショナルに見せることが大きな要素となります。

今回は、Photoshopを使って簡単なTwitchオーバーレイを作成する方法を紹介します。そして、このオーバーレイはマインズ用で、他のゲームに合わせて変更することが可能です。さらに、YouTubeのゲームや、Mixer（マイクロソフトのTwitchの代替サービス）でのストリーミングにも完璧に対応します。

はじめに

その前に、今日完成させるものを見ておきましょう。

このチュートリアルのすべては比較的簡単ですが、Photoshopが初めての方は、まずPhotoshopのレイヤーチュートリアルを読んでください。もしあなたが無料のPhotoshopの代替品を探しているなら、GIMPは非常に強力です。

Photoshopを使わずにTwitchのオーバーレイを使いたい場合**このプロジェクトはGIMPで完全に可能です。使用するツールが少し異なるので、まずGIMPのガイドを読むことをお勧めします。

それでは、PhotoshopでTwitchオーバーレイを作成する方法をご紹介します。

キャンバスを作成する

オーバーレイの作成を開始するには、Photoshopを開き、画面解像度と同じ大きさの画像を新規に作成します。

さて、白紙のドキュメントができたので、オーバーレイを構築するためのガイドが必要です。選んだゲームのスクリーンショットを撮影し、「ファイル」と「場所」をクリックして画像を選択し、Photoshopに読み込ませることをお勧めします。画像をキャンバスの最大サイズに引き伸ばします。これで、オーバーレイ要素の作成に取りかかることができます。

トップバーの追加

新しいレイヤーを作成し、「Top Banner」と名付けます。左のメニューから「Rectangle」ツールを選択します。同じメニューで、カラーピッカーを開き、背景色を選択します。

次に、新しいレイヤーの上部をクリック＆ドラッグして、トップバナーを作成します。キャンバスの端に重なると、長方形が片方だけカチッとはまるので、ご心配なく。

次に、矩形に境界線を付けるために、レイヤーを右クリックして、ブレンドオプションを選択します。表示されたメニューから「ストローク」を選択し、ストロークの幅と色を好みの色に設定します。この場合、幅10pxの濃い赤色が良さそうです。OKをクリックし、レイヤーを選択します。移動ツールを開き、Vの字を押して、上のバナーを上に移動させ、後でテキストを追加するのに十分なスペースがあり、かつゲーム画面をあまり覆わないようにします。

最後に、一番上のバナーレイヤーを選択し、その不透明度を75%程度に下げます。これにより、ゲームの表示がわずかに透けて見え、オーバーレイがよりダイナミックな効果を発揮します。

せっかくなので、今までのことを活かして、2つのボトムバナーを作ってみましょう。

下のバナー

この下のバナーでもう一度同じことをするのではなく、上のバナーを右クリックして「レイヤーを複製」を選択するだけです。この新しいレイヤーを「右下隅」と名付け、移動ツール（キーボードのV）を使って画面の右下隅に移動させます。ゲーム内のツールバーと重ならないようにし、Ctrlキーを押しながらドラッグすると、より正確に配置することができます。

左下にバーを作るには、上記の方法で、画面左下に移動させるだけです。基本的なオーバーレイは完成しましたので、カメラ用のフレームを追加します。

カメラフレーム

新しいレイヤーを作成し、名前を「フレーム」とします。再び矩形ツールを選択し、Shiftキーを押しながらマウスカーソルをドラッグして、完全な正方形を作成します。四角の色は気にしないでください、後で塗りつぶしを取り除きます。

フレームを作成するには、レイヤーを右クリックし、「ブレンドオプション」を選択します。ストローク」を選択し、「位置」ドロップダウンメニューから「内側」を選択して、フレームを正方形の外側に配置するのではなく、正方形の内側に持っていきます。

もう一度、現在の配色に合った色と幅を選択します。次に、レイヤーを選択し、塗りを0％に変更し、フレームだけを残します。

移動ツールを使って左下のバナーの上に配置し、必要に応じてShiftキーを押しながらサイズを変更し、縦横の比率を維持します。

オーバーレイが出来上がってきましたが、次はテキストを追加していきます。

テキストを追加する

テキストの追加を開始するには、新しいレイヤーを作成します。テキストツール（またはキーボードのTキーを押す）を使って、新しいテキストボックスをドラッグして作成します。右側から、以下のように「キャラクター」メニューを選択します。

Photoshopのレイアウト上にこのボタンが表示されていない場合は、「ウィンドウ」> 「文字」をクリックすることでメニューを開くことができます。ここでお好みのフォントとカラーを選び、テキストを追加してください。移動ツールを使って、テキストを下部のバナーの1つに配置します。すぐに定位置になるはずですが、Ctrlキーを使えば、思い通りの場所に配置することができます。

これでテキストができましたが、ちょっとつまらなそうですね。そこで、目立たせるために、テキストレイヤー上で右クリックし、再度ブレンドオプションを選択します。テキストにストロークとシャドウを与え、少し目立たせる。ここではデフォルト値を使用していますが、これらの設定を使用して、より顕著な「フローティングテキスト」効果を作り出すことも可能です。

レイヤーを右クリックして「レイヤーの複製」を選択し、「移動」ツールを使って新しいレイヤーをそれぞれのコーナーポイントに移動して、他の3つのコーナーポイントにテキスト要素を作成します。

テキストの準備が整い、ほぼ完成です。ソーシャルメディア用のロゴとチャンネルのヘッダーロゴを追加してみましょう。

ソーシャルメディアロゴ

アイコンは、○○○○で市販されている既成のものを使うと簡単です。Icon Finderなどのサイトを利用すると便利ですが、後で法的なトラブルに巻き込まれないように、使用するアイコンが商用利用可のフリーマーク付きであることを確認してください。ロゴが表示されていない場合は、そのレイヤーを「レイヤー」メニューの一番上にドラッグして、「ファイル> 場所」メニューでPhotoshopに取り込みます。一番上にあることを確認してください。

今はFacebookのロゴがありますが、ちょっとつまらないですね。そのレイヤーを右クリックし、ブレンドオプションを選択し、ストロークを選択してフィットさせましょう。トップバナーのストロークと同じ幅のストロークを外付けにします。色を選ぶときは、スポイトでトップバナーの色に合わせます。

ロゴを画面左上まで移動させ、Ctrlキーを使って隅に丁寧に配置します。

Twitterのロゴについては、Placeを使ってプロジェクトに追加したときと同じ方法で追加してください。Facebookのロゴレイヤーを選択して右クリックし、レイヤースタイルをコピーを選択すると、少し時間を節約することができます。このロゴをもう一方の上部に移動し、必要であればテキストを移動して、自分に合うようにします。

では、中央のロゴを追加してみましょう。

チャンネルロゴ

チャンネルロゴがある場合は、視聴開始時に誰もがすぐにわかるように、前面に出すとよいでしょう。ロゴがまだない場合は、チャンネル名やウェブサイトをカスタムテキストに置き換えることができます。

まず、左側のツールバーから定規をドラッグすると、画面の中央にスナップするはずです。

ルーラーが表示されていない、またはキャプチャされていない場合は、「表示」メニューから、ルーラーとキャプチャの両方が選択されていることを確認してください。

プロジェクトにロゴを配置する。自動的に定規の中央に配置されるはずです。新規レイヤーを作成し、ロゴの下のレイヤーにドラッグします。長方形ツールを使って、ロゴより少し大きめの長方形を作り、フレーム効果を出します。

新しく作った正方形を目立たせるために、他のボーダーと同じ色のストロークを外側につけます。ロゴと枠線全体を移動しやすくするために、Ctrlキーを押しながら両方のレイヤーを同時に選択してください。マウスの右ボタンをクリックし、「スマートオブジェクトに変換」を選択します。これにより、ロゴとボーダーが同じレイヤーに保存され、必要であれば後で編集することができるようになります。

ロゴをオーバーレイの上部に移動し、サイズを変更します。

オーバーレイを保存する

オーバーレイを画像として保存する前に、Photoshopドキュメントとして「Minecraft Twitch Template」のようなファイル名で保存すると、後で別のゲームで使用するために変更することができます。

背景を透明にするには、ゲームスクリーンショットと背景レイヤーの目のアイコンを選択して、オーバーレイ要素のみを表示させます。

このファイルを拡張子.PNGで保存し、お好みのストリーミングソフトに読み込んでご利用ください。これは私のストリーミングソフトウェアで完成したオーバーレイで、オーバーレイがトップレイ、カメラがミドルレイヤー、Minecraftがボトムレイヤーです。

Twitchオーバーレイ完成：さあ、流れが始まるよ

twitchオーバーレイのやり方がわかったところで、いよいよストリーミングを始めてみましょう。ストリーミングソフトウェアを設定し、Twitchでプレイしたいゲームを選択することでチャンネルを開始します。もし、本当に制作価値を高めたいのであれば、グリーンスクリーンでの放送に挑戦してみてはいかがでしょうか。何よりも大切なのは、楽しむことです。