おすすめアプリ

【自分用LINEスタンプの作り方】透過画像(PNG)をProcreateで作る方法!

今回のブログは「LINEスタンプを作りたいと思ったことがあるけど、作ったことがない人」にぜひ読んでいただきたい内容です。読んでいただきたいと言いつつ、めちゃくちゃ長くなってしまってます。でも、最後まで読んでいただければ、誰でも、間違いなくマイスタンプを仕上げることができるはずです!がんばりましょう!

もくじ

去年のLINEスタンプ作りでやり残していたこと

ツイッターのアンケート機能を使って聞いてみました。

自分用のLINEスタンプを

  • 作りたいと思ったことがある?
  • 実際に作ったことがある?
  • 作りたいと思ったことはない?

作りたいと思いつつも作ったことがない人が比率としては多い結果となりました。実際に作ったことがある僕からすると、絶対にできるからチャレンジして欲しいなというのが正直な気持ちです。LINE CREATORS STUDIOというアプリを使えば、誰でも自分用のLINEスタンプを作ることができます。それを販売することもできます。その便利なアプリを使って、去年、僕は初めてLINEスタンプを作りました。自分にとって身近な博多弁とイタリアのエッセンスを掛け合わせて作ってみたのですが、ありがたいことに10人くらいの方に(笑)お使いいただいております。心より感謝申し上げますm(_ _)m

イタリア・ルネサンス期 feat. 博多弁

このスタンプは、

  • iPad Pro +Apple Pencilでメモアプリにイラストを描き
  • Phontoで文字を入れ
  • LINE CREATORS STUDIOで仕上げる

という行程で作り上げました。

自分の中では納得のいく出来ではあったのですが、当時の自分では力の及ばない部分がありました。

やり残したこと

本当は透過画像にしたかったんです。でも、できませんでした。透けさせる方法を知りませんでした。

4

だから、LINE CREATORS STUDIOの切り抜き機能でギリギリまで削ってました。でも、限度があるんですよ。緑のドットを指先で動かして切り抜くわけですが、指先での操作になるのでどうしても思い通りにならないところもありました。

FullSizeRender-6

あれから1年

先日、AppleStoreで開催されているセッションに参加したんです。「紋を作ろう」というセッションだったんですが、その時に使ったアプリが『Procreate』というドローイングアプリ。そのアプリを使えば、なんと超カンタンに背景を透過させることができちゃったんです。

背景が透けたスタンプのほうが見た目スッキリ

下地のない、絵や文字だけのスタンプのほうが見た目がスッキリしませんか?今回はこの『透けさせる技術』をマスターしましょう。

透けさせる技術て。。。うふ♡

『Procreate』の使い方

背景透過スタンプを作るにあたり、まずはProcreateをダウンロードします。有料アプリなだけあって、機能豊富です。

iPad向けProcreate

iPhone向けProcreate

取説動画

Procreateを立ち上げる

96B299EC-8581-48AD-BCA6-B7AB2B24E909

アプリをダウンロードしたら、まずは新規キャンパスを用意します。

  • 画面右上の「+」マークをタップ
  • お好みのキャンパスサイズを選ぶ

今回は正方形でもいいかなと思いスクエアをチョイスしました。

新規キャンパスに写真を挿入する

A93782E1-E845-497D-B6F8-147BB35C5A95

新規キャンパスに、加工したい写真や画像を挿入します。

  • 設定ボタンをタップ
  • イメージをタップ
  • 写真を挿入をタップ
  • 写真アプリから写真・画像を選ぶ

これで準備完了です。

6F38B577-0236-4FE9-A404-438B94A6FE34

背景色の消し方はレイヤー操作

51D3F9E1-D4CA-4452-9BBC-F0926F0F5993

初めは自動で白の背景色になってます。まずはこれを消します。

  • 右上の紙が重なった「レイヤーマーク」をタップ
  • 背景色のチェックを外す

チェックを外すと背景の白地が消えて、元々の画像のみの状態になります。

A3A9665B-3736-43C4-A1A7-9EDA28D358C1

