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

ワイヤーフレームから作業を始める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、以前のレッスンで作成方法をご説明したモックアップからさらに精度を高め、パーツごとにレイヤーで整理分類されたワイヤーフレームを作成する方法についてお話をします。
講師:
05:22

字幕

このレッスンでは 以前のレッスンで作成方法をご説明した モックアップから さらに精度を高め パーツごとにレイヤーで 整理分類されたワイヤーフレームを 作成する方法について お話をします このワイヤーフレームが これ以降の細かなデザイン作業の ベースとなりますので きちんと整理して作っていきましょう いま画面でお見せしている サンプルファイルには ヘッダやフッタなどの 要素が仮に置かれています 「レイヤーパネル」を開いてみると 全ては1つのレイヤーの中に入っていて 特に整理されてはいません そこで今からレイヤーパネルに 4つのレイヤーを追加して ページ内の場所ごとに分類していきます さっそく始めていきましょう まずはレイヤーパネルを 取り外してみます そして縦方向に伸ばして 作業を見やすくします 次に 新しいレイヤーを4つ作成しましょう レイヤーパネルの下に並んでいる アイコンのうち 「新規レイヤーを作成」 こちらを4回クリックします レイヤー2 から5まで 新しいレイヤーが4つできました これに上から名前を付けていきます 一番上になったレイヤーに 「 header 」 2番目が「 content 」 3番目が「 footer 」 そしてその下に「 background 」 この4つに分類していきたいと思います では 移動を始めていきましょう まずは 「 header 」のレイヤーに 入れる要素です 選択ツールを選択して 一番上にある こちら ヘッダーのナビゲーションを選択します いま ガイドのロックが外れて ガイドも選択されてしまっていますので ガイドをロックし直しましょう メニューバーの「表示」から 「ガイド」「ガイドをロック」 こちらを選択しておきます これで無事にヘッダーのここの部分だけが 選択されました レイヤーパネルを見ると 4つの このパス が 選択されていることが 印が付いているので分かります ここで「レイヤー1」 このいちばん右にある この選択中のアート こちらの印を ドラッグして 「 header 」の中に入れます 選択されていた4つの オブジェクトが 「 header 」のレイヤーの中に 移動しました とりあえず この「 header 」に移したものが 動かないように ロックをしておきましょう 次は「 content 」に入る部分です こちらの ページの内容が入るボックス そして 上に付くナビゲーション この部分にはロゴマークが入る予定です こちらの3つの要素を選択して また「レイヤー1」のいちばん右側に付く 選択中のアート こちらの印を「 content 」のレイヤーまで ドラッグ&ドロップします 「 content 」レイヤーの中に 3つの要素が動いたことを確認して ロックをしておきます 最後は「 footer 」です フッターの要素を 同様に移動させて 「 footer 」レイヤーに入ったことを確認します ロックをしておきます 「 background 」のレイヤーには この後のレッスンで背景を入れていきますので このままにしておきます 最後 「レイヤー1」に ガイドだけが残っています ですので「レイヤー1」の名前を 「 guide 」に変えておきましょう ここまでの作業で 主要なデザイン要素をレイアウトするための 整理されたワイヤーフレームが 作成できました このように表示/非表示をしてみると 分かりますけれども それぞれの場所ごとに レイヤーに分類されたデータ が できあがりました 精密な Web デザイン用のファイルを 作成するには レイヤーの整理と命名は欠かせません 必ず忘れないで整理しておくことを おすすめします ではこの後のレッスンで 今回作成したワイヤーフレームを 活用していきます

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

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

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

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

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

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