セールスレター型HPテンプレート
Sales letter type home page templet

ライフェリーズ-名刺工房

赤く塗られた日はお店はお休みです
月の隣の矢印で翌月が見れます

名刺のご注文はこちらからどうぞ

名刺デザインプテンプレート

名刺作成

新規とリピート

ご入稿データ

Lifelys

〒174-0044
東京都板橋区相生町10-15-102
営業時間：10:00～20:00
定休日：第1・3土曜・日曜祝日
TEL・FAX：03-5398-3511
mail: 3437372101@jcom.home.ne.jp
代表：小澤　勉

ホーム

Photoshopでテクスチャー

透明感のあるボタンを作る

Photoshopでテクスチャー作成

透明感のあるボタンを作る

Step-1

まず、新規パレットを１0センチ×１０センチ、350dpi、RGBモードで作成します。ウエーブなどで使う場合は72dpiで使用するのですが、作る時は高解像度で作成したほうが綺麗にエフェクトがかかるので、350dpiで作って、後で用途にあった解像度に調整する方がいいと自分は思います。
楕円形選択ツールでShiftを押しながら左の図ぐらいの正円を選択します。

Step-2

まず、「選択範囲」の中の「選択範囲を保存」を選んで、OKを押してこの正円の選択範囲を保存しておきます。　選択範囲は解除せず丸くうねうねさせたまま作業します。ツールパレットの四角が重なったボタンで色を指定していきます。上になっている方の四角をクリックして、R：12　G：45　B：243と入力してOKを押します。次に下になっている方の四角をクリックしてR：27　G：138　B：241と入力してOKを押します。左の様になると思います。

Step-3

レイヤーウインドウの下にある右から2番目のボタンをクリックして背景の上に新しい透明のレイヤーを作ります。
ツールパレットのグラデーションを押します。上の方にあるグラデーションの編集ボタンを押してサンプルの上の段の一番左の「描画色から背景色へ」を選びOKを押します。マウスで円の選択範囲の上から下にむかってドラッグして色を入れます。左の様になります。

Step-4

ツールパレットの四角が重なったボタンの上になっている方の四角をクリックして、R：49　G：200　B：232と入力してOKを押します。
工程3の時と同じボタンを押して新しい透明のレイヤーを作ります。
丸い円の選択範囲は、まだうねうねさせたままにしておきます。

Step-5

グラデーションツールを押して、サンプルの上の段の左から2番目の「描画色から透明に」を押してOKします。
今度は、円の選択範囲の下から上に向けてドラッグします。左の図の赤いラインぐらいで手を放します。すると左の図ぐらいになると思います。

Step-6

ツールパレットの四角が重なったボタンの上になっている方の四角をクリックして、R：255　G：255　B：255と入力してOKを押します。
工程3の時と同じボタンを押して新しい透明のレイヤーを作ります。
丸い円の選択範囲は、まだうねうねさせたままにしておきます。

Step-7

グラデーションツールを押して、サンプルの上の段の左から2番目の「描画色から透明に」を押してOKします。
今度は、円の選択範囲の上から下に向けてドラッグします。左の図の赤いラインぐらいで手を放します。すると左の図ぐらいになると思います。

Step-8

今度はシャドウになる色を入れます。ツールパレットの四角が重なったボタンで色を指定していきます。上になっている方の四角をクリックして、R：12　G：55　B：141と入力してOKを押します。次に下になっている方の四角をクリックしてR：32　G：133　B：162と入力してOKを押します。左の様になると思います。
工程3の時と同じボタンを押して新しい透明のレイヤーを作ります。
丸い円の選択範囲は、まだうねうねさせたままにしておきます。

Step-9

ツールパレットのグラデーションを押します。上の方にあるグラデーションの編集ボタンを押してサンプルの上の段の一番左の「描画色から背景色へ」を選びOKを押します。マウスで円の選択範囲の上から下にむかってドラッグして色を入れます。左の様になります。
「選択範囲」の中の「選択範囲を変更」の中の「縮小」を選びます。15ピクセルと入力してOKを押します。この縮小を3回かけます。3回かけ終わったら、「選択範囲」の中の「境界をぼかす」を選び15ピクセルを入力してOKを押します。
そして、deleteキーを押して真ん中を削除します。そして、レイヤーの属性を「乗算」に変えます。

Step-10

やっと選択範囲を解除します。「選択範囲」の中の「選択を解除」を押して下さい。左の様な感じになっていれば成功です。ここでファイルを保存しておいてください。
今度は影を入れていきます。チャンネルウインドウで先程作ったアルファーチャンネルをマウスでドラッグして、下にある右から2番目のボタンにぶつけて下さい。おなじアルファーチャンネルが複製されます。この複製したチャンネルを選んで「フィルター」の中の「ぼかし」の中の「ガウス」を選択、15ピクセルと入力してOKします。レイヤーウインドウの「背景」をクリックしてアルファーチャンネルからぬけます。

Step-11

レイヤーを統合します。まず一番下の「背景」レイヤーの左にある目のマークをクリックして隠します。次にレイヤーウインドウの右上にある矢印のボタンを押してメニューを出します。項目の中の表示レイヤーの統合を選択します。「背景」の目のマークをクリックして見えるようにもどします。

Step-12

ツールパレットの四角が重なったボタンのすぐ左下に白黒の同じボタンのミニチュアみたいなのがあるのでクリックして上の四角を黒にしておきます。
レイヤーウインドウで「背景レイヤー」をクリックして選択します。この状態のままレイヤーウインドウの下の右から２番目のボタンを押すと、背景とボタンを作ったレイヤーの間に新しいレイヤーが出来ます。このレイヤーをクリックして選択します。「選択範囲」の中の「選択範囲を読み込む」を選びます。先ほど作成したぼかしたチャンネルを選びます。「アルファーチャンネル1のコピー」になっていると思います。呼び出せたら「編集」の中の「塗りつぶし」を選び「描画色」を選択してOKを押します。

Step-13

ツールパレットの一番上右側の移動ツールをクリックして適当に影を右下にずらします。影の濃度はレイヤーウインドウの上に「不透明度」があるのでここで調整します。
左のようになればひとまずノーマルボタンの完成です。
ここからはボタンを透明に見せるやり方です。
透明に見せるにはバックに絵柄がないと透けた感じを出せません。ここでは背景レイヤーを選んで、「フィルター」の中の「テクスチャーの中の「クラッキング」をかけてみました。

Step-14

まず、真ん中の影のレイヤーを選びます。「選択範囲」の中の「選択範囲を読み込む」を選び、「アルファーチャンネル1」を選びます。丸く選択範囲を呼び出せたら、Deleteキーを押してボタンの下に隠れた部分の影を削除します。一番上のボタンのレイヤーを選択して。属性を「乗算」にかえます。これで透明感が出てきたと思います。

Step-15

最後に、丸い選択範囲はアクティブのまま、背景レイヤーを選びます。「フィルター」の中の「変形」の中の「球面」を選んで３０パーセントでOKします。屈折を入れると、より透明感が強調されます。

Step-16

左のような感じになれば完成です。隣の作例は、角丸のバーの形にピンク色で同じやり方でつくりました。丸以外の形でも作り方は一緒です。