レイヤースタイル

デザイン五輪書

レイヤースタイルでテレビを作成してYouTube動画を貼る方法

読了までの目安時間:約 45分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

レイヤースタイルでテレビを作成してYouTube動画を貼る方法

前置き

動画投稿サイトの魅力

最近は、ホームページやブログに動画が貼られている事が多くなりました。
Youtubeなどの動画投稿サイトも、簡単に外部サイトに動画が貼り付けられるように埋め込みコードを公開したりしています。

動画の設置が簡単になった事と、動画の視覚的訴求力や表現力が大きい事から広がりを見せているのでしょう。
動画をサーバーにアップロードしたり、<video>タグの知識を身に付けたり、各ブラウザに対応した動画の拡張子を準備したりと、自前で動画を貼るのはそれなりに大変です。
その点、YouTubeはとてもお手軽ですよね。

また、Youtube動画は検索サイトで上位表示しやすいので、その点も魅力の一つです。
更に、Youtube内から検索者の視聴も見込めますし・・・。

▲もくじへ戻る

貼り付ける動画をおしゃれに

そう言う事で、今回はWordPressの記事内にYouTube動画を表示する方法をご紹介します。
ただ、単に動画の貼り方を紹介するだけでは面白くないですから、CSSを使って、動画の背景をテレビにしてみましょう。

テレビの画像はPhotoshopのレイヤースタイルを利用する事で、とても簡単にオリジナル画像が作れます。
加えて、今回はオリジナルのパターンを作成するテクニックや、色を金属色にするテクニックについてもご紹介します。

ぜひ、紹介しているテクニックを身に付けて、あなたのデザインスキルを磨いて下さい。

▲もくじへ戻る

Photoshopでテレビを作成する

テレビのサイズについて

では、まずはテレビの画像がないとどうにもなりませんから、早速テレビを作りましょう。
YouTubeの動画はデフォルトサイズが「480×360」ですので、テレビ画面のサイズをこの大きさにして、周りのサイズは画面のサイズとのバランスを考えながら決めます。

お使いのWordPressテーマのコンテンツエリアの幅が480pxよりも狭い方は、作業の最後にサイズを調整して下さい。
当サイトも横幅が480pxありませんので、作業の最後にサイズを縮小しています。

▲もくじへ戻る

ファイルの新規作成

では、Photoshopを起動して下さい。
Photoshopの「メニューバー」の中の「ファイル」から、「新規」を選びます。

「新規」ダイアログが開いたら、画像全体のサイズは実際に作ってみないと分からないので、「1000×1000」で作成します。
もし、テレビを貼り付ける場所のサイズが決まっている場合は、そのサイズにしておくと良いです。

画像の「解像度」は「72px」(ウェブ用解像度)、カラーモードは「RGBカラー」(ウェブカラー)、「カンバスカラー」は「透明」にします。

ファイルの新規作成

▲もくじへ戻る

テレビ画面を作る

まずは、テレビ画面を作成します。
「ツールパネル」から、「長方形ツール」を選択します。
もし、「長方形ツール」以外のシェイプ作成ツールが表示されている場合は、アイコンを長押しして下さい。

長方形ツール

キャンバスの中央部分をクリックします。
表示された「長方形を作成」ダイアログの「幅」を「480px」、「高さ」を「360px」、「中心から」にチェックを入れ、「OK」をクリックします。
この数字は動画のサイズと同じにします。

長方形を作成ダイアログ

テレビ画面が描画されました。
通常、この部分は動画で隠れて見えません。
ですが、読み込みの遅いブラウザでページを開いた場合、動画ファイルが読み込まれるまでの間、この部分がサイトの訪問者に見えてしまいます。

そこで、この部分にもデザインを施しましょう。
代わりの写真を準備して、クリッピングマスクをかけても良いでしょう。
ですが、今回は画面に砂嵐とテレビチャンネルの番号をあしらってみたいと思います。

描画した長方形のレイヤーを選択している状態で、「メニューバー」の中から「フィルタ」を選択します。
その中の「ノイズ」の中から、「ノイズを加える」を選択します。
シェイプレイヤーをラスタライズするように警告が出ますので、「OK」を選択します。

「ノイズを加える」ダイアログが開きます。
砂嵐の比率はあなたの好みで良いですが、「ガウス分布」と「グレースケールノイズ」にはチェックを入れて下さい。

ノイズを加える

チャンネル番号は「ツールパネル」の中の「横書き文字ツール」を使って描画します。

横書き文字ツール

それっぽいフォントを選んで下さい。
フォントや文字サイズに関しては、「オプションパネル」の左側の画面で変更できます。
変更する際は、「横書き文字ツール」を使って、変更する文字をドラッグして選択しておいて下さい。

フォントや文字サイズの変更

描画した文字を太字にしたい場合は、「オプションパネル」右側の「文字パネルと段落パネルの切り替え」アイコンをクリックします。

文字パネルと段落パネルの切り替え

