Blog

ブログ

ちょっとこわかわいい!?「化け猫アイコンメーカー」を使って遊んでみた!

公開日:

ちょっとこわかわいい!?「化け猫アイコンメーカー」を使って遊んでみた!

皆さんこんにちは!デザイナーのクロです。

前回のやってみたでSNSで使える「無料で使えるアイコンメーカー」を紹介して思い出したのですが、5年前くらいにすごい遊んでいた「化け猫アイコンメーカー」を久しぶりに調べてみたところ、ものすごく進化していました!

そこで今回のやってみた!は、化け猫のアイコンがクリックだけでつくれちゃう「化け猫アイコンメーカー」の使い方紹介と作った化け猫ちゃんを擬人化してみました!

機能の使い方に合わせて、キャラクターの顔の印象を変えるポイントに付いて説明しています!オリキャラを作ってみたい方は是非ご覧になってください!

化け猫擬人化メーカーとは


化け猫1

パーツと色を組みあわせ、好きな猫アイコンを作ってjpegかpngでダウンロードできる簡易ツールです。

Neutralさんで公開されているアイコンメーカです。

クリックしてパーツを選ぶことでネコのキャラクターを生成することができます。

生成した画像は、個人利用に限りSNSのアイコンなどに使用することができます。

化け猫アイコンメーカーで作ったネコを擬人化してみた!

化け猫9

早速ですが化け猫アイコンメーカーでつくったキャラクターを擬人化してみました!

もふもふタイプの輪郭を使ったので、冬がすきで雪が降ってもこたつで丸まらないもふもふな女の子をイメージして描いてみました!

耳のカラーに合わせて、しっぽを茶色にし、服をもう片方の耳と合わせて統一感を出してみました!

化け猫アイコンメーカーを使ってキャラクターを作ってみよう!

今度は化け猫アイコンメーカーの詳しい使い方と、キャラクターを作る時のポイントを一緒に紹介していきたいとおもいます!

1.輪郭を選ぶ

最初にページを開いた状態で、輪郭のパーツを選ぶタブが開いています。

輪郭が変わると、ガラッとネコの雰囲気が変わります!ぼさぼさした輪郭や、ボワッとした毛並みなど6パターン用意されていますので、好きな輪郭を選びましょう!

2.目を選ぶ

タブの順番とは異なりますが、顔がキャラクターを決める要になります。先に目のパーツを選びましょう!

2014年11月6日のアップデートからパーツのサイズをスライドバーで調整できるようになりました。

化け猫4

  • 全体の大きさ … 目自体の大きさを変更することができます。
  • 間隔 … 目と目の間を調整することができます。目のサイズを大きくした場合間隔を広くするとバランスが取りやすくなります。
  • 位置 … 目の位置を調整することができます。目の高さを高くすると、大人らしくなり、低くすると幼く可愛い印象の顔つきになります。
  • 傾き … 目の傾きを調節することができます。「+」に傾けることでタレ目、「-」に傾けることツリ目にすることができます。
  • 瞳の大きさ … 瞳の大きさ(デフォルトだと濃い緑色の部分)を調節することができます。瞳を小さくすると驚いている
  • 瞳の幅 … 瞳の幅を調節することができます。細くすると化け猫度が上がります。

化け猫5

3.口を選ぶ

口を決定して顔の雰囲気を決めてしまいましょう!

  • 横幅 … 口の横幅を調整することができます。牙がある口や、ニンマリ笑ったような口は横幅を広くすることで迫力が増します。
  • 縦幅 … 口の縦幅を調整することができます。縦幅を大きくすればするほど感情表現が大きく表すことができます。
  • 位置 … 口の位置を調整することができます。目と口を近づけるほど幼さが増します。かわいいネコを作りたい場合は位置を上に上げて目との間隔を広げましょう。

化け猫8

4.耳を選ぶ

猫や犬など、哺乳類の動物キャラクターで重要になるのが耳です!ネコの個性を決める部分になるのでこだわって設定しましょう!

  • 大きさ … 耳の大きさを調整することができます。耳を大きくすると化け猫らしさが際立ちます。
  • 傾き … 耳の傾きを調整することができます。個人的間隔ですが、耳が傾かずに立っていると犬っぽくなり、外向きに傾けたほうがネコらしくなります。

