ブログのタイトルロゴの作成方法

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

現在の記事でブログ開始10日程度なのですが、ブログが初期テンプレート丸出しで質素なイメージを与えがちだったので、色々とスタイルをいじってみました。

特にブログのタイトルが文字のままだと、デフォルト感が出てしまうように思ったので、画像リンク(ロゴ)へ変更をしました。

ロゴの作成には、「業者に頼む」、「無料のロゴ作成サイトを使用」などの手段もありますが、今回は画像ソフトにて加工をして作成しました。作成した方法を紹介したいと思います。

画像ソフトを使用して作成した理由

前述いたしましたが、無料で作成方法の1つとして 「無料のロゴ作成サイトを使用」 という手段もあります。

例をあげますと、以下のようなサイトです。

ロゴ及び画像ジェネレーター

flamingtext

Logo Garden

これらのサイトは企業もロゴの作成に利用しているとのことでハイクオリティなロゴを作成することが可能です。

特にLogo Gardenで簡単に作成できるオリジナルのマークなどは、個人が画像ソフトを使用して作成するには技術が必要そうなので重宝しそうです。

※下記のようなものです

そのため、これらのサイトを使用してロゴを作成することも悪くないかと思います。

しかし、基本は入力した文字に自動装飾されるだけのため、細かい点の修正ができなかったり、無料版だと大きな画像のロゴがダウンロードできないなど微妙に満足できない部分がありました。

そこで自分で色々と調整できるようにするために、自作でロゴを作成してみました。 画像ソフトの勉強をしたかったということもあります。

まずはベースとなる無料画像を探す

タイトルロゴの背景は、イラストなどでもよいのですが今回は写真を使用することにしました。

イラストの背景とは以下のようなものです。

背景に イラスト使用することでバーチャル感が、写真を使用することで現実感が出るように思います。

当サイトは、副業やモテる方法など現実生活のことを記載していく方針なので写真を使用することにしました。

私は無料画像はいつもぱくたそを利用させてもらっています。今回もこちらから検索して取得しました。

当ブログはゴミ人間が書いているので、ゴミの画像を背景としてチョイスしました。

↓背景として選んだ画像


GIMPをダウンロードする

画像ソフトといえば、Photoshopのイメージが強いですが、非常に高価であるため、フリーでソフトを探すことにしました。

スマホで操作をする場合、 Photoshop の無料版である Photoshop Expressの評判がかなり良さそうです。私は、PCでの作業が多いため候補から外しました。

Photopeaというオンラインツールもかなり高性能で評判が良いようですが、ブラウザアプリはどうにもリドゥがしにくいイメージがあるので、デスクトップアプリのほうが良さそうな気がします。

今回は、かなり昔からある Photoshop の代用アプリGIMPを使用することにしました。非常に高性能で操作性も良いです。

窓の社(以下のリンク)からダウンロードし、インストールを行いました。

https://forest.watch.impress.co.jp/library/software/gimp/

画像を適切なサイズに切り出す

画像のサイズですが、縦の長さは100px~400px程度あれば十分なので、切り出しを行ってサイズを変更します。当サイトのもので300pxくらいですが、かなり太めに見えるので、平均からすると200px程度かなと思います。

また、最近のブログなどを見ると、当サイトのように横に長いバナーは少なく、横の長さも短いものが多いですね。横の長さも短いほうが、スタイリッシュなイメージになるかと思います。

実際の作業ですが、まず画像を右クリックし、「プログラムから開く→GIMP」を選択してGIMPで画像を立ち上げます。

アイコンの一覧から下記赤枠の切り取りアイコンを指定し、切り取る範囲を選択すれば切り取りが完了します。

切り抜こうとしている画像のサイズは、画面の左下に表示されています。

画像の文字を入れる

ここから画像を色々加工していくのですが、最低限サイト名は必要だと思うので文字を画像の上に挿入します。

アイコン一覧から「A」と記載されいてるアイコンを選択し…

下記の欄にフォント、文字色、サイズなどを選択し、文字を挿入したい画像の部分をクリックします。

フォントはブログのフォントと合わせるのが良いかと思ったのですが、面白みがない感じが出てしまったので、私は丸みのあるArialを選択してみました。

文字色は、画像と同じ色だと見にくくなってしまうので画像の背景と別の色を使用します。

殆どの場合において、白系と黒系のどちらを使用しても見にくい感じになってしまいます。

画像には明るい部分と暗い部分の両方が含まれることが多いからです。そこで、「画像を明るくして黒系を使用する」か「画像を暗くして白系を使用する」のどちらかを実施して文字を見やすくします。

メニューバーから「色→明るさ-コンストラクト」を使用して画像の明るさを調整します。

明るさをかなり下げたところ、全体が黒系になったため白色の文字が非常に見やすくなりました。

後は文字色が均一で面白みがなかったため、「にじみ」を使用して文字色をコントラストにしました。

完成品

うーん…改めて見るとセンス0な気がしますw

30分程度でそれっぽいものが完成できたので、自作した事自体は良かったと思います。


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

SNSでもご購読できます。

コメントを残す


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)