ブログカスタマイズ -背景編 その②-

では今回は実際に背景を作成していこうと思います。
使用するソフトはPhotoshop。
やっぱあると便利ですね。


ということでまずはPhotoshopを起動。
適当に幅と高さを1200pixelあたりに設定しときます。

そして次に[表示]→[新規ガイド]を選択。

これでヘッダー部分が分かるようにガイドを作っていきます。

アメブロのヘッダーは幅980pixelなので、

新規ガイドはそれぞれ

垂直方向に110px
垂直方向に1090px

に引けばヘッダーの幅のガイドは完成。

あとは自分の作りたいヘッダーの高さに合わせて
水平方向にガイドを引きます。
今回私はヘッダーの高さを420pixelにしたので、ガイドの水平方向は420pxにしました。
また、ヘッダーの中心が知りたいので垂直方向に600pxも引いておきました。

というわけでガイドを引いたらこんな感じになります。

続いて背景を塗ります。
今回は一番下の背景はこの

壁紙にします。
単色よりちょっと模様があったりしたら雰囲気が出ていいですね。
壁紙素材は無料のものが色々あるので探してみてください。

Photoshopでこれで塗りつぶすときはパターン化すれば楽です。

まずこの素材をPhotoshopで開き、

[編集]の[パターンを定義]でこの図形をパターン化します。
すると

[塗りつぶしツール]の[パターン]に

先ほどの壁紙画像がパターンとして取り込まれています。

あとはそれで背景を塗りつぶせば

一番下の背景は完成。

続いてヘッダーの背景部分を作成して行きましょう。

今回のブログ背景のヘッダー部分にはこの

青空と草原の絵を敷きたいと思います。

とりあえずこれをまずはPhotoshopに取り込み、

適当にガイドに合わせてヘッダーの部分だけ切り取れば、

こんな感じになります。

ですがこれでは終わりません。
なぜなら、この状態をヘッダー部分に敷き詰めれば、

こんな感じに端の部分が上手く繋がらず、いかにも絵を敷き詰めました感が出てしまいます。
これを解消するには絵の両端が繋がるように加工しないといけません。
ちょっと面倒くさいです。
私は絵もかけませんし。

とりえあえず私はどうしたか。
まずはこの絵を複製し左右を反転させます。

これで繋げれば一応、左右は同じ絵になるので繋がりますよね。

ですがただつなげただけでは不自然極まりない。
そこで片方の端をちょっと削除し、

少しずつずらして違和感のないところまで合わせれば、

まぁ、まだマシな絵になったでしょうか？
これをもう片方の草むらでも行い、その後ヘッダーに合わせて画像を縮小すれば

こんな感じ。
空に違和感がある？
別に後でこの上に絵を乗っけるから問題ないさ。

これを敷き詰めたら、

こんな感じになり、絵と絵の繋ぎ目はまだ違和感がない感じになりました。
ホントは空とか弄って違和感をなくしたほうがいいんでしょうね。
・・・そういや普通にPhotoshopの自動塗りつぶしをすればいいんじゃね？

なんかこのブログを書いてる時に思いついちゃって実際にやってみました。
Photoshopの自動塗りつぶし。

まずは塗りつぶしたい部分、今回で言えば違和感のある雲の部分を選択し、
[編集]の[塗りつぶし]を選択。

そして[コンテンツに応じる]で塗りつぶせば、その部分を周りの背景から違和感のないように塗りつぶしてくれます。

で、試行錯誤すること数回。
どうなったかというと・・・・。

おお！
何か雲がコピペっぽいけど中央のシンメトリーさはなくなりましたね。
まぁ、しばらくはこれでいきますか。

あとは背景に合わせるためにこの画像の上のレイヤーに壁紙を張り、透過度を30％くらいにすればヘッダーの背景は完成です。

ヘッダーの大きさ（幅980px、高さ420px）サイズに切り取り、[Web用に保存]します。

これで.『skinBody』と『.skinBody2』の背景が揃いました。

次はいよいよCSSをいじっていきます。
今度で背景編は終了ですね。

ではでは。

>>背景編　その③へ