アイツのつくりかた

絵と手描き文字で「伝わる」デザインaitsu factoryのブログです

手描き&紙派の方必見!手描き文字を写真に載せる裏ワザ♫【ibispaint】

f:id:aitsu-factory:20200830103034j:plain

 

みなさまこんにちは。

 

絵と手描き文字で「伝わる」デザイン

 

aitsu factoryのみかりんです。

 

 


さてさて、今日はひっさびさにノウハウ系やっちゃいますー。

 


今日の記事がオススメの方は

 

◉手描きが好き。紙に描くのが好き。

スマホはもってるけど、タブレットは持ってない。

◉もちろんアップルペンシルみたいな、タブレットスマホ用のペンも持ってない!

◉でも、写真に自分の手描き文字を乗せたい!!

◉しかもスマホアプリにお金をかけたくない


という方です!(ピンポイントー)


スマホのような小さい端末に、指で文字や絵を描こうとすると


こうなっちゃいますよね。。。

 

(これもねー指でもキレイに描くコツもあるんですけど・・・あんまり指で描いてると、指が捻れて手が痛くなるんで・・・)

f:id:aitsu-factory:20200830103108j:plain


今日は、手描き派の方のステキな文字を、デジタル写真にのっけられちゃう裏ワザ大公開です!


これは実際私がiPadを購入するまで、スマホやっていた手段です♫

慣れてきたり応用が効いてくると、高度なこともできるようになりますよ!


 

ではまず準備するものー!


スマートフォンiphoneでもAndroidでも可。アプリ1個いれる容量は確保お願いします)

◉白い紙

◉ペン(少し太めにしっかり線が出るものがおすすめです)


f:id:aitsu-factory:20200830103151j:plain

 

そして、スマートフォン

お絵かきアプリ「ibispaint」をインストールお願いします。

ibispaint.com


iphone 版はこちら

Android版派こちら


 

 

今日は、この鯛焼きの写真に文字をいれてみましょう♫

 

f:id:aitsu-factory:20200830104721j:plain


では!①白い紙に手書き文字を描きます。

 

f:id:aitsu-factory:20200830104737j:plain


この時、ペンは濃くしっかりとでるものを使用してくださいね、

 

f:id:aitsu-factory:20200830104905j:plain


 

 

そして②手書き文字の写真をとります。

 

 

f:id:aitsu-factory:20200830104756j:plain



 

この時、画面が暗ーくなってしまわないように気をつけてください。

文字の黒と、背景の白のコントラストがはっきりしていることが綺麗に仕上がるコツです。

 

f:id:aitsu-factory:20200830104814j:plain


後、もう一つ重要なことは

文字を撮った写真はトリミングして、文字だけにしておいてください!

 

 

f:id:aitsu-factory:20200830104843j:plain


 

 

では、ここからが本番!

 

Ibispaintを起動させます~。

 

起動させたら、「マイギャラリー」へ

 

f:id:aitsu-factory:20200830104933j:plain


 


マイギャラリーから、左下にある「+」ボタン(=新規作成)をタップします。

 

f:id:aitsu-factory:20200830104957j:plain


 

新規作成から、キャンバスサイズが選べますので、

今回は、「写真の上に文字を載せる」が目的なので

1番上の「写真読み込み」を選びましょ~。

 

f:id:aitsu-factory:20200830105029j:plain


そうしたら、ご自身のアルバムにいけますので、好きな写真をタップします。

f:id:aitsu-factory:20200830105053j:plain


タップすると、「キャンバスサイズどーする?」と聞かれますので

 

f:id:aitsu-factory:20200830105118j:plain


ここはお好みの設定にします。


(使用用途に合わせて設定します。オリジナルサイズは、画像が大きいのでスマホのストレージを圧迫していきます。SNS投稿などに使用する場合は、下の「推奨」でいいと思います^^)

 

 


そうしたら、「線画抽出する?」と聞かれますので、

ここは「キャンセル」を選択してくださいね。

(線画抽出については後で説明します)

 

f:id:aitsu-factory:20200830105158j:plain


そうしたら、写真がキャンバス上に現れました!

 

f:id:aitsu-factory:20200830105216j:plain


では、ここからが本番です!

(ここまでで気持ち萎えてないですか?もうちょっと!ついてきてよ~!)


下のツールバーの右から2番目の、四角が2枚重なっているアイコンが「レイヤー」のアイコンです。

 

f:id:aitsu-factory:20200830105234j:plain


こちらをタップすると


こんな感じの画面になります。

 

