アプリの話

【自分用LINEスタンプの作り方】透過画像(PNG)をProcreateで作ってみたよ!

スポンサードリンク

もくじ

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

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

自分用のLINEスタンプを作りたいと思ったことがあるか、実際に作ったことがあるか、はたまた作りたいと思ったことはないか。

期間を2日間に設定してるので、もしよければ清き一票をぜひ^^

さて。

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

では、お付き合いください。

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

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

LINEスタンプの作り方!アプリで自分用も簡単に作成できました♪___harulog

https://store.line.me/stickershop/product/1572698

このスタンプは、

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

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

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

 

やり残したこと

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

4

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

FullSizeRender-6

あれから1年

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

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

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

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

『Procreate』の使い方

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

iPad用Procreate

02D0685F-D445-4379-86D5-2F7DEB49F164

iPhone用Procreate Pocket

IMG_8427

サクッと知りたい方は動画でどうぞ

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

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

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

  • レイヤーをタップ
  • 「+」ボタンをタップしてレイヤーを追加
6451FD2A-51EA-4F00-A862-9F5ED51CDB92

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

E2FE7E9C-A663-40CF-A2F9-5085D3D1D9F6

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

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

レイヤーを使いこなす

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

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

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

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

6007EF7A-F9F7-44C5-B4D5-B28FFE9174ED

PNGデータとして書き出す

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

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

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

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

画像を保存

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

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

書き出し完了!

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

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

LINE CREATORS MARKETにイラストを登録する

かなり長くなってますがこのまま続けます。

作ったイラストを今度はLINEスタンプ作成アプリに追加しなくてはなりません。

LINE CREATORS STUDIO

スタンプ作成・販売申請が行えるアプリです。

IMG_8425

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

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

1789182E-E3BD-4975-BB67-3C27B010828F

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

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

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

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

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

B80DD87F-1016-4E24-824C-0D43D80981F6
  • 手書(描)き
  • 写真・画像
  • カメラ撮影

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

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

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

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

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

画像が読み込まれました。画面下部にある「なぞる・かたち・消しゴム」ツールを使って編集することができます。

今回は完成したデータを読み込んでいるので、画面右上の「スキップ」をタップして次に進みます。

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

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

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

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

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

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

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

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

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

販売申請に関してもう少し詳しく書いてます

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

販売申請がなかなか下りず運営とやりとりを繰り返した話

あわせて読みたい
【LINEスタンプ】リジェクトされるも修正せずに承認まで持ち込んだ話。入魂のLINEスタンプがついに承認されました LINE Creators Studioというアプリを使って誰でもオリジナルのスタンプを...

文字を入れるには

あわせて読みたい
【LINEクリエイターズスタジオの使い方】フォント・文字装飾方法まとめ。LINEスタンプを自作する時の1番の近道 LINEスタンプを自分で作るときに避けては通れないのがLINE Creators Studi...

より高度な文字入れアプリの使い方

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です