5.ヒゲを選ぶ

ネコをデフォルメして書くときに記号的に描かれるヒゲを選びましょう!

他のパーツと機能が似ているため省略しますが、ヒゲの傾きを「+」にすると元気な印象に、「-」にするとおとなしい印象にすることができます。

6.前足を選ぶ

顔だけでも可愛いのですが、前足をつけることで、画面から覗いている感じや、画面に手をつけている感じが出ます!

7.模様を選ぶ

化け猫7

いよいよキャラクターが出来上がってきました!模様を決めてネコの特徴をつけましょう!

模様1、模様2で模様を重ねることができます。模様2の方が前面に配置されます。デフォルトでは模様2の方が濃い色になっていますが、次の項目で模様1,2を同じカラーにすることができます。

8.カラーを設定する

化け猫3

好みのネコができたら、最後にカラーを設定しましょう!

アップデートから部分ごとにカラーを設定できるようになりました!部分の色のついた四角をクリックし、カラーチャートの色を押すことで、選んだ部分のカラーを変えることができます!

カラーチャートは「基本色」「彩度 中」「彩度 低」のタブを切り換えることで選べるカラーが変わります。落ち着いた色合いや、優しい色合いにしたい人は、彩度中か低の中からカラーを選びましょう!

(右)(左)と書かれているパーツは、画面から見た向きが表記されています。

9.追加で背景、おまけを設定する

キャラクターと直接関係ない部分になりますが、背景とおまけを追加することができます。

背景とおまけの色は「カラー」で設定することができます。

10.落書きをする

落書きタブでは、マウスで直接落書きをすることができます。おまけにないパーツや模様を描きこんでオリジナリティをアップしましょう!

消しゴムは、線をまるごと消す機能しかありません。先の微調整をしたい場合は、周りの色をスポイトで取って塗りつぶすことせ調整しましょう!

化け猫6

  • 大きさ … 画面上部の●をクリックすることで落書きするペンの太さを選べます。
  • ドラッグで直線 … チェックを入れることで直線が引けるようになります。線の始まりでクリックして、線の終了地点までクリックしたままマウスを動かし、目的地でマウスを離すと線が引けます
  • 背景だけに落書き … チェックを入れると背景だけに落書きができます。チェックを入れた場合消しゴムも背景の線だけしか選べなくなります。
  • 選択色 … ペンの色を設定できます。
  • クリックで色を取得 … アイコンをクリックして画面の色を撮りたい部分をクリックすると、その色を選択することができます。おまけなどから色を取ることもできます。
  • クリックで線を削除 … アイコンをクリックして、落書きした線を選ぶことで線をまるごと消すことができます。

画像のダウンロード

キャラクターができたら、「↓画像をダウンロード」ボタンを押して、ダウンロード形式を選んで保存しましょう!

  • jpgでダウンロード … 画質が下がりますが、データが軽くなります。
  • pngでダウンロード … エディット画面と同じ画質で保存することができますが、データが大きくなります。
  • png(背景透明)でダウンロード … 背景が透明の状態で保存できます。自分の用意した背景と合成したい人はこのモードで保存しましょう。

設定を保存、設定を読み込む

編集状態を残しておきたい人は、「設定を保存」ボタンを押して、NO DATEと書かれたところをクリックして設定を保存しましょう!

※落書きは保存できません!注意してください。

保存した時と同様に、「設定を読み込む」ボタンをおし、保存されたデータを選ぶことでデータを読み込むことができます!

以上、「ちょっとこわかわいい!?「化け猫アイコンメーカー」を使って遊んでみた!」でした!

絵を描いたことがないけど、キャラクターを作ってみたい!SNSのアイコンをオリジナルの画像にしてみたい方は是非活用してみてください!

ブログ編集部
担当者:ブログ編集部
リースエンタープライズのブログ編集部です。 お知らせから最新のWEB制作事情まで、あらゆるリース情報を発信します。