ゲーム開発
Unity
UnrealEngine
C++
Blender
ゲーム数学
ゲームAI
グラフィックス
サウンド
アニメーション
GBDK
制作日記
IT関連
ツール開発
フロントエンド関連
サーバサイド関連
WordPress関連
ソフトウェア設計
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
ラーメン日記
四コマ漫画
その他
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • Blender
    • ゲーム数学
    • ゲームAI
    • グラフィックス
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • IT関連
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • WordPress関連
    • ソフトウェア設計
    • おすすめ技術書
  • 音楽
    • DTM
    • 楽器・機材
    • ピアノ
  • ラーメン日記
    • 四コマ漫画
      • その他
        • おすすめアイテム
        • おもしろコラム
      1. ホーム
      2. 20200621_03

      【Illustrator】キャラクターに簡単に白枠を付ける

      イラスト作成Illustrator
      2020-06-21

      マイケル
      マイケル
      どうもみなさんこんばんは!
      マイケルです!
      エレキベア
      エレキベア
      おひさクマ〜〜〜
      マイケル
      マイケル
      今回はIllustratorでキャラクターに白枠をつける、ということで
      どういうことかと言いますと・・・
      マイケル
      マイケル
      例えばこちらのゲーム画面の会話シーン・・・
      マイケル
      マイケル
      キャラクターが背景と被ってはっきりしないですよね・・・
      エレキベア
      エレキベア
      闇に溶け込んでてわかりにくいクマ
      マイケル
      マイケル
      なので今回はこんな感じで、Illustratorで描いたキャラクターに
      白枠を付ける方法について紹介するよ!
      エレキベア
      エレキベア
      これならわかりやすいクマ〜〜〜〜
      マイケル
      マイケル
      パワポケとかはこんな感じで全キャラクターに付けてるね
      ではさっそくやってみよう!

      キャラクターに白枠をつける

      マイケル
      マイケル
      白枠を付ける方法は簡単で、こちらの3ステップ!


      1. オブジェクトを複製する
      2. オブジェクトを一つに合体する
      3. パスを白い枠線にする

      エレキベア
      エレキベア
      これならできそうクマ

      オブジェクトを複製する

      マイケル
      マイケル
      まずは白枠を付けたいキャラクターをIllustratorで描いて用意しましょう!
      マイケル
      マイケル
      枠線を付けたかどうか分かりやすいように
      背景に色付きの長方形を敷いています!
      エレキベア
      エレキベア
      (これはカラスなのクマ・・?)
      マイケル
      マイケル
      そして枠線を付ける用にオブジェクトを複製します!
      Cmd+C -> Cmd+F (WindowsではCtrlキー)
      のショートカットで同じ位置に複製できます!
      マイケル
      マイケル
      複製したら元のオブジェクトは一旦
      非表示にしてロックします!

      オブジェクトを一つに合体する

      マイケル
      マイケル
      次に枠線用のキャラクターを一つのオブジェクトに結合します!
      マイケル
      マイケル
      パスファインダーパネルより
      「合体」を選択しましょう!
      マイケル
      マイケル
      そうすると、上記画像のように
      オブジェクトが結合されてパスも一つになると思います!
      エレキベア
      エレキベア
      真っ黒になったクマ〜〜

      パスを白い枠線にする

      マイケル
      マイケル
      ここまできたらあとはオブジェクトの枠線を白くて太い線にするだけ!


      塗り潰し:なし
      線:白 15px

      マイケル
      マイケル
      例ですがこんな感じで設定すると白い枠線だけの状態になります!
      マイケル
      マイケル
      あとは元のオブジェクトを表示してあげたら完成!
      エレキベア
      エレキベア
      見やすくなったクマ〜〜〜!!

      おわりに

      マイケル
      マイケル
      というわけで今回はIllustratorでの白い枠線の付け方でした!
      エレキベア
      エレキベア
      めっちゃ簡単だったクマ〜〜
      マイケル
      マイケル
      よく使う機能だと思うので是非おぼえておきましょう!
      それではアデュー!!
      ゴロヤン
      ゴロヤン
      ゴロ〜〜〜〜〜
      エレキベア
      エレキベア
      (急に出てくるなよクマ・・・)

      【Illustrator】キャラクターに簡単に白枠を付ける 〜完〜


      イラスト作成Illustrator
      2020-06-21

      関連記事
      【iPhoneケース】スマホケースラボでオリジナルのスマホケースを作ってみた!
      2020-04-18
      【Illustrator】「キャラクター制作の教科書」 〜ステップ5 ライブペイントツールを使ったキャラクター絵画〜
      2020-01-03
      【Illustrator】「キャラクター制作の教科書」 〜ステップ4 クリッピングマスクやグラデーションを使った絵画〜
      2019-10-12
      【Illustrator】「キャラクター制作の教科書」 〜ステップ3 クォータービューに従ったキャラクター絵画〜
      2019-09-16
      【Illustrator】「キャラクター制作の教科書」 〜ステップ2 ペンツールを使ったキャラクターの絵画〜
      2019-09-08
      【Illustrator】「キャラクター制作の教科書」 〜ステップ1 図形の組み合わせでの絵画〜
      2019-09-05