ライブ配信画面の「外枠」を作る方法。実例付き【3ステップ】

MacでDTMライブ配信

ライブ配信画面の「外枠」を作る方法について、解説していきます。

有名なライブ配信者の映像って、ひとめで「あの人の放送だ!」ってわかりますよね?そこでさまざまな配信者を、観察してみました。ちがいのひとつに、ライブ配信映像の外枠に特徴があることがわかったんですよ。

「自分でも、かっこいい外枠が作れるようになったら...」大丈夫です。それなら、実例付きでわたしが教えましょう。もちろん、まずはシンプルな外枠をつくります。基本を知れば、あとは応用するだけ!この記事にたどりついたあなたなら、できます。

というわけで今回は、ライブ配信画面の「外枠」の作り方を、実例付きで解説していきます。

この記事をよむと、こんな感じの「外枠」作れます↓

Outline cutout

ライブ配信画面の「外枠」を作る方法【3ステップ】

ライブ配信画面の「外枠」を作る方法を、解説していきます。

わかいりやすく、3つのステップにわけて説明していきますよ。だれでもシンプルな外枠を、作れるようになります。ぜひトライしてみてください!

【ステップ1】画像編集アプリ「PhotoScape X」を準備する

ステップ1は、画像編集ソフト・アプリを用意してください。

今回は基本無料の画像編集ソフト
PhotoScape X を使って、説明していきます。Windows・Mac 対応なので、環境がかわってもつかえるのがうれしいですね。

わたしもつかっていますし、ウィルスバスターいれていますが、問題がおきたことはありませんよ。Mac の場合は、さらに Mac App Store からインストールできるので安心感が3割増しですよ!ダウンロード&インストールが完了したら、ステップ1は終了です。

【Windows の人は、公式サイトから】
PhotoScape X - Free Photo Editor for Mac and Windows 10

【Mac の人は、Mac App Store から】

【ステップ2】PhotoScape X で、外枠の PNG 画像ファイルをつくる

ステップ2は、PhotoScape X で、実際に「外枠」をつくっていきましょう。YouTube でも閲覧できますので、動画で確認したいひとは上記の埋め込みプレイヤーからどうぞ!

あらためて、完成形はこちら↓

今回の「外枠」完成系

Outline cutout

ブログでも確認できるように、内容をあらためてまとめていきますね。それでは、PhotoScape X を起動してください。

1.外枠の黒い上下線の作り方

Psx top bottom line

まずは、PhotoScape X で「外枠の黒い上下線」をつくっていきます。

Psx new campas open