「文字パネル」が表示されるので、「太字」アイコンをクリックします。
この設定は、文字に「ワープテキストを作成」を適応すると解除されてしまいますので、気を付けて下さい。

文字を太字に

チャンネルの文字の位置を、「移動ツール」で調整します。
「ツールパネル」の中から「移動ツール」を選択し、「レイヤーパネル」の中からチャンネル文字レイヤーをクリックし、チャンネル文字を任意の場所までドラッグします。

移動ツール

テレビ画面に立体感を付けます。
テレビ画面レイヤーとチャンネル文字レイヤーにまとめて適応しますので、テレビ画面とチャンネル文字をグループ化します。

「レイヤーパネル」下部にある「新規グループを作成」をクリックします。

新規グループを作成

そうしたら、チャンネル文字レイヤーをクリックして選択した後、キーボードの「Ctrl」を入力しながら、テレビ画面レイヤーをクリックします。
そして、そのままグループレイヤーまでドラッグします。

レイヤーをグループ化

これで、レイヤーをグループ化できました。

グループレイヤーをクリックし、「レイヤーパネル」下部にある「レイヤースタイルを追加」をクリックします。

レイヤースタイルを追加

表示されるコンテキストメニューの中から、「ベベルとエンボス」をクリックします。
すると、「レイヤースタイル」ダイアログが表示されますので、「方向」を「下へ」にして、「深さ」や「サイズ」に関しては、画面を見ながら好みの数字にします。

ベベルとエンボスの設定

これからレイヤーが増えて行きますので、「レイヤーパネル」をスッキリさせる為に、グループレイヤー横の「▼」をクリックしておきます。

グループレイヤーを折りたたむ

グループレイヤーが折りたたまれました。

▲もくじへ戻る

テレビ画面の補強部分を作る

次は、テレビ画面を補強する部分を作ります。
「ツールパネル」の中の「長方形ツール」を長押しし、表示された「角丸長方形ツール」を選択します。

角丸長方形ツール

そうしたら、テレビ画面の中央付近をクリックします。
「角丸長方形を作成」ダイアログが開くので、「幅」を「520px」、「高さ」を「420px」、「半径」を「20px」、「中心から」にチェックを入れます。

角丸長方形を作成ダイアログ

「レイヤーパネル」を確認すると、角丸長方形がグループレイヤーの上に来ていると思います。
グループレイヤーをドラッグして、最上部に移動して下さい。

レイヤーの並べ替え

そして、キーボードの「Ctrl」を入力しながら、角丸長方形レイヤーをクリックします。
全てのレイヤーが選択されている状態で、「ツールパネル」の中の「移動ツール」を選択します。
そのまま、「オプションパネル」内の「水平方向中央揃え」をクリックします。

水平方向中央揃え

画像が縦方向に中央揃えされました。

「レイヤーパネル」の中から、角丸長方形レイヤーをクリックします。
そして、キーボードの「Shift」を入力しながら、画像を下方向へドラッグします。
角丸長方形と画面との左右の隙間分が上の部分に来るのを目安に、角丸長方形を下方向へと移動させて下さい。
下の部分にメーカーロゴを入れますので、隙間を広く取ります。

角丸長方形を下へドラッグして隙間を調整

角丸長方形の部分と画面が重なる部分をくり抜きます。
そうする事で、角丸長方形にレイヤースタイルを設定した時、画面と角丸長方形の境界部分を立体的にする事ができます。

「レイヤーパネル」内のグループレイヤー横の「▼」をクリックします。
グループレイヤーの中身が展開されたら、キーボードの「Ctrl」を入力しながら、長方形レイヤーの画像が表示されている部分をクリックします。

レイヤーの選択範囲を抽出

これは、レイヤーの不透明部分の選択範囲を抽出するテクニックですので、ぜひ、覚えておいて下さい。
後々の作業で、再びこのテクニックを使用します。

次に、「メニューバー」の中の「選択範囲」を選び、その中の「選択範囲を反転」を選びます。
そして、「レイヤーパネル」の中から角丸長方形レイヤーをクリックし、「レイヤーパネル」下部の「レイヤーマスクを追加」をクリックします。

レイヤーマスクを追加

そのまま、「レイヤースタイルを追加」をクリックします。
表示されたコンテキストメニューの中から、「カラーオーバーレイ」を選択します。
ここで選んだ色が枠の色になります。

カラーオーバーレイ

色を選んだら、今度は「ベベルとエンボス」の文字をクリックします。

レイヤースタイルダイアログメニュー

今度は方向を「上へ」にし、画面を見ながら「深さ」と「サイズ」を操作して下さい。

▲もくじへ戻る

テレビのメーカーロゴを入れる

テレビの補強枠の下部にメーカーロゴを入れます。
「ツールパネル」の中から、「横書き文字ツール」を選択します。

文字を入力する際は、シェイプのない部分に一度文字を入力し、後から適正位置に移動すると言う方法を取って下さい。

文字はシェイプの外で書く

もし、テレビ画面補強枠の部分をクリックして文字を入力し始めると、文字が思った部分に表示されなくなってしまいます。

