MATERIAL98
HOME Web素材 Illustrator講座 Photoshop講座 テンプレート ストックフォト
MATERIAL98
HOME > Photoshop講座 > 逆引きチュートリアル編> ボタンの作成(グラデーション活用)
ボタンの作成(グラデーション活用)
画像の配置1  

・Yahooのトップページにあるボタン風の作成方法を解説します。
・円を描くためにガイドラインを引きます。
[Ctrl]を押しながら、定規からドラッグするとメモリに対して細かく引くことができます。


画像の配置2  

・次に[SHIFT]を押しながら正円を描きます。[SHIFT]を押すことで縦横比が1:1の円を描くことができます。
描いた領域を[選択範囲]−[選択範囲の保存]で一応保存しておきます。
・次にグラデーションツールを使用します。
グラデーションより[新規グラデーション]を選択します。


画像の配置3   ・グラデーションの絵柄の部分をクリックすることでグラデーションエディタが開きます。
ここで編集します。

画像の配置3  

・クリックで分岐点を追加したり、菱型の中間色点をドラッグで移動できます。
・ 下の段の△をダブルクリックでカラーを選択します。


画像の配置3  

・左図のような色の配置と中間点の配置で完了としました。


画像の配置3  

・左図のようにグラデーションツールで円の中心から外側でドラッグして位置を調整します。


画像の配置3  

・レイヤースタイルでドロップシャドウをかけます。


画像の配置3  

・文字の入力して、またレイヤースタイルで境界線で外側に黄色の枠をつけます。
・このあたりは皆さんの自由な文字表現で入れていただければと思います。皆さんのキャンバスなんです、自由に描いて下さい。。


画像の配置3  

・最後の[ファイル]−[Web用に保存]をして完成です。
・ ファイルの種類は「GIF 128 ディザ」にしましょう。


▲ページトップ
copyright