まれくま弟子とリス師匠-デザイナーの日常-

まれくま弟子とリス師匠-デザイナーの日常-

『まれくま弟子とリス師匠』Blog|デザイナーの卵と新人デザイナー達が遭遇する疑問・悩みを綴ったデザイナーの日常。【WEBマンガ】

手描きのようなフニャフニャのナビボタンを作成【Illustrator】

f:id:kuma-risu:20160926065156j:plain

お久しぶりです。

今日の記事は「リスの担当」です。@(*°ᆺ°)
先日、「最新記事」のカスタマイズのついでに
今後、記事が増える事を見越して
こっそりと「ナビゲーションメニュー」を追加しました。


画像はIllustratorで作成、JPGに書き出して配置しています。
今日はナビのボタン画像の作成時に使用した加工方法を解説するよ!@(。•ㅅ•。)
※コーディングの話はしません。

f:id:kuma-risu:20160913144737p:plain

リスの記事は長めです。お勉強の開始だよ@(*°ᆺ°)

 

【ナビのデザインの話】

f:id:kuma-risu:20160926065209j:plain

ナビゲーションメニューのデザインはブログ全体の雰囲気に合わせて柔らかくしたかったので「手描きのようなラフ感」を意識してIllustratorで加工しました。

その結果、見た目がフニャフニャになっています。
フォントも手描きフォントで統一してます。

 

【パスの構造】

f:id:kuma-risu:20160926065217j:plain

複数のアンカーポイントとパスがランダムに配置されています。
一つずつパスを書いていく方法でも良いのですが、とっても効率が悪いので「効果」の機能を使用ています。

 

【フニャフニャな輪郭の作り方】

f:id:kuma-risu:20160926065223j:plain

  1. オブジェクトを作成。今回は正方形を作成しました。
  2. オブジェクトを選択します。
  3. メニューバーの「効果」から「パスの変形」→「ラフ」をクリック。
  4. 「ラフ」の詳細設定ウィンドウが表示されます。

 

【ラフの設定方法】

f:id:kuma-risu:20160926065607j:plain

  1. サイズを入力します。その際「入力値」にすると「パーセント」より細かく設定ができます。
  2. ポイントを「丸く」を選択。「ギザギザ」だと違った雰囲気になります。
  3. 設定が終わったら「OK」ボタンを押すと完成です。
f:id:kuma-risu:20160913144737p:plain

とっても簡単だね@(。•ㅅ•。)

【ついでに:ラフ設定の修正】 

f:id:kuma-risu:20160926065613j:plain

指定している「効果」の設定は全て「アピアランス」に表示されています。
アピアランスの項目をダブルクリックすると、再度「ラフ」の設定ウィンドウが開き数値の修正ができます。

 

【ついでに:効果をパスに変更】

f:id:kuma-risu:20160926065619j:plain

アピアランスの状態だとフィルターをかけて表示している状態なのでパスの修正、加工ができません。
その為、「アピアランスを分割」する必要があります。
一度「分割」をしてしまうと、アピアランスで「効果」の修正はできなくなるので気をつけてください。

 

f:id:kuma-risu:20160913144737p:plain

色々な使い方があるから試してみてね@(。•ㅅ•。)

f:id:kuma-risu:20160913144723p:plain

今度試してみます!

 

まれくま&リス師匠のプロフィール

マレーグマ
リス師匠icon

まれくま -マレーグマ-

機械音痴の初心者デザイナー。リス師匠の弟子。
小さなデザイン事務所に生息

  • ねこすき
  • 炭水化物で動いてます
  • タイポグラフィすき
  • 本屋さんや薬局に長時間いられるタイプ
  • かわいいものに弱い
  • ゆるかわイラストフェチ
  • フォロワーさんが増えると嬉しい(*´ㅈ`*)
リス師匠
リス師匠icon

リス師匠 -シマリス-

デザイン職十数年の三十路の♀りす。
小さなデザイン事務所に生息

  • リンゴが好き
  • 引き出しにおやつを常備
  • 自動笑顔マシン
  • 委員長タイプ
  • 算数が弱い
  • 四角の物フェチ
  • フォロワーが増えるとはしゃぐ