Home-theater-designers
あなたが作成できる素晴らしいものがたくさんあります アドビフォトショップ シンプルな額縁から複雑なUIまで、オンラインで便利です。 Photoshopで作成できる最も便利なものの1つは、3Dボタンです。これは、カスタムインターフェイスを使用してブログやWebサイトを実行する場合に便利です。
この記事では、Photoshopを使用して3Dボタンを作成する方法と、視覚的な「上」および「下」の状態を示し、アニメーション化できるようにします。 （この記事では、アニメーション自体については説明しません。）
ステップ1：ドキュメントを準備する
3DボタンはWebサイトで最も頻繁にポップアップしますが、アニメーションGIF、モックアップ製品ディスプレイ、モバイルゲームなど、他のアプリケーションがあることに注意することが重要です。このボタンを作成する目的に応じて、最終的なファイル形式とサイズが異なる場合があります。
Photoshopで3Dボタンを作成するには、そのボタンのカスタムドキュメントを作成する必要があります。これを行うには、Photoshopを開き、をクリックします 新規作成>カスタム 。値の入力を開始します。
3Dボタンを作成するには、水平方向のドキュメントが必要です。私たちのために、私たちは使用しました：
- 高さ900x300ピクセル
- 300ピクセル/インチ
- RGBカラーモード
これらの仕様は確かに厳格なルールではありませんが、これにより、作業するのに十分なスペースが確保され、必要に応じてボタンのサイズを拡大および縮小することができます。
ステップ2：3Dボタンの長方形を設定する
ファイルの仕様を設定すると、ワークスペースに移動します。単一のレイヤーに水平の白いキャンバスがあり、ここからボタンの作成を開始します。
3Dボタンを作成するには、をクリックします。 角丸長方形ツール 画面の左側にあり、ここでは赤で表示されています。ショートカットを使用することもできます U それにアクセスします。
白いレイヤーを1回クリックすると、自動的に表示されます 角丸長方形を作成する 箱。このボックスを使用して、長方形の寸法を指定します。
ボタンについては、次のものを使用しました。
- 幅300ピクセル
- 高さ75ピクセル
また、角が10ピクセルで丸められていることを確認しました。高すぎず、低すぎない。それから私達は押した わかった 。
ノート： ボタンはサイズや形によって異なるため、これらの正確な寸法を使用する必要があるとは思わないでください。さらに、ショートカットの詳細をお探しの場合は、こちらをご覧ください。 最も便利なPhotoshopキーボードコマンド 。
を押すと わかった 、Photoshopは、レイヤー内にこれらの寸法を持つ角の丸い長方形を作成します。あなたはそのを変更することができます 塗りつぶし と 脳卒中 画面の左上隅にあるドロップダウンメニューを使用して色を付けます。
このチュートリアルの目的のために---そして「上」と「下」ボタンがどのように見えるかを説明するために---「下」ボタンを赤にします。
ステップ3：ボタンを3Dにする
基本的なボタンを作成してその色を選択したら、で調整する必要があります レイヤースタイル ダイアログボックス。これは、より3Dに見えるようにするためです。
あなたにアクセスするには レイヤースタイル ダイアログボックス、あなたは行くことができます レイヤー>レイヤースタイル トップメニューから。ボタンが含まれているレイヤーをダブルクリックして、ボタンを自動的に表示することもできます。この方法ははるかに高速であり、私たちは個人的にそれを好みます。
レイヤースタイルボックスが表示されたら、オプションに移動します 斜角とエンボス 。それをオン。
これは、ボタンのエッジをより高くした「3D」の外観にするためのすばやく簡単な方法です。このチュートリアルでは、次の設定を使用しました。
構造
- スタイル： 内側の斜角
- 技術： チゼルソフト
- 深さ： 605
- 方向： 上
- サイズ： 5
- 柔らかくする： 1
シェーディング
- 角度： 90
- 高度： 37
- ハイライトモード： カラーダッジ、55％の不透明度
- シャドウモード： 複数、25％の不透明度
秘訣は、設定を十分に高くして、多少の違いが見られるようにすることですが、圧倒されるほど強くはありません。
Bevel＆Embossを使い終わった後、 輪郭 それもオンにしました。輪郭により、斜角とエンボスの定義が少し強くなります。このチュートリアルでは、設定を選択しました。 コーン-反転 。
次に、電源を入れます グラデーションオーバーレイ 。これが、ボタンに丸みを帯びた、わずかに「光沢のある」外観を与えるものです。設定は次のとおりです。
- ブレンドモード： かぶせる
- 不透明度： 90
- スタイル： 線形
- 角度： 90
- 規模： 100
最後に、私たちはオンにしました 影を落とす 、ウェブサイトやブログの白い背景からボタンが少し「浮き上がった」ように見えるようにします。繰り返しますが、設定は次のとおりです。
ダークウェブに行くのは違法ですか
構造
- ブレンドモード： 多数
- 不透明度： 35
- 角度： 90
- 距離： 2
- 広める： 6
- サイズ： 8
品質
- 輪郭： 線形
- ノイズ： 0
- レイヤーノックアウトドロップシャドウ： オン
次に、これらの仕様をレイヤースタイルとして保存します。
ステップ4：レイヤースタイルとして保存
ボタンの設定が完了すると、ボタンは3Dに見え始めます。複数の3Dボタンを作成する可能性が高いため、これを行うための迅速で簡単な方法を見つける必要があります。
方法は次のとおりです。
クリックする前に わかった の中に レイヤースタイル ダイアログボックスで、をクリックします 新しいスタイル 。これを行うと、Photoshopはボタン用に作成したこのレイヤースタイルを保存します。
Photoshop CCを使用している場合、この新しいスタイルはに保存されます ライブラリ あなたが上で見ることができるように、セクション。非常にすばやく簡単にアクセスできます。
ステップ5：保存されたレイヤースタイルを使用する方法
ボタンをデザインし、レイヤースタイルとして保存したので、「上」状態での動作を見てみましょう。嘘の言葉はありません、これはあなたの労働時間を半分に減らします。
まず、赤いボタンレイヤーの真上に別のボタンを作成しましょう。強調するために、それを緑にしましょう。
次へ---レイヤー自体をダブルクリックして表示する代わりに レイヤースタイル ダイアログボックス---のレイヤースタイルをダブルクリックします ライブラリ パネル。
これを行うと、Photoshopは、新しい色と形を維持しながら、保存したスタイルを新しいボタンレイヤーに自動的に適用します。これで、2つのボタン（1つはアップ状態、もう1つはダウン状態）があり、非常に簡単に実行できます。私はこのショートカットが大好きです。
ステップ6：ボタンにテキストを追加する
次に、ボタンにテキストを追加します。
テキストを追加するには、2つのボタンレイヤーの上に新しいレイヤーを作成します。クリック タイプツール 入力を開始します。
このチュートリアルでは、「サブスクライブ」という単語を記述します。これは、Webサイトやソーシャルメディアプラットフォームでよく見られるものだからです。
また、サンセリフのWebセーフフォントを使用します。自分のボタンにどちらを使用するかを最終的に選択するのはあなた次第です。 Montserrat、Proxima Nova、Arial、およびVerdanaはすべて広く使用されている代替手段であり、Webにとって安全です。
ただし、これが行われた後、このテキストを「ポップ」にするために行う必要のある微妙な変更がまだいくつかあります。
まず、テキストが含まれているレイヤーをダブルクリックして、テキストを表示できるようにします。 レイヤースタイル ダイアログボックス。
次に、をクリックします インナーシャドウ 、テキストに少しくぼみ（またはくぼんだ領域）を追加します。これにより、ボタンに文字が刻印されているように見えます。このチュートリアルで使用した正確な設定は以下のとおりです。
構造
- ブレンドモード： かける
- 不透明度： 35
- 角度： 90
- 距離： 2
- むせさせる： 4
- サイズ： 1
品質
- 輪郭： 線形
- ノイズ： 0
次に、適用します グラデーションオーバーレイ それらの文字に、平らに見えずにボタンに簡単に溶け込むようにします。繰り返しますが、私たちの設定は次のとおりです。
- ブレンドモード： カラーバーン
- 不透明度： 90
- スタイル： 線形
- 角度： 90
- 規模： 100
ステップ7：仕上げ
このテキストスタイルを作成した後---特にそれを再び使用したい場合---に移動します 新しいスタイル クリックする前に保存してください わかった 。
これで、2つのボタンレイヤー間の可視性をすばやく切り替えて、「上」と「下」の状態がどのように見えるかを確認できます。
かなりかっこいいですねファイルを保存するには、 ファイル>名前を付けて保存 、作業中のプロジェクトに適したファイル形式で保存します。
3Dボタンとウィジェットでブログをカスタマイズする
Photoshopで3Dボタンを作成する方法がわかったので、Photoshopを使ってクリエイティブになり、ニーズに合わせて独自の3Dボタンをデザインできます。そして、あなたの兵器庫のこれらのスキルで、あなたはプロであるだけでなく、個人的な見た目でもある製品を作ることができます。
このプログラムでできる他のことについて知りたいですか？これが Photoshopで背景を削除する方法 。
共有 共有 つぶやき Eメール AndroidでGoogleの組み込み水準器にアクセスする方法何かがピンチで水平になっていることを確認する必要がある場合は、数秒で携帯電話の水準器を取得できるようになりました。
次を読む 関連トピック- クリエイティブ
- アドビフォトショップ
- 画像編集のヒント
- Photoshopチュートリアル
シャインは、デザインの学士号とポッドキャスティングのバックグラウンドを持っています。現在、彼女はシニアライターおよび2Dイラストレーターとして働いています。彼女はMakeUseOfのクリエイティブなテクノロジー、エンターテインメント、生産性をカバーしています。
ShianneEdelmayerのその他の記事ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください