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

定規とガイドを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorを使ってWebサイトの精密なモックアップを作るために、ドキュメントの中でガイドと定規を活用する方法についてご説明します。
講師:
09:04

字幕

このレッスンでは AdobeIllustrator を使って Web サイトの精密なモックアップを 作るために Web サイトの精密なモックアップを 作るために ドキュメントの中で 定規とガイドを活用する方法について ご説明します 定規とガイドを活用する方法について ご説明します いま画面上で開いているのは 一つ前のレッスンで作成した 幅 1200 ピクセル 高さ 2000 ピクセルの 新規ドキュメントです 幅 1200 ピクセル 高さ 2000 ピクセルの 新規ドキュメントです もし まだドキュメントを 作成していない方は これと同じサイズの 1200 x 2000 のアートボードの 新規ドキュメントを作成してください 1200 x 2000 のアートボードの 新規ドキュメントを作成してください 定規を使うには メニューバーの「表示」から「定規」 「定規を表示」を選択します 定規が上と左側に表示されました キーボードショートカットを使う方は Command+R もしくは Ctrl+R で 定規を表示することもできます 次にズームツールを使って― 画面のアートボードの左上の方を 拡大していきましょう 画面のアートボードの左上の方を 拡大していきましょう アートボードの左上が─ 定規のちょうど 0 起点になっていることを確認してください では 手のひらツールをダブルクリックして もう一度アートボード全体表示に戻ります 今回のモックアップは 横幅 960 pixel で 作成していきたいと思います その目印にするために─ まず最初に 960 pixel の 幅の長方形を作って それを使ってガイドを 正しい位置に置いていきます それを使ってガイドを 正しい位置に置いていきます 長方形ツールを選択して 塗りを黒 線をなしにします 塗りと線の右上にある 「塗りと線を入れ替え」ボタンを使って 素早く設定することができます 長方形ツールを アートボードの中で一度クリックして 幅 960 pixel 高さは何 pixel でも構いませんので OK を押します このできあがった長方形を アートボードのちょうど中央に 揃えたいと思います アートボードのちょうど中央に 揃えたいと思います 整列パネルを使いたいので 選択ツールに持ち替えた後 メニューバーの「ウィンドウ」から 「整列」を選択してください もし整列パネルが 3段表示されていない方は 右上のドロップダウンメニューから 「オプションを表示」 こちらを選択することで 3段全て表示させてください 右下の「整列」という ドロップダウンメニューから 右下の「整列」という ドロップダウンメニューから 「アートボードに整列」 こちらにチェックが付いていることを 確認してください こちらにチェックが付いていることを 確認してください これを選びますと― オブジェクトをアートボードに対して中央 アートボードに対して上揃え など そのような指定をすることができます ここまでできましたら 選択ツールで長方形を選んでから 「オブジェクトの整列」の左から 2番目 「水平方向中央に整列」をクリックします この操作でアートボードのちょうど中央に 長方形を動かすことができました 整列パネルをもう使いませんので 左上のバッテンを押して閉じておきます では次に この長方形の左の端と右の端に ちょうど吸着するような形で ガイドを引いていきたいと思います ちょうど吸着するような形で ガイドを引いていきたいと思います ズームツールを使って 長方形の左側をドラッグして 拡大してください 長方形の左側をドラッグして 拡大してください 次に選択ツールに持ち替えて 定規のちょうど数字が 書いてあるぐらいの場所から─ 定規のちょうど数字が 書いてあるぐらいの場所から─ マウスを押しっぱなしにして この左側の辺の近くに持って来ます ちょうど吸着するところがありますので その部分で手を離します 今度は手のひらツールを使って 長方形の右側の方に移動しましょう こちらにもガイドを吸着させます 選択ツールに持ち替えて 定規からガイドを出してきます 定規からガイドを出してきます 吸着するところで手を離します 吸着するところで手を離します もしこの吸着の操作がされない方は メニューバーの「表示」から 「ポイントにスナップ」 こちらにチェックが付くように 指定をしておいてください こちらにチェックが付くように 指定をしておいてください 手のひらツールをダブルクリックして 全体表示に戻します この長方形はもう必要ありませんので 選択ツールを使って選択した後に キーボードの Del キーを押して 消してしまいます キーボードの Del キーを押して 消してしまいます さて今 縦方向のガイドラインを 引くことができましたので さて今 縦方向のガイドラインを 引くことができましたので 今度は横方向のガイドラインを引きましょう まずヘッダーを作るための 高さ 100 pixel のガイドライン 頭から 100 pixel の所に ガイドラインを引きたいと思います 頭から 100 pixel の所に ガイドラインを引きたいと思います ズームツールに持ち替えて アートボードの左上の方を 拡大していってください アートボードの左上の方を 拡大していってください 拡大率が 2400% ぐらいになるまで 非常に大きく拡大します 拡大をしたら 左側の定規で ちょうど 100 pixel のあたりに移動します ちょうど 100 pixel のあたりに移動します 手のひらツールに持ち替えて 100 pixel あたりに移動してください 移動してきますと 目盛りが 99 のところに数字が付いています この 1 つ下が 100 pixel ですので 選択ツールで この 100 の目盛りの所に Shift キーを押しながら ダブルクリックします Shift キーを押しながら ダブルクリックすることで ちょうどぴったりの数値の所に ガイドを引くことができます 次に ヘッダーの下に 30 pixel のマージンを作りたいと思います 130 のところに ちょうどガイドを引きましょう 手のひらツールで 下方向に移動した後 選択ツールを使って 129 のひとつ下 この 130 のところにガイドを引きます この 130 のところにガイドを引きます Shift キーを押しながら ダブルクリック 手のひらツールを ダブルクリックして全体表示に戻すと 手のひらツールを ダブルクリックして全体表示に戻すと 2本のガイドラインが 引かれていることが分かります 2本のガイドラインが 引かれていることが分かります 次にフッター用のガイドラインを作りましょう このデザインではフッターの高さを このデザインではフッターの高さを ちょうど 300 pixel にしてみたいと思います いま全体が 2000 pixel の高さですので 下から 300 pixel つまり上から 1700 pixel のところに ガイドを引きたいと思います またズームツールを使って 下の方を 2400% ぐらいになるまで 拡大していきます 下の方を 2400% ぐらいになるまで 拡大していきます なるべく 1700 の目盛りの近くで 拡大をしていきます なるべく 1700 の目盛りの近くで 拡大をしていきます いま拡大倍率が 2400% になりました ここで選択ツールに持ち替えて 目盛りが 1701 の所に付いていますので このひとつ上 ここが 1700 1700 になります ここを Shift キーを押しながら ダブルクリックします こんどはフッターにも 上方向 30 pixel の マージンを作りたいと思いますので 手のひらツールで 1670 1700 - 30 = 1670 のところに 1700 - 30 = 1670 のところに ガイドを引きます 選択ツールに持ち替えて いま数字が付いている 1671 のひとつ上 いま数字が付いている 1671 のひとつ上 この 1670 の所に Shift キーを押しながら ダブルクリックします 手のひらツールをダブルクリックして 全体表示に戻します ここでもう一つ 注意していただきたいことがあります ここでもう一つ 注意していただきたいことがあります ガイドがロックされていない場合 自由に動かすことができてしまいますので 作業中にずれてしまいます そのようなことが起きないようにするために メニューバーの「表示」から「ガイド」 「ガイドをロック」にチェックが 付いているかどうかを確認してください 「ガイドをロック」にチェックが 付いているかどうかを確認してください このチェックが付いていない方は 「ガイドをロック」の項目に付けておきます ここまで 定規とガイドの機能を使って Web サイトの精密なモックアップを 作るための下準備をしました Web サイトの精密なモックアップを 作るための下準備をしました 以前のレッスンのように このサイズのレイアウトを よく使うのであれば このサイズのレイアウトを よく使うのであれば テンプレートとして 保存しておくのも便利です テンプレートとして 保存しておくのも便利です

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

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

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

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

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

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