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

ドロップシャドウを使いこなす

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorの中でオブジェクトに影をつける機能「ドロップシャドウ」の使い方について、ご紹介していきます。
講師:
06:27

字幕

このレッスンでは Adobe Illustrator の中で オブジェクトに影を付ける機能 「ドロップシャドウ」の使い方について ご紹介していきます 最近はWeb プラウザが CSS3 のドロップシャドウを レンダリングできることがほとんどですので 描きだす画像そのものに 影を付けることは無いかもしれません ただ デザインカンプを作成する際に 影を付けるとどのように見えるのか シミュレーションしたい という場合もあるでしょう 何より私がお勧めしたいのは 「CSS プロパティパネル」を利用して Adobe Illustrator で作成した影を ブラウザ上で再現するためのCSS を 自動で生成する機能です では 早速やり方を見ていってみましょう 今 画面に映っていますのは 300×250 ピクセルのバナーのデザインです 一番下に 背景となる 四角形のオブジェクトが置いてあります このオブジェクトに対して ドロップシャドウをかけてみましょう 効果をかけるためのオブジェクトを 「選択ツール」で選択した後に 「メニューバー」の「効果」から 「スタイライズ」 そして 上から2つ目の 「ドロップシャドウ」を選択します 一番最初に左下の 「プレビュー」のチェックを付けると デフォルトで用意されている影が いきなり付きます ここから いろいろ 数値を変更していきましょう 「不透明度」を下げていきます 50% にしておきたいと思います 「X 軸オフセット」は横方向の影のズレ 「Y 軸オフセット」が縦方向の影のズレです こちらを2ピクセルずつに しておきたいと思います 「ぼかし」は影が縁からどれくらいぼけるか の数値ですけれども これは5ピクセルにしておきましょう 影の色を変更することも可能です 「カラー」のところにチェックを付けて 「カラーピッカー」を開いて この様に色を変更することも出来ます この内容でよろしければ 「OK 」をクリックして ドロップシャドウの編集を確定します このドロップシャドウの効果は 「アピアランスパネル」の中に 記録されていますので 後から編集したり削除したり することが可能です 「アピアランスパネル」を見てみましょう 「アピアランス」のパネルが見当たらない方は 「メニューバー」の「ウィンドウ」から 「アピアランス」を選択してください 「アピアランスパネル」を見ると 「ドロップシャドウ」の項目が 追加されていることが分かります 「ドロップシャドウ」の内容を 変更したい場合には この テキストリンクに なっているところをクリックして 「ドロップシャドウ」の ダイアログボックスをもう一度開きます 色がちょっと気にいらないので もう一度変更してみましょう 濃い目のオレンジ ちょっとブラウンですね ブラウンに変更してみたいと思います 「プレビュー」にチェックを付けると 変更後の色を確認することが出来ます 「OK 」を押して編集を確定します さて ここまで見てきたように ドロップシャドウの効果を簡単につけて また 「アピアランスパネル」から 編集することも出来るんですけれども これをさらにCSS として描き出す という機能を確認してみましょう 「CSS プロパティパネル」を使います 「メニューバー」の「ウィンドウ」から 「CSS プロパティ」 こちらを選択します 選択してパネルを延ばしてみると メッセージが書いてあります 「CSS コードは生成されませんでした」 というフレーズで始まるー ちょっと長めのメッセージが入っています 実は この対象となるオブジェクトに 名前を付けておかないと CSS が生成されません 名前を付けるために 「レイヤーパネル」を使います 「レイヤーパネル」が見当たらない方は 「メニューバー」の「ウィンドウ」から 「レイヤー」を選択してください 「レイヤーパネルを開きましたら 「Leyer 1 」を開いて この使おうとしているオブジェクトに 半角英数で名前を付けます ここでは「shadow」と付けておきましょう オブジェクトに半角英数で名前を付けると それを利用してクラス名にしたCSS こちらが自動で生成されることが見えてきます 「CSS プロパティパネル」の中に クラス「shadow」 そして 中を見ていきますと 背景色(background )ですとか ボーダーのスタイル (border-style )などと一緒に ボックスシャドウ(box-shadow ) のプロパティが入っています そして Internet Explorer でも 指定ができるように このフィルター(filter )のプロパティも 指定されていることが分かります このCSS をコピー&ペーストして ご自分が作成しているWeb サイトの CSS のファイルにペーストすれば ブラウザでドロップシャドウが 再現されるわけです Illustrator の中で見た目を 再現するだけではなく ブラウザの中で同じように シャドウを付けられるように CSS も自動で書き出してくれる 便利な機能です ここまで見てきたように Adobe Illustrator には 「CSSプロパティパネル」をはじめとした Web デザインに役立つ機能が どんどん追加されています 是非 ご自身でも試してみてください

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

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

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

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

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

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