この記事では、Photoshop CS2 の中国語バージョンを例に挙げています。Photoshop の他のバージョンでは手順が若干異なる場合があります。まずは最終的な効果を見てみましょう。
最終的なエフェクト
の具体的な手順
は次のとおりです。1. Photoshop CS2 の中国語版を起動し、Ctrl+N を押して「新規」ダイアログ ボックスを開き、必要に応じていくつかの設定を行い (サイズは将来のナビゲーション メニューに対応できる必要があります)、「OK」ボタンをクリックします。新しいドキュメントを作成します。
2. レイヤーパネルの下にある「新規レイヤーの作成」ボタンをクリックして、新規レイヤーを作成します。ツールボックスで「角丸長方形ツール」を選択し、オプションバーで半径を15pxに設定し、新しいレイヤーに図1に示すような角丸長方形を描画します。
図 1
3. 次に、次のレイヤー スタイルを上の図形に適用します。
投影：
図 2
内側の影:
図 3
内部の輝き:
図 4
カラー オーバーレイ:
図 5 の
ストローク:
図 6 で
上記のスタイルを適用すると、図 7 に示すボタン効果が得られます。
図 7
4. 次に、再び「角丸長方形ツール」を使用します。今回は、図 8 に示すように、ボタンの上に小さな白い角丸長方形を描きます。
図 8
5. このレイヤーの描画モードを「オーバーレイ」に設定し、不透明度を 30% に設定すると、図 9 に示すようなボタン効果が得られます。
図 9
6. 次に、図 10 に示すように、これらのボタンをコピーしてナビゲーション メニューに配置し、テキストを追加します。
図 10
7. ツールボックスの「スライス ツール」を選択し、「表示」メニューを開き、「整列」の左側にチェック マークがあることを確認します。これにより、スライスが自動的にエッジに整列され、より正確に作成されます。スライス。 「スライス ツール」を使用してボタンごとにカットします。各スライスにはボタンが含まれます。結果を図 11 に示します。
図 11
8. スライスが完了したので、後続の Web デザインの準備として、それを HTML ファイルとして出力できます。メニューコマンド「ファイル | Web 用に保存」を選択して、最適な画像効果を得るには、図 12 に示す設定を使用します。設定後、「保存」ボタンをクリックしてください。
図 12
9. [最適化結果を名前を付けて保存] ダイアログ ボックスで、Web ページ ファイルを保存する場所を選択し、図 13 に示すようにファイル名を入力し、保存タイプとして [HTML と画像 (*. html)」を選択し、クリックします。 「保存」ボタンをクリックします。
図 13
: これにより、HTML ページと、ボタン イメージを含むイメージ フォルダーが作成されます。
これで、HTML コードを他の Web ページにコピーして使用するだけで済みますが、コピーするときに Photoshop によって生成されたヘッダー/ボディ タグをコピーしないでください。