2017年12月15日

デザイン

【Sketch初心者】キャラクターを作ろう!(Part.1)

sketch_eyecatchsketch_eyecatch

目次

  1. はじめに
  2. アートボードの作成
  3. お手本となる画像を用意
  4. ベクターツールを使って輪郭を作る
  5. 輪郭を整える
  6. 色を乗せる
  7. 耳を作る & スポイトツール
  8. 反対の耳を作る(複製&反転)
  9. 顔の輪郭パーツの完成!
  10. まとめ

はじめに

ベクターツールを使って、シンプルなキャラクターを作る方法をご紹介します。
2回に分けて、顔の輪郭パーツと髪の毛や目を作成していきます。

今回の記事で作っていく顔の輪郭デモはこちらです。

アートボードの作成

まずSketchを起動します。そして「New Document」を選択し、新規作成します。

Sketchの画面が開いたら、キーボード「A」を押してアートボードを作成します。アートボードとは、絵をかくキャンバスだと考えてください。
すると右側に「iOS Devices」が表示されるので、どれか一つ選びます。

POINT!! 便利なショートカット

キーボード「A」=アートボードの作成

アートボードができました。
画面右上のボードの「Size」のWidth(横幅)、Height(縦幅)を今回は500と入力してみます。
(このサイズは実際に自分が欲しいサイズを入力してください。)

お手本となる画像を用意

ゼロから作成しても良いのですが、お手本となる画像があった方が作りやすいので、今回は手書きで書いた絵をアートボードに置いてみます。

お手本にしたい画像ファイルをアートボードの上にドラッグ&ドロップします。

POINT!!

外部ファイルの読み込み=アートボードの上にドラッグ&ドロップ

そのまま手書きの画像を置いたのでは線が濃ゆくて作業が進めづらいので、この手書きの画像のレイヤーを選択し、画面右側の「opacity」(透明度)の数値を下げます。

ベクターツールを使って輪郭を作る

では、早速顔の輪郭を作ってみましょう。

キーボード「V」をクリックして、ベクターツールを使用します。
ベクターモードでは自由な形を作りやすいので、丸や四角形以外のモチーフを作るときは非常に便利です。

POINT!! 便利なショートカット

キーボード「V」=ベクターツール

顔の輪郭の位置を4点クリックして、上記のような四角を作ります。あとでこのクリックした点は移動できるので、ざっくりとで良いです。

四角が作れたら、「Enterキー」を押します。
すると、4つの点が丸に変わりました。これで、一つ一つの点の位置を移動したり、角の丸みを変更することが可能になります。

次に、これら全ての丸を選択してみましょう。Shiftキーを押しながら点をクリックして複数選択するか、点以外の場所を「クリック&ドラッグ」して全ての点を囲むことが可能です。

全ての点を選択したら、画面右側の「Disconnected」を選んでください。これで角度を左右どちらとも自由に変更することが可能になりました。

輪郭を整える

では、丸ポイントを移動させたり増やしたりして、顔の輪郭を整えていきます。

丸ポイントを一つ選び、ドラッグをして移動させます。
小さな丸を移動させて角度をつけていきましょう。
丸ポイントが足りないと思ったら、線の上にマウスを乗せ、クリックすると追加できます。いらない時はdeleteキーで削除できます。

最初は少しコツをつかむのに練習が必要ですが、慣れればポイントの数も少なく、早く形を取ることができますよ。

色を乗せる

形が整え終わったら、色を乗せていきます。
画面右側の「Fills」は線で囲んだ内側を塗りつぶすことができます。「Fill」の色がついている箇所をクリックして、好きな色を乗せてみましょう。
「Boreders」では線の色と「Thickness」で太さを変えることができます。

これで輪郭ができました。次は同じように耳を作っていきます。

耳を作る & スポイトツール

片耳ができたら、色を乗せていきます。
先ほどの輪郭パーツと同じ色味にしたいので、「Borders」の「Color」をクリックします。

controlキー + 「C」を押してスポイトツールを使います。
輪郭のボーダーの上にマウスを載せると、その部分が拡大され、クリックするとその色を取ってくることができます。

POINT!! 便利なショートカット

Controlキー + キーボード「C」=スポイトツール(色のコピー)

肌の色も同じようにスポイトツールで同じ色を取ってきて、片耳が完成です!次は、それを複製&形を反転させて左耳を作りましょう。

反対の耳を作る(複製&反転)

完成した右耳を選択し、optionキー + ドラッグで複製します。

POINT!! 便利なショートカット

Optionキー + ドラッグ= 複製

複製したレイヤーを選び、右クリックで「Transform」→「Flip Hrizontal」(水平に反転)します。

これで顔の肌色部分が完成しました!

顔の輪郭パーツの完成!

まとめ

以上、今回はSketchのベクターツールを使ってキャラクターを作成する方法をお届けしました。

ショートカットは主に私が普段使っているものをピックアップして掲載しましたが、Sketchに慣れていくにつれて徐々に種類を増やしていくと、作業も格段に早くなりますよ。

それでは次回は引き続き、髪の毛と顔のパーツを作成します!

0

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP