creatersnest44

角丸の設定がラクなライブコーナーとライブシェイプの使用方法


図形などをデザインしていくうちに、三角形や四角形の角を取った
角丸の図形にしたい作業があります。

・オリジナリティのあるロゴやフォントを作りたい。
・女性向け、子供向けのかわいい図形を数多く作っていきたい。
・制作のネタがワンパターンになりつつあるので、制作の「引き出し」を増やしたい。

角丸長方形ツールなどを使う手もありますが、
すでに出来上がった図形を角丸にするとなると、少々面倒な作業となります。

そこで今回、角丸をラクに設定することができる、「ライブコーナー」と
「ライブシェイプ」機能をご紹介します。

また、本記事の機能を使用するにあたって、以下のバージョンが必要となります。
「ライブコーナー」・・・Illustrator CC Version 17.1以降(2014年1月リリース)
「ライブシェイプ」・・・Illustrator CC 2014 Version 18.0以降(2014年6月リリース)

ライブコーナーを使って、角を丸くする

今回は作業例として、下図のように星形の角を丸くしていきます。
ライブコーナーは星形だけでなく、3角形、4角形以上の多角形にも対応しています。

角を丸く設定していきます。

1.ツールパネル内のスターツール(長方形ツールを長押し)を使って、
星の図形を書きます。図形の塗りや線などは適当で構いません。

星の図形

2.画面左のツールパネル一覧より、「ダイレクト選択ツール」を選択します。

「ダイレクト選択ツール」選択します。

3.「ダイレクト選択ツール」を選択したのち、図形を選択します。
すると、各角の頂点の内側および外側の内角に、2重丸のような目印が表示されます。
この2重丸の目印のことを、ライブコーナーウィジェットと呼びます。

各角に目印が表示されます。

4.角の先端内側にある二重丸のような目印(ライブコーナーウィジェット)を、
    図形の内側に向けてドラッグしていきます。

目印を図形の内側へ向けてドラッグする。

5.すると、他の角を含めて、すべての角が丸くなりました。

角が丸くなりました。

長方形の角丸を「ライブシェイプ」で詳細に

こちらはバージョンCC2014からの新機能ですが、
長方形の角をより詳細に設定したい場合、「ライブシェイプ」機能が便利です。

1.長方形ツールで四角形を描画し、
メニュー「ウィンドウ」 − 「変形」 で、変形パネルを表示します。
「変形」パネル内「長方形のプロパティ」に注目します。

長方形ツールで四角形を描画し、変形パネルを表示させます。

2.「長方形のプロパティ」内にある「角丸の半径値をリンク」に
    チェックをします。

「角丸の半径値をリンク」にチェックします。

3.「長方形のプロパティ」内にある4つの角のうち、
1つの「角丸の半径」の数字を上げます。
すると、他の角の数値もリンクされ、4つ全ての角が丸くなります。

「角丸の半径」の数値を上げる。

4.角を1つだけ角丸にしたい場合は、「角丸の半径値をリンク」のチェックを外し、
各角の「角丸の半径」を任意の数値に設定します。

「角丸の半径値をリンク」のチェックを外し、それぞれの角の「角丸の半径」を任意設定する。

5.角の種類は、単なる角を丸くするだけでなく、応用することができます。
長方形のプロパティ内の「角の種類」-「角丸(内側)」を押下します。
すると、角が内側にヘコむような図形を描画することができます。

「角丸(内側)」に設定

6.長方形のプロパティでは、角度を指定して、長方形を回転することができます。

角度を指定して、長方形を回転させることができます。

ライブコーナーとライブシェイプのまとめ

IllustratorがCC2014にバージョンアップしてから、角丸の変形がとても楽になり、
作業効率が上がりました。
特に長方形の「ライブシェイプ」では角丸以外にも、角の種類を変形させたり、
操作が複雑だった形を簡単に作成することができます。

角丸を活用することによって、このような図形を作成を簡単に作成することができます。

・サイコロの角を少しだけ丸くする。
・角ゴシック系のフォントをアウトラインし、丸ゴシックにする。
・漫画のような「吹き出し」
・バナー制作
・かわいいグローバルメニューの作成
・リンクボタンの作成
・チャート図の作成

様々な用途によって使い分けてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Photoshop】初心者でもできる、色味を簡単に調整する方法3つ