公開されている物を使うのは簡単ですが、どうせですから、自分の撮った物にしましょう。
Blogger のテンプレートは、今は、「シンプル」を採用していますので、これを前提にします。
使われる写真は、横に長いバナー状の表示になりますし、文字との干渉も考えられます。
撮った写真をそのまま使うと上部のみの使用となるため、写真選定はかななか難しそうです。
そこで、今回も GIMP 2.6.7 で加工した画像を使います。
日本は季節感のある国なので、ブログにも季節感を感じてもらうために、後々簡単に写真を入れ替えられる方法にします。
先ずは下準備！
Blogger の現在の画面をイメージファイル(ex. blogger.jpg) として準備します。
この時、作業しやすいように、Blogger の背景画像は単純なものを選びます。
また、タイトルの文字の大きさを変えない前提で、タイトルのみとタイトル＋説明付きの画面上での高さを把握しておきます。
GIMP でClipboard 経由の取込み方もありますが、今回は、素材を事前に用意する方法で説明します。
初心者はきっとこの方が分かり易いのでは ... 。
以下 GIMP での作業です
1. blogger.jpg の取込
1-a. [ファイル]>[レイヤーとして開く]>ファイルを選択します> * レイヤー名を変更 (Blogger Title...) します
* レイヤー名変更：{レイヤー,チャンネル,...}でレイヤーを選択し右クリック>[レイヤー名の変更]>分かり易い名前をつける
1-b. [色]>[色を透明度に]>白が選択されているのを確認します>[OK]
2. GIMP の背景の準備
2-a. {ツールボックス}で描画色をクリックし適切な色に変更します
2-b. [レイヤー]>[レイヤーを追加]>レイヤー塗りつぶし方法を描画色に> * レイヤー名を変更(For Work ...) します
3. GIMP の背景の準備２ (省略可能)
2-a. および 2-b. の作業を別の色 (白を推奨) で繰り返します
2. で作成したレイヤーを非表示にした時の状態が以下です
 |
| blogger.jpg (ペイントで作成したイメージ) |
4. Blogger の背景に使う予定の写真の取込 (複数推奨・後日追加可能)
4-a. [ファイル]>[レイヤーとして開く]>ファイルを選択します> * レイヤー名を変更 します
4-b. [レイヤー]>[レイヤーの拡大･縮小]>幅を 2000 弱にします (トリミングする場合は大きめに)
以上で主要な材料は揃いました。
続いて、作業し易いように、いくつかのレイヤーを加えます。 説明は端折ります。
5. レイヤーBlogger_Title ... で透明化した、Blogger のヘッダー以外の部分が透過しないようレイヤを追加
透明背景で画面下部の描画色が白のレイヤーを作ります
これで、GIMP 上での見た目が WebBrowser 上の表示のようになります。
写真を非表示にした時の状態が以下です
6. 写真の位置決め
{レイヤー,チャンネル ...}で写真を選択して、{ツールボックス}の移動を選択し、写真をドラッグして見ましょう。
写真のお気に入りの位置が決まれば、Blogger の背景としてアップするファイルを作成するステップに移ります。
その前に、ひとこと、ふたこと！
Blogger のシンプルテンプレートでは背景は左上を原点に固定されます。
Blogger のタイトルは WebBrowser の画面サイズに応じて、横位置が変わります。
そこで、お勧めは、透明背景のレイヤーを追加し、タイトルの位置に不透明度 10-20% の白い帯を塗りつぶせばＯＫ！
GIMP は画像編集が可能なソフトです。
是非、色々な編集を試して見てください。 色の調整や、回転や、フィルタ効果等もオモシロい ... 。
文字を加えたりする場合も、透明背景のレイヤーを重ねることで、柔軟性に富んだ画像を作れます。
取り敢えず、作成した GIMP の画像を保存しましょう！
GIMP のタイトルバーのファイル名拡張子が .XCF になっているのを確認し、[ファイル]>[保存] です。
いよいよ、最後です。
調整した写真の画像をファイルとして書き出します。
先ず、レイヤーの選択です。
必要なのは、元画像(写真)と、加工用の透明背景レイヤー群です。
下図を参考にレイヤーの可視性 (目のアイコン) を切り替えてください。
そして、[ファイル]>[名前を付けて保存]>[ファイルタイプを選択]> jpg か png を選択して保存
このように、ひとつの GIMP ファイル (XCF) 内に複数の写真を持たせ、適時、写真を切り替えて別ファイルに出力できます。
Blogger にはアップできる画像サイズに制限があるようです。 注意しましょう！
さあ、出来上がった画像を Blogger の背景にしましょう！
0 件のコメント:
コメントを投稿