Illustratorを使ったWebデザインのテクニック

ビデオプレースホルダーを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
近年のWebサイトでは、YouTubeやVimeoなどの動画を掲載するケースがますます増えています。そこで、このレッスンでは、ビデオプレースホルダーすなわち、動画の入る場所とサイズを仮に指定する領域を、作成していきます。
講師:
10:16

字幕

近年の Web サイトではYouTube や Vimeo などの動画を掲載するケースが ますます増えています Web デザイン製作においても 動画を入れる箇所を 指定する機会も多いでしょう そこでこのレッスンではビデオプレースホルダー すなわち動画の入る場所とサイズを 仮に指定する領域 そちらを作成していきます 動画の代表的な縦横比率は 4:3 と16:9 の2種類ありますので そちらを両方作っていきましょう では画面を切り替えて まずは長方形ツールを選択します 塗りを 999999 に指定して線を「なし」にします 長方形ツールでアートボードの中をクリックして 幅 320 高さ240 と指定をします これが 4:3 の小さいバージョンのサイズです 「OK」をクリックします この真ん中に再生を意味するアイコンを 入れておきたいと思います 長方形ツールを使って小さな長方形を描きます ズームツールで拡大しておきましょう 塗りを仮に黒にしておきたいと思います そしてちょっと膨らんだ形状にしたいので メニューバーの「効果」から「ワープ」 そして「膨張」を選択します プレビューにチェックが付いた状態で カーブの数値を変えていきます 30 %くらいにして少し膨らんだ状態を作ります そしてこのオブジェクトを メニューバーの「オブジェクト」から アピアランスを分割して この膨らんだ形のとおりに パスが生成されるようにしておきます 次にこの中央に入れる三角形を描きたいので 多角形ツールを選択します 多角形ツールで一番最初に描かれるのは このような六角形ですけれどもー 角を減らすためにはキーボードの矢印キーを 下方向に押して三角形にします そして三角形をひとつ描いたら 選択ツールを使って 90 度傾けます そして先程描いたこの膨らんだ長方形と重ねて サイズを合わせます バランスよく真ん中に入るようにして 色を白にしておきましょう そしてこの2つを使って 型抜きをしたいと思います 2つとも選択をして メニューバーの「ウィンドウ」から 「パスファインダー」を選択します パスファインダーの全面オブジェクトで 型抜きを選択しましょう これで切り抜かれた状態に変わりました 手のひらツールをダブルクリックして 全体表示に戻したら こちらのアイコンを中央に入れます 色を白に変更して縦横を揃えましょう 四角形とアイコン両方選択して 整列パネルを開きます 「選択範囲に整列」になっていることを 確認して「水平方向中央」と 「垂直方向中央」を両方揃えておきます これで 4:3 の例がひとつできましたけれども あと 2 つ あと 3 つ作りたいと思います 4:3 の大きいバージョン それから16:9 の大小 あと3つ追加します そのためにはアートボードが少し狭いので 広げておきましょう ズームツールを使って option キーを押しながら 少しズームアウトしておきます 次にアートボードツールを使って 作業領域を広げておきます 選択ツールに戻して作業を進めましょう この 320×240 こちらのプレイスホルダーを複製をします option または Alt キーを押しながら ドラッグします パネルが邪魔なので片付けておきましょう 少しズームアウトしてー この2つをもう一度複製します 選択ツールで option か Alt キーを押しながら ドラッグすると複製されます それではこの右上 こちらを 640×480 に大きく変更しましょう 変形パネルを使って 基準点を中央にしておきます 幅を 640 高さを 480 に変更します これで 4:3 の大きい方の バージョンが作れました 次に 16:9 です 左下の長方形を選択して変形パネル 基準点が中央になっていることを確認して 640×360 にします 横長の動画ですね そして最後 4つ目 こちらを変形パネルから 960 の 540 にします 16:9 の大きいバージョン 4 つ 全部で 4 つ作成することができました では これをシンボルとして 登録をしておきましょう シンボルパネルを開きます 今まで入っているシンボルを全て捨てて 1つずつドラッグ&ドロップします 名前を 4:3 4 X 3 ですね の 320×240 という名前にしておきます 2つ目は 4×3 ... 640×480 です この 4:3 の2つのシンボルを登録できたところで シンボルライブラリーを 保存しておきたいと思います 名前を "4×3 ビデオプレースホルダー" としておきます そしてシンボルのフォルダの中に保存します 次はこの2つを削除してー 16:9 の方も作っておきましょう 今度は名前を 16×9 の 640×360 それから... 16×9 の 960×540 としておきます そしてこのシンボルライブラリーを 別途保存しておきましょう 今度は ”16×9 のビデオプレースホルダー” という名前にしてシンボルファイルとして 保存しておきます このようにしておくと新しいファイルを作っても また流用することができます メニューバーのファイルから「新規」を選んで 新しいファイルを作ります そしてシンボルパネルで 「シンボルライブラリを開く」 その他のライブラリから 先程保存をしたファイルを開きます "4×3 のビデオプレースホルダ" の シンボルライブラリを選んで こちらからこのように引き出せば いつでもデザインの中で このビデオプレースホルダーを 利用することが可能になります ここまで YouTube や Vimeo などの動画を Web ページに掲載する領域を示すための ビデオプレースホルダーの作成について ご紹介しました これらの要素はシンボルとして登録しておけば 汎用的に利用可能ですので活用して下さい

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

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

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

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

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