サイトの顔とも言えるヘッダー部分。
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/
使用する文字がアルファベットだけなら、他にもデザイン性のあるものが結構たくさんあります。
日本語と違って文字数少ないですからね。
サイト作成は時間がかかる地道な作業ばかりですが、手間をかけるべきところにしっかりと手間をかけて、かけずに済むところはなるべく効率よく作業したいですね。
まずは簡単な方法でやってみるとコツがつかめると思います。