メーカー名を記入後、「ツールパネル」の中の「移動ツール」を選択し、文字を定位置に移動します。
移動後、キーボードの「Ctrl」を入力しながら、「レイヤーパネル」の中の角丸長方形レイヤーをクリックします。

メーカー名レイヤーと角丸長方形レイヤーが選択されているのを確認し、「オプションパネル」の中の「水平方向中央揃え」をクリックします。
これで、文字の位置が調整されます。

もう一度「ツールパネル」の中の「横書き文字ツール」を選び、メーカー名をドラッグして選択します。
そして、「フォント名」と「サイズ」を最終的に決めます。
この後、文字には金属色を適応させますので、太い文字の方が見た目的に映えます。

文字が最終的に決まったら、「ツールパネル」の中の「移動ツール」を選び、文字の位置を微調整します。
縦のラインは目分量で移動し、横のラインがズレている場合は、角丸長方形と一緒に選択して、オプションパネルの中の「水平方向中央揃え」をクリックします。

メーカー名レイヤーが選択されている状態で、「レイヤースタイルを追加」ボタンをクリックし、表示されたコンテキストメニューの中の、「グラデーションオーバーレイ」を選択します。

表示された「レイヤースタイル」ダイアログの中の「角度」を変えて、メーカー名全体に対して斜めにグラデーションがかかるようにして下さい。

グラデーションの角度

そして、「レイヤースタイル」ダイアログ内の、グラデーションの色が表示されている部分の中をクリックします。

グラデーションの色の変更

すると、「グラデーションエディタ」ダイアログが表示されます。
ここでグラデーションを細かく編集できます。

メーカーロゴは金属色にします。
金属色を作る際のポイントですが、基本色を1色決め、その色よりも白に近い色と、黒に近い色を不規則に繰り返し配置します。

まずは、メーカーロゴの基本にしたい色をグラデーションの中に配置します。
「グラデーションバー」の中心付近の下部をクリックします。

金属色の基本色を追加

「グラデーションバー」に「カラー分岐点」が追加されます。
「カラー」横のカラーボックスをクリックし、金属色の基本色を選びます。

金属色の基本色を設定

右側(白色)の「カラー分岐点」をクリックし、「グラデーションバー」の中をクリックするのですが、この時、金属色の中で最も明るい部分に適応したい色を選びます。
中心に近い色ほど抑えられた金属色になり、逆に、白に近いほど、輝いた金属色を作れます。
ただし、端の色にするほど、不自然でわざとらしくはなってしまいます。

金属色の明るい色を選ぶ

今度は、左側(黒色)の「カラー分岐点」をクリックし、「グラデーションバー」の中から、一番暗い部分の色にしたい色を選んでクリックします。
これで、金属色を構成する三色が決まりました。

今度は、キーボードの「Alt」を押しっぱなしにして、グラデーションバーの左側の「カラー分岐点」を右方向にドラッグします。
この時、「Alt」はずっと入力しっぱなしにし、マウスの左クリックのボタンは、適宜、何度か離します。
すると、「グラデーションバー」の中に、金属色の中で最も暗い色が数ヶ所配置されます。

暗い色のカラー分岐点を複数配置

同じ要領で、中間色や最も最も明るい部分に関しても「カラー分岐点」を複数配置します。
不規則に配置した方が自然に見えます。
また、追加した「カラー分岐点」を外す場合は、下方向へドラッグすれば排除できます。

余計なカラー分岐点は下方向へドラッグ

グラデーションのかかり具合は常に画像にプレビューされてますので、メーカーロゴの様子を確認しながら作業を行うと良いでしょう。
金属色の配色が決まったら、「グラデーションエディタ」ダイアログ右上の「OK」をクリックします。

「レイヤースタイル」ダイアログに戻ります。
「角度」と「比率」を動かして、グラデーションのかかり具合を微調整します。
これで、メーカーロゴへの金属色の適応は完成です。

加えて、好みで「ベベルとエンボス」を適応するのも良いでしょう。
全ての設定が終わったら、「レイヤースタイル」ダイアログも右上の「OK」をクリックします。

▲もくじへ戻る

電源ランプを作る

次は、テレビの電源ランプを取り付けます。
好きな場所に設置して頂いて構いませんが、作例では、テレビ画面の補強枠の右下部分に設置したいと思います。

「長方形ツール」を選択します。
ランプを設置したい部分をクリックします。
表示された「長方形を作成」ダイアログの「幅」は「15px」、「高さ」は「5px」と入力し、「OK」をクリックします。

「ツールパネル」の中の「移動ツール」を選び、電源ランプを任意の場所に移動します。

「レイヤーパネル」下部の「レイヤースタイルを追加」をクリックします。
表示されたコンテキストメニューの中から、「カラーオーバーレイ」を選びます。

「レイヤースタイル」ダイアログが開いたら、カラーボックスをクリックし、電源ランプの色を選びます。
作例では緑色にしています。

色が決まったら、「レイヤースタイル」ダイアログの左側から、「光彩(外側)」の文字をクリックします。

