ライセンスの下に利用可能です。他サイトからの引用につきましては、引用元サイトの権利に準拠します。ないブログに表示されています。新しい記事を書く事で広告が消えます。立体的な画像を作るPhotoshopやそれに類似したソフトウェアでぷくっとしてつやつやなボタンを作ってみよう。形や大きさを変えればWebサイトのアイコン、ボタン、ロゴ、バナーなどを簡単に作ることができるよ。Photoshopを起動。私は正方形のロゴを作るので、ここでは300×300の正方形のキャンバスを作成しているけど、自分が作りたい物が作りやすい大きさに合わせて変えてね。背景(カンバスカラー)は透明に。図形描画ツールでボタンの下地を作るよ角丸長方形を選択。ストロークは無しを選ぼう。私はデフォルトのまま10px。ボタンの基本色を選ぶよ。私はローテックの今のサイトの色に合わせて濃いピンクを選択。色を選択したらキャンバス内にボタンの大きさに図を描く。画像に入れる文字を図形内に配置するよまず、カラーパレットを黒白に戻しておこう。(カラーパレットの左上のちっちゃいカラーパレットボタンをクリックすると黒白にリセットされる)新規レイヤーを作成し、背景は白にしよう。レイヤー名は「文字背景」などでOK。作成したら文字背景レイヤーを選択しておこう。次に、文字入力ツールで、文字を入力して配置していくよ。フォントの種類や大きさはお好みで。文字レイヤーが複数になっても大丈夫。配置や文字の大きさ、文字間隔などを微調整してバランスを整えよう。配置が決まったら次に進むよ。レイヤーウィンドウの、角丸で作ったボタン下地を非表示にしよう。すると、上記のような表示になるね。それをパターンとして保存しておくよ。ツールバーの「編集」をクリックして開き、「パターンを定義」をクリック。パターン名は自分でわかりやすい名前であれば何でも大丈夫。OKボタンをクリック。そこまでできたら、文字レイヤーと文字背景レイヤーは非表示にするか、削除してしまってOK。さっき非表示にしたボタン背景を表示状態に戻そう。ボタンにレイヤースタイルを加えて行くよレイヤーウィンドウの下のところにfxというマークの「レイヤースタイル」ボタンがあるのでクリック。「レイヤーの効果」をクリックしよう。描画モードは乗算、パターンはさっき保存した物があるのでそれを選択。画像の中にさっき配置した文字が重なればOK。次に、ベベルとエンボスを選択。ベベルはぷっくりした立体感を出す効果。ベベル(内側)を選択して、深さやサイズはどのくらい飛び出させたいかを考えながら、調整してみよう。「輪郭」でアンチエイリアスを30%ほどに設定する。光沢が上部全体ではなく、最も出っ張ったところだけにつくので、より立体感が出るよ。ボタンっぽくなったね。次に、シャドウ(内側)を選択し、設定して行こう。描画モードはスクリーンで、色はボタンの下地の色を白に近づけた色か真っ白(#FFFFFF)を選択しよう。30~45%ほどに不透明度を設定。角度は90°にしよう。距離は光沢に見えるポイントを探して調節しよう。チョークは2~5くらいの間で自分の図形に合うポイントを探すといいかも。サイズは大きくするとぼやけた感じになる。チョークの設定によって最適な数値が変わるので、スライダを動かしてちょうどいい点を探してみよう。わからなければ、チョークと同じ値でOK。