手書きの文字を写真から切り抜いて画像にするまで

記事
デザイン・イラスト
クラスTシャツやポスター、
サムネやヘッダーなどの画像、年賀状やメッセージカードなど…

「手書きの文字をそのままデザインの素材として使いたい!」というシーンがあると思います。

この記事では毛筆で書いた文字を画像(PNG・JPEG)にする方法を解説します。もちろん同じ方法でペン字も可能です。PNGで背景透過の画像も出来ます。

※この記事で紹介する方法で看板などの文字を撮影したりスクショした画像や写真を加工して画像にすることも可能ですが、そのような場合は著作権には十分に注意して画像を扱ってください。

一連の作業はスマホだけで完結します。

スマホのカメラ機能とアプリ(無料でインストールできるもの)を使って手書きの文字を画像にします。

背景透過の画像を作れば、ポスターや年賀状で写真に重ねたりすることも出来るのでデザインの幅が広がります。

さっそくはじめます。
まずは紙に字を書きましょう。

_20210707_103707.JPG

書いたものをスマホのカメラで撮影します。
この写真を編集していきます。



スマホのカメラ機能とアプリのアイビスペイントXを使います。アイビスペイントXは無料でダウンロード出来ます。

_20210707_104952.JPG

アプリ内課金ありとありますが、無料の機能以外は使いません。アイビスペイントXをダウンロードしたら早速はじめましょう。


まずは字を書きます。白い紙に黒い墨で書きます。書いたらスマホのカメラで撮影します。

紙は何でも大丈夫ですが、濃い色の紙は避けたほうが無難です。
今回は(少しだけ高めの)半紙を使っています。

_20210707_103707.JPG

こんな感じになりました。

アイビスペイントXを開きます。
マイギャラリーを選択します。

_20210704_190435.JPG

マイギャラリーが開きます。

_20210704_190602.JPG

新規作成〈左下の+〉をタップします。

写真読み込みを選択します。

_20210704_190653.JPG

先ほど撮影した写真があるフォルダを選択します。

_20210704_194039.JPG

写真を選択します。

_20210704_194157.JPG

選択するとキャンバスサイズの選択画面になります。


今回は推奨サイズを選択して進みます。オリジナルサイズを選択してもこの先の操作は一緒です。キャンバスサイズが大きいと動作速度が遅くなります。

_20210704_194259.JPG

写真が表示される前に線画抽出の選択画面が表示されます。

線画抽出が必要なのでOKを選択します。

広告が表示されますが、作業に支障はありません。
(課金することで広告非表示にも出来ます)
(一連の作業で有料メニューは使用しません)

_20210704_194331.JPG
(※この記事に使用しているスクショ画像はトリミングしているので、表示されている広告は切り落とされています)

_20210704_184818.JPG

「黒側」「白側」のバーにある白丸を移動します。
文字の輪郭がきれいに表示され、周りが白くなる位置を探します。

_20210704_184942.JPG

今回は黒側52%白側52%でいきます。
(いつもだいたい白黒50前後になります)

決まったら緑のチェックマークをタップします。
編集画面になるのでペンのマークをタップします。

_20210704_194456.JPG

投げ縄を選択します。

_20210704_195553.JPG

文字を囲います。(投げ縄の中だけ編集が出来る状態になります)

囲ったら右下の反転マークをタップ(選択した領域が反転します)

_20210704_195636.JPG

左下の消しゴムを選択して周りを消していきます。選択した領域以外は編集が反映されないので(今回の場合は文字の部分を一時的に編集出来ないようにしています)ここはとりあえず全部消しちゃいます。

_20210704_185134.JPG

一気に消します。

_20210704_185202.JPG

消しゴムを離すとこんな感じになります。

_20210704_185221.JPG

上の方にある点線の四角をタップします。

_20210704_233234.JPG

選択解除をタップします。

_20210704_233119.JPG

選択解除したらとりあえずは文字の切り出しの作業はひとまず完了です。


ここからは文字に色を付けたりしていきます。
点線の四角マークをタップして不透明度で選択をタップします。

_20210704_233159.JPG

文字だけが選択された状態になります。
文字以外も選択されるようであれば消しゴムで消して再び選択します。

左下の消しゴムマークのツールメニューをタップ(ペンマークになっているかも)、移動変形を選択します。

_20210704_235331.JPG


ここではパース変形を選択します。
文字を若干変形しますが、必要がなければそのまま次の行程に進みます。

_20210704_233407.JPG

写真を撮った時に斜めから撮ると文字が傾いたり伸びていることもあるので、必要であればこの方法で修正します。

変形が終わったら緑色のチェックマークをタップします。

_20210704_235425.JPG

着色していきます。

下のツールバーでペンの色を設定します。
今、選択しているツールが消しゴムの場合は左下の消しゴム⇔ペンマークをタップします。

真ん中の四角をタップするとカラーチャートから色を選択出来ます。

_20210704_235523.JPG

色の選択が出来たら真ん中下の矢印をタップしてカラーチャートを閉じます。

_20210704_235605.JPG

ここでも文字の部分しか編集が反映されないのでとりあえずはみ出す位に塗っていきます。

_20210704_235651.JPG

こんな感じになります。

_20210704_235746.JPG

次は白を塗っていきます。
下に表示されるバーでペンの太さは調節出来ます。

_20210704_235821.JPG

ペンのマークをタップしてぼかしを選択します。

_20210704_235842.JPG

全体をぼかします。

_20210704_235928.JPG

次はフィルターを選択します。

_20210704_235956.JPG

フィルターからレリーフを選択します。

_20210705_000018.JPG

太陽マークを移動して調節します。

_20210705_001714.JPG

決まったら緑のチェックマークをタップします。

_20210705_001931.JPG

上の点線の四角マークをタップします。

選択解除を選択します。

_20210705_085235.JPG

選択を解除した後、もう一度フィルターを選択します。

_20210705_085419.JPG

フィルターからドロップシャドウを選択します。

_20210705_085451.JPG

半径・角度・色を調整します。

_20210705_090122.JPG

フィルターの画面を閉じます。

_20210705_085653.JPG

ペンのマークをタップしてキャンパスを選択します。

_20210714_140157.JPG

トリミングを選択します。

_20210705_090000.JPG

調整したらチェックマークをタップします。

_20210705_090700.JPG

右下の矢印をタップします。

_20210705_090722.JPG

PNG保存を選択します。
透過PNG保存を選択すると背景が透過された画像になります。
(文字部分の白い箇所は透過ではなく白くなります)

_20210705_090807.JPG

JPEGで保存することも可能です。
マイギャラリーのメニューから選択します。

_20210705_090833.JPG

_20210705_091304.JPG


完成です!

無題2490_20210705184012.png
無題2490_20210705184014.png
おつかれさまでした。

無題2493_20210705185227.png

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら