FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

WEBデザイン イラストレーター

暗記しておく!イラレでギザギザの丸(円)を作る方法

投稿日:2013年11月17日 更新日:

07

よく使うこのギザギザの丸(円)。
今まで何度も使ってきましたし、使い映えするので、
絶対に暗記しておきたいです。

1.丸(円)を描く

01

「楕円形ツール」で丸(円)を書きます。

  • 楕円形ツールを選択状態で、【Shift】を押しながらドラッグすると正円が描けます。
  • 楕円形ツールを選択状態で、【Shift】 + 【Option(alt)】を押しながら、ドラッグするとクリック地点を中心に円が描けます。
  • 楕円形ツールを選択状態で、【Option(alt)】をクリックするとサイズを指定できます。

2 「アンカーポイント」を追加

02

「オブジェクト」→「パス」→「アンカーポイントの追加」でアンカーポイントを追加する。
(これはしなくてもギザ丸はできますが、ギザが細かくできるので行います。)

03

アンカーポイントが4つから8つに増えた。

3 「ジグザグ」を設定

04

「効果」→「パスの変形」→「ジグザグ」を選択

05

値を例えば

大きさ 4px 入力値
折り返し 6
ポイント 直線的に

などにして、プレビューにチェックをいれて調整し、
「OK」をクリック。

4 完成

06

ギザギザの丸(円)ができました。

07

ギザギザの数と深さによってあたえる印象が違います。
同じようなギザギザの丸でも、色やテクスチャ、光の加減、変形などいろいろあります。
いろんなサイトをみて、引き出しを増やせばそれだけレベルアップになります。

サンプルデータはこちらからダウンロードできます(イラレCS5形式)。

gizamaru.zip【360KB】

-WEBデザイン, イラストレーター

執筆者:


  1. […] 参考)たった2ステップ!イラストレーターでギザギザの丸(円)を描く方法 […]

  2. […] #学び 1. ウニみたいなギザギザのまるの作り方を覚えた。 参考サイト http://blog.idea-clippin.com/?p=662 2. レイヤーを変形(遠近法を使って)することも学んだ。 編集 → 変形 → 遠近法 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

初心者がコーディングのときに失敗しがちなこと

何人も新人のウェブデザイナーをみてきましたが、 みんな大体同じところでつまづくようです。 そして自分もそうだったなぁと思うところでもあります。 知っていればすぐに終わりますが、 知らなければ(もしくは …

イラレでの波線の描き方

線を引く 「直線ツール」で線を引きます。 「効果」>「パスの変形」>「ジグザグ」 「効果」>「パスの変形」>「ジグザグ」を選択します。 大きさや、折り返しで、調整できます。 線の太さや波線などの設定次 …

2015年の「FEVDES BLOG」アクセス数トップ10

2015年のアクセス数トップ10です。 アクセスをみると全体的に検索エンジンからの流入が多かったです。 定番の記事のアクセスが多く、長い間アクセスがあるは励みになります。 1位 「よく使うPhotos …

バナーをデザインする時に役立つまとめ・記事10選

新人がデザインの業務で頼まれることが多いのばバナー。 小さいので簡単と思われるけど、実はかなり難しく意外と制作に時間がかかるのがバナー。 小さいけど、奥が深いのがバナー。 そんなバナーを作るコツがわか …

美しいモノトーンベースのWEBデザインまとめ

モノトーンはシンプルなだけに、写真などの素材のよさが際立ちます。 CHANCE MAKER CHANCE MAKER ハロルド official web site ハロルド official web …

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。