⇒おすすめのPS4ソフト&周辺機器!

簡単なタイトルロゴ画像の透過PNGを作れる無料サイトを紹介

【タイトルロゴの作り方】

今回は↑のようなタイトルロゴを無料で製作する方法を紹介します。

こんな感じのタイトルロゴならばサクッと作ることが出来ます。これは元々の画像にタイトルロゴを合成したものです。

ブログにある程度慣れた方で、デザインにこだわってみようという方のご参考になれば幸いです。

以下詳しい手順を紹介していきます。

スポンサーリンク

タイトルロゴの作り方

ロゴを作成できる外部サイトで作業していきます

まずは、↓のサイトにアクセスすると、↑の画面になります。

フリーフォント で簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成
フリーフォントを使ったロゴ作成やいろいろな素材の作成が可能なツール。フリーフォントを使ったキーボード画像の作成。フリーフォントを使ったアイコン画像の作成。フリーフォントを使ったはんこ画像の作成。ほとんどのフォントで書いた文章をPDFとしても出力できるWEBサービス。

上記リンクをクリックすると、ロゴ画像を製作できるサイトにアクセスできますので、ここでロゴを作っていきます。

もちろん無料で、ウェブサイト上で製作できるため余計なダウンロードなどはありません。

タイトルロゴの具体的な手順

このサイトの使い方について画像をふまえて詳しく紹介していきます。

主な手順は以下の通りです。

1.ブログタイトルの記入
2.ロゴの幅と高さの調整
3.フォントの設定
4.テキスト文字と縁取り文字の色の設定
5.透過PNGのチェック
1.ブログタイトルの記入

まずは画像赤○のところ、ブログタイトルを記入してください。

私の場合は【メラにっくのゲームブログ】です。
タイトルが長い場合は改行するのも良いですね。

タイトルの入力が完了したら、画像の紫枠のところの【変更】をクリックします。

すると、画面左下にここまで製作した内容が表示されます。

ここで注意点として、何らかの設定をしたら必ず【変更】をクリックしてください。変更をクリックすることで入力した内容が更新され、左下にロゴ画像の進行状況が表示されます。

2.ロゴの幅と高さの調整

次はロゴ画像の幅と高さを変更していきます。
画像左下の黄色い枠を参考にしながら、タイトルロゴがしっかり収まるサイズに調整していきます。

幅やサイズを変更したら、必ず【変更】をクリックしてロゴ画像を更新してください。

3.フォントの設定

その次はタイトルのフォントを変更しましょう。画像の緑枠のところから変更可能です。

フォントはたくさんの種類があるので、いろいろ試してみてください。

試す度に更新を押すのを忘れずに。

私の場合は【アンニャントロマン】というフォントを選択しました。

めらん
めらん

ペルソナっぽい感じですね!

4.テキスト文字と縁取り文字の色の設定

フォントを設定したら、テキストや字枠の色を決めていきます。

字枠とは縁取り文字のことです。

アイキャッチ画像の縁取り文字について

字枠があるかないかで文字の見えやすさはかなり変わってくるので、字枠を設定するとよりおしゃれな感じのロゴ画像が出来ていくと思います。

YouTubeで有名なヒカキンさんはサムネイルでこの縁取り文字を作るのが上手いので、色の使い方やセンスなど是非参考にしてみてください。

操作方法ですが画像ピンクの【テキスト】や【字枠】をクリックし、【色参照】にて色を設定できますのでこれもいろいろ試してみてください。

上手く色が反映されない時は【テキスト(字枠)】→【色参照】を2回ぐらいクリックすると色が反映されえる場合もあります。

試す時は変更のクリックを忘れずに。

私の場合は、テキストを白、字枠をチョコレート(オレンジ)に設定しました。

5.透過PNGのチェック
めらん
めらん

背景画像にタイトルロゴ文字を合成したい場合は、透過PNGにする必要があります!

最後に必要な場合は【透過PNG】をクリックしてください。

透過PNGを選択することで、背景が透明になります。

透過PNGで背景を透明にしているので、私の場合は⇩こんな感じになりました。

完成した透過PNGのロゴ画像を別の画像に合成するとこんな感じ↓になります。

透過PNGだと背景を透過できます

透過PNGは背景が透明になっている画像のことを指します。

合成をする場合は透過PNGの画像ファイルを用意しておくとスムーズに作業が出来ます。透過PNGかどうかは⇩に画像のように、背景が黒とグレーで表示されているかどうかで判別出来ます。

このような背景は、実際にアップロードしてみるとわかりますが、背景は透明になります。

ヘッダー画像はタイトルロゴだけで良い場合は、透過PNGにせずに背景の色を設定したりすると良い感じにできると思います。

タイトルロゴが決まったら

ロゴ画像が決まったら、ダウンロードしましょう。ダウンロードボタンを押すことでダウンロードできます。

ファイルのタイトル名は【free_font〇〇~】になっています。

完成したロゴ画像をワードプレスにアップロードして、次はブログのヘッダーに設定していきましょう。

ロゴ画像をヘッダーに設定する【ワードプレス】

ここからはワードプレスブログの場合の操作になります。

また、WordPressのテーマにより操作が異なる場合があります。

まずWordPressのダッシュボード画面から、

【外観】→【カスタマイズ】

をクリックします。

カスタマイズ画面から

【ロゴ】→【ロゴ画像】

のアップロードを選択して、先ほど製作したロゴ画像を設定することでロゴ画像の設定は完了です。

先ほどダウンロードした画像ファイルは、
エクスプローラーの【ダウンロード】にあります。

※別の画像とロゴ画像を合成する場合

⇧こんな感じで別の画像にタイトルロゴを合成する場合は、イラストとロゴが被らないように上手く調整していく必要があります。

画像とロゴが被らないように調整する手段としては、

・ロゴ画像をもう一度作り直すロゴ側の調整
・画像編集ソフトを利用して調整する画像側の調整

などいろいろな方法があります。

私のヘッダー画像はペイントとAviutl(動画編集ソフト)を利用したものです。
ロゴを左に寄せて、キャラクターやサッカーボールを右に寄せています。

元々のサッカー画像をピクサベイで入手し、Aviutlでキャライラスト(透過PNG)を合成。

その後スクリーンショットでペイントに貼り付けて、【トリミング】や【拡大】機能を使って微調整を行いました。

【ピクサベイ(Pixabay)】フリー画像を探せるサイトの安全性と使い方
...

少し手間がかかりますが、ヘッダーの見栄えはブログを読んでもらう上で大切なものですので、是非自分の納得できるロゴ画像が出来るまで頑張ってみてください。

より凝ったロゴデザインを採用したい場合は、ココナラなどで依頼することを検討してみて下さい。

めらん
めらん

この記事の方法で、気に入ったタイトルロゴが作成出来たならば幸いです。

【SKIMA(スキマ)】口コミと評判を観ずにイラストの依頼をやってみた
...