当ブログは広告が含まれています

【ブログのロゴの作り方】無料・有料のやり方いろいろあるよ!

ブログのロゴの作り方 Cocoon

こんにちは、ikuzo(いくぞう)です。

私がブログを始めて一番最初にやりたかったこと。それは、

カッコいいロゴを作りたい!でした。

 

なのに最初は、こんなロゴだったんですよね…(^_^;)

ブログ開始時期のロゴ

今回は私がやったロゴの作成方法や

様々なツールを使った、ブログのロゴの作り方を紹介します。

スポンサーリンク

私がやったブログのロゴの作り方

はじめは私がやったロゴの作り方です。

さっきのロゴよりも後から作ったのが、こちらのロゴです。

ヘッダーロゴあり

このロゴは、フリーフォントで簡単ロゴ作成というツールを使って作りました。

「フリーフォントで簡単ロゴ作成」設定画面

作り方は、まず「表示するテキスト」の欄にブログ名(サイトのタイトル)を入れます。

「表示するテキスト」欄にブログ名を入れる

フォントを選ぶと、どんなロゴになるのかプレビューで確認できます。

フォントはかなりの数があります。

お気に入りのフォントを探す

ロゴをサンプルから探すという方法もあります。

ロゴをサンプルから探す

ロゴのサンプル一覧

※フォントによっては漢字がなかったり、「カナ・かな」や「英数」専用のものもあります。

 

気に入ったフォントが見つかったら、サイズ(フォントの大きさ)を変更します。

ロゴは大きめに作りましょう

解像度2倍のRetinaディスプレイでも綺麗に見えるように、

表示したい倍の大きさで作成することをおススメします(目安として幅が600~1000くらい)。

赤枠で囲った部分が、設定する箇所です。

「フリーフォントで簡単ロゴ作成」の設定

フォントのサイズを決めてから、「X・Y座標」と「幅・高さ」を調整します。

「X座標」の値を大きくすれば文字が右方向へ、「Y座標」を大きくすれば下方向へ移動します。

値を変えたら「変更」を押してプレビューでバランスを確認します。

テキスト色」のコードはカラーコード表HTMLカラーコードなどで調べられます。

背景無色のロゴを作るために「透過PNG」にチェックを入れます。

 

そして今回は、あとで右側にイラストを入れるつもりなので、ロゴの上下と右側に余白を設けました。

上下と右側に余白を設けたロゴ

ご参考までにプレビューの下の方には、ロゴに枠線をつける機能もあります。

ロゴに枠線をつける機能

枠線がついたロゴ

裏ワザ?として、ロゴと同色の「枠」をつければ、ロゴが少し太くなります。

 

最後に「ダウンロード」を押して、ロゴの完成です。

スポンサーリンク

ロゴに追加するイラストを編集

次に、ロゴの右側に設けた余白にイラストを追加するやり方です。

イラストAC」というサイトには、無料で使えるイラストが多数あります。

今回は、Tossanさんという方が作った、こちらのイラストを編集して使わせていただきました。

「イラストAC」で画像を選択

使用するのは「PhotoScape X」という、無料の画像編集アプリです。

「PhotoScape X」インストール

ここでは「PhotoScape X」を使って、

イラストをロゴと同じ「白」にして、線以外は透過させる方法を説明します。

 PhotoScape Xの基本的な使い方

【PhotoScape X】の基本的な使い方

イラストの白と黒を逆転させる

PhotoScape Xを起動させたら「写真編集」を選択して、さきほどのイラストを画面にドロップします。

「PhotoScape X」へイラストをドラッグ

編集画面で「ネガ」のボタンを押して白と黒を逆転させます。

「PhotoScape X」でネガのボタンを押す

白と黒が逆転しました。続いてイラストを左右反転させます。

「PhotoScape X」で水平方向に反転

これをいったん保存します。

イラストをいったん保存

スポンサーリンク

イラストの黒い部分を透過させる

今度は、イラストの白い線以外を透過させます。

カットアウト」を選択して、白黒逆転させたイラストを再び画面へドロップします。

白黒逆転したイラストをドラッグ&ドロップ

「マジック消しゴム」を選び、顔の黒い部分に十字カーソルを当ててクリックします。

顔の黒い部分に+マークを当ててクリックする

(わかりやすいように背景色を変えました)

 

するとクリックした部分の色が変わって、背景と同じく「透過」したことが分かります。

顔の黒い部分が透過した

同じように色のついた部分をすべて透過させたら完成です。

色のついた部分をすべて透過させる

スポンサーリンク

ロゴとイラストを合体させる

できあがったロゴとイラストを合体させましょう。

写真編集」を押して、ロゴをドロップします。

「写真編集」の画面にロゴをドラッグ&ドロップ

これではロゴの範囲か分からないので「枠線」を表示させます。

そして、右上にある「挿入」を押してから、イラストをドロップします。

画面に枠線を表示させた

イラストの4隅の「〇」で大きさを変更、イラストをドラッグして位置を調整します。

