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

角丸の編集をもっと自由に

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorCC以降どんどん進化している、角丸関係の機能「ライブコーナー」と「ライブシェイプ」について、ご説明します。
講師:
09:02

字幕

このレッスンでは Adobe Illustrator CC 以降 どんどん進化している 角丸関係の機能について ご紹介していきたいと思います Illustrator CS6 以前では オブジェクトの尖った角を丸めたい時には 「効果」のメニューの 「スタイライズ」から 「角を丸くする」 こちらを利用することができました しかしこの方法ですと 全ての角が一度に丸まってしまうので 1つの角だけ個別に変更したり 角の形を別の種類に変更したり ということはできませんでした Illustrator CC と CC 2014 では この角丸関係の機能が 飛躍的に進化していますので じっくり見ていきましょう まず最初に 長方形や正方形だけでなく 星形や自由な多角形でも 自由に角を丸められる機能 「ライブコーナー」について ご説明します ライブコーナーを利用するには 「ダイレクト選択ツール」を使ってください ダイレクト選択ツールで 作業をしたいオブジェクトを選択します そうすると角のところに この小さな目玉のような 的のような形の アイコンが表示されていることが分かります このアイコンを 「ライブコーナーウィジェット」 と呼んでいます 1つのライブコーナーウィジェットを 引っ張りますと このように引けるところまで 最大のところまで角を丸めることが可能です 一度丸めた後に このように元に戻すこともできます または1つの角だけ ダイレクト選択ツールで選んだ後に 1つだけをこのように丸めることもできます 2つ目の角は違う大きさ 3つ目も違う大きさ に 丸めることもできます この右上にあるような 自由な形の 角でも同様です このように一気に丸めたり 1つの部分だけを変更したり することができます また角の形を 3種類から選択することができます 一度戻してみまして もう一度 全ての角を丸めます このときマウスを押しっぱなしにして キーボードの上向きの矢印 もしくは下向きの矢印を押していきますと このように内側にえぐれた丸 それからフラットな角 そしてよく使われる外側に丸まった角 この3種類から選択することができます また長方形や正方形では さらに少し違った方法で 角をコントロールすることができます 長方形と正方形の場合には ダイレクト選択ツールだけでなく 通常の選択ツールで選択をしても このようにライブコーナーウィジェットが 表示されます 角を丸めてみましょう ライブコーナーウィジェットを引っ張ると 先ほどと同様に 変更することができます 長方形と正方形の場合は 「ライブシェイプ」と呼ばれ 変形パネルからさらに細かく コントロールすることができます 変形パネルを出してみましょう メニューバーの「ウィンドウ」から 下の方にある「変形」 こちらを選択します 変形パネルが出てきました 変形パネルの この下の方に着目してください 「長方形のプロパティ」というセクションに この長方形のいろいろな数値を コントロールする入力欄があります この下の 4つがセットになっている部分 こちらが角丸の半径を コントロールする部分です 真ん中の鎖マークが凹んでいるときは 4つの角の数値が全て連携しています 1つの角の数値を変更すると 4つ一緒に変化が起こります この鎖のアイコンを外しますと 1つの角だけ 選択した1つの角だけが 変更していることが分かります また角の形 角の種類も こちらのドロップダウンメニューから 選択をすることができます またこの長方形の回転の角度 こういったものも 長方形のプロパティとして 変形パネルから 変更することができます この角度を たとえばまた後で 0%に戻すと 通常の水平に戻ります この角のアレンジも必要なければ 全て元に戻すことができます もう一つ嬉しいのが このライブシェイプで作成した角丸の情報が CSSプロパティパネルに表示されることです さっそく試してみましょう 長方形のプロパティの一番下の部分で 角丸の半径 4つとも連携させて 数値を変更しました いま単位がミリメートルになっていますので こちらを変更しましょう 「環境設定」から「単位」 Web で使うものですので pixel にしておきます そして数値を 10 pixel にしておきましょう ではこの角丸がどのように CSSとして表現されているか 確認しましょう メニューバーの「ウィンドウ」から 「CSSプロパティ」パネルを開きます 今こちらのオブジェクトに 名前を付けていませんので 「CSSコードは生成されませんでした」 というメッセージが出ています レイヤーパネルを開いて レイヤー1の中に 長方形がありますので こちらに半角英数で名前を付けます 「 maru 」にしておきましょう このレイヤーに付けた名前「 maru 」を クラス名として利用して このようにバックグラウンドの色ですとか ボーダーレディウス ( border-radius ) 角丸の値が 記述されていることが分かります 通常の記述以外に ベンダープレフィックスと呼ばれる 各ブラウザのレンダリングエンジンに応じた 記述がこちらに出ていますけれども もしベンダープレフィックス付きの プロパティが必要なければ CSSプロパティパネル右上の ドロップダウンメニューから 「書き出しオプション」を選んで 「ベンダープレフィックスを含める」 こちらを一気に外しても良いですし 不要なものだけ このように外してもかまいません そしてOKをクリックすると ここでは FireFox のチェックも外して WebKit だけにチェックを入れてみます このようにベンダープレフィックス付きの 記述が 選択したものだけ出ていることが分かります 後はここで生成されたCSSを ご自分の作成しているサイトのCSSファイルに コピー&ペーストすればOKです ここまで Adobe Illustrator CC と CC 2014で 劇的に進化した 角丸関係の機能 ライブコーナーとライブシェイプについて ご説明してきました これらの機能においても オブジェクトの元のパスを壊さず 後で何度でも編集できる 非破壊 壊さない という考え方が しっかり推し進められていると思いますので ぜひご活用ください

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

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

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

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

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

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