f:id:aitsu-factory:20200830105258j:plain


これの機能は、アニメのセル画のように、フィルムをいっぱい重ねることができて、それぞれのフィルムの上で作業ができるんだけど、最終的に上からみたら、それが一枚の絵のように見えるようになっています。


では、ここに、新しいレイヤーを一枚増やします!

(上に増えます)

 

そして、カメラマークを押して、ご自身の書かれた手書き文字を呼び出します。

ワクワク。

 

 

f:id:aitsu-factory:20200830105330j:plain



呼び出しましたら、画面にアップで登場するので、


親指と人差し指で、配置したい場所にサイズを調整してあげてください。

 

f:id:aitsu-factory:20200830105404j:plain



納得いく場所に配置できたら、チェックマークをタップ。

 

f:id:aitsu-factory:20200830105427j:plain


そうすると「線画抽出しますか?」という注意が現れます!!(また~!!)

 

f:id:aitsu-factory:20200830105459j:plain


さっきの写真の時は、線画抽出はキャンセルしましたが


ここでは「OK」を選択します。



そうしましたら、3つのスライダーが登場します。

 

ここでは上2つのスライダーを使います。

 

 

f:id:aitsu-factory:20200830105639j:plain

まずは、上の「黒側」のスライダーを真ん中あたりまで持って行ってみてください。

 

f:id:aitsu-factory:20200830105804j:plain

 

文字の色が黒くなったことが分かりますか?



次は、2つ目の「白側」のスライダーを、様子を見ながら真ん中の方に移動してみてください。

f:id:aitsu-factory:20200830105720j:plain



背景の黒くなっている部分が飛んで、文字だけになったことが分かりますでしょうか?


 

 

この「線画抽出」とは、

文字通り、線を抽出する機能です。

元々の画像が、白い背景がありましたが、これをすることで、

まさに透明のセル画の上に、黒い線が残るという状態になります。

これをすることで、下においた写真が透けて、あたかも写真の上に文字を書いたかのように見えます!!

 

f:id:aitsu-factory:20200830105831j:plain


これにて、写真の上に、紙に書いた手書き文字を載せるということが実現しました!

 

この画像を保存するときは、

右下の矢印をタップ。


f:id:aitsu-factory:20200830105907j:plain

 

 


そして、「png保存」をタップすると、

スマートフォンの「写真」の中に、画像が保存されていますよ。

(アンドロイドはアルバムだったかなぁ・・・アンドロイドはいろんなところに保存先があるみたいなので、いろんなところを開いてみてくださいね!)

 

f:id:aitsu-factory:20200830105944j:plain


この技術を使うと、

文字だけじゃなく、イラストを載せることも可能になります。

 

 

f:id:aitsu-factory:20200830110222j:plain


なぜ、今回、この記事を書いたかというと、

 

私の大好きな、お財布ショルダー専門店ラベンダーサシェのイシロヨウコさんに

 

昨年、女性起業塾に登壇される際お会いして、色々お話をしている中で

 

「みかりんさんは、デジタル画は何で描いていますか?」と聞かれたのです。

 

 


その当時は、私はipadも持っておらず、

 

今回紹介した手法でデジタル画はほとんど作っていました。

 

それをお伝えしたら、

 

イシロさんが「そんな方法があったのか!」とびっくりされてて!!

 

 


で、少し前に

 

「みかりんさんに、

 

以前手描きの文字をデジタル化する技術を教えてもらったことを思い出して、

 

予約カレンダーを手描きの文字使ってみたんです!」と言ってくれました。

 

イシロさんのブログの最後の方に、イシロさんお手製のカレンダーの画像あります♪


ameblo.jp

 

そして、

 

「手作り仲間の中には、

 

手描きの技術は長けていて、

 

デジタルをやりたいけど、ipad買うまでは・・・と

 

躊躇している人もたくさんいます。

 

そんな方にもこんな技術があるよ!と知ってもらえたら・・・」

 

と言ってくださったのを聞いて、

 

 

ちょっとノウハウをお伝えできたらなと思い、今回やってみました。

 

 


一気にいっぱいお伝えしたら、頭がカオスになっちゃうから、

 

とりあえず今日は、「写真に文字を載せる!」

 

それだけをお伝えしました。

 

 


次回、「じゃあこの写真の文字、色を変えるのはどうするの?」

 

「線画抽出した後、配置を移動させたいんだけどどうしたらいいの?」

 

というお話ができたらな~と思います。

 

 

 

 


最後まで読んでくださり、ありがとうございました♪