光彩(外側)

カラーボックスの中が薄いクリーム色になっていますので、変更します。

とその前に、「描画モード」が「スクリーン」になっていますが、テレビの補強枠の色によっては、光彩が描画されない可能性があります。
電源ランプの色が補強枠の色よりも明るい色の場合は、「スクリーン」のままで良いです。
ですが、補強枠の方が明るい色の場合は、「スクリーン」を「乗算」に変更して下さい。
どちらとも言えない場合は、「通常」に変更して下さい。

「描画モード」の変更が終わったら、カラーボックスをクリックします。

光彩(外側)の色を変更

表示された「カラーピッカー」ダイアログの色は、電源ランプと同じ色にします。

この時、マウスをカラーピッカーの外側に出すと、マウスカーソルがスポイトに変化します。
その状態でクリックした色をそのまま引用する事ができるのですが、電源ランプの色は引用できません。
あくまでもカラーオーバーレイをかける前の色を引用してしまいますので、目分量で色を調整して下さい。

色が決まったら、「OK」をクリックします。
「レイヤースタイル」ダイアログに戻りますので、光の具合を微調整します。
調整が終わったら、「OK」をクリックして、「レイヤースタイル」ダイアログも閉じます。

▲もくじへ戻る

全てのレイヤーをグループ化する

今まで作成したパーツ同士の位置関係は変わりませんので、全てをまとめてグループ化します。
そうする事で、この後追加して行くレイヤーとの並べ替えが楽になります。

「レイヤーパネル」に表示されているレイヤーの中で、一番上に表示されているレイヤーをクリックします。(テレビ画面のグループレイヤーだと思います。)
そうしたら、「レイヤーパネル」下部の「新規グループを追加」をクリックします。

新規グループを追加

「レイヤーパネル」最上部にグループレイヤーが追加されます。

上から二番目のレイヤーをクリックし直します。(テレビ画面のグループレイヤー)
その状態のまま、キーボードの「Shift」を押しながら、レイヤーパネル最下部のレイヤーをクリックします。(テレビ補強枠レイヤー)
これで、新規に追加したグループレイヤー以外のレイヤーが全て選択されている状態になります。

この状態のままで、二番目のレイヤー(テレビ画面のグループレイヤー)を最上部のグループレイヤーにドラッグします。

レイヤーをグループ化

グループレイヤー横の「▼」をクリックした時、全てのレイヤーが収納されていれば成功です。

▲もくじへ戻る

テレビ本体を作る

次は、テレビの本体部分を作ります。
「ツールパネル」の中から、「角丸長方形ツール」を選び、テレビ画面中央部分辺りをクリックします。

「角丸長方形を作成」ダイアログが表示されますので、「幅」と「高さ」を入力します。
ここで記入する幅が、テレビ画像の最終的な横幅になります。
作例では、「幅」を「550px」、「高さ」を「500px」にしています。
「半径」は画面補強枠と同じ「20px」、「中心から」にはチェックを入れます。

角丸長方形がグループレイヤーよりも上に表示されてしまいますので、「レイヤーパネル」でグループレイヤを上にドラッグします。

レイヤーの並べ替え

そのままキーボードの「Shift」を押しながら角丸長方形のレイヤーをクリックします。
「ツールパネル」の中から「移動ツール」を選び、「パネルオプション」の中の「水平方向中央揃え」をクリックします。

「レイヤーパネル」の中から角丸長方形レイヤーをクリックし、キーボードの「Shift」を入力しながら角丸長方形の位置を下に下げます。

角丸長方形を移動

左右の隙間分の長さを上部分にも取ると、バランスが取れます。
下側の部分にはスピーカーの穴を空けますので、広く取ります。

「レイヤーパネル」で角丸長方形が選択されているのを確認し、下部の「レイヤースタイルを追加」をクリックします。
表示されたコンテキストメニューの中から、「カラーオーバーレイ」を選びます。

「カラーオーバーレイ」では、テレビ本体の色を決めます。
作例では灰色にしました。

今度はテレビ本体に立体感を付ける為、「ベベルとエンボス」の文字をクリックします。
思っている状態に調整ができたら、「OK」をクリックして設定を閉じます。

▲もくじへ戻る

テレビ本体にスピーカーの穴を空ける

「メニューバー」の「ファイル」中から、「新規」をクリックします。
「幅」と「高さ」を「100px」にし、「カンバスカラー」を「透明」にして、「OK」をクリックします。

「ツールパネル」の中から「楕円形ツール」を選択します。
キャンバスの中心をクリックし、表示された「楕円を作成」ダイアログの「幅」と「高さ」を「25px」に設定し、「中心から」にチェックを入れます。
「OK」をクリックすると、カンバスの中央付近に正円が描画されます。

正円をカンバスの中央に正確に配置する必要があるので、調整します。
「ツールパネル」の中から、「パスコンポーネント選択ツール」を選びます。

パスコンポーネント選択ツール

正円をクリックします。
「パネルオプション」の中央部分にある「パスの整列」をクリックします。

