MENU

【フォトショップがなくてもOK】紙に描いたイラストに色をつけて透過PNGで書きだす方法(初心者向き)【Mac/Pixcelmator ピクセルメーター】

【フォトショップがなくてもOK】紙に描いたイラストに色をつけて透過PNGで書きだす方法(初心者向き)【Mac】【Pixcelmator(ピクセルメーター)30日間無料】

今日は、紙に描いたイラストに色を塗って、透明な背景のPNG(ピング)形式の画像として書きだす方法をご紹介したいと思います。

今回は、【Pixcelmator(ピクセルメーター)】というツールを使っていきます。ピクセルメーターはAppleのアプリケーションのため、Mac、iPad、iPhoneユーザーの方が対象です。なお、以下の説明ではMac PCの画面で進めていきます。

対象となる方

  • Mac、iPad、iPhoneのいづれかをお持ちの方
  • アドビのPhotoshop(フォトショップ)よりもリーズナブルで高機能な画像編集ソフトを探している方
  • 自分で描いたイラストを、パソコンで色付けして画像にしたい方
  • オリジナルのキャラクターを自分で作りたい方
  • LINEスタンプ用の画像を作りたい方
  • デジタルイラストに挑戦したいが、高いツールに手が出せないという方
  • 自分のアイコンやロゴなどを気軽に作成したい

Pixcelmator(ピクセルメーター)とは

今回は、【Pixcelmator(ピクセルメーター)】というツールを使っていきます。Pixcelmator(ピクセルメーター)は、画像の編集・加工を直感的に行うことができる、画像編集アプリケーションです。今回は、デザイン初心者でも簡単に操作できる方法をお伝えしていきますので、初めての方もまずは本記事とこちらの動画を見ながら一緒に手を動かしていってみてください。想像しているよりも簡単に扱うことができると思いますよ。

なお、Pixcelmator(ピクセルメーター)は、初回30日間無料で利用できますので、一度使ってみて購入を検討してみるのがよいでしょう。試用期間終了後は、3,600円で購入でき、その後は基本的に継続して使うことができます。

例えばアドビでフォトショップを利用する場合に、クリエイティブクラウドは利用している間ずっと月額または年額費用がかかってきます。それに比べ、Pixcelmator(ピクセルメーター)なら、3,600円で基本使い放題なので、コスト的にも嬉しいですね♪

1_ピクセルメーターTOP

 

イラストを描く際のポイント

それでは、早速始めて行きましょう。まずは、イラストを紙に書きます。イラストを描く際のポイントは以下の3つです。

  1. できるだけ白い柄や模様のない紙に描く(私の例は方眼用紙の裏面に描いてますが、理想は真っ白な紙です)
  2. やや太めの黒いペン(0.5mm以上)で描く
  3. 線をきちんと閉じる

絶対のルールではありませんが、特に初めての方は、上記の3点をおさえると、失敗しづらいのでオススメです。慣れてきたら線をあえて閉じないイラストでも、簡単に色をつけたりアレンジすることができるようになります。

ピクセルメーターのダウンロード

次に、Pixcelmator(ピクセルメーター)のサイトから、アプリケーションをダウンロードしましょう。

以下の本家サイトから、「Try for free」をクリック →「Download Free Trial」をクリックして、試用版をダウンロードしてください。

Pixcelmator(ピクセルメーター) Pro

https://www.pixelmator.com/pro/

いよいよツールを使ってみよう

ダウンロードが完了したら、早速始めて行きましょう。デスクトップに保存したイラストの写真を右クリックして、このアプリケーションを開く→Pixcekmator Pro.appをクリックします。

カラーの調整

アプリケーションが開いて、以下のような画面になったら、右に並んだツールメニューの中から、3つの円が重なったカラーを調整をクリックします。

「明るさ」項目の、ハイライト以下(ハイライト、シャドウ、明度、コントラスト、ブラックポイント)を、すべて100%にします。

すると、上記のように余計な線(方眼用紙の裏面に薄く見えていた線)や、暗さなどが消え、黒と白の線のクッキリしたイラストになります。

スマート消去

次にスマート消去で背景部分を透明にしていきましょう。右に並んだツールメニューから、消しゴムのアイコンの「消去」を右クリックし、「スマート消去」をクリックしてください。

スマート消去をクリックしたら、不透明度が100%、滑らかなエッジにチェックが入っていることを確認します。

マウスを背景部分の上(位置は自由)に乗せて、クリックしたまま右または左にドラッグします。すると、許容範囲が表示されます。

許容範囲について

許容範囲は、対象の範囲を自動的に抽出するもので、許容範囲が小さい(狭い)と対象領域がまだらになり、許容範囲が大きいと、対象領域が広がるものになっています。許容範囲の調整は、マウスを最初のクリックの位置から近くすると、小さく(狭く)なり、遠のくほど許容範囲が広く(大きく)なります。

分かりづらい場合は、こちらの動画の1:48から2:09のあたりもチェックしてみてください。

許容範囲を大体適切なところでマウスを離してください。すると背景部分が綺麗に消えました。

クイック選択、コピー、切り抜き

続いてツールメニューの中から、クイック選択をクリックします。

「新規」になっていることを確認したら、イラストの全てが黄色い範囲に入るようにドラッグしながら選択していきます。

イラストの線の部分もきちんと黄色い色が入るように選択していきます。

はみ出しても良いので、イラストの全てが黄色い色に包まれたら、「減算」をクリックして背景部分を選択します。

背景が選択されましたが、イラストの王冠部分が今度は選択範囲に入ってしまっています。そこで、今度は「追加」を押して、綺麗に点線の中に王冠の線部分も入るように調整します。

綺麗にイラストが点線の枠の中に入ったら、Command + Cでコピー、そのままCommand + Vで 貼り付けます。

すると、左上に、レイヤーが新しくできているのが分かります。

そうしたら、元のレイヤー(ここでは背景のレイヤー)を、右クリックから削除をクリックします。

イラストを選択(点線がチカチカ)したまま、右上の切り抜きツールを選択し、モードで「削除」を選択します。必要に応じて自動矯正や回転を使用してイラストの角度などを整えたら、イラスト周囲の透明余白部分の白い枠内に、綺麗にイラストがおさまるように調整し、「適用する」を押します。

これで余計な部分がなくなりました。

色で塗りつぶし

次に、右側のツールから、「色で塗りつぶし」を選びます。

「カラー」から、好きな色を選択して、塗りたい箇所にマウスを乗せます。先ほどのスマート消去時と同様に、許容範囲を調整して色をつけていきましょう。

書き出し

色を塗り終えたら、右上の「イメージを共有」から、「png/ウェブグラフィックスを選択」し、名前をつけて保存します。

念の為、後から修正・変更ができるよう、この編集ファイル自体も保存しておきましょう。Command+ Sを押して、ファイルを保存しておきます。

完成

おめでとうございます。ついに完成です!お疲れ様でした!!

この記事のURLとタイトルをコピーする
* 本記事に記載の内容は、あくまでも本ブログ運営者の記事執筆・公開時点での個人的な体験、感想に基づくものです。実際の内容は、必ずご自身でご確認ください。万が一、本サイトに記載の内容や、紹介するサービスや商品などの購入等によりトラブルや損害等が発生した場合でも、本ブログおよびブログ運営者は一切責任を負いません。あらかじめご了承ください。
Twitter
SHARE