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

アピアランスをグラフィックスタイルとして登録する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorを使った効率よいデザイン作業をサポートする「グラフィックスタイル」の登録方法、さらにそれを他のファイルでも再利用する方法について、お話ししていきます。
講師:
09:30

字幕

このレッスンでは Adobe Illustrator を使った 効率よいデザイン作業をサポートする 「グラフィックスタイル」の登録方法 更にそれを他のファイルでも 再利用する方法についてお話ししていきます ここまでのレッスンでは 「塗り」や「線」を追加したり 「効果」のメニューを利用したりして オブジェクトのアピアランスを 変更する方法について学習してきました しかし 例えば 似たようなデザインの ボタンを何個も作成する時 1つずつアピアランスを 変更していたのでは効率がよくありません そこで 一度作成したアピアランスを グラフィックスタイルとして登録し 他のオブジェクトに 素早く反映させることが可能なのです 画面に映っているサンプルの アートワークをご覧ください 4つのボタンが あらかじめ作成されています このうち1つのアピアランスを 変更してみましょう 少し拡大をして作業をしてみます この後ろの黒い丸 こちらのアピアランスを変更していきます 「選択ツール」で選択をして 線にグラデーションを付けていきます 「線形」の「グラデーション」 そして「線パネル」で 太さを太くしていきます 4ポイント グラデーションの向きを 変更してみたいと思います もう一度「グラデーションパネル」を出して 「角度」を-90 ° にします そして色を変更します 「グラデーションスライダー」の 右側の濃い色を もう少し薄いグレーに変更してみました 更にここにドロップシャドウを 付けてみましょう 「メニューバー」の「効果」から 「スタイライズ」 「ドロップシャドウ」を選択します 「プレビュー」にチェックを入れると デフォルトの影が付きます これを少し変更していきます 「不透明度」を 40% 「オフセット」を0(ゼロ)、0 (ゼロ) 「ぼかし」を 3ピクセルにしてみます そして「OK 」をクリックします 周りに少し影が付いていることが分かります そして最後に「塗り」の不透明度を 少し変更してみたいと思います 「アピアランスパネル」を使います 「アピアランスパネル」が見当たらない方は 「メニューバー」の「ウィンドウ」から 「アピアランス」を選択してください 「アピアランスパネル」の中に 「塗り」の項目がありますが こちらの左側の三角形をクリックして開いて インデントされている「不透明度」の 部分を見てください 「アピアランスパネル」の 一番下の「不透明度」は オブジェクト全体の不透明度ですけれども 「塗り」の中にインデントされて 入っている「不透明度」は 「塗り」だけ この「塗り」だけの不透明度です こちらの「不透明度」 このテキストリンクになっている ところをクリックして 値を少し下げてみます 70% に しておきたいと思います 何もないところをクリックして 片づけてください 次に このボタンの真ん中にある この白い三角形のアピアランスも 変更しておきたいと思います 「選択ツール」で三角形を選んで こちらも「グラデーション」を 指定してみます 少し白からグレーの グラデーションがつきました このグレーの色をもう少し薄目に変更して そしてこちらにも「ドロップシャドウ」を 少しだけ付けておきたいと思います 先ほどと同様に不透明度40(%)の 「X 軸オフセット」0(ゼロ) 「Y 軸オフセット」0(ゼロ) 「ぼかし」3ピクセル にしておきます 「OK 」をクリックします 後ろの丸 そして この上に乗っているアイコン こちらの両方に アピアランスが指定されました ここまでできたら このアピアランスを グラフィックスタイルとして登録をします 「グラフィックスタイル」のパネルを使います 引き出してきて 「アピアランスパネル」の下に ドッキングしてしまいたいと思います この様にパネル同士を近づけますと ドッキングさせることができます ではグラフィックスタイルを 早速登録します 最初は背景のこちらの丸を選択して 「グラフィックスタイルパネル」 の一番下にある 「新規グラフィックスタイル」 こちらのアイコンをクリックします 登録されましたので こちらのグラフィックスタイル 新しく追加されたグラフィックスタイルを ダブルクリックして スタイル名を変更しましょう 「丸」にしておきます 次にこの上のアイコンをクリックして 同様に「新規グラフィックスタイル」 アイコンをクリックします パネルの中に登録されましたので ダブルクリックして 「グラフィックスタイルオプション」を 開いた後 スタイル名に名前を付けます 「アイコン」としておきます 「OK 」にします ではこの作成したグラフィックスタイルを 他のオブジェクトにも適用していきましょう 「選択ツール」で後ろの丸 黒い丸を選んで この「グラフィックスタイル」の 先ほど作った「丸」をクリックすると 一瞬でアピアランスが適用されていきます 次にこの上に載っているアイコン こちらはグラフィックスタイルで作った 「アイコン」という名前の スタイルをクリックすると かすかにグラデーションがついて 少しドロップシャドウが付いた形に変わります この様にあっという間に 先ほど作ったアピアランスを 他のオブジェクトに 適用させることができました さらに ここまで作った グラフィックスタイルを 他のドキュメントでも利用出来るように 書き出しておきたいと思います 「グラフィックスタイル」 こちらのパネルの中で 保存しなくても良いデフォルトのものは すべて選択をして 右下の「ゴミ箱」のアイコンを クリックして削除しておきます デフォルトのスタイル+ ご自分が今作った2つのスタイルが 入っている状態にします そして この「グラフィックスタイル」パネル 右上の「ドロップダウンメニュー」を開いて 一番下にある 「グラフィックスタイルライブラリを保存」 こちらを選択しましょう 「グラフィックスタイル」のフォルダの中に 名前を付けて保存することが出来ます 名前を「ボタンスタイル」 としておきます 「保存」をクリックします では 別のドキュメントを作って このスタイルが適用されるか試してみましょう 「メニューバー」の 「ファイル」から「新規」 Web 用のドキュメントを1つ作って 正円を1つ描いてみます 「グラフィックスタイル」のパネルの 右上の「ドロップダウンメニュー」から 「グラフィックスタイルライブラリを開く」 そして「ユーザー定義」 この中に先ほど作った「ボタンスタイル」 のライブラリが入っていますので これを選択します 「ボタンスタイル」と名前が付いた グラフィックスタイルの セットが読み込まれますので 「丸」と言う名前のスタイルを 早速 適用してみたいと思います 即座に反映されたことが お分かりいただけると思います いかがでしたでしょうか? ここまで Adobe Illustrator で作成した アピアランスを グラフィックスタイルとして登録し 効率的に再利用する方法をご説明しました よく利用するスタイルはどんどん登録して 使いまわしてみてください

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

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

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

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

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

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