消しゴムで透過させたい部分をゴシゴシする

E2FE7E9C-A663-40CF-A2F9-5085D3D1D9F6
  • 消しゴムマークをタップする
  • 消え方を選ぶ

消しゴムというより、消せる筆先といったところでしょうか。ガサッと消せるものもあれば、優しく消せるものもあります。消すというより、消しながらも描いているような不思議な感覚が楽しめます。

ペイント→ニッコラルで大胆に消す

AEF51E6D-EEA0-480B-A2A6-8C933C780871

ガバーっと消してみました。消したところがそのまんま透過部分になります。この調子で不要部分は大胆に消していきます。ある程度、形が整ったところで消しゴムの種類を変えてみます。

68DAEACF-4506-41A8-A88A-C19E5B2204DB

アーティスティック→フレスコ画でボカして消す

E4ECD306-FF9F-4BC9-8C61-F9C6E5A20875

絵の境界線をボカしたいので、ぼんやりと消すことができるアーティスティックのフレスコ画に変更。フレスコ画消しゴムで縁をなぞってやると境界部分がグラデーションっぽくなります。なんとなく、オーラといいますか、妖気が漂っているような雰囲気にしてみました。

D86E521E-8C38-4522-8634-19A8AC693484

ブラシサイズを調整する

6086CE75-2240-4EFF-853B-ED5375635081

画面左端の上のカーソルでブラシサイズを調整できます。ブラシサイズを少し小さくして、髪の毛部分をボカしていきます。

ブラシの濃淡を調整する

2A4DD55F-203A-47AE-9FA0-22EAE5706956

「消えすぎるなー、もうちょっと緩やかに消えてほしいなー」というときはブラシの濃淡を調節しましょう。画面左端の下のカーソルで、ブラシの濃淡を調整できます。

Sponsored Link


文字を書く/レイヤーを追加する

6451FD2A-51EA-4F00-A862-9F5ED51CDB92

絵に関しては、いい感じに仕上げることができました。続いて文字を書いてみます。

  • レイヤーをタップ
  • 「+」ボタンをタップしてレイヤーを追加

絵が描かれているのがレイヤー1です。その上に透明のレイヤー2を重ねました。ここに文字を書いていきます。筆先の数は消しゴムと同じです。

E2FE7E9C-A663-40CF-A2F9-5085D3D1D9F6

書いてみました。残念ながらテキストツールはないので、文字を入れたい場合は直筆、もしくは他のアプリを使うことになります。

9B9955A1-24F0-44F5-9E44-40003A89F861

レイヤーを使いこなす

260C8936-5881-4984-8D89-4B94490797BB

しっくりこなかったり、ちょっと違うかなーと思った時は、またレイヤーを追加してみましょう。レイヤーの追加方法はさっきと同じです。追加したら、レイヤー2のチェックを外します。すると、文字を書いていたレイヤー2だけが非表示になりました。

イラストが完成しました!

6007EF7A-F9F7-44C5-B4D5-B28FFE9174ED

元々は四角のデータでしたが、消したり書いたりしながら、背景のない絵と文字だけのイラストが出来上がりました。とにかくProcreateの自由度の高さに驚かされます。

PNGデータとして書き出す

B952C856-6DE0-43E3-821C-D68BD4497A30

仕上げたイラストを背景透過データとして書き出さねばなりません。その方法です。

  • 設定ボタンをタップ
  • 共有をタップ
  • PNGをタップ

PNGとして書き出しましょう。JPEGなどにすると、結局背景が白地のイラストになってしまいます。

画像を保存

45503671-30FD-4173-89BC-905DE226BA6E

標準の写真アプリに保存されます。

書き出し完了!

802A9BA9-211A-42DC-AD24-2D59D8D3B085

アフロディーテをモチーフにしたイラスト。さながら白目に見えるアフロディーテが優しく「見ていますよ」っていうギャップ萌えスタンプの完成です。

LINEクリエイターズマーケットに登録する

LINE CREATORS STUDIO

IMG_8425