イラストの大きさと位置を調整する

今回は必要ありませんが、余白が多すぎたら不要な部分を「切り抜く」こともできます。

ロゴの不要部分を切り抜く

失敗しても「取り消し」のボタンを押すと元に戻るので、どんどんやってみましょう。

 

これでイラスト入りのロゴの完成です。

完成したイラスト入りのロゴ

スポンサーリンク

Canvaを使ったロゴの作り方

私がロゴを作ったやり方は以上の通りですが、

今度は「Canva」というデザインツールを使ってロゴを作ってみましょう。

Canvaにアクセスして、Googleアカウントなどでログインします。

Canvaにログイン

デザインを作成」を押して「ロゴ」を選択します(スクロールすると出てきます)。

「デザインを作成」を押して「ロゴ」を選択

テンプレートの中から好きなものを選びます。

テンプレートの中から好きなものを選ぶ

文字をクリックしてブログ名などに変更します。

フォントや文字の大きさを変えることもできます。

文字をブログ名に変更

小さい文字を消して、マークの位置を調整しました。

Canvaで作ったブログのロゴが完成

右上の「共有」→「ダウンロード」を押します。

ロゴをダウンロード

このままダウンロードするとサイズは500px×500pxと、ロゴがやや小さめです。

Canvaの無料版ではロゴのサイズを変更することができない

サイズを大きくするには、Canva Pro(30日間の無料トライアル)に登録しましょう。

30日以内に解約すれば料金はかかりません。

Canva Proなら無料版ではできない背景透過のロゴもダウンロードが可能です。

「Proには登録したくない」という方は、とりあえずそのままダウンロードして下さい。

そして、さきほどのPhotoScape Xを使いましょう。

「カットアウト」→「マジック消しゴム」を選択して、背景に十字カーソルを合わせてクリックします。

PhotoScape Xでロゴの背景を消す

これで背景透過のロゴが完成しました(ただし、サイズは小さめです)。

背景が消えたロゴ

スポンサーリンク

LOGOMAKERでロゴを作る

一度に大量のロゴが出てくる、LOGOMAKERという海外のサイトがあります。

LOGOMAKER

「その他」を選んでブログ名を入力します。

LOGOMAKERのトップページで「その他」を選んでブログ名を入力

好きなロゴのスタイルを選びます。

好きなロゴのスタイルを選ぶ

すると、たくさんのロゴが出てきます。

たくさんのロゴが出てきた

あとは好みのロゴを選んで編集するだけです。

好みのロゴを選らんで編集する

スポンサーリンク

唯一無二のロゴを作る(ココナラ)

「ココナラ」トップページ出典:ココナラ

ここまで紹介したロゴの作り方は既成フォントを使うため、

どうしても人と似たようなロゴになる可能性があります。

人とは違う唯一無二のロゴを作りたい方は、

ココナラというサイトでデザイナーさんにお願いするという手があります。

ロゴは4,000円程度から作ってもらえます。

「自分で作るのは面倒」「人と違うおしゃれなロゴを作りたい」という方はココナラを覗いてみて下さい。

>>ココナラで「ロゴデザイン」を見る

最後に

いかがだったでしょうか。

今回はいくつかのブログのロゴを作る方法を紹介しました。

文中でもお話ししましたが、ロゴを自分で作る時は、少し大きめに作っておくのがポイントです。

あまり小さく作りすぎるとロゴがぼやけて見えることがあるからです。

表示させる倍くらいの大きさで作っておけば問題ありませんが、

表示させる大きさをまだ決めていないという方は、横幅1000px(ピクセル)くらいで作っておくといいでしょう。

大きく作りすぎたら、あとで「PhotoScape X」でロゴを小さくしたり(サイズ変更)、

あとは「TinyPNG」でファイルサイズを圧縮するという方法があります。

画像の圧縮については、こちらの記事も参考になると思います。

 

本日は最後まで読んでいただき、ありがとうございました(^_^)

コメント

  1. どんと より:

    ロゴの作成方法から設定までわかりやすくて、自分でも簡単にロゴを作れました!ありがとうございます。

    • ikuzo|いくぞう より:

      どんとさん、うれしいコメントありがとうございます!

  2. ヒロセ より:

    簡単にロゴが作れないか悩んでいたところ、ikuzoblogさんを発見しました!
    わかりやすい解説で、ロゴを作ることができました!
    有用な記事をありがとうございます╰(*°▽°*)╯

    • ikuzo|いくぞう より:

      ヒロセさん、コメントありがとうございます!
      サイトのロゴ拝見しました。
      いい感じに仕上がりましたね。
      お役に立てて何よりです( ´∀`)b

  3. よこじか より:

    今までブログの見た目はまったくカスタマイズできずにいたので、大変参考になりました!
    ロゴづくりとボックスメニューの記事を実践しました。ありがとうございます!!

    • ikuzo|いくぞう より:

      よこじかさん、コメントありがとうございます!

      よこじかさんのサイト拝見しました。

      少しでもお役に立てて嬉しいです!