【ブログカスタマイズ】Photoshopでヘッダー画像を作成したのでその経緯などを紹介

更新日:

思い切ってブログの雰囲気を変えてみました。

※現在はWordPressに移行したため、記事内容が一部異なっております。

ざっくりですが画像作成の経緯や、その他カスタマイズしたことなどを紹介します。

以前はこのヘッダー画像を使っていました。

f:id:marsweexavi:20160818105946j:plain

この画像を作った当時は「とりあえずこれで」って感じで使ってましたが、今回はちゃんとヘッダー画像を作ってみました。

ブログタイトルはSEO的には画像より文字を使った方がいいって話を聞きますが、あまり気にしてません。というかこの辺の差異は良く分かりません。

では、変更の経緯などなど。

Photoshopでヘッダー画像を作成

画像完成までの流れを追ってみたいと思います。

完成イメージ

「末永くゆっくりのんびりブログをやっていこう!」という想いから、象をロゴにすることに決めていました。マンモスのがかっこよかったけど。

頭の中でイメージした画像は以下の感じ。

  • ちょいポップな感じ
  • なるべくフォントで遊ぶ
  • フラットデザイン

こんなイメージで作業開始しました。

CGが本職なので、3DCGソフト「MAYA」を立ち上げ、象のモデリングを開始しようとしたんですが・・

「こりゃ面倒くせぇな。」

と、すぐに気づいたので・・・

Adobe Stockでロゴを購入

ロゴのメインとなる象の画像をAdobe Stockで購入しました。

Adobe Stock

購入した画像データはこちら(Illustrator形式「.ai」でダウンロードしました)

※著作権保護のため画像はサンプルです。

f:id:marsweexavi:20160818110213j:plain

購入すれば画像をロイヤリティフリーで使用でき、Adobeのデータ形式でダウンロードできますが、特にAdobe Stockをオススメすることはありません。

画像だけ購入したい人は同じAdobeが運営しているフォトサイト「Fotolia」をオススメします。

かなりお安く画像が買えますよ。

Fotolia

Photoshopで文字を作成

先程の象のロゴをPhotoshopに読み込み、全体のレイアウトを決めつつ、文字ごとにフォントを変えたり、文字サイズや色、行間などを超細かく詰めていきます。

かなり地味でマニアックな世界ですね。

f:id:marsweexavi:20160818111121j:plain

ちょっとしたアクセント素材を作成

別途、象のロゴを作成し文字に重ねる演出をしてみました。

この象さんロゴを作成して

f:id:marsweexavi:20160818111237j:plain

「MACHOLOG」の「O」に挿入してみた。

f:id:marsweexavi:20160818111310j:plain

どうでしょうか。

個人的には「か~わ~い~いぃ~☆もうどんだけぇ~♪」と思っています。

そして、色々とカラーリングの微調整なんやらをしてヘッダー画像が完成。

いいんでない?

MACHOLOGって読める?(←これが一番心配)

f:id:marsweexavi:20160818111424j:plain

ついでにブログテーマ変えた【naked】

はてなカスタマイズでお馴染みのゆきひーさん id:ftmaccho が作成したテーマ『naked』を使わせてもらいました。

 

非常に使い勝手が良さそうで、レスポンシブがいい感じなんですよ。

グローバルメニューの仕様も気に入ったので使わせてもらいました。

ただし、テーマを変更するに当たり、誰のブログか分からなくなっちゃうのを避けるため、カラーリングだけは変えないように心掛けました。

→※現在はWordpressに移行し、テーマ『STORK』を利用しています。

スマホはレスポンシブにしてみた

レスポンシブにすることはスマホ専用の広告を捨てることになるので勇気が必要でしたが、とりあえずはしばらく様子を見てみます。

Googleはレスポンシブを推奨しているようですが、個人的には完全に納得できてはいません。

この記事が分かりやすかったです。

レスポンシブWebデザインのメリット・デメリットをわかりやすく!解説|Tips*Blog|株式会社コプロシステム

レスポンシブにしたことでスマホ版の見映えは良くなったと思うので、このブログのPC版とスマホ版を比較して貰えたら嬉しいです。

まとめ

ヘッダー画像だけを変えるつもりが、気がついたらテーマごと変えてしまうという暴挙にでましたが、なかなか気に入ったデザインにまとまりました。

ざっくり紹介してしまいましたがご報告まで。

ではでは。

  • ロゴ作成用参考書籍

コチラの記事も読まれています。

-サイト運営

Copyright© MACHOLOG , 2017 All Rights Reserved.