webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

【Illustrator】日章旗のような放射線状オブジェクトをつくる方法。ネットショップバナーを作ろう!

先日『THE ネットショッピングサイト!』みたいなバナーを作って一人で遊んでいました。

 

その時に、「あれ?放射線状のオブジェクトどうやって作るんだっけ?」となったので、自分のメモ書きも兼ねて作り方をまとめてみることにしました!

 

f:id:serinaishii:20150928133233p:plain


放射状オブジェクトをマスターすれば、
ネットショッピングバナーが簡単にできる!

 で、そんなこんなで完成したバナーがこんな感じです。

      ↓   ↓   ↓

 

f:id:serinaishii:20150928113249p:plain

 

学校にいる時に作ったので、フォントは既存のものだし、遊びだからちょっとお手軽感あるけど…まぁ、ネットショップのバナーってこんな雰囲気ですよね?

 

  • 『 赤・黄色系の太文字 × 黒い縁 × ゴシック体 』という感じの主張が強い書体
  • お祝いみたいな明るい装飾(紙ふぶき、キラキラ、クラッカーとか)
  • 「ババーン」とインパクト感がある、広がりをイメージした背景 ←今回作るのはコレです!

という訳で、放射状のオブジェクトを作ってみましょう!


 放射線状オブジェクトの作り方

f:id:serinaishii:20150928132518p:plain

1.ツールバーから楕円形ツールを選択する

ツールバーの出し方: ウィンドウタブ → ツール

長方形ツールを長押しすると、後ろに隠れている楕円形ツールがクリックできるようになります。


2.塗りナシ・線アリの円を書く

今回は「 幅100px × 高さ100px 」の正円にしました。

 

one point advice

 

正円(全方向が同じ直径の円)を書く時は、楕円形ツールを選択した後に「Shiftキー」を押しながらマウスをドラッグすると簡単に書くことができます。


3.線幅を設定する

今回は「 線幅 100px 」にします。


4.破線を設定する

今回は「線分 10px・間隔10px」にします。

 

線パネルの出し方: ウィンドウタブ → 線

[ 破線 ]にチェックを入れて、線分・間隔をそれぞれ入力します。

 

以上、たった4ステップで完成です!


拡大・縮小したい!線のアウトラインを作成する方法

オブジェクトの大きさを変えたいときは色々と値をいじればいいのですが、このままの形でオブジェクトを拡大・縮小したいなぁ~ってとき。

 

そのまま拡大・縮小するとオブジェクトの線が崩れてしまいます…

なので、簡単に拡大・縮小したい人は、線のアウトラインを作ってしまいましょう!

 

f:id:serinaishii:20150928131901p:plain

 

普段文字のアウトラインを作るときに『 右クリック → アウトラインを作成 (Ctrl + Shift + o) 』でアウトラインを作ると思うのですが、線の場合はこの方法だとアウトラインを作成できないので気をつけてください。

 

線のアウトラインを作成する方法  

オブジェクトタブ → パス → パスのアウトライン

 

これで拡大・縮小だけでなく、塗りの変更もできるようになったので、グラデーションなどの装飾も思いのままですね!


 やり方を詳しく書いてきましたが、要は『円を作って、破線にするだけ!』です!

 

作り方を知らないと難しく感じますが、知ってしまえばお手軽ちょいちょいですね(*^^*)

 

「ババーン」としたインパクトの強いエフェクトを作りたい時は、ぜひぜひ思い出してください。