パスの整列

表示されたコンテキストメニューの最下部にある「カンバスに揃える」にチェックを入れた後、「水平方向中央揃え」と「垂直方向中央揃え」をクリックします。
これで、正円が正確にキャンバスの中央に配置されました。

正円のレイヤーを複製します。
「レイヤーパネル」下部の「新規レイヤーを作成」まで、正円レイヤーをドラッグします。

レイヤーを複製

正円レイヤーに「フィルター」をかけて、キャンバスの四隅に正円を配置します。
「メニューバー」の中の「フィルター」をクリックし、「その他」の中の「スクロール」を選びます。
シェイプレイヤーをラスタライズするようにと言う事で警告画面が表示されますので、「OK」をクリックします。

「スクロール」ダイアログが開いたら、「水平方向」と「垂直方向」に「50」と入力します。
「未定義領域」は「ラップアラウンド(巻き戻す)」を選びます。
「OK」を選択して下さい。

スクロールダイアログ

完成した図形をパターンとして定義し、スピーカーの穴にします。
「メニューバー」の中の「編集」から、「パターンを定義」をクリックします。

「パターン名」ダイアログが表示されたら、パターン名を入力し、「OK」をクリックします。
これで、◯が繰り返されるパターンが作られました。

このように、自作のパターンを作成できるようになると、Photoshopでの表現のバリエーションがかなり広がります。
ぜひとも、手順を身に付けて下さい。

パターンの定義が終わったら、もうこのファイルは必要ありませんので、保存せずに閉じます。

テレビのファイルに戻ったら、今度はスピーカーの穴を空ける部分を作ります。

「レイヤーパネル」の中から、「新規レイヤーを追加」をクリックします。
新しいレイヤーは、角丸長方形レイヤーの上に配置します。
そして、「ツールパネル」の中から「長方形選択ツール」を選びます。

長方形選択ツール

「長方形選択ツール」を使って、スピーカーの穴が開く範囲をザーッと選択し(テレビの外側にはみ出して構いません)、「メニューバー」の「編集」の中から、「塗りつぶし」を選びます。
「塗りつぶし」ダイアログが開いたら、「使用」を「ブラック」、「描画モード」を「通常」、「不透明度」を「100」に設定し、「OK」を選びます。

塗りつぶしダイアログ

「レイヤーパネル」で黒く塗りつぶしたレイヤーを選択したまま、「塗り」を「0%」にします。

レイヤーの塗りの調整

そして、「レイヤースタイルを追加」をクリックし、表示されたコンテキストメニューから、「パターンオーバーレイ」を選びます。

「レイヤースタイル」ダイアログが表示されたら、「パターン」横の画像をクリックします。

パターンの変更

すると、先程作った◯が繰り返されているパターンが一覧の中に表示されていますので、それを選択します。
そして、テレビの画像を確認しながら、「比率」を下げて行きます。

パターンオーバーレイの比率変更

「比率」はスピーカーの穴のサイズにふさわしい大きさに調節して下さい。
テレビ画像を確認しながら作業を行って下さい。

今度は、この◯が繰り返されているレイヤー単体をグループ化します。
グループ化する意味ですが、グループレイヤーの「塗り」を「0%」にする事で、◯の色を脱色しつつ、更に、グループレイヤーにレイヤースタイルをかける事ができるのです。

この「パターンレイヤーをグループ化するテクニック」を使用しない場合、◯が並んでいるパターンレイヤーをラスタライズしなければならなくなり、後から◯の「比率」を再調整する事が不可能になってしまいます。
同じようなケースは多々あると思いますので、この「パターンレイヤーをグループ化するテクニック」、ぜひとも自分のものにしてみて下さい。

では早速、◯のパターンが繰り返されているレイヤーをグループ化しましょう。
「レイヤーパネル」下部の「新規グループを作成」をクリックして下さい。
新しいグループが追加されたら、◯のパターンが繰り返されているレイヤーを、このグループの中へドラッグして下さい。

「レイヤーパネル」上でこのグループのレイヤーを選択し、「塗り」を「0%」にします。
その後、「レイヤーパネル」下部の「レイヤースタイルを追加」をクリックします。
コンテキストメニューが表示されたら、「ベベルとエンボス」をクリックします。

「レイヤースタイル」ダイアログが表示されたら、「方向」を「下へ」にして、「サイズ」と「深さ」を調節して下さい。
◯の大きさは小さいですから、「サイズ」を低くしなければ、穴は見えないと思います。
調整が終わりましたら、「OK」をクリックします。

このままだと、テレビ以外の部分にも穴が表示されてしまっているかと思います。
ですので、今度はテレビの外にはみ出てしまっている部分の穴を隠したいと思います。

テレビの外側にも穴が!?

キーボードの「Ctrl」を入力しながら、レイヤー最下部にある角丸長方形レイヤーの画像をクリックします。
テレビの形の選択範囲が生成されます。

「レイヤーパネル」上ではグループレイヤーが選択されたままでいる事を確認し、「レイヤーパネル」下部の「レイヤーマスクを追加」をクリックします。
これで、テレビからはみ出ていた穴が隠されました。

