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

モックアップをスライスする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorを利用し、WebサイトのパーツをWebブラウザで閲覧できるファイルとして書き出す方法について、詳しく見ていきましょう。
講師:
07:20

字幕

ここまでのレッスンでは Adobe Illustratorを利用して Web サイトのパーツ作成や レイアウトを行ってきました このレッスン以降は それらをコーディングで利用できて Web ブラウザで閲覧できる ファイルとして書き出す方法について 詳しく見ていきましょう まず このレッスンでは スライスと呼ばれる方法で 今まで作成したモックアップを パーツごとの画像に 切り分けるやり方を学んでいきます 今 画面に映っているのは ここまでのレッスンで作成してきた おもちゃ屋さんのサイトの モックアップです Web ブラウザで閲覧する際には このまま丸ごと画像化するわけではなく HTML と CSS で表現する場所以外の 画像として利用するパーツを 小分けにカットしていきます そのように画像を小分けカットする方法を Photoshop や Illustrator では スライスと呼んでいます スライスの作り方には3種類あります 今からひとつずつ 見ていってみましょう 画面を拡大して ご説明を進めていきます ズームツールを使って 画面の上部を見ていきましょう こちらの真ん中に細かいオブジェクトが グループ化された ロゴマークのオブジェクトがあります こちらを使って1番目の スライス方法をご説明します まずグループ化されたオブジェクト もしくは単体のオブジェクトを 選択ツールで選んだ後に メニューバーの「オブジェクト」から 「スライス」そして「作成」を選択します こうしますと 今 見えましたでしょうか? この上に3番という数字がついて 四角形で囲まれました そして その周りには 4番 5番と薄い数字がついた枠が 自動で できあがっています この朱色の枠がスライスです この線に従って Illustrator が画像を 小分けカットにしてくれます 今 お見せした「オブジェクト」 「スライス」「作成」の方法で スライスを作りますと 一度作ったスライスの枠は このようにオブジェクトを 動かしても追随してきます ということは スライスを切った後にも 少しレイアウトを 微調整したいというような時に とても便利な方法ですので 覚えておいてください ではロゴマークの位置を元に戻して 次の方法をご説明します 次は この下側にある3枚の写真を 使ってご説明しましょう こちらの3枚の写真は グループ化されていないバラバラの状態です こちらを shift キーを押しながら 同時に選択します グループ化はされていませんけれども 3枚が同時に選択されている状態です この状態でメニューバーの 「オブジェクト」から「スライス」 「選択範囲から作成」を選びます 先程は1行目の「作成」を 選びましたけれども こちらではなく4行目の 「選択範囲から作成」を選んでください そうしますと この3枚の写真を 囲うような形のスライスが ひとつできあがりました 「選択範囲から作成」で スライスを作成しますと あらかじめオブジェクトを グループ化しておく必要はありません しかし このようにオブジェクトを動かしても スライスは追随してきませんので もしスライスを切った後にレイアウトを 変更する必要がでてきた場合には もう一度スライスをずらす必要があります では また写真の位置を戻して 3つ目の方法をご説明しましょう 3つ目の方法はスライスツールを使って 自分で好きな場所にスライスを切る方法です スライスツールはツールパネルの 右列の下から2つ目 この鋭いナイフのような形のアイコンです こちらを選択して このメインのグラフィック部分の スライスを作成してみましょう 左上から右下にかけて 画像を小分けにしたいところで ドラッグをします ドラッグをしたとおりに 7番のスライスができあがりました そして このスライスの上の部分が 少し文字に被ってしまっていますので 枠を変更したいと思います 変更する時には スライスツールを長押しして 下に入っている スライス選択ツールを使います スライス選択ツールで 今 作った7番のスライス こちらの枠を選択した後に 上側の線をドラッグします このように一度切ったスライスを スライス選択ツールを使って ずらすことが可能です このようにして ご自分が作った Web デザインの中で 切り出す必要があるところは 3つの方法のうちどれかを使って スライスを切っていきます 3つの方法を もう一度おさらいしますと 1つ目がメニューバーの 「オブジェクト」から「スライス」「作成」 この方法はあらかじめオブジェクトを グループ化しておくと便利です 2つ目が「オブジェクト」「スライス」 「選択範囲から作成」 こちらを使う時には グループ化をしていなくても 選択したオブジェクトを元に スライスを作ってくれます 3つ目がスライスツールを使って 任意の場所で四角形を作って スライスを切る方法です お好きな方法でスライスを きれいに作っていってください 以上 このレッスンでは Adobe Illustrator で 作成したモックアップを パーツごとの画像に小分けする スライスの方法について学んできました 次のレッスンでは この小分けにした画像を 個別に最適化設定して 書き出す方法についてご説明します

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

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

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

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

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

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