スマホだけでヘッダー画像を作る方法

どうも　HEIKINMAN（@HEIKINMAN）です！

実はヘッダー画像作ってみました　気づきました？

ホントは絵とか入れたかったんですけど書けませんでした

本当は外注さんに頼んで

「小洒落たアンニュイでエアリーな雰囲気の気の利いたヘッダー画像」

を作ってもらいたかったんですけど

お財布と相談してやめました　泣く

なのでスマホのみで作りました

お金かかってません

財布に優しいヘッダーです！

簡単なので

自分で絵かけないし財布が厳しいけどヘッダー欲しいな

って思っている人は作ってみてください

まず、気の利いたフォントでパーツを作る

世の中にはフリーフォントと言われる

デザイン性に優れているのにもかかわらず無料で使用できるフォントがあるんですね

作ってくれた方々に感謝！！

そのフリーフォントで文字画像を作成できるサイトが

こちらです

スマホで見ると

こんな雰囲気

何回か試しに作ってみると直感的に使えるようになります

あとは文字、フォント、大きさ、色などを指定して出力！！

ぼくは

↑ロゴのつもりのロゴ

↑サブタイトル

↑タイトル

の３パーツを作りました

ポイントは文字の輪郭がクッキリ出るような大きさで作って下さい

大きさ、サイズなどは後から編集できます

パーツは個々にダウンロードしておきます

パーツをつなぎ合わせる

次に作ったパーツをつなぎ合わせます

ここで使ったソフトが「とらうさ園長」さんオススメの

ibisPaintです！！

とらうさ園長さんの絵は癒やされますね　上手くて羨ましいっ！　

ibisPaintも直感的に使えるんでホントに使いやすい

とらうさ園長さん教えていただきありがとうございましたっ！！！

ibisPaintで先程作ったパーツをレイヤー１枚に一個乗せていきます

①の所が四角になっていると思うのでタップするとこの画面になってレイヤーが選べるようになります

②をタップすると画像が選択できるのでさっき作ったパーツを選択して位置と大きさを調整します

すると

このようなものが出来上がります

キャンパスのサイズは使用しているテーマによって違うようです

僕も最初はてなブログデフォルトの1000×200で作ってみたのですが

上手く表示されるバランスがとれなくてサイズを変更して作り直し

やっと完成しました

以上、財布に優しいヘッダーの作り方でした

最後まで読んでいただきありがとうございます！

誰かの役に立てたら幸いです