2006/05/12 （ｃ） Gucky 1 AzPainterを使って
リンクバナーを作ってみよう
取り合えず
バナーやアイコンを作ってみましょう(^^)
※本原稿作成に際し、Azel 氏作成のフリーペイントソフト”AzPainter”を使用させて頂きました。 軽くて使い易いツールをフリーで公開して頂いている事に感謝したいと思います。2006/05/12 （ｃ） Gucky 2
目次
はじめに p3 AzPainterのインストール p4 今回作成するのは p5 『AzPainter』の起動 p6 1st step 背景画像の読込みとサイズ変更 p7 2nd step タイトル文字を描く p12 3rd step レイヤを使って飾りつけ p18 4th step 仕上げとファイル保存 p22 おまけ p27 あとがき p282006/05/12 （ｃ） Gucky 3
最初に
「リンクバナーを作ってみよう」と言うタイトルですが、大した事は伝授できません。 んでは、何の記事かと言うとですね、日頃画像加工をしている筆者なのですが、 「自分でもバナーやWebページのボタン位作りたい！」 と言う友達がおりまして相談を受けたことがあります。 日頃筆者はAdobe社のPhotoshopなんて高価なソフトを使っておりまして（と言って も機能の１０％位しか使えてない自覚はあります^^;）、その使い方なら教えられる （範囲限定にて）のですが、"さぁそれじゃ買って！"とは言えないぢゃないですか？ それで、Webにてツールを探していたら、軽量コンパクトでとっつき易そうなツールを 発見！ それじゃ、このツールを使って友達に教えるのに、“簡単な説明書くのであればWeb で公開しちゃいましょう！"と言う乗りでこの記事を書いています。 ですので、使うツールは筆者も初心者ですから、"簡単なバナー作成をご一緒に"程 度の乗りで書きますのでよろしくです。2006/05/12 （ｃ） Gucky 4
AzPainterのインストール
使用するツールは『AzPainter』です。素晴らしいフリーツールを提供
してくださる、作者の Azel さんに感謝したいと思います
はい、『AzPainter』ですが、なんとアプリケーションのサイズはフロッ
ピー１枚分も無いんですよ。しかも、変にレジストリも汚しませんから
手軽にお試しできますよ
では、『AzPainter』はご自分で導入頂くとして、インストールは至って
簡単。
Azel さんのサイト
もしくは
Vector
からダウンロードしてきて、
適当なフォルダに解凍するだけ(^^)
解凍して出てきた［AzPainter.exe］をダブルクリックすれば即使えま
す
2006/05/12 （ｃ） Gucky 5
今回作成するのは
今回のバナーは背景に写真画像の一部を使って、上に
Webサイトのタイトル文字を乗せたものを作ってしましょ
う。素材の写真は適当なものを使ってください。バナーの
サイズは幅２００ピクセル高さ４０ピクセルとします
（まよいがの杜のリンクバナーが大抵このサイズです）
ここでは取り合えずサンプル画像
として、右の海中の画像を使いた
いと思います。元画像のサイズは
３２０ｘ３２０ピクセルのものです
（画像は適当に準備してください）
完成予定は下のバナーですよ
2006/05/12 （ｃ） Gucky 6
『AzPainter』の起動
［AzPainter.exe］をダブルクリックし、『AzPainter』を起動します。起動した ら以下のウィンドウ群が表示される
2006/05/12 （ｃ） Gucky 7
1st step 背景画像の読込みとサイズ変更
以下の手順を1st stepとします
背景となる画像ファイルの読込み
背景画像レイヤに名前を付ける
作業用に別ファイル名に保存
画像の切り取り
2006/05/12 （ｃ） Gucky 8
２．背景画像の読込み
新規作成状態になっているので、[ファイル]－[開く]で素材の画像を開きます
画像ファイルが開くと【メインウィンドウ】に画像ファイルが表示され、【レイヤ】 ウィンドウの【レイヤ０】にも縮小された画像が表示されます
2006/05/12 （ｃ） Gucky 9
背景画像レイヤに名前を付ける
【レイヤ】ウィンドウで【レイヤ０】に解りやすいように名前を付けます 【レイヤ】ウィンドウの[レイヤ]－[設定]をクリックし、【レイヤ設定ウィンドウ】を 表示させます 【レイヤ０】に名前を付けます。[レイヤ名]欄に"背景"と入力し、[OK]を押しま す 設定2006/05/12 （ｃ） Gucky 10
作業用に別ファイル名に保存
元画像はバナーのサイズよりも大きいので、使う部分を切り出しますが、元 画像を壊してしまう事が無い様にファイル名を変えて保存します 【メインウィンドウ】の[ファイル]－[名前を付けて保存]でファイル名に "banner"、ファイルの種類"AzPainterファイル(*.apd)"で保存します2006/05/12 （ｃ） Gucky 11
画像の切り取り
背景画像中央から２００ｘ４０の部分を切り出します 【メインウィンドウ】の[編集]－[サイズ変更]で【サイズ変更ウィンドウ】を開き ます 幅に"200"、高さに"40"を入力し、配置で真ん中の四角形を押し、[OK]を押し ます 元画像の中央部が２００ｘ４０に切り取られます ここまで出来たら”上書き保存”しておきましょう2006/05/12 （ｃ） Gucky 12
2nd step タイトル文字を描く
以下の手順を2nd stepとします
タイトル文字を描くレイヤの新規作成
描画文字色の指定
文字描画位置の指定
タイトル文字入力
タイトル文字の位置調整
2006/05/12 （ｃ） Gucky 13
タイトル文字を描くレイヤの新規作成
タイトル文字を描きますが、元画像に影響しないように、レイヤを変え作業し ます 何故レイヤを変えるのか？ レイヤを変える事によって、元画像を汚すことなく移動したり、後で消したり する事が可能になります 【レイヤ】ウィンドウの[レイヤ]－[設定]をクリックし[新規作成]を選択します 【レイヤ１】が【背景】レイヤの上に作成されます 前述『背景画像レイヤに名前を付ける』の 手順を参考にレイヤ名に"タイトル"を付け ましょう “タイトル”に変える2006/05/12 （ｃ） Gucky 14
描画文字色の指定
タイトル文字を書きますが、先ずタイトル文字の色を選択しましょう。 【HLSカラーパレット】ウィンドウから適当な色を選択します。 （濃い目の色を選択しておいてください） 色を選択すると【コントロール】ウィンドウ左下 の四角の中の色が選択した色に変わります2006/05/12 （ｃ） Gucky 15
文字描画位置の指定
選択した色で文字を描きますが、【レイヤ】ウィンドウで【タイトル】レイヤが水 色になっているのを確認し、水色になっていなければ、マウスの左クリックで 【タイトル】レイヤを選択してください 【ツール】ウィンドウで[テキストボタン]を押し、【メイン ウィンドウ】へカーソルを移動するとカーソルが"Ｉ"形 になりますので、背景画像の左上隅を"Ｉ"形カーソル の左上が来るようにし、左クリックします この辺り2006/05/12 （ｃ） Gucky 16
タイトル文字入力
クリックすると【テキスト】ウィンドウが開きますので、文字を入力します フォントやサイズを指定できますが、今回は フォント名：“ＭＳＰゴシック”、サ イズ“２０”、“太字”、“斜体”、“アンチエイリアス”にチェックを付けて、文字を入 力します。 テキスト】ウィンドウに文字を入力すると、【メインウィンドウ】にも表示されま すので、良ければ[描画]を押します。 この時、文字の位置は気にしなくて良いですが、文字が全て背景画像の上にあるようにしてくださ い。駄目な場合[キャンセル]を押してやり直しです2006/05/12 （ｃ） Gucky 17
タイトル文字の位置調整
タイトル文字の位置を調整します。【ツール】ウィンドウで[移動]ボタンを押し ます [移動]ボタンを押した後、【メインウィンドウ】にカーソルを移動させると、カー ソルが上下矢印と左右矢印がクロスしたものに変化しています。【メインウィ ンドウ】内でマウスを左クリックしながら移動させると、先に入力したタイトル 文字が移動しますので、真ん中へ移動させます ここまで出来たら[上書き保存]しておきましょう2006/05/12 （ｃ） Gucky 18
3rd step レイヤを使って飾りつけ
以下の手順を3rd stepとします
新規レイヤ作成し白タイトル文字入力
白タイトル文字の位置調整
白タイトルレイヤの移動
2006/05/12 （ｃ） Gucky 19
新規レイヤ作成し白タイトル文字入力
2nd stepを参考にして、新規レイヤ”白タイトル”を作成し、文字色”白”に変 えます 【白タイトル】レイヤがアクティブ(水色)になっていることを確認し、【ツール ウィンドウ】で[テキスト]ボタンを押し、【メインウィンドウ】左上隅をマウスでク リックします テキストウィンドウ】が開きますが、先に入力したタイトル文字がそのまま入 力状態になっていますので、【メインウィンドウ】で文字が白いことを確認し、 [描画]を押します2006/05/12 （ｃ） Gucky 20
白タイトル文字の位置調整
白文字を移動させ、先に描いたタイトルが左に少々はみ出すように配置しま す
2006/05/12 （ｃ） Gucky 21
白タイトルレイヤの移動
【レイヤ】ウィンドウで【白タイトル】レイヤを選択し、[ 下へ移動 ]ボタンを１回 押します 【白タイトル】レイヤと【タイトル】レイヤが入れ替わ ります 完成間近です。[上書き保存]しておきましょう2006/05/12 （ｃ） Gucky 22
4th step 仕上げとファイル保存
以下の手順を4th stepとします
新規レイヤを作成し枠線を引く
2006/05/12 （ｃ） Gucky 23
新規レイヤを作成し枠線を引く(1)
【タイトル】レイヤを選択し、新規レイヤ【枠】を作成 【ツール】ウィンドウで”鉛筆”、”四角枠”を選択 描画色に”黒”を選択し、 【コントロール】ウィンドウでサイズ”３”にします 鉛筆 四角枠 矢印を押して ”３”に 描画色は”黒”2006/05/12 （ｃ） Gucky 24
新規レイヤを作成し枠線を引く(2)
【メインウィンドウ】で枠線を引きます この時左上ポイントをマウスの左クリックで指定し、ボタンを押したまま右下 ポイントで離します その際、正確に線を引くためには、カーソル位置の座標に注目します。左上 を[１，１]、右下を[１９８，３８]にすると正確に３ドットの枠が周囲に引けます 対角指定 この座標値に注目 完成！[ 上書き保存 ] しておきましょう2006/05/12 （ｃ） Gucky 25
新規レイヤを作成し枠線を引く（補足）
座標の読み方 今回元画像を切り抜いた時点で、画像サイズが２００ピクセル幅で高さ が４０ピクセルになっています これを座標値に直すと［０，０］が左上隅、[１９９，３９]が右下隅 今回３ピクセル幅の枠線を引くため、選択した四角枠の両サイドに＋１ ピクセル線が引かれる 以上より、座標[１，１]、 [１９８，３８]を対角指定する 200ピクセル 40ピクセル 0,0 199,392006/05/12 （ｃ） Gucky 26
画像ファイルとして保存する
出来上がったバナーを画像ファイルとして保存します 【メインウィンドウ】から[ファイル]－[名前を付けて保存]－ファイルの種類を [JPEGファイル(*.jpg)]で保存します （GIFやPNG等自分の好きなファイル形式でOKです）2006/05/12 （ｃ） Gucky 27
おまけ
小さいアイコンに文字を入れる時のTips?? 小さいアイコンや細いアイコンに文字を入れるときは、文字の[アンチエイリアス] をOFFにします 小さいアイコンに文字を入れようとすると、線の細い文字になりがちです。その時、 [アンチエイリアス]をONでは滲んだ文字になってしまいます。そんな時には[アン チエイリアス]をOFFにするとシャープに見えます アンチエイリアスON アンチエイリアスOFF 上の例、差が上手く見えないかもしれませんが、 「MS UI Gothic」、サイズ１０ での、アンチエイリアスのON/OFF例です。 意外と気になるケースがあるので覚えておくと良いかも知れません2006/05/12 （ｃ） Gucky 28
