自分で作る・ペタバナー&プロフ画1
オリジナル画像作成が流行ってきていますね。
もしかして
![立向う](https://stat.ameba.jp/user_images/20090506/13/caetla-2008/47/31/p/t00400050_0040005010176534582.png?caw=800)
ということで責任を取って、
(何の責任だ?っつーツッコミはナシね)
自分でできるペタ画&プロフ画作成方法を
ご紹介します。
先日使いやすいと紹介したPaint.NETを利用ですので
Windowsの方ならまず作成可能です。
(さえら自身もこのソフト使うの5~6回目なので
初めての方でも感覚的に使えると思います)
Macの方も、基本操作はほぼ一緒ですので
レイヤーが使えるレタッチソフトで
作成してみてください。
![Piggバナー大](https://stat.ameba.jp/user_images/20090509/07/caetla-2008/98/f3/p/t01120035_0112003510178020618.png?caw=800)
まず、先日の「フリーソフトで背景を消す」方法で
使いたいピグ画像を準備しておきます。
この際、画像の縦サイズを150にしておきます。
![Ca et la-お辞儀](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/17/02/p/t01110140_0111014010180481764.png?caw=800)
↑今回はこの画像を使います。
背景は透明になっています。
ペタバナー作成に入ります。
![Ca et la-ペタ1](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/ed/d9/p/t02200177_0600048410180481769.png?caw=800)
ソフトを起動し、ファイルから新規作成を選びます。
![Ca et la-ペタ2](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/42/9a/p/t02200177_0600048410180481775.png?caw=800)
画像サイズを指定します。
綺麗に作るために、3倍の大きさにしています。
ペタバナーは150×50ピクセルなので
作成時は450×150です。
なので、貼り付ける画像も縦150に合わせておくのです。
![Ca et la-ペタ3](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/05/42/p/t02200179_0600048710180481784.png?caw=800)
キャンバスが開きます。
背景を透明にしたい場合は、
この段階でレイヤーを追加し、
背景レイヤのチェックを外しておきます。
角が丸い四角のテクスチャをかけます。
![Ca et la-ペタ4](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/0e/b3/p/t02200177_0600048310180481796.png?caw=800)
余白をちょっと入れたほうが、綺麗に出来上がります。
テクスチャをかける前に色を変更すれば
カラーで枠の作成ができます。
(今回はわかりやすいように黒のままです)
![Ca et la-ペタ5](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/8f/eb/p/t02200177_0600048210180482831.png?caw=800)
カラーを選び、バナーボタンの背景を染めます。
![Ca et la-ペタ6](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/08/bc/p/t02200178_0600048610180482835.png?caw=800)
塗りつぶされました。
この段階で、描画色で模様をつけることも出来ます。
画面上のツールバーに模様がありますので、
プルダウンから選択して
塗りつぶす場所のクリックで出来上がります。
![Ca et la-ペタ7](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/04/c8/p/t02200176_0600048110180482841.png?caw=800)
文字を載せるためのレイヤーを追加します。
右下のレイヤー表示に「レイヤー2」と出れば追加完了です。
![Ca et la-ペタ8](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/2d/f4/p/t02200177_0600048310180482845.png?caw=800)
文字を入れます。
フォントや文字の大きさをツールバーにあるガイドで変更します。
見本の文字サイズは36です。
文字を入れる場所がずれていても
右下の十字マークで移動調整できます。
![Ca et la-ペタ9](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/13/20/p/t02200178_0600048510180482853.png?caw=800)
画像を貼るためのレイヤーを追加します。
![Ca et la-ペタ10](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/99/74/p/t02200177_0600048310180483856.png?caw=800)
ここで「ファイル→開く」で、
先に作成していたピグ画像を開きます。
![Ca et la-ペタ11](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/df/68/p/t02200177_0600048410180483861.png?caw=800)
画像全体を選択し、コピーします。
![Ca et la-ペタ12](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/37/6e/p/t02200177_0600048210180483867.png?caw=800)
右上のキャンバス一覧からバナーキャンバスをクリックして戻り
レイヤー3に貼り付けます。
![Ca et la-ペタ13](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/f6/d9/p/t02200179_0600048810180483874.png?caw=800)
ツールボタンの「移動」をクリックし
レイヤー3の画像位置を調整します。
見本では、中央寄りに移動させました。
Ctrl+Dで選択範囲を解除させておきます。
![Ca et la-ペタ14](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/52/2c/p/t02200178_0600048610180483879.png?caw=800)
レイヤー2も同じようにして移動可能です。
ピグとの間を狭めで中央に寄るようにしました。
移動したらCtrl+Dで選択枠を解除します。
![Ca et la-ペタ15](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/3d/a8/p/t02200177_0600048310180484588.png?caw=800)
レイヤーが3つ重なっている状態を保存します。
ここで保存しておけば、後で手直ししたい部分が見つかったときに
レイヤーだけ差し替えという技が使えます。
![Ca et la-ペタ17](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/e9/d8/p/t02200178_0600048610180484599.png?caw=800)
保存ができたら、縮小します。
ペタバナーサイズの150×50になるように
縦横比固定のままで実行します。
![Ca et la-ペタ18](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/81/17/p/t02200175_0600047810180484608.png?caw=800)
「別の名前で保存する」にし、
Png画像形式で保存します。
![Ca et la-ペタ19](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/e9/a7/p/t02200177_0600048410180484615.png?caw=800)
この画面では何も弄りません。
そのままOKをすると、レイヤーの統合を求められますのでOKします。
![Ca et la-ペタ20](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/b6/90/p/t02200178_0600048510180484969.png?caw=800)
履歴に「平面化」と出てレイヤーが消えていれば完了です。
![Ca et la-ペタバナー](https://stat.ameba.jp/user_images/20090513/23/caetla-2008/4c/e1/p/t01500050_0150005010180484976.png?caw=800)
↑出来上がりです。
画像フォルダにUPし、画像のURLをコピーします。
これをタグエディタか標準エディタのHTMLタグ表示モードで開いて
![ペタしてね](https://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_01.gif)
ペタ画像のURLと差し替えれば
ペタボタンの配置完了です。
長くなったので、プロフ画像はまた後日。