【メディバンの使い方も覚えられる!】フリー素材の組み合わせかた|はじめてのお絵かきアプリ講座

初めてのお絵かきアプリ講座、素材の組み合わせ方 アプリの紹介
この記事を書いている人
この記事を書いている人

どうも、おるもん(@olmo_work)です

今日は、自分が商用無料のフリー素材として提供しているアイコンを組み合わせる方法を説明するために記事を書きました!

この記事を見ると、私の作った素材を、オリジナルに近いアイコンを使うことが可能です。

メディバンペイントについての紹介記事はこちらにありますので、もし興味のある方は見てみてください。

それでは早速使い方の方に移りたいと思います。

スポンサーリンク

メディバンアプリをダウンロード

この記事ではメディバンペイントの使い方を紹介していますので、他のペイントアプリだとまた勝手が多少違ってきます。ご了承ください。

もし必要な方は下記リンクよりダウンロード可能です料金等発生しませんのでご安心ください)

メディバンペイント

メディバンペイント

MediBang inc.無料posted withアプリーチ

PCへのダウンロードはコチラより行えますので、手順に従ってください。

また、PCでダウンロードされた場合、画面や手順などが異なってきます。もし分からない場合は方法をお伝えすることも可能なので、その際はお問い合わせください。

メディバンペイントでフリー素材を組み合わせる方法

当サイトの素材は、ブログ用アイコンなどに使用できるイラストが、一部組み合わせ自由となっております。表情と服と髪を選ぶことで、オリジナルに近いアイコンを作ることが可能です。

組み合わせ自由なアイコンは下記ページよりダウンロードできます。

素材をダウンロードする

上で案内したページにいき、組み合わせたい素材をダウンロードしてください。

※今回はiphoneでの操作方法をお知らせしています。ipadなどもほとんど操作方法は同じとなりますが、画面の大きさなどにより各位置が変わる可能性はあります。

素材ページから素材を保存しましょう。長押しで上記の画面になったらイメージを保存をタップします。

メディバンペイントで組み合わせていく

あとの作業はメディバンペイントで行っていきます。作業としてはそれほど大変なものではないので、画像を見ながら確認を行っていただけたらと思います。

今回はパーツを組み合わせて下のアイコンを作り上げていきましょう!困った顔をした、ウェーブヘアの作業着を着た男の子です。

アプリを立ち上げる

  1. メディバンのアプリを開く
  2. 描いてみようのところの「新しいキャンバス」をタップ
  3. 出てきた項目の中から「画像を選択してインポート」をタップ

素材をキャンバスに呼び込む

出てきた画像の中から素材を選択していきます。順番はどれからでも問題ないのですが、分かりやすいように顔パーツから取り込むといいと思います。

  1. 顔パーツを選んで表示させる
  2. 「線画抽出しない」をタップする

レイヤーを使ってみる:画像を取り込む

顔以外の髪や、服のパーツを読み込むために、レイヤー機能を立ち上げます。

レイヤーってなに?

レイヤーとは透明のフィルムのようなものです。

組み合わせ可能な素材は背景を白でもなく、透明で保存した状態で公開しているので、フィルムを重ねていくことで、顔素材の上に髪や服を重ねて載せて行くことが可能です。

顔素材の上に髪を置くため禿げ頭が隠れていい感じになる…といった様子で、レイヤーの重ね順通りに表示されます。

当サイトの組み合わせ自由な素材以外は背景が透明処理(透過処理)されない状態のものがあるのでその素材を重ねても背景などは透けません。


下記画像の赤丸がレイヤーを表示させるボタンです。

次に新規レイヤーを作る為に、下の画像の赤丸の「+」マークをタップします。

「+」をタップすることで、色んな選択肢が出てくると思いますので、他の素材を取り込みたいときは「画像を選択して追加」をタップしましょう。

画像フォルダの中から、とりあえず今回は衣服から載せてみましょう。特に下の方の数値は変更する必要がありませんので、「完了」をタップします。

服を取り込んだのと同じ要領で髪の画像も追加してみましょう、

