Wed, May 13, 2009 23:42:51
自分で作る・ペタバナー＆プロフ画１
テーマ：ピグ★ガイドオリジナル画像作成が流行ってきていますね。
もしかして
ということで責任を取って、
（何の責任だ？っつーツッコミはナシね）
自分でできるペタ画＆プロフ画作成方法を
ご紹介します。
先日使いやすいと紹介したPaint.NETを利用ですので
Windowsの方ならまず作成可能です。
（さえら自身もこのソフト使うの５～６回目なので
初めての方でも感覚的に使えると思います）
Macの方も、基本操作はほぼ一緒ですので
レイヤーが使えるレタッチソフトで
作成してみてください。
まず、先日の「フリーソフトで背景を消す」方法で
使いたいピグ画像を準備しておきます。
この際、画像の縦サイズを150にしておきます。
↑今回はこの画像を使います。
背景は透明になっています。
ペタバナー作成に入ります。
ソフトを起動し、ファイルから新規作成を選びます。
画像サイズを指定します。
綺麗に作るために、3倍の大きさにしています。
ペタバナーは150×50ピクセルなので
作成時は450×150です。
なので、貼り付ける画像も縦150に合わせておくのです。
キャンバスが開きます。
背景を透明にしたい場合は、
この段階でレイヤーを追加し、
背景レイヤのチェックを外しておきます。
角が丸い四角のテクスチャをかけます。
余白をちょっと入れたほうが、綺麗に出来上がります。
テクスチャをかける前に色を変更すれば
カラーで枠の作成ができます。
（今回はわかりやすいように黒のままです）
カラーを選び、バナーボタンの背景を染めます。
塗りつぶされました。
この段階で、描画色で模様をつけることも出来ます。
画面上のツールバーに模様がありますので、
プルダウンから選択して
塗りつぶす場所のクリックで出来上がります。
文字を載せるためのレイヤーを追加します。
右下のレイヤー表示に「レイヤー２」と出れば追加完了です。
文字を入れます。
フォントや文字の大きさをツールバーにあるガイドで変更します。
見本の文字サイズは36です。
文字を入れる場所がずれていても
右下の十字マークで移動調整できます。
画像を貼るためのレイヤーを追加します。
ここで「ファイル→開く」で、
先に作成していたピグ画像を開きます。
画像全体を選択し、コピーします。
右上のキャンバス一覧からバナーキャンバスをクリックして戻り
レイヤー３に貼り付けます。
ツールボタンの「移動」をクリックし
レイヤー３の画像位置を調整します。
見本では、中央寄りに移動させました。
Ctrl+Dで選択範囲を解除させておきます。
レイヤー２も同じようにして移動可能です。
ピグとの間を狭めで中央に寄るようにしました。
移動したらCtrl+Dで選択枠を解除します。
レイヤーが３つ重なっている状態を保存します。
ここで保存しておけば、後で手直ししたい部分が見つかったときに
レイヤーだけ差し替えという技が使えます。
保存ができたら、縮小します。
ペタバナーサイズの150×50になるように
縦横比固定のままで実行します。
「別の名前で保存する」にし、
Png画像形式で保存します。
この画面では何も弄りません。
そのままOKをすると、レイヤーの統合を求められますのでOKします。
履歴に「平面化」と出てレイヤーが消えていれば完了です。
↑出来上がりです。
画像フォルダにUPし、画像のURLをコピーします。
これをタグエディタか標準エディタのHTMLタグ表示モードで開いて
ペタ画像のURLと差し替えれば
ペタボタンの配置完了です。
長くなったので、プロフ画像はまた後日。
1 ■天使さまぁ～～～♪
うれしーーーです。
さえらさんのペタバナー見て、どーーーしてもやりたくて試行錯誤の真っ最中でした。
早速、試してみたいと思います。
ありがとーーーーーー♪