ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで金属的なRSSフィードボタンを作る方法

Photoshopで金属的なRSSフィードボタンを作る方法

投稿日:2009年10月06日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopで金属的なRSSフィードボタンを作ってみたいと思います。

Step1:はじめに

Photoshopを起動し、新規ドキュメントを作成しましょう。
このチュートリアルでは、630 ピクセル×300ピクセルのドキュメントを作成します。

しかし、最終的にはあなたが作ったボタンはドキュメントから切り離されるでしょうから、自分で作業するのに十分なスペースを確保して下さい。



Step2:ボタンを作成する

金属的なRSSボタンは円形なので、楕円形ツール楕円形ツール(U)を使います。
ダークグレイ(#454545)で円を描きましょう。

円を描く

次に(レイヤーをダブルクリックして)レイヤースタイルを呼び出し、グラデーションオーバーレイを次のように設定してください。

グラデーションオーバーレイ

そして、このレイヤーの下に新しくレイヤーを作り、2つを結合します。

レイヤーを結合する



Step3:RSSアイコンを作成する

新しいレイヤーを作り、カスタムシェイプツールカスタムシェイプツール(U)を選択し、「標的」を使います。
クロマキーカラーを使って、ボタンの上に円の端から5〜10ピクセルほど大きめに標的を描きます。
長方形選択ツール長方形選択ツール(M)を使って、標的の左側と下半分を切り取ります。
そして、残っている中心の円も取り除きます。

RSSアイコンを作成する

楕円形選択ツール楕円形選択ツール(M)を使って、左下に円を描いて下さい。
そして、ボタンのベースのちょうどよい場所に配置して下さい。

RSSアイコンが完成



Step4:レイヤーを非表示にする

ボタンのベースのレイヤーを複製し、「ctrl」を押しながらRSSアイコンレイヤーのサムネイルをクリックし、「delete」を押して下さい。
この段階でRSSアイコンレイヤーを削除しても構いません。
あなたが作ったものをを見るために、ボタンのベースレイヤーを非表示にしましょう。
RSSボタンはこのようになっているはずです。

ベースレイヤーを非表示にしたRSSボタン



Step5:金属の質感を加える

金属の質感を作るため、金属の打ち抜きに次のレイヤースタイルを適用して下さい。

光彩(外側)

ベベルとエンボス

グラデーションオーバーレイ

2つのレイヤーにクリッピングマスクを適用して下さい(「レイヤー」-「クリッピングマスクを作成」)。
このような金属的なRSSボタンができているはずです。

金属的なRSSボタン



Step6:ノイズを加える

もう一度、ボタンのベースレイヤーを複製し、それをすべてのレイヤーの一番上にして下さい。
約125%、ガウス分布、グレースケールノイズで、ノイズフィルターを適用して下さい。(「フィルター」-「ノイズ」-「ノイズを加える」)

ノイズフィルターを適用する

そのレイヤーのサムネイルを「ctrl」を押しながらクリックし、ぼかし(放射状)を適用して下さい。
(「フィルター」-「ぼかし」-「ぼかし(放射状)」-「回転/100/高い」)
描画モードを乗算にし、不透明度を約15%に下げてください。

ぼかし(放射状)を適用する



Step7:完成

最後に、ボタンのベースレイヤーを複製し、それを全てのレイヤーの一番上にして下さい。
そして明るさを100%に上げて、輝きを加えます。

楕円形選択ツール楕円形選択ツール(U)を使って、円の約3分の2を選択し、「delete」を押して下さい。

描画モードをオーバーレイにして、不透明度を約60%にしてください。
ベクトルマスクを加えて、より柔らかな輝きを与えるために、約25%の柔らかいブラシで、ボタンの上端をなぞって下さい。

ベクトルマスクを加える



引用:Web Design Library 著者:www.zenelements.co.uk 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング