無料でオシャレなヘッダー画像を作成しよう。商用可能なロゴ画像と文字入れソフト

  • このエントリーをはてなブックマークに追加
  • 0

MJMUxszUiOJg5At1452250083_1452250110

ヘッダー画像やタイトルロゴはサイトの顔です。無料でおしゃれなヘッダーにしたいですよね。でも、ヘッダーのデザインって結構難しいと思いませんか。Webデザインの知識がある人や絵が上手い人ならパパッと作ると思いますが、不得意な人にとってはなかなか骨の折れる作業です。てことで今回は私流のサイトロゴの作り方を紹介してみます。

ヘッダー画像・サイトロゴを作ろう

今回作るサイトロゴはこちら。

Ytafu8Vs9CJoTxZ1452173382_1452173674

商用可能なアイコン素材の上に、無料のツールで文字入れしています。作成時間は10分もかかっていません。シンプルですが簡単に作れますよ。さっそく作ってみましょう。

無料かつ商用可能なアイコン素材を探そう

まずは文字入れをする土台の画像を探します。私はこちらを利用しました。

ヘッダー画像

サイト:icooon-mono

モノクロのシンプルなアイコンが豊富に揃っています。サイズも16px~512pxまであるので、ファビコンの画像に使ってもいいですね。もちろん無料で商用可能です。

さて、icooon-monoから好きな画像をダウンロードしたら、次に文字を入れます。

無料かつ商用可能なフリーフォント

フリーフォントの中には商用不可のものがあります。個人のブログや趣味のブログの場合は利用OKですが、アフィリエイトサイトや商用利用の場合は、商用不可のフリーフォントは使えないので注意しましょう。

てことで今回はこちらのサイトを使います。

商用可能なフリーフォント

サイト:バナー工房

バナー工房で利用できるフリーフォントは全て商用可能です。しかもインストール不要でブラウザ上で画像の編集ができるのでかなり便利ですよ。

画像に文字入れをしよう

さっそく、画像に文字を入れてみます。

「ファイル選択」で画像を指定⇒「画像を加工する」をクリックします。文字の入力欄に文字を入れて、文字サイズや色、フォントなどを選んだら「文字設定を変更」をクリックします。

無料で文字入れ

文字をクリックして位置を微調整して・・・

ロゴ

文字の位置が決まったら、「現在の文字の場所を確定」をクリックします。文字の場所を確定しないと、設定が保存されないので注意してくださいね。

rogo

ちなみに、文字の場所を確定した後に元に戻したい場合は、ページの最下部に編集の履歴があります。そこで編集する前の画像をクリックすれば、編集前の画像に戻すことができますよ。

書体の種類を紹介

バナー工房は、文字設定を変更しないと書体が確認できません。ひとつひとつ確認していくのは大変ですよね。なので、書体のサンプルを作ってみました。どの書体にするか迷っている方は参考にしてくださいね。(漢字・かな・カタカナが使えます)

SXYwC0ytJB1sGaJ1452247087_1452247722

完成した画像をダウンロードしよう

文字入れが終わったら、出来上がった画像をダウンロードしましょう。右上の「ダウンロード」をクリックします。

ヘッダーロゴ作成

以上でサイトロゴが完成しました。実際にカスタマイズしてみます。変更前はこちら。

55

文字だけだと寂しいですね。今回作成したサイトロゴに変えてみます。

良い感じですね。このサイトロゴの作成時間は約8分です。10分もかかりませんでした。簡単ですね~。

文字のみのサイトロゴを作りたい場合

もしも、文字だけのサイトロゴを作りたい方はこちらのサイトを使ってみましょう。

printed_photo

サイト:フリーフォントで簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成

ためしに文字のみのサイトロゴを作ってみました。

freefont_logo_nicomoji-plus_v09 (1)

中には商用不可のものや、商用利用の場合は製作者に連絡する必要があるものがあるので注意してください。

無料でオシャレなヘッダーにしよう!

ヘッダーは訪問者が最初に見る場所です。ヘッダーの印象でサイト全体の印象が決まります。

今回ご紹介した方法なら、誰でも簡単におしゃれなサイトロゴが作れます。初心者の私でも10分かからずに完成したので、みなさんも試しに作ってみてくださいね。

  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る