PhotoScape X の上部バー 写真編集 をクリックしてください。画面中央にある「画像をドロップ」の 新規 をクリックしてください。新規のキャンパス作成画面がでてきますので、下のように設定してください↓

  • 幅(px):1920
  • 高さ(px)
  • 背景:白(#FFFFFF)
  • 背景の不透明度:スライダーを一番右にする

設定がおわったら、右下の OK をクリックしてください。

Psx additem btnclick

新規キャンパス画面が、表示されました。画面右上に注目してください。道具ボタンの左側にある 挿入ボタンを、クリックしてください。

Psx squareadd click

アイテムを挿入する作業バーが表示されます。左から5番目の四角いアイコン長方形を、クリックしてください。カラーの黒い部分をクリックすれば、色を変更することができます。今回は黒のボックスで、上下線を表現していきますので、デフォルトのままで OK ですよ。

動画:長方形ブロックの出し方(Size: 72KB)

長方形のアイコンをクリックしたら、そのまま白いキャンパスの左端部分でクリックしながら、マウスを右に動かしてみてください。すると、黒い長方形のボックスが表示されます。キャンパスの端から端まで長方形のブロックが表示されたら、クリックした指を離してください。

Psx box bottom set

作成した長方形ボックスをクリックしながらマウスを動かすことで、移動させることができます。ちょうどキャンパスの下まできたら、ガイドが表示されます。ぴったりくっついたら、OK です。

Psx box bottom copy

キャンパスの下に作成した長方形ボックスを、コピー(複製)してみましょう。長方形ボックスをクリックして選択した状態で、作業パネルのゴミ箱右にある複製ボタンをクリックしてください。

Psx box top set

おなじ長方形ボックスがでてきたら、同じように上まで移動してください。ぴったりキャンパスの上部にくっついたら OK です。ここまでで、「外枠の黒い上下線の作り方」は完了です。

2.外枠のロゴ部分の作り方

Psx logo sample

まずは、PhotoScape X で「外枠のロゴ部分」をつくっていきます。

Psx logo box1

ロゴ部分は、「背景ボックス+ロゴのテキストフォント」という組み合わせでできています。それでは、PhotoScape X 上部の 挿入 をクリックしてください。作業バーの長方形アイコンをクリックしましょう。

白いキャンパスの上をクリックして、ちょうどいい大きさになるようにドラッグしてください。上下の黒い線をつくったときと、同じ作業ですね。

Psx logo square

新しくつくったボックスを、ちゃんとした正方形にしていきます。長方形ボックスをクリックして、選択状態にしてください。ボックスのまわりに8個のポイントが表示されました。

ポイントをクリックしたまま、マウスを動かしてみましょう。ちょうど正方形のサイズになったときに、ガイドが表示されてピタッととまります。縦でも横でもできるので、好きなサイズの正方形にしてみましょう。

Psx logo center guide

正方形になったボックスを、ちょうど真ん中にあわせながら、上の黒い線にくっつけていきます。PhotoScape X のガイド機能があるので、これはとても簡単ですよ。

白いキャンパスの中央にするには、ボックスを選択したままドラッグして移動してください。上の黒い線に近づけながら、真ん中になるようにマウスを動かすと...ガイドが表示されます。「ちょうど真ん中センターですよ!ボックス同士がぴったりくっつきましたよ!」って、教えてくれるんです。ありこうさんですね。

Psx logo addtext1

さいごにロゴ部分のマークを、作っていきましょう。あなたの活動しているアイコンを、PhotoScape X に挿入すれば OK です。ですが、アイコンを持っていない場合もあるでしょう。そんな時には、テキストフォントで代用すると便利ですよ。

それでは、PhotoScape X の上部にある挿入ボタンを、クリックしてください。挿入バーが「ステッカー・イメージ・図・テキスト・拡大鏡・フィルター」に増えたのを確認してください。ここで「イメージ」を選択すれば、あなたのオリジナルアイコンを挿入できます。今回は、テキストをクリックしてください。

Psx logo addtext2

PhotoScape X右側に、テキストの作業パネルが表示されました。、テキスト欄に、活動名のイニシャルを入力してみましょう。今回はサウンドテック・ラボの「S」と入力しています。

つづけて、テキスト欄の下にあるフォントの種類を変更します。選択されているフォントをクリックして、一覧を表示させます。そのなかから、たとえば PiGi を選んでみましょう。もとから入っているフォントなのですが、これがなかなかオシャレなんですよ。

Psx logo kansei

さいごに、テキストのカラーを「白(#FFFFFF)」に変更してください。ロゴの背景ボックスのうえにテキストを移動したら、完成です。

3.外枠の左側、活動名部分の作り方

Psx namebox samples

それでは、PhotoScape X で「外枠の左側、活動名部分」をつくっていきます。

Psx namebox leftbox

外枠の左側、活動名部分は、「背景ボックス3つ+テキストフォント」で構成されています。またまた PhotoScape X 上部の 挿入 をクリックしてください。作業バーの 長方形 アイコンをクリックしてください。

上記画像を参考に、ちょうどいいサイズのボックスをつくりましょう。さらに上の黒い線に、ぴったりくっつけてください。

Psx namebox leftbox wh1

同様の手順で、背景ボックスをもうひとつ作ります。

Psx namebox leftbox wh2

右の作業パネルにあるカラーをクリックして、色を「白(#FFFFFF)」に設定してください。設定できたら、 OK をクリックします。

Psx namebox leftbox wh3

上記画像を参考に、黒い背景ボックスの上に重ねてください。中央寄りの右側に、ちょっとだけ余白をのこしておいてくださいね。お手本の「外枠」のように、カットされた表現をほどこしますよ。

ちなみに黒い背景ボックスの下になってしまう場合は、左上にあるレイヤーをクリックして、ボックスの順番を入れ替えてください。

Psx namebox leftbox wh4

さらに、背景ボックスをもうひとつ作ってみましょう。残しておいた余白より、少し小さい正方形のボックスが理想的です。

Psx namebox leftbox wh5

右の作業パネルで、カラーを「白(#FFFFFF)」に設定してください。

Psx namebox leftbox wh6

白く小さい背景ボックスを、余白の部分までドラッグして移動させてください。ガイドが表示されますので、ピッタリ重ねてください。

つづけて白く小さい背景ボックスを選択したまま、右の作業パネルをごらんください。「変形」のチェックボックスに、チェックを入れてください。さらに、変形... をクリックします。

Psx namebox leftbox wh7

変形の作業ウィンドウがでてきました。

Psx namebox leftbox wh8

正方形の左上のポイントを、マウスでクリックしたまま中央までドラッグしてみてください。上記画像のように、三角形にボックスを変化させることができました。できたら、 OK をクリックしてください。

Psx namebox leftbox wh9

はい。こんな感じで、背景ボックスの角が三角に削れた形に表現することができました。それでは、名前を入力していきましょう!

Psx namebox text1

PhotoScape X の右上にある挿入テキストの順で、クリックしてください。テキストが表示されたら、右側の作業パネルにあるテキスト欄に、あなたの活動名をいれてください。今回は「サウンドテック・ラボ」と入力しました。

Psx namebox text2

テキストのまわりに表示されるポイントを、マウスでドラッグすればフォントのサイズを変えることができます。大きな白いボックスの上になるように調節したら、完成です。ここまでで、「外枠の左側、活動名部分の作り方」は完了です。

4.外枠の右側、URL 名部分の作り方

Psx rightbox 1

それでは、PhotoScape X で「枠の右側、URL 名部分」をつくっていきます。

「左側、名前部分の作り方」を繰り返してもいいのですが...効率的にやってみましょう。というわけで、左側の名前部分を全て選択してください。

Psx rightbox 2

選択された状態になったら、右側の作業パネルをごらんください。ゴミ箱アイコンの右にある複製(コピー)ボタンをクリックしてください。

選択する方法は、キャンパスの白いところをクリックしたままドラッグしていくと、選択する範囲が表示されます。選択枠が「3.外枠の左側、活動名部分」でつくったパーツすべてをおおうように、マウスでドラッグしてあげましょう。

Psx rightbox 3

複製されると、もとのパーツの右下に複数のパーツが選択された状態ででてきます。パーツを慎重にクリックして、右側までドラッグしてください。

Psx rightbox 4

上記画像を参考に、移動させてください。複数のパーツを選択していると、ガイドが表示されません。だいたいの場所まで移動したら 白いキャンパス部分をクリックして、複数選択状態を解除してください。

Psx rightbox 5

個別のパーツを移動して、上記画像のように位置を微調節してください。活動名の部分のテキストは、「Twitter」の名称に変更しておきましょう。小さい白い背景パーツは、右から左側に移動しておいてください。

Psx rightbox 6

このままだと、URL 部分中央デザインが、おかしなことになっています。三角のパーツを水平に反転させていきましょう。三角形の小さい白いパーツをクリックして、選択してください。

Psx rightbox 7

選択した三角形のまわりに表示されるポイントを、マウスでクリックしたまま左側にドラッグいしていきます。

Psx rightbox 8

三角形が、水平にひっくりかえります。ちょうど正三角形になる位置で、ガイドが表示されますよ。ピタッととまるまで、うごかしましょう。

Psx rightbox 9

さいごに、右側の黒い背景ボックスの上に移動して、微調整すれば...

Psx rightbox 10

こんな感じで、右側のボックス部分が、あっというまに効率的に完成しました。ここまでで、「外枠の右側、URL 名部分の作り方」は完了です。

5.外枠を透過処理する方法

Psx outline cutout1

さいごに、外枠を透過処理する方法を説明していきます。

透過処理とは、画像の特定の場所を「透明」にすることをいいますよ。PhotoScape X では、それをカットアウト機能でおこないます。

Psx outline cutout2

まずは、作成した外枠をデスクトップに保存します。PhotoScape X 画面右下の保存を、クリックしてください。保存のウィンドウが表示されたら 別名で保存... を、クリックしましょう。

Psx outline cutout3

どこに保存するかを聞かれますので、デスクトップを選択してください。ファイル名は、わかりやすい名前で大丈夫ですよ。

ひとつ注意があります。それは、この選択画面下の画像形式は、PNG を選んでおいてください。JPEG は劣化させてしまいますし、透過処理した場合は PNG ファイルの方がなにかと便利なので、覚えておきましょう。

Psx outline cutout4

外枠の画像を保存したら、PhotoScape X の上部にある カットアウト をクリックしてください。カットアウトの画面が表示されると、「画像をドロップ」と書いてあります。

さきほど保存した外枠の画像ファイルを、デスクトップからマウスでクリックしたままドラッグして、PhotoScape X の上でクリックした指を離してドロップしましょう。

Psx outline cutout5

こんな感じで、カットアウト画面に作成した外枠の画像が表示されました。マウスを動かすと、カオーソルの脇に色を検知するマークがでてきます。今回は、中央の白い部分を、クリックしてみてください。

Psx outline cutout6

するとこのように、白い部分がなくなりました。PhotoScape X の作業スペースの色が透けてグレーになっていますが、これで透過処理できています。

Psx outline cutout7

右側の適用をクリックしてください。これで、透過する処理が確定しました、それでは、右下の 保存 をクリックしてください。

Psx outline cutout8

保存のウィンドウが出てきますので、任意の場所に透過処理された外枠を保存してください。ここでも注意点として、「PNG」形式のファイルで保存することを、お忘れなく! 他の形式で保存すると、透過処理したのに白い背景になってしまいますよ。

「外枠」完成系

Outline cutout

完成系と同じように、PNG 透過ファイルが作成できましたか?PNG 形式の画像でデスクトップなどに書き出しがおわったら、バッチリOKですよ。ここまでで、「外枠を透過処理する方法」とステップ2「PhotoScape X で外枠を PNG ファイルをつくる」は終了です。

【ステップ3】OBS Studio の画像機能で、外枠を表示してライブ配信をやってみよう

ステップ3では、作成した「外枠」を、ライブ配信ソフト「OBS Studio」のでライブ配信に合成していきます。それでは、OBS Studio を、起動してください。

Obs studio outline1

パソコンの画面と、カメラを接続した OBS Studio の基本的なライブ配信の設定画面になっています。ここまでの設定のやり方が気になる人は、「MacのDTMライブ配信で、カメラの映像を使う方法【3ステップ】」をご覧ください。

Obs studio ouline imagemenu

OBS Studio のソースタブしたにある プラスボタンを、クリックしてください。

表示されたメニューの画像を、クリックします。

Obs studio image new

画像の新規作成ウィンドウが、表示されます。名前はわかりやすく「外枠」としておきましょう。

名前の入力がおわったら、ウィンドウ右下の OK をクリックしてください。

Obs studio outline property1

画像のプロパティ’外枠’のプロパティ)が、表示されます。

画面中央の画像ファイル右側にある参照を、クリックしてください。

Obs studio outline property2

デスクトップに保存してある外枠の PNG ファイル(今回は「outline-cutout.png」)を、開いてください。

画像ファイルに、外枠の保存してある場所がでてきました。

それでは、ウィンドウ右下のOK を、クリックしてください。

Obs studio outline perfect

OBS Studio のさいしょの画面に、もどってきました。ここまでくれば、あとはライブ配信するだけです。ライブ配信先の設定ができていれば、OBS Studio 画面のコントロールタブにある 配信開始 をクリックしてライブ配信をスタートしましょう。

サウンドオルビス
サウンドオルビス
ちなみに配信のやり方は、Mac でやるDTMライブ配信講座や、YouTube Live のやり方解説記事が参考になりますよ↓

【参考】【ステップ3】実際に DTM ライブ配信をやってみる-MacでDAWの画面を音入りでライブ配信する方法【3ステップ】

【参考】【2019】YouTubeでライブ生配信するやり方まとめ

ここまででステップ3「OBS Studio の画像機能で、外枠を表示してライブ配信をやってみよう」は、完了です。

ライブ配信画面の「外枠」を作る方法を、試してみた結果...

動画:外枠をつかったライブ配信映像
(Size: 576KB)

実例付きのライブ配信画面の「外枠」を作る方法を試した結果について、まとめていきます。今回の講座をよむと、上記のような「外枠」をつかったライブ配信ができるようになりますよ。

OBS Studio の録画機能で、収録した映像ですが、ライブ配信と同じものです。しっかり、ライブ配信の映像に「外枠」が重なっていますね。ここまでで、ステップ3OBS Studio の画像機能で、外枠を表示してライブ配信するの解説は、終了です。なんだか、ワクワクしてきましたね!

【関連】MacのDTMライブ配信で、カメラの映像を使う方法【3ステップ】

実例付き!ライブ配信画面の「外枠」を作る方法【3ステップ】まとめ

まとめの画像

ライブ配信画面の「外枠」を作る方法について、3ステップで解説してきました。まとめると、こんな感じです↓

3ステップまとめ
  • 【ステップ1】画像編集アプリ「PhotoScape X」を準備する
  • 【ステップ2】PhotoScape X で、外枠の PNG 画像ファイルをつくる
  • 【ステップ3】OBS Studio の画像機能で、外枠を表示してライブ配信をやってみよう

【記事上まで移動するリンク】
【ステップ1】画像編集アプリ「PhotoScape X」を準備する に挑戦する!!

手順通りにおこなえば、ライブ配信につかえるシンプルな「外枠」をかんたんにつくれます。さらにオリジナリティを加えることで、有名配信者のような個性的なライブ配信を作り陰ることができるようになりますよ!

もしわからないところや、説明不足なところがありましたら、サウンドテック・ラボの中の人(サウンドオルビス)まで、ご連絡ください。

それじゃあ、今回はこの辺で!?ライブ配信で、外枠をつくってみたいあなたの願いを叶えることができていたら、うれしいです。

次回の講座
【講座6】YouTubeのコメントを、OBSのライブ配信に透過で表示する方法

ちなみに今回の記事は、Macでやる!!DTMライブ配信講座の第5回目でした。この記事の内容は、Windows の人も再現可能なのでご安心を!! いままでのバックナンバーは、こちらからチェックしてみてください↓

サウンドオルビス

3,068,781 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事