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

IllustratorをWebデザイン作業向けにセッティングする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
IllustratorをWebデザインの作業に最適な形にセッティングする方法について、詳しく見ていきます。このセッティング方法を知ると、最も快適にご自分の作業ができる環境を作ることができます。
講師:
09:04

字幕

このレッスンではIllustratorを Web デザインの作業に 最適な形にセッティングする 方法について詳しく見ていきます このセッティング方法を知ると 最も快適にご自分の作業ができる 環境を作ることができます AdobeIllustrator でのワークフローに 慣れてくると もっと素早くツールを選んだり パネルの並び順を変更したり したくなりませんか? ここでは Web 向けの ワークフローに合わせて パネルの並び方をアレンジする方法を ご紹介していきます まず最初に新規ドキュメントを 作成することから始めてみましょう 画面上部のメニューバーのファイル ここから新規を選択します 新規ドキュメントの ダイアログボックスが開きました この段階ではデフォルトの設定のまま 進めますので このまま Enter か return キーを 押してください 今はアートボードのサイズなどを 気にする必要はありません Illustrator のパネルの並び方だけに フォーカスして話を進めましょう Illustrator を起動すると画面右上に ワークスペースを切り替える コントロールがあることがわかります この今でしたら「初期設定」と 書いてある部分です 他の Adobe 製品にも共通した 機能ですが このメニューを使って 様々な種類のワークスペースを 切り替えることができます またはメニューバーの 「ウィンドウ」 「ワークスペース」 ここから同じ操作をすることも可能です Photoshop でも Illustrator でも 起動する際には このワークスペースの 切り替えメニューを 確認してみてください そしてご自分のワークフローに ぴったりくるものがあるかどうか 探してみましょう 今回は Illustrator のコースですが あらかじめ Web という ワークスペースが 用意されていますので これを使います Web というワークスペースを 選択するとパネル部分の並びが 変化したことが おわかりになりますでしょうか? 今までにあったパネルの列の左側に もう1つパネルアイコンの列が 追加されました そしてシンボルパネルや スウォッチパネルがすぐに触れるように 開いています これは Illustrator に あらかじめ用意された Web デザインワークフローに適した パネルの並びというわけです そしてこれを さらに この後の作業に向けて カスタマイズしてみましょう 左側の線パネル グラデーションパネル 透明パネルなどは Web デザインの作業でも よく使うので残しておきます 文字 段落 オープンタイプ これらのパネルも Web デザインには よく使うパネルですので 残しておきます その下にリンクパネルがあります JPEG や PNG などの ビットマップファイルを 外部からリンクして利用したい場合は これを残しておいてもよいと思います 仮にラスター画像 ビットマップ画像は デザインで利用せず Illustrator で作成したオブジェクトだけで デザインすると決めている場合でしたら このリンクパネルを 非表示にすることができます パネルを非表示にしたい時は このドッキングしているところから ドラッグして切り離して 左上の小さなバツ こちらをクリックします これで消すことができました その下に属性パネルと 変数パネルがあります これも今回の作業には あまり利用しないので 同じように消しておきましょう さて この下に アクションパネルがあります アクションは自分が行った作業を 録画するように記録して 後で何回も繰り返せるように 残しておくための機能です うまく使うと もっとワークフローを 効率的にできますので この場所に残しておきます 右の列に移ると 変形パネルがあります このコースではあまり これは使いませんので この変形のタブのところをドラッグして 右側に移しておきます そして その左側の「情報」 こちらのタブをクリックして 手前に出してアクティブにしておきます 情報パネルはマウスカーソルが ドキュメントのどこにあるか X と Y 座標を使って 確認することができます またオブジェクトの拡大縮小の際にも 幅と高さを確認することに 使うことができます そしてこのコースでは このスウォッチパネルも よく使うので残しておきます また Web デザインのワークフローでは この下のシンボルパネルも使いますので これも残します このコースでは Web デザインのために シンボルを活用する方法について 詳しくご説明するものがありますので ぜひチェックしてみてください 次にご説明したいのは アピアランスのパネルです こちらに折りたたまれて タブだけ見えています アピアランスのパネルでは ドキュメント内の それぞれのオブジェクトについての 情報を詳細に確認して コントロールできますので 最大限に使いこなすと これまでに紹介した 他のパネルを使わなくてもいいくらい 強力なパワーがあります ということで このアピアランスパネルを もう少し大きく表示させたいので このようにして大きめに アピアランスパネルを広げておきます そしてこのコースでは 多様な画面サイズの端末に向けた レスポンシブ Web デザイン こちらに取り組むために アートボードのパネルを活用しますので これも触りやすい場所に移動します 最初アートボードパネルは この一番下 この部分に折りたたまれた状態で 入っています このタブのところを掴んで 一回切り離した後に 左列の一番下に ドッキングをしておきます これでいつでもアートボードパネルを 閉じたり開いたりすることが できるようになります そしてレイヤーパネル こちらもよく使いますので ちょっと広げておきます こうすると 先程広げた上のパネルと 押し合いへし合いした感じに なってしまうのかもしれないのですが 一時的に畳みたいパネルは タブのところを ダブルクリックしてください こうするとパネルを開いたり閉じたり することができるようになります さらにここから このコースを進めやすいように カスタマイズしていきます シンボル ブラシ グラフィックスタイル このパネルは左列にドラッグして 移動しておきましょう こうすると常に開いておきたい 情報 アピアランス レイヤー こちらのパネルを 広く使うことができます そして他のパネルにも 簡単にアクセスすることが できるようになります ここまでカスタマイズしたら このワークスペースを 保存しておきましょう 右上のワークスペースの 切り替えコントロール こちらから「新規ワークスペース」 を選択します 名前の欄に“黒野明子のー ワークスペース” と入れて「OK」をクリックします そうしますと この左上に 今 入力した “黒野明子のワークスペース” という名前で登録が完了しました また Web デザインの仕事をした後に パンフレットなど印刷物デザインの 仕事が来るかもしれません そんな時はワークスペースを 「レイアウト」ですとか 「プリントと構成」ですとか その印刷物作業に適した ワークスペースに変更して またいつでも “黒野明子のワークスペース”に 戻すことができます 一度「プリントと構成」を選んでから また“黒野明子のワークスペース”に 戻すことが可能です ご自分の作業が一番快適に なるような環境を作るのが大切です もっとご自分の作業にぴったりの ワークスペースをカスタマイズしたら それも保存しておいてください ここまで Illustrator を Web デザインの作業に 最適な形にセッティングする 方法についてご説明してきました ぜひ実践してみてください

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

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

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

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

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

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