このままでも十分テレビには見えますが、今度はテレビの脚を付けたいと思います。

▲もくじへ戻る

テレビに脚を付ける

「ツールパネル」の中から、「角丸長方形ツール」を選択します。
テレビの下部中央付近をクリックし、「幅」を「100px」、「高さ」を「200px」、「半径」を「50px」、「中心から」にチェックを入れ、「OK」をクリックします。

テレビの脚首(?)となる部分が生成されたら、「レイヤーパネル」で、一番下の位置にこの脚首レイヤーをドラッグして下げます。
そして、テレビの本体レイヤーのレイヤースタイルをそのままコピーしてこの脚首レイヤーにも適応します。

「レイヤーパネル」でテレビの本体レイヤーに表示されている「効果」と言う文字を、キーボードの「Alt」を入力しながら、脚首レイヤーにドラッグします。

レイヤースタイルの複製

すると、脚首レイヤーにもテレビと同じ色が適応され、立体的に表示されました。
・・・ですが、テレビの脚首は筒状をしていますので、このままでは立体感が不十分です。

「レイヤーパネル」の脚首レイヤーの中に表示されてある「ベベルとエンボス」と言う文字をダブルクリックして下さい。

ベベルとエンボスを再編集

「レイヤースタイル」ダイアログが開き、「ベベルとエンボス」の調整画面が開きます。
「サイズ」の数字を増やして行けば、やがて脚首レイヤーが筒状に立体化されると思います。
微調整が済んだら、「OK」を入力して下さい。

最後に、テレビの脚となる部分に取り掛かります。
「ツールパネル」の中から、「角丸長方形ツール」を選択します。
テレビの下部中央付近をクリックし、「幅」を「350px」、「高さ」を「350px」、「半径」を「50px」、「中心から」にチェックを入れ、「OK」をクリックします。

この脚レイヤーを「レイヤーパネル」で最下部へドラッグします。

そして、「ツールパネル」の中から、「パス選択ツール」を選びます。
もし「パス選択ツール」が「ツールパネル」内に表示されていない場合は、「パスコンポーネント選択ツール」を長押しして下さい。

「パス選択ツール」を選んだら、テレビの脚となる図形の真ん中よりも上の部分を、「パス選択ツール」でドラッグして選択します。

パス選択ツールでシェイプを部分選択

その状態のまま、「メニューバー」の中の「編集」をクリックし、その中の「ポイントを変形」の中の「拡大・縮小」を選択します。
そして、「オプションパネル」の中のリンク部分がプッシュされていない事を確認してから、「W」を「75%」に書き換えます。
これで、脚の部分に遠近感が出て来ます。

ポイントを変形

「オプションパネル」の右側に「× ◯」が表示されていますので、「◯」をクリックして、ポイントの編集を終了します。

ポイントを変形の適用

「レイヤーパネル」の中の脚首レイヤーに適応されているレイヤースタイルを、脚の部分にもコピーして適応します。
キーボードの「Alt」を入力しながら、脚首レイヤーの「効果」の文字を脚レイヤーまでドラッグして下さい。

脚レイヤーの立体の具合を調整する場合は、脚レイヤーの「ベベルとエンボス」の文字をダブルクリックします。

脚首と脚の位置を調整します。
特に、脚首が長いと不自然に見えてしまいます。

「ツールパネル」の中から、「移動ツール」を選びます。
そして、「オプションパネル」の中の「自動選択」にチェックを入れて下さい。

移動ツールの自動選択

これで、「レイヤーパネル」でいちいちレイヤーを選択し直さずに、スムーズに図形を移動する事ができます。
脚首と脚の位置を調整して下さい。

大体の位置が決まったら、テレビ、脚首、脚を縦方向に真っ直ぐ並べます。
現在選択中の「移動ツール」のまま、テレビ全体をドラッグして選択して下さい。

移動ツールによるドラッグ選択

もし、テレビの画像が大きく表示され過ぎている場合は、キーボードの「Alt」を入力しながら、マウスのホイールを回して下さい。
画像の表示サイズが変更されます。
もしくは、キーボードの「Ctrl」と「0」を同時に入力しても良いです。

画像全てが選択されたら、「オプションパネル」の中の「水平方向中央揃え」をクリックします。
これで、テレビが完成しました。

▲もくじへ戻る

テレビ画像の保存

このまま画像を保存すると、上下左右に余計な透明スペースがあります。
余計な部分は削除して、画像のサイズを軽くしましょう。

「メニューバー」の中の「イメージ」の中から、「トリミング」を選んで下さい。
「トリミング」ダイアログが開いたら、「トリミング対象カラー」を「透明ピクセル」、「トリミングする部分」は全てにチェックを入れて下さい。

トリミング

そして、「OK」をクリックすると、画像の余計な部分はなくなります。

では、画像を保存しましょう。
このテレビの画像を後日編集して再利用する可能性のある方は、PSD形式のファイルも保存しておきましょう。

