バナー・アイコンの作り方

フォトショップを使って基本的なアイコンなどの作り方を説明します
フォトショップを持ってない方、ゴメンナサイ

フォトショップでまず使い方を憶える場所は、「レイヤー」と「チャンネル」の使い方です、この2つさえ憶えてしまえばあとは応用で何とかなります。

●レイヤーとは文字などを重ねて書く事が出来る機能です。

例えばこの四角い画像は、上から黒・赤・黄の3枚で作られています

黒をすこし横にずらすと以下の様にその下にあった赤が見えます

更にその赤を横にずらすとその下にあった黄が見えます

こう言った機能がレイヤーです

●チャンネルとは場所を記憶する機能で表示はされませんが、いつでもその記憶させた形や文字などを呼出して使えると言う物です。

なおこれらの機能他をさるきち design worksの「フォトショップいきなり応用講座」にも詳しく説明されていますので参考にして下さい。


●まずAFH BEVELをダウンロードしてフォトショップのプラグインディレクトリに入れます、フィルタの項目に「AFH」と言う物が出れば正常です。

このプラグインは以下のような平面を

この様に立体化してくれる優れものです


ではアイコン作りに取り掛かりましょう、普通ホームページ用のアイコンと言うのは88*31で作りますのでこの大きさで勧めていきますが大きさは別に決まってる訳ではありませんので・・・。

「新規」で幅88・高さ31にして新しいファイルを作ります
icon1.gif (87 バイト)
これは白く塗りつぶしました

なお全ての範囲を選択するには「Ctrl+A」で任意の色で選択範囲を塗りつぶすには「Alt+Del」で行います、ちなみにフォトショップは「D」を押すとツールパレットの色を「文字黒・背景白」に出来ます、これを反転させるのには「X」で出来ます。

それをフィルタのAFHで立体化しましょう
この時の影の濃さなどは好みで調節して下さい

更に角張りを取りたい場合はフィルタのぼかし(ガウス)を使用します
ぼかし具合も好みで調節します

これで土台は出来あがりです

次に文字を入れます、「文字ツール」を選択してそのまま書込んでも良いのですが折角ですので「チャンネル」を使いましょう、「レイヤーパレット」で「チャンネル」を選択し「新規チャンネル」を作り、文字を書き込んでみまると文字の範囲だけ指定したものが出来てるはずです、位置を移動したい場合は「Ctrlを押しながらマウス」で動かします、その後にレイヤーに戻り新規レイヤーを作りそのレイヤーを好きな色を使いAlt+Delで塗りつぶします、選択範囲を解除する際は「Ctrl+D」を押します、また一つ前の状態に戻したい場合は「Ctrl+Z」を押す事で可能になります。

新規レイヤーや新規チャンネルを作るのにはレイヤーパレットの下のボタンを使います。レイヤーの一番左の目の様な絵をクリックして消すとそのレイヤーは表示されなくなります、その右にある筆のような絵があるレイヤーがアクティブと言う意味で別のレイヤーの筆の絵が現れる部分をクリックするとリンクする事が出来て一緒に移動させたりなどの時に使用します、とにかく色々な機能がありますのでいじりながら憶えていきましょう


これで一番簡単なアイコンの出来あがりです

次に多少応用して以下のような物を作ってみました


これは文字を白で塗りつぶしその下に新しいレイヤーを作り「選択範囲→選択範囲の変更→拡張」で少し拡大しそれを黒で塗りつぶし「フィルタ→その他→スクロール」で右下にずらし「フィルタ→ぼかし→ぼかし(ガウス)」で黒い文字を書いたレイヤーをぼかして影の様に見せます


これは文字のレイヤーを3枚使っています、一枚目「黒いHomePageの文字」2枚目「少し拡大した白いHomePageの文字」そして一番下に2枚目と同じ大きさで右下にずらした影の部分です


あとは土台をフィルタのテクスチャでレンガや砂岩などで模様をつけたりなどやってみると良いでしょう

絵の書ける人なら絵を入れるのも良いでしょうし写真を入れたりなど応用で様々なバナー・アイコン作りをして下さい


前に戻る