作ったイラストを今度はLINEスタンプ作成アプリに追加しなくてはなりません。スタンプ作成・販売申請が行えるアプリです。

アプリを立ち上げましょう

1789182E-E3BD-4975-BB67-3C27B010828F

画面上部の「+スタンプを作ろう」をタップして新たなパッケージを作っていきます。

タイトルを入力しましょう

4D5A6177-31D8-4604-A89D-2BA51040C1C6

40文字以内でタイトルを入力します。ググられそうなタイトル、同じ趣味の人が検索しそうなワードを入れましょう。あとで変更することもできます。

スタンプにしたい画像を追加しましょう

B80DD87F-1016-4E24-824C-0D43D80981F6

画面下部の「+」ボタンをタップして画像を選びます。

  • 手書(描)き
  • 写真・画像
  • カメラ撮影

手描き

スタンプデータは3つの方法で用意することができます。手書(描)きを使えば、簡単なイラストを即席で描くことができます。スタンダードなフォントに限られますが、テキスト入力することもできます。

カメラ撮影

カメラ撮影を使えば、”今”撮った写真をもとにして、スタンプを作ることができます。

写真・画像

僕は入念にProcreateでデータを作ったので、画像データを使用します。

8B93BE36-C47F-4666-8BEE-4A38E803F949

読み込んだ画像を編集しましょう

518F3572-5BDE-4B25-AA7A-A373F09BDD3B

画像が読み込まれました。画面下部にある「なぞる・かたち・消しゴム」ツールを使って編集することができます。今回は完成したデータを読み込んでいるので、画面右上の「スキップ」をタップして次に進みます。

シミュレータで見え方を確認しましょう

0830BF25-477D-4BEC-9609-C27E35E5B87F

保存一歩手前まできました。保存する前に、実際にどう見えるのかを確認しておきたいところ。そんな時は画面右下の「シミュレータ」をタップしてみましょう。

ちゃんと透過されていることを確認

9DB6DDC5-47B4-4E1A-8D1B-BEDDFE3A8A2E

LINEで実際に使われた場合は、このように表示されることになります。文字と絵以外のスペースはちゃんと透過されていました。感動♡

これをスタンプの数だけ繰り返しましょう

最少8個で販売申請できます。難しく感じるかもしれませんが、1度覚えたらあとは繰り返すだけです。やはりiPad+ApplePencilで描く作業は楽しいです。今はApplePencilはiPadProだけのものではなくなりました。低価格帯のiPadでもApplePencilを使ってのお絵かきが楽しめます。Procreateも最高のお絵かき帳になります。楽しすぎるオモチャを駆使して、ぜひLINEスタンプ作りにチャレンジしてみてくださいね!

created by Rinker
Apple(アップル)
¥93,733
(2019/02/23 02:01:32時点 Amazon調べ-詳細)

created by Rinker
Apple(アップル)
¥96,973
(2019/02/23 02:01:32時点 Amazon調べ-詳細)

販売申請に関してもう少し詳しく

あわせて読みたい
LINEスタンプの作り方!アプリで自分用も簡単に作成できました♪福岡ローカルタレントの中で一番デジタルオタクであると自負している、どうもハルです。今回はLINE Creators Studioについて...

LINEスタンプリジェクトへの対応方法

あわせて読みたい
【LINEスタンプ】リジェクトされるも修正せずに承認まで持ち込んだ話。自分用のLINEスタンプを使えるようにするためには、まずLINEスタンプの画像を作成して、それを登録し、販売申請をしたのち、LINEに承...

アプリを使った文字の入れ方

あわせて読みたい
【LINEクリエイターズスタジオの使い方】フォント・文字装飾方法まとめ。LINEスタンプを自分で作るときに避けては通れないのがLINE Creators Studio。このアプリでスタンプ画像の追加、作成、編...

『Phonto』でより高度なテキスト入力

あわせて読みたい
【LINEスタンプ自作講座】文字入力におすすめのアプリPhontoの使い方。LINEスタンプ自作熱、再燃 新作40個パック完成 また作ってしまいました。しかも前回よりかなり完成度が高まったと自負しております。...