ライフハック.net

サイトのヘッダー画像作成方法 ヘッダーロゴを無料で簡単に作ろう

サイトの顔とも言えるヘッダー部分。
WordPressなどでサイトを作ってみると、文字だけのヘッダーでは味気ないので、画像を作ってみたくなります。
しかし、特別なセンスもデザインの知識もないし、なるべく簡単に、しかも無料で、でもちょっとオシャレにしたい!

そんな時はこちらがオススメです。

スポンサードリンク

文字を加工して簡単にサイトのヘッダーロゴ画像を作ろう

フリーフォントで簡単ロゴ作成
http://lightbox.on.coocan.jp/html/fontImage.php

パッと見た感じ何やら複雑そうに見えるのですが、以下の部分を調整してみれば大体大丈夫です。
いろいろ設定してみて、「変更」ボタンを押して確認、「ダウンロード」を押すとPCに画像として保存できます。

おすすめポイント
・日本語のオシャレなフォントが無料で使え、文字をメインにしたロゴが作成出来るツール
・フリーフォント(無料の字体)を利用して、味わいのある文字タイトルを作成できる
・ブログやサイトのタイトル文字作成にピッタリのジェネレーター
・初心者でもロゴ作成が簡単
・ブラウザ上で操作するツールなので、インストール不要

こちらに使用できる書体の見本があります。
↓↓↓
書体見本-フリーフォントで簡単ロゴ作成
http://lightbox.on.coocan.jp/html/freefont_img.php

ヘッダー画像を作ってみました

当サイト「ライフハック.net」のロゴを作ってみました。

今回はフォントに色を付けた程度の簡単な設定のみ使い、シンプルに仕上げました。
個人的にシンプルな方が好きというのと、デザインに凝りすぎても迷ってしまうので…。
透過PNGを選び、背景が透けて見えるようにしてあります。

それにしても…文字だけだと味気ないという理由で画像に加工したのに、結局文字だけで仕上げたというね…(^_^;)
フォントがカワ(・∀・)イイ!!ので許してください。

設定した項目とそれぞれの内容は以下の通りなので、よろしければ参考にしてみてください。

「変更」ボタンをクリックすると現在の設定での仕上がりが確認できますので、出来上がりを見ながらそれぞれの内容を決めていきました。

設定した項目入力した内容項目の説明
サイズ28文字のサイズ
x 座標8座標は画像内での配置を調整
y 座標60
440画像の全体幅
高さ90画像の高さ
透過PNGオン背景が透けて見える処理
※透過PNGを選ぶと、文字にShadowや文字枠を付けられません。
フォント名たぬき油性マジックいろいろあるので、選ぶのも楽しいです。
※横のShadowボタンで影の効果を付けられます。
(透過PNGを選ぶと反映されません)
テキスト色733917右側のカラーパレットで選び「テキスト」をクリックするだけ
表示するテキストライフハック.net加工したい文字列

今回は透過PNGを使いましたので背景色は設定していませんが、背景色と背景2で、背景に色を付けることが出来ます。
背景色と背景2で違う色を設定するとグラデーションになります。

右側のカラーピッカー(パレット?)で、背景色、テキスト、画像枠、字枠、枠外色、背景2 それぞれのボタンをクリックすると、色を設定できます。

このように簡単シンプルに仕上げることもできますが、他にも角度、画像枠など、いろいろ設定すれば面白い仕上がりに出来ます。
画像と合成することも出来るので、ヘッダーロゴだけでなく、バナー作成やボタン作成など、様々な使い道がありますね。

「サンプル」「ギャラリー」や「関連リンク」などを参考にすると良いと思います。

英数字をメインにデザイン性の高いロゴを作るジェネレーター

英数字のみのジェネレーターでは、こちらなどがオススメです。
派手目なデザインが揃っています。
サイトの表記が日本語なので使いやすいと思います。

Cool Text (クールテキスト)
http://ja.cooltext.com/

使用する文字がアルファベットだけなら、他にもデザイン性のあるものが結構たくさんあります。
日本語と違って文字数少ないですからね。

サイト作成は時間がかかる地道な作業ばかりですが、手間をかけるべきところにしっかりと手間をかけて、かけずに済むところはなるべく効率よく作業したいですね。
まずは簡単な方法でやってみるとコツがつかめると思います。

モバイルバージョンを終了