天使のたまご

アクセスカウンタ

zoom RSS Photoshop Elements でイラストを描こう♪〜カスタマイズ用の背景画像を作る(2)

<<   作成日時 : 2007/12/22 21:42   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

前回は新規ファイルにイラストの人物を合成、不透明度を下げるところまで説明しました。今回はそれに、ダウンロードした素材を加えて完成させます。

画像←フリーの素材サイトからダウンロードした素材、100×200ピクセルのgif画像です。
これを新規ファイルの左端に縦方向へ重ね、柱のように見せるわけですが、詳しい方法は「Photoshop Elements でイラストを描こう♪〜背景を作る」と同じなので、そちらをご参照下さい。

そんなちまちました、ハンドメイドっぽいやり方はイヤ・・・という場合は、「パターンの定義化」コマンドを使えばいいかも知れません。
まず「マイピクチャ」から、メニューバーの「ファイル」→「開く」で目的の素材を呼び出し、ウィンドゥがアクティブになっているのを確認のうえ、「編集」→「パターンの定義化」とクリック。ダイアログボックスが出るので、素材がサムネイル表示されているのを確認し、名前を変える必要が特になければそのまま「OK」ボタンを選択して閉じます。
次に柱と同じ大きさの新規ファイルを作り(例の場合は素材の幅100ピクセル×イラスト全体の高さ650ピクセル)、メニューバーの「編集」→「塗りつぶし」をクリック。ダイアログボックスの初期設定では「描画色」となっているプルダウンメニューから「パターン」を選ぶと、「カスタムパターン」にサムネイル表示が出ます。すべてのパターンを表示させると、定義化した素材が格納されている筈なので、それを選択して閉じればOK。なお今回使用する素材はもともとほぼモノトーンで、色を薄くする必要がないため、「不透明度」は100%に設定しておきます。
柱が出来たらこの後、「イメージ」→「サイズ変更」→「カンバスサイズ」で右方向へ大きくし、変更後のファイルサイズを高さはそのまま、幅だけ必要なピクセルにします。つまりこの手を使う場合は、先に左端の柱を作ってから、カンバスを大きくしたファイルに人物イラストを合成する・・・という順序になるわけですね。
なぜ最初から必要なカンバスサイズにしないかというと、その場合パターンでカンバス全体が埋め尽くされてしまうからです。背景画像には適しません。
自分でやってみた事はありませんが、たぶんこの方法で上手くいくと思います。

画像←これもダウンロードした素材、246×188ピクセルのgif画像。人物の背後とまわりに配置します。
「選択範囲」→「すべて選択」した後、ツールボックスの「移動ツール」で人物イラストを合成したファイルに移動させますが、人物の後ろへちょっと隠すように配置する場合は、レイヤーの重ね順にご注意下さい。
「パレット格納エリア」のレイヤータブをクリックし、人物の合成されたすぐ下のレイヤーをアクティブにしてから、「移動ツール」で適当な位置へ合成しましょう。(「移動ツール」は自動的に新しいレイヤーを作るので、わざわざ「新規レイヤー」を作る必要はありません)
なお人物の不透明度が低いため、下のレイヤーへ合成しても素材が薄く透き通ってしまいます。わずかに重なるくらいならそれも効果になるでしょうが、あまり広い部分を重なり合うように配置するのはお勧めできません。

またダウンロードした素材がそのままだと人物に比較して大き過ぎるとか、遠くにあるように見せたいという場合は、素材を縮小してから配置します。「移動ツール」で移動させるとき、オプションバーの「バウンディングボックスを表示」をチェックしておいて下さい。その四隅へマウスを移動させると、ポインタが矢印に変わるので、「shiftキー」を押しながら内部へドラッグ、必要なだけ縮小し、位置もOKとなったら、○×ボタンで確定します。
小さな素材は拡大すると画質が劣化してしまうため、あまりやらないほうがいいでしょう。

さてこれで、ブログテンプレートをカスタマイズするための背景画像ができました。「レイヤー」→「画像を統合する」で、jpeg画像として保存します。
ブログにアップロードできるファイルの容量は、運営するサイトによっても違いますが、大体は500KB以下です。保存の際圧縮率が500KB以下になるようにし、ファイル名も半角英数文字でつけましょう。かな文字や全角では、画像が表示されない場合があります。

これも違う素材とイラストの組み合わせ、同じ方法で作った背景用の画像。↓

画像

元の大きさは800×600ピクセル、表示サイズを1/4にしてあります。

カスタマイズ初心者はまず、背景画像が固定され、テキストだけがスクロールするタイプのテンプレートを探しましょう。FC2などはユーザーの作ったテンプレートがダウンロードできるよう提供され、種類も豊富なので容易く見つかると思います。
ダウンロードしたテンプレートの編集画面へ移動すると、「HTMLソース」と「スタイルシート」に分かれている筈です。「スタイルシート」のほうを見て下さい。
body」部分に、背景が色であれば「background-color」、作成者の用意した画像であれば「background-image」と書かれている箇所が見つかるでしょう。

色指定の場合は
background-color: 色 →background-image: url("画像のバス");と書き換え、
画像の場合は「画像のバス」部分のみ入れ替えます。

では自分が作った画像のバスは?というと、まず画像ファイルをブログのファイルマネージャ等、ファイル置き場へアップロード、新規作成画面で「画像の貼り付け」をします。するとHTMLタグの中に、「http ・・・html」と画像のアドレスが出ますね。それをコピーし、スタイルシートの該当部分へペーストすればいいわけです。
ただしスタイルシートを「適用」する前に、必ず「ブレビュー」画面で確認すること。セミコロンを書き忘れていたり、ちょっとした記述ミスで反映しない事もありますし、滅多にないですが、何らかのエラーでレイアウト全体が崩れないとも限りません。
記述ミスでなく、他に理由もわからなくて反映しない場合は「適用」せず、テンプレート作成者のブログなどへ問い合わせしてからにしましょう。
「書いてある通りやったけどできなかった、どうしてくれる」と云われても、一例をご紹介しているだけなので責任の取りようがありません。カスタマイズするときはあくまでも、個々の判断と責任においてなさるようお願いします。m(__)m

なおその他の簡単なカスタマイズ法は
はじめてのFC2カスタマイズに詳しいので、よろしかったらご参照下さい。

関連記事
→「Photoshop Elements でイラストを描こう♪〜ダウンロードした素材に合成する
→「Photoshop Elements でイラストを描こう♪〜カスタマイズ用の背景画像を作る(1)

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
Photoshop Elements でイラストを描こう♪〜カスタマイズ用の背景画像を作る(2) 天使のたまご/BIGLOBEウェブリブログ
文字サイズ:       閉じる