本ページはプロモーションが含まれています

Stinger3カスタマイズ;ヘッダー画像の差し替えとSNSのカバー画像も作成。

eye_catch

ブログのヘッダー部分のカスタマイズをしようと色々イジッていたんですが、、、

何と、元々のヘッダーバナー、Stinger3のバナーとサイズが違っている事が判明。。。

  • Stinger3バナーサイズ: 986×150
  • 元のバナーサイズ      :946×150

でした。

 

どうやら数値を見間違えた模様で、40pxも幅が小さい。。。

そもそも、元々のヘッダーバナーは、Paint.netというフリーのレタッチソフトでチャチャっと作ったものなので、

画像も荒かったですしね~。

という訳で、今回はInkscape(インクスケープ)でチョットだけマジメにバナーを作ってみました。

 

出来上がったのがこちら。

header2

一応、ファビコンとの整合性を意識してみました。

 

スポンサーリンク

そもそもペイント系とドロー系の違いは?

最初にバナーを作った時に使ったのはペイント系のPaint.net。

今回は、ドロー系のInkscapeで作成しました。

 

そもそもペイント系とドロー系で何が違うかというと、

一言で言えば「描画された画像やテキストがオブジェクトで管理されるかどうか」の違いです。

(オブジェクト管理される方がドロー系)

解り難いですね。www

 

まぁ、「何かしらの図形やテキストを描いて配置を変えたり、拡大縮小するのにはドロー系ソフトの方が向いている」と覚えておくと良いのかも。

逆に色塗りなどの繊細な作業はペイント系の方が向いてます。

なので用途に応じて使い分けると良いと思います。

 

という訳で、ペイント系とドロー系、それぞれ一つづつ使いこなせると画像関係でできる幅が格段に広がります。

 

ちなみに、ドロー系ソフトで有名なのが Adobe Illustrator、ペイント系ソフトの場合は、Adobe Photoshop といったところでしょうか?

どちらもお高いですね。www

 

なので、バナーやアイコン作成ぐらいしか用途が無い僕としては、フリーソフトでOKとしています。

フリーソフトの場合、ドロー系は Inkscape、ペイント系ソフトの場合は GIMP が有名です。

(僕の場合、操作が直観的に解りやすい Paint.net を長年愛用していますw)

 

 

ついでにSNSのバナーも作っておく

せっかくなので、ブログヘッダーを作るついでに、SNSのカバー画像も作っておきました。

こういう時、オブジェクト(描いたテキストや画像)の流用が出来るのでドロー系は便利で良いですね。

 

各SNSのカバー画像サイズは下記の通りです。

  • Facebook: 851 × 315px(100キロバイト以下のJPG画像推奨)
  • Twitter: 1500 × 500px
  • Google+: 1080 × 608px(アップ時の推奨サイズ)

ただし、それぞれPCで見る場合には良いんですが、スマホで見ると両端がカットされるようですので、

デザインのポイントになる部分は中央に寄せ気味が良いのかも。

 

という訳で、出来上がったカバーがこちら。

Facebook_cover

Facebookカバー用画像

twitter_cover

twitterカバー用画像

google_plus_cover

Google+カバー用画像

相変わらず、デザインセンスは。。。(T T)

ブログ上で並べると解り難いですが、一応タイトル部分は固定サイズで、周囲のサイズだけを変更しています。

 

見え方に興味がある方は、各SNSで確認してみて下さいね。^^

 

バナーを適応して完成!

後は、出来上がったバナーを適応すれば終わりですね。^^

全体的に、少しだけ印象が良くなった気がします。^^

 

以上、バナー作成はドロー系の方が何かと便利ですよ~という話でした。

(いやいや、ちゃうやろ!www)

 

 

以上、今回は特筆する程の内容でもないような気も。。。

タイトルとURLをコピーしました