ブロネクのテロップ(看板?)を作る!オリジナルデザインにしたよ。#ブロネク

ブロネクに2回出演させていただきました。画面に名札?看板?のようなテロップをハングアウトでは使うことが出来ます。

2つの方法

1つはハングアウトツールボックス。ブロネク1回目(2013年7月6日)に使いました。

もう一つは透過PNG(640px × 360px)を作る方法。ブロネク2回目(2013年7月13日)がこれです。

始めてだったので戸惑いながらという点もありました。

ハングアウトツールボックス

このツールを使って、簡単に上のようなテロップを作れます。

透過PNG(640px × 360px)

これを使って作ったのが下の画面です。

B0713

それでは各々の作り方です。

ハングアウトツールボックス

google+にログインし、”一人”ハングアウトを開始します。

左にある”Hangout Toolbox”アイコンをクリックします。

Hangtl001

右に出てきた”Hangout Toolbox”の中にある、「Lower Third」2つのカラムに名前やTwitterアカウントなどを入力します。3つ目は表示色です。16進数の色指定です。

入力後に、右上のスイッチを”ON”にすると画面に表示されます。

シンブルに簡単に作るためこれ以上の機能は使いませんでした。簡単に見栄えが良いものが作れます。

Hangtl002

逆さに表示される時は下の”Mirror my own video”をクリックすると、反転します。

Hangtl003

これで十分なんじゃない、と思っていました。でも、皆さんのはちょっと違うのですよね。正直、チャレンジしたい!と思って調べたのが次の方法です。

透過PNG(640px × 360px)

640px × 360pxの透過PNG画像を準備します。画像の作り方については後に書きます。

一人ハングアウトします。

”Hangout ToolBox”をクリックして、右のメニューを開きます。中ほどの”Custom Overlay”の設定を使います。

Hang001

“Custom Overlay”の「ファイルを選択」をクリックして、準備した透過PNG画像を指定します。その後、右上のスイッチを”ON”にすると、画像が表示されます。逆さの時は”Mirror my own video”をクリックします。

なお、動画を大きく表示するには、左のカメラアイコン”キャプチャ”をクリックします。

Hang002

透過PNG画像の作り方

画像の作り方です。いろいろな作り方がありますが、簡単に作れる!ことを考えて、Illustratorとよく似たグラフィックソフト iDrawを使いました。

2200円(2013年7月18日 現在)と有料ですが、機能から見るとコストパフォーマンス抜群です。立体的なグラフィック作成にも使える!と思って購入しました。体験版はない様子です。

iDraw iDraw価格: ¥2,200
( Storeにてご確認ください。)

カテゴリ: グラフィック&デザイン, 仕事効率化
App Storeで詳細を見る

アプリをダウンロードする

 

iDrawを起動させます。

「Blank」を選択し、右下のサイズをWidth=”640″ / Height=”360″ pixelsに設定します。

Idraw00

新しい作成画面が開きます。

Idraw002

長方形ツール(Rectangle Tool)をクリックします。

Idraw003

今回はキャンパス全面に長方形を書いて、後から右半分をくり抜きます。

左下の”Fill Type”を調整して色を決めます。一番下の”Alpha”で透明度を調整すると、ハングアウトの時に背後景色がチラ見せで来ます。60から70%が好みです。

Idraw004

くり抜きたい部分に長方形ツールなどを使って、同じレイヤーに書きます。

Idraw005 border=”0″ width=”600″ height=”354″ />

Move Toolを使って、Shiftキーを押しながら両方の図形を選択状態にします。

Idraw006

右にある”ツールバレット”内の「Combine Paths(パス一体化)」ツール、「Subtract(引き算)」を選択します。

Idraw007

後から書いた長方形の部分が引かれて、くり抜かれます。

Idraw008

次に文字を配置します。”Text Tool”を使います。

Idraw008a

「ものくろぼっくす」と打ちます。iDrawはベクターツールなので、文字もベクターデータ(アウトライン)に変換する必要があります。

Idraw009

右にある”Appearance Text”ツールを使います。サイズや配置を調整した後に「Convert Text to Outlines」をクリックして、アウトライン化します。Idraw012

アウトライン化できました。

Idraw010

配色を設定します。

Idraw013

好みの場所に配置します。出来上がりです。

Idraw014

メニューバーの”File”から”Exprot”を選択して、PNGデータを書き出します。

Idraw015

「PNG」を選択して書き出します。他のオプションはそのままにしておきます。

Idraw016

ハングアウトに設置できました。これで思う存分お話しします!

Idraw020

参考サイト

手探りでした。参考になりました。感謝です。

ブロネク

ユーザーミートアップするネク! 2013/07/6

ハングアウトでホーム画面晒しするネク! 2013/07/13

google+ ハングアウト ガイドブック

これもうきっとGoogle+ガイドブック 3.情報発信編
見て歩く者 (2013-03-19)
売り上げランキング: 8,539

講座 開催予定

この記事を書いた人