「新しいレイヤー」→「画像を選択して追加」→「髪素材を選ぶ」→「完了」という手順を行ってください。

重ね順によって、不自然に見える場合は、髪の毛のレイヤーと服のレイヤーの上下を入れ替えて調整してみてください。(特に女の子のアイコン)

レイヤーを使ってみる:カラーレイヤーを使う

これで概ね完成ですが、現状のままだと背景が無い(透明)状態です。

他のフリー素材から背景になりそうな素材をダウンロードして同じように取り込んでも良いですが、今回はメディバンの機能を使って、背景色を付けてみましょう。

上記までと同じように「+」をタップし、レイヤーを作ります。ただ今回は画像の取り込みではなく、「カラーレイヤー」を作ってみましょう。

レイヤーの追加からカラーレイヤーを選ぶことで、1番上に何も書かれていない透明のレイヤーが作られたかと思います。

(選択していたレイヤーによっては1番上ではなく2番3番目という事もありますが問題ありません)

そのレイヤーを少し長押しすると移動できるようになるので、長押ししたまま一番下に移動します。

最初は移動しにくいかもしれませんが、ゆっくりやれば移動する場所が分かると思います。

レイヤーを使ってみる:非表示にする

移動が出来たら、上のレイヤーが表示されていると、背景を綺麗に表示できない可能性があるので、一度非表示にしてしまいましょう。

下の画像の目玉のような部分をひとつずつタップしていくと消えていきます。

色を選択する

次に背景色に指定したい色を選びます。左端にある、バーを指で移動させて、好みの色にしましょう。下の赤丸部分の色が現在選択されている色です。

バケツツールを使って色をつける

今回は単色のみを利用すると仮定して、バケツツールといって、一気に色を流し込むことの出来るツールを使用します。

  1. 左上のデフォルトならブラシツールのアイコンをタップ
    (状況によっては選択されているものがブラシでない場合もあります)
  2. 「バケツツール」とかかれたものをタップする
  3. キャンバスの白い部分をタップして色を付ける
  4. 「レイヤー」画面を立ち上げて、非表示にしたレイヤーを表示する

(レイヤーの表示は一番下の右から二番目の紙を重ねたようなものです。何度も使うので覚えておくと便利です。)

保存する

画像が完成したら、ブログなどで使用できるように保存しましょう!

下の画像を見ていただき、一番下のアイコンの中から、赤丸の左端のアイコンをタップします。

色々と表示されますので、今回は丸で囲んである「png/jpg形式でエクスポート」を選択しましょう。

新規保存ではないのか?

新規保存という項目は、レイヤーなどの機能を保ったまの形式、メディバンの拡張子で保存が可能です。

今後も作ったデータを操作する場合(背景をやっぱり変えたいなど)新規保存を使って端末などに保存しても問題はありません。

ただメディバンの形式だと、ブログなどでは使えませんので、ここではpng/jpg形式を案内しています。

完了

以上の作業で、フリーアイコンが組み合わせることが可能です。あなたのカメラロールに組み合わせた画像が保存されていれば成功です!

あとは通常行っている作業通り、wordpressなどにアップしてご使用ください。吹き出しアイコンが華やかになること間違いなし!

(素材に関して、利用規約はよく読んでご利用ください)

メディバンで素材を組み合わせてみる:まとめ

まとめ

メディバンの基本的な使い方をした、素材の組み合わせ方をご紹介してみました!お絵かきアプリを使ってみたいけど、色んな機能がありそうで難しい…

という方に参考にしていただければ幸いです。

今回は基本的な使い方となるので、背景は単色にしましたが、グラデーションにする方法や、その他の方法など、よりオリジナリティを出せるような工夫を後々ご紹介していきます。

組み合わせメーカーのようなサイトもありますが、ペイントアプリで作ることで、もっとオリジナリティ高いアイコンや、はたまたアイキャッチなど、色々と制作できるので、是非お試しください。

ではでは、おるもんでした!

タイトルとURLをコピーしました