アドビフォトショップでは、シンプルなフォトフレームから複雑なUIまで、非常に便利なものをたくさん作ることができます。フォトショップで作ることができる最も便利なものの1つは3Dボタンで、カスタムインターフェースを持つブログやウェブサイトを運営している場合に便利です。

今回は、Photoshopを使って3Dボタンを作成し、「上」「下」の状態を視覚的に表現して、アニメーション化する方法を紹介します。(アニメーションそのものについては、この記事では触れません）。

ステップ1：資料の準備

3Dボタンはウェブサイト上で最も頻繁に表示されますが、アニメーションGIF、製品のモック展示、モバイルゲームなど、他のアプリケーションもあることに留意する必要があります。このボタンを作成する目的によって、最終的なファイル形式やサイズが異なる場合があります。

Photoshopで3Dボタンを作成するには、そのためのカスタムドキュメントを作成する必要があります。Photoshopを起動し、「新規作成> カスタム」をクリックします。 値の入力を開始します。

3Dボタンを作成するには、横長のドキュメントが必要です。

• 高さ900×300ピクセル
• 300ピクセル/インチ
• RGBカラーモード

このスペックは決して堅苦しいものではありませんが、これによって十分な作業スペースが確保され、必要に応じてボタンサイズを上下に拡張することができます。

ステップ2：3dボタン用の矩形を設定する

ファイルの仕様を設定した後、ワークスペースに移動します。1つのレベルに水平な白いキャンバスがあり、ここからボタンの作成を開始します。

3Dボタンを作るには、画面左側の赤で示した丸みを帯びた四角形ツールをクリックします。ショートカットの「U」を使ってもアクセスできます。

白いレイヤーを一度クリックすると、自動的に「丸みを帯びた長方形の作成」ボックスが表示されます。このボックスを使用して、長方形のサイズを指定します。

私たちのボタンは

• 横300ピクセル
• 高さ75ピクセル

さらに、角が高すぎず低すぎず、10ピクセルずつ丸くなっていることを確認し、OKを押す。

注：ボタンの大きさや形はさまざまなので、この寸法を正確に使う必要はありません。また、ショートカットについてもっと知りたい方は、Photoshopの便利なキーボードコマンドをご紹介します。

OK」を押すと、Photoshopはレイヤーに丸みを帯びた長方形を作成します。画面左上のドロップダウンメニューで、フィルとストロークの色を変更することができます。

このチュートリアルでは、「上」「下」ボタンがどのように見えるかを説明するために、「下」ボタンを赤にします。

ステップ3：ボタンを3Dにする

基本的なボタンを作成し、その色を選択したら、レイヤースタイルダイアログボックスで、より立体的に見えるように調整する必要があります。

レイヤースタイルダイアログボックスを表示するには、トップメニューから「レイヤースタイル」を選択します。また、ボタンを含むレイヤーをダブルクリックすると、自動的にそのレイヤーを開くことができます。この方が手っ取り早く、個人的には好きです。

レイヤースタイルボックスを設定したら、「ベベルとエンボス」オプションに移動し、オンにします。

ボタンのエッジをより高く、「立体的」に見せるための簡単な方法です。このチュートリアルでは、以下の設定を使用します。

構造

• スタイル: Inner chamfer
• 技法：ソフトチゼル
• 奥行き：605
• 方向性：上
• サイズ：5
• ソフト化：1

下線部

• 角度：90
• 標高：37
• ハイライトモード：カラーライトニング、55%の不透明度
• シャドウモード：マルチ、不透明度25

コツは、ある程度違いがわかるが、圧倒されるほど強くない設定にすることです。

ベベルとレリーフを完成させた後、Contourに行き、電源を入れました。アウトライン」は、ベベルとレリーフの定義を明確にします。このチュートリアルでは、「コーン - 反転」設定を選択しました。

次に、「グラデーションオーバーレイ」を有効にします。これが、ボタンに丸みを持たせ、少し "ツヤ "を持たせるのです。設定は以下の通りです。

• ブレンドモード：オーバーレイ
• 不透明度：90
• スタイル：リニア
• 角度：90
• 縮尺：100

最後にドロップシャドウをオンにして、ウェブサイトやブログの白い背景からボタンが少し「浮き上がった」ように見えるようにしました。再度、設定です。

構造

• ミックスモード：複数
• 不透明度：35
• 角度：90
• 距離：2
• ランキング：6位
• サイズ：8

品質

• プロフィール：リニア
• ノイズ：0
• ドロップシャドウを消すレイヤー：開く

ここで、これらの仕様をレイヤースタイルとして保存することにします。

ステップ4：レイヤースタイルとして保存する

ボタンが設定されると、3Dとして表示されるようになります。複数の3Dボタンを作成する可能性が高いため、迅速かつ簡単な方法を見つける必要があったのです。

その方法をご紹介します。

レイヤースタイルダイアログボックスの［OK］をクリックする前に、［新規スタイル］をクリックします。このとき、Photoshopはボタン用に作成したレイヤースタイルを保存します**。

Photoshop CCを使用している場合、この新しいスタイルは、上図のようにライブラリセクションに保存されます。これは非常に素早く、簡単にアクセスすることができます。

ステップ5：保存したレイヤースタイルの使用方法

ボタンをデザインしてレイヤースタイルとして保存したので、「up」状態でどのような動作をするか見てみましょう。嘘はいけません、作業時間が半分になります。

まず、下図のように赤いボタンのレイヤーの直上にもう一つボタンを作成します。強調するために緑色にしましょう。

次に、レイヤー自体をダブルクリックしてレイヤースタイルダイアログを開くのではなく、ライブラリパネルでレイヤースタイルをダブルクリックします。

この操作を行うと、Photoshopは自動的に保存したスタイルを新しいボタンのレイヤーに適用し、新しい色と形状を維持します。これで、アップの状態とダウンの状態の2つのボタンができましたが、これは簡単なことです。私はこのショートカットが大好きです。

ステップ6：ボタンにテキストを追加する

次に、ボタンにテキストを追加します。

テキストを追加するには、2つのボタンレイヤーの上に新しいレイヤーを作成し、タイプツールをクリックして入力を開始します。

このチュートリアルでは、ウェブサイトやソーシャルメディアプラットフォームでよく目にする「subscription」という単語を書きます。

また、Webセキュリティフォントのsanserifを使用する予定です。最終的にどれを自分のボタンにするかは、あなた次第です。Montserrat、Proxima Nova、Arial、Verdanaは、ウェブ上で安全に使用できる代替品として広く使用されています。

しかし、この後、このテキストを「ポップ」にするために、さらに微妙な変更が必要です。

まず、テキストを含むレイヤーをダブルクリックし、レイヤースタイルダイアログボックスにテキストを表示させます。

次に、「インナーシャドウ」をクリックして、文字に少しくぼみ（凹み）をつけます。これによって、ボタンに文字が刻まれたように見えるのです。このチュートリアルで使用した正確な設定は、以下の通りです。

構造

• 混合モード：乗算
• 不透明度：35
• 角度：90
• 距離：2
• ダンパー：4個
• サイズ：1

品質

• プロフィール：リニア
• ノイズ：0

次に、文字にグラデーションをかけて、ボタンになじみやすいようにします。

• ミキシングモード：カラーバーン
• 不透明度：90
• スタイル：リニア
• 角度：90
• 縮尺：100

ステップ7: 仕上げ

このテキストスタイルを作成した後、特にもう一度使いたい場合は、「新規スタイル」から保存し、「OK」をクリックしてください。

これが完了すると、2つのボタンレイヤーの間で可視性をすばやく切り替え、「上」「下」の状態がどのように見えるかを確認することができます。

カッコイイでしょ？ファイルを保存するには、「ファイル」 > 「名前を付けて保存」で、作業中のプロジェクトに適したファイル形式で保存してください。

3Dボタンやウィジェットでブログのカスタマイズが可能

Photoshopで3Dボタンを作成する方法はご理解いただけたと思います。これらのスキルを身につければ、プロフェッショナルなだけでなく、パーソナルなタッチの製品を作ることができるようになります。

このプログラムで他に何ができるかを知りたいですか？ ここでは、Photoshopで背景を削除する方法を紹介します。