PhotoshopでWebデザイン

プレースホルダーの設置

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビデオ用のプレースホルダーとしてポスターイメージを作成して配置します。
講師:
05:43

字幕

では、動画用のプレースホルダーを見ていきましょう。まずは、ABOUT のページはいらないので一回隠しておきます。HOME のページを出します。ここのグレーの箱の部分に動画が来る予定です。Youtube や Video のプレースホルダーを用意しましょう。まず「ファイル」>「開く」Chapter 8 の中からVideo 用のイメージを持ってきます。Video_Poster.jpg というような感じで用意されています。開きます。これを配置していきましょう。Ctrl/Command+A で全てを選択してCtrl/Command+C でコピーします。挿入したい方のこちらに移動してCtrl/Command+V で画像を挿入します。これを HOME のページに移動して順番を変えます。この中では一番上にしましょう。後はサイズを直してあげます。サイズを直す前に、このレイヤーをスマートオブジェクトに変換しましょう。レイヤーを選択して右クリックから「スマートオブジェクトに変換」こうすることで、この一番最初のサイズを覚えておいてくれます。レイヤーを選択してCtrl/Command+T で自由変形にしてサイズを合わせていきます。 Enter で決定します。灰色のプレースホルダーはいらないのでこれを削除します。では、これに動画再生用のボタンを作っていきましょう。スマートレイヤーをダブルクリック実際の psb ファイルに入ったら、この上にもうひとつレイヤーを作ります。ここに Paint のバケツで黒を塗っていきましょう。デフォルトの黒に戻したらバケツで一色に塗ります。そしたら、このバケツのレイヤーを薄くしてこんな感じに少し暗くなったイメージの感じにします。この上に、シェイプレイヤーのカスタムシェイプこれで再生用のボタンを探していきます。ない場合は右側の歯車のボタンを押して「すべて」を選択します。こうすると、Photoshop で用意されているすべてのカスタムシェイプが追加されます。OKそうすると、三角形のマークがどこかにあります。これですね。これをクリックして三角形をまず描きます。再生ボタンになりそうな感じに描いていきます。色は白にしましょうか。90 度回しましょう。Ctrl/Command+T で自由変形マウスカーソルを角のあたりに持っていくとこういう回転のマークに変わります。このまま回しながら Shift を押します。 そうするときれいな角度に回ってくれます。確定する場合はEnter を押します。この周りに丸を描いていきましょう。丸は「カスタムシェイプ」に持ち替えてここに丸の輪っかがあります。どれがいいですかね、これでいけるかな。試しに書いてみます。Shift を押しながらギューッと。これでいけそうですね。これで塗りを白にします。この丸は真ん中に配置したいのでCtrl/Command+A で全体を選択して真ん中へ、真ん中へ後は三角形のほうを場所を合わせていきます。こんな感じですかね。この二つにスタイルを付けていきましょう。まずは上の丸からいきましょうか。スタイルで「ドロップシャドウ’」距離取らずにサイズを「10」ぐらいにしましょうか。影を「50% 」としたいと思います。このスタイルをコピーします。レイヤースタイルをコピー三角のほうにもレイヤースタイルを付けます。「レイヤースタイルをペースト」出来ました。この状態でCtrl/Command+S でSave してあげて元々のドキュメントに戻るとこれが入っています。こんな感じにスマートオブジェクトを使って動画用のプレースホルダーを作成しました。次は、ボタンを配置していきましょう。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。