「メニューバー」の中の「ファイル」をクリックし、「保存」を選びます。
ファイル形式を「Photoshop(∗.PSD,∗.PDD)」にして、ファイル名を付けて「保存」をクリックします。

画像をネット上に表示する場合、Photoshop用の拡張子は対応していません。
ウェブ用の拡張子で保存し直しましょう。
その際、JPEG方式は透明色には対応していませんので、PNGかGIFの拡張子で保存します。

では、「メニューバー」の中の「ファイル」を選択し、「Web用に保存」を選んで下さい。
表示された「Web用に保存」ダイアログで特に注目すべきは、まず、上部のファイル形式です。

ファイル形式の設定

プルダウンメニューから、ファイル形式を選んで下さい。
作例では、グラデーション部分の画質を再優先させる為に「PNG-24」を選びました。
画像にグラデーション部分がない場合は、ファイル容量が軽い「GIF」や「PNG-8」でも画質の劣化は気になりません。

そして、下部の「画像サイズ」も再確認して下さい。

画像サイズの設定

意図せず、1px分サイズがズレている事もよくあります。
確認後、「保存」をクリックして保存終了です。

これでPhotoshopでの作業は終わりますので、画面右上の「×」か、「メニューバー」の中の「ファイル」の中から「終了」を選んで下さい。

▲もくじへ戻る

YouTubeの動画をWordPressの記事に表示する

YouTube動画の埋め込みコードを表示する

まず、YouTube動画の埋め込みコードを抽出します。
埋め込みたいYouTube動画があれば、その動画のページを開いて下さい。
特に思い付かない方は、この動画をご利用下さい。

動画の下にある「共有」タブをクリックして下さい。

共有タブ

その中の「埋め込みコード」タブをクリックします。

埋め込みコードタブ

動画の「埋め込みコード」が表示されます。
<iframe>タグが生成されますので、それをコピーします。

埋め込みコード

▲もくじへ戻る

埋め込みコードを記事に貼り付ける

コピーしたタグをWordPressの投稿ページに貼り付けます。
その際、<iframe>タグを<div>タグでくくり、「class」か「id」を指定します。

同じページ内に動画が2つ以上表示される事がない方や、ページ内リンクを動画に設定する予定のある方は「id」で指定して下さい。
逆に、同ページ内に2つ以上の動画を表示する可能性が0ではない方は「class」で指定して下さい。

作例では、「class」で指定し、値は「movie」にしました。

<div class="movie"><iframe width="480" height="360" src="//www.youtube.com/embed/Pgj_DnAl9j0" frameborder="0" allowfullscreen></iframe></div>

記事を更新すると、YouTube動画が記事の中に表示されます。

▲もくじへ戻る

テレビ画像にURLを割り振る

テレビ画像をWordPressにアップロードする

YouTube動画の背景にテレビ画像を貼り付ける際は、テレビ画像のURLが必要になります。
ですので、まずはテレビ画像をWordPressの中にアップロードしましょう。

WordPress上部にある「メニューバー」の中の「+新規」の部分にマウスを持って行きます。

メニューバーの新規投稿

サブメニューが表示されますので、その中の「メディア」をクリックします。
「メディアのアップロード」と言うページが表示されますので、「ファイルを選択」をクリックし、テレビ画像を選びます。

ファイルをアップロード

▲もくじへ戻る

テレビ画像のURLを確認する

画像のアップロード後、画面下部にアップロードされた画像が表示されます。
横の「編集」をクリックします。

画像の詳細編集

「メディアの編集」と言うページが表示されたら、右側表示されている「保存」と言うボックスの中を確認します。
「ファイルのURL:」と書かれている部分があると思いますが、その下に表示されているURLがテレビ画像のURLになります。

ファイルのURL

このページは後々必要になりますので、閉じずに残したまま、次の作業に移って下さい。

▲もくじへ戻る

YouTubeの動画の背景に、テレビの画像を表示させる

YouTube動画とテレビ画像を連携する為の考え方

では、投稿ページ内に貼り付けたYouTube動画の背景に、作成したテレビの画像を表示させたいと思います。
作業しながら説明を聞いていると、今、一体何の作業をしているのか分からなくなってしまいますので、まずは作業の流れと考え方を理解してから、作業に入りましょう。

配置したYouTube動画のデザインを変更する際はCSSを利用するのですが、CSSを利用する際はボックスモデルと言う考え方が必要になります。

ボックスモデル

コンテンツの部分がYouTubeの動画、背景の部分がテレビ画像になります。

背景画像は、特に何も指定がない場合、コンテンツのサイズで表示されてしまいます。
つまり、YouTube動画の範囲分だけテレビ画像が表示され、しかも、YouTube動画が上に重ねられるので、折角作ったテレビ画像が表示されません。

背景画像が動画で隠れる

テレビ画像をきちんと表示する為には、コンテンツのサイズをCSSで指定します。
すると、そのサイズ分だけ背景画像が表示されます。
コンテンツのサイズとテレビ画像のサイズが合致すれば、綺麗にテレビが表示される仕掛けになるのです。

ちなみに、テレビ画像のサイズは「メディアの編集」画面に表示されています。
「ファイルのURL:」の下の方に「サイズ:」と書かれている部分がありますので、その数字を使用して下さい。

ファイルのサイズ

この状態のままですと、テレビ画像はちゃんと表示されますが、YouTube動画が左上に表示されてしまい、テレビ画面の位置とは合致しません。

動画と背景画像の位置ズレ

そこで、もう一度ボックスモデルを確認してみて下さい。

ボックスモデル

コンテンツの周りの余白を調整する「padding」プロパティを指定する事で、YouTube動画の位置をずらす事ができます。
上側の数値の調整が上手にできれば、YouTube動画とテレビ画面の上の位置が合致します。

左右の位置に関しては、「padding」プロパティを指定する方法でも構いませんが、それよりも、「text-align」プロパティと言う、コンテンツのボックス内での表示位置を調整するプロパティを利用した方が手軽です。
「center」と言う値を入れるだけで、コンテンツが中央寄せになってくれます。
テレビのデザインが凝っていて、テレビ画面の位置が中央ではない場合は、前者の「padding」プロパティを利用して下さい。

テレビ全体の位置をずらす場合は、「margin」プロパティを利用します。
「margin」プロパティに関しては、-(マイナス)の値も使用できますので、覚えておくと、表現の幅がぐっと広がります。
また、左右の「margin」プロパティの値を「auto」に指定する事で、背景や背景色ごと中央に配置する事ができると言うテクニックも使用頻度が多いので、覚えておいて下さい。

▲もくじへ戻る

YouTube動画とテレビ画像の位置の調整作業

では、考え方を学んだところで、一気に作業を行いましょう。
WordPressのサイドメニューの中から、「外観」を選び、その中の「テーマ編集」を選択します。
もし、Jetpack」プラグインをご使用中の方は、「外観」の中の「CSS編集」を選択して下さい。

テーマ編集とCSS編集

「テーマの編集」ページが表示されたら、最下部に以下のCSSを記述して下さい。

/*テレビ*/
.movie {
	background: url("テレビ画像のURL") no-repeat;
	width: 550px;
	height: 657px;
	padding-top: 34px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

CSS内で指定している数字はあくまでも作例に合わせたものです。
この後CSSについて解説しますので、それを読みながら、あなたの作ったテレビ画像の数字に書き換えて下さい。

また、<div>タグに「id」を指定した方は、セレクタの部分を「.movie」から「#movie」に書き換えて下さい。

▲もくじへ戻る

使用CSSの解説

まず、/∗テレビ∗/の部分についてですが、「/∗」と「∗/」で文字をくくる事をコメントアウトと言います。
このタイプのコメントはCSSやJavaScript、PHP内で使用する事が可能で、コメントアウトされた部分についてはブラウザは無視します。
今回のように、このコードは何を意味するのか目印にする目的で使用される事が多いです。

本来は、ソースコードのエラーを起こしている部分を特定するのに利用されるのですが、このコメントアウトを利用して、AA(アスキーアート)をソースコード内に仕込むと言う手法もあります。
お寺や県警のホームページのソースコードに仕込まれたアスキーアートが、一時期、話題になりました。

「background」プロパティは、背景のデザインを指定するプロパティです。
今回は画像のURLを指定する事で、画像を背景画像にしています。
開いたままになっている「メディアの編集」ページから、テレビ画像のURLをコピーして貼り付けて下さい。

「background」プロパティの最後に表示されている「no-repeat」と言う値は、背景画像を繰り返しませんと言う意味になります。
コンテンツと余白の合計サイズが背景画像のサイズよりも大きい場合、通常、背景画像が繰り返されて表示されます。
それを防止するのが、この「no-repeat」です。

「width」プロパティは、コンテンツの横幅を指定する目的で使用します。
それに対して、「height」プロパティはコンテンツの縦幅になります。
今回は、開いたままになっている「メディアの編集」ページから、テレビ画像のサイズと同じ値を指定して下さい。

「padding-top」プロパティは、テレビ画像と動画の上の部分の余白を調整する目的で使用します。
あなたが作成した画像に合わせて調整して下さい。

「text-align」プロパティは、「width」で指定した数字内において、コンテンツ(今回は動画)の位置を調整する目的で使用します。
今回使用した「center」と言う値は、真ん中寄せになります。

「margin-left」プロパティはボックスの左側余白を調整するプロパティで、「margin-right」プロパティは、ボックスの右側余白を調整するプロパティです。
ボックスに関しては、ボックスモデルを確認して下さい。

ボックスモデル

左右の値を「auto」にすると、中央寄せになります。

「ファイルを更新」をクリックすると、YouTube動画に対するデザインの変更が適応されます。
これで、今回の作業は全て終了です。
お疲れ様でした。

▲もくじへ戻る

完成

完成例

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :  

ソフトウェア Adobe Creative Cloud   コメント:0

この記事に関連する記事一覧

TOPへ戻る