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

サイトの主要な要素を追加する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、サイトの主要な各要素を個別のファイルで作成し、ワイヤーフレームのファイルに集約するという手法をご紹介したいと思います。
講師:
07:43

字幕

デザイナーによってレイアウト作成の手法は 様々に異なりますけれども このレッスンでは サイトの主要な各要素を 個別のファイルで作成して ワイヤーフレイムのファイルに集約する という手法をご紹介したいと思います そして完成したものを クライアントさんやエンジニアさんに お見せするという流れになります 今画面に写っている サンプルのワイヤーフレーム こちらと一緒に主要な各要素を個別に作った ファイルを既に開いてあります これを使って作業していきましょう まずこの「ワイヤーフレーム」の中に 背景を入れていきたいと思います 別途作成してあったこちらの背景を 選択して「編集」から「コピー」します キーボードショートカットの方は Command+C もしくは Ctrl+C です ワイヤーフレームのファイルの方に戻って 「 background 」と名づけたレイヤー以外を いったん非表示にしておきましょう background のレイヤーを選択して こちらに「編集」から「ペースト」 キーボードショートカットは Command+V もしくは Ctrl+V でペーストされます 少し位置がずれていますので ズームツールで拡大して アートボードの左上にぴったりと スナップさせておきます 手のひらツールをダブルクリックして 全体表示に戻します これで背景を配置することができましたので もう動かさないようにこの背景のレイヤーに ロックをしておきます そしてその他のレイヤーの 表示も元に戻しましょう 次に「ナビゲーションバー」を コピーしてペーストしたいと思います ナビゲーションバーは このパーツの部分に入ります 「ナビゲーション」のファイルを開いて 全てを選択 そして「編集」から「コピー」した後に ワイヤーフレームのファイルに戻ります そして「編集」から「ペースト」 文字と背景の四角形が離れないように グループ化しておきます メニューバーの「オブジェクト」から 「グループ」を選択します 選択ツールを使って上の方に 動かしていきましょう ズームツールで拡大します この今ペーストをしたナビゲーションが ガイドにぴったり収まるように― 配置をします そしてコンテントレイヤーを開いて もともと入っていたこちらのモックアップ用の ナビゲーションバー こちらを消してしまいます そして今ペーストしたこちらの オレンジ色のナビゲーションバーに 名前を付けておきましょう このようにレイヤーに名前を付けておくと 後ほど整理をするときに非常に便利です 次はこの真ん中の部分― こちらにロボットのロゴマークが入りますので コピー&ペーストしましょう ロゴのファイルに移動して 全てを選んだあとに 「編集」から「コピー」を選びます そしてズームツールでロゴの入る予定の この四角形のところをズームをした後に 「編集」から「ペースト」します そして元々の四角形に位置を合わせた後に 元々入っていたこちらの 四角形を消してしまいます ロゴマークとこのナビゲーションバーの文字が 少し重なってしまいましたので 文字を詰めて調整をしておきましょう 左右のナビゲーションの 文字と文字の間を少し詰めておきます 調整が完了しました 次は全体のヘッダーの部分 こちらの部分のパーツを持ってきます 「ヘッダー」のファイルで メニューバーの「選択」から 「全てを選択」 「編集」から「コピー」した後に ワイヤーフレームのファイルで 先ほど利用したこの content こちらはロックをかけておいて 今度はヘッダーのレイヤー こちらに今コピーした ヘッダーのナビゲーションを入れたいと思います 編集からペーストして こちらを入れておきましょう そして元々入っていたー 下のグレーの四角形 こちらは消してしまいます 位置を調整して 元々入っていたグレーの四角形の方は 削除します こちらも同様で― 元々ダミーで入っていた 四角形を削除しましょう これでヘッダーの部分ができましたので ヘッダー部分もロックをしておきます 以上このレッスンでは サイトの主要な各要素を 個別のファイルで作成し ワイヤーフレームのファイルに集約する という手法についてお話してきました ご自分の制作スタイルに合わせて 取り入れてみて下さい

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

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

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

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

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

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