Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

PhotoshopでWordpress風のメタリックロゴを作る方法

PhotoshopでWordpress風のメタリックロゴを作る方法

PhotoshopでWordpress風のメタリックロゴを作る方法

Photoshopでメタリックロゴを作る方法です。多少手の込んだやり方ですが、その分良い感じになります。

こちらの英語サイトを参考に作成しました。http://3nhanced.com/photoshop/how-to-make-a-badass-wordpress-logo/

PhotoshopでWordpress風のメタリックロゴを作る方法

縦横真ん中にガイドを引きます。
縦横真ん中にガイドを引きます。
500px×500pxの新規ファイルを作成します。まず、キャンバスに縦横ちょうど真ん中のガイドを引きます。新規レイヤーを追加し、alt+deleteで黒で塗りつぶします。その後ctrl+Tで45度回転させ(菱形にします)。等倍に縮小し各頂点を目安にガイドを引きます。 ガイドが引けたらレイヤーを非表示にするか、削除します。
正円の選択範囲をとります。
正円の選択範囲をとります。
新規レイヤーを作成します。楕円形選択ツールを選択します。ガイドの交点からshift+altを押しながら正円を描き、正円の選択範囲をとります。

選択範囲を一部削除します。
選択範囲をとった状態で、今度は選択範囲を一部削除します。altを押すことで、マウスが[-]になったことを確認してからshiftをさらに押し、先ほどと同様に正円を描きます。結果、ドーナツ型に選択範囲をとることが出来ました。alt+deleteで黒で塗りつぶしておきます。
グラデーションオーバーレイ設定していきます。
グラデーションオーバーレイ設定していきます。
ドーナツ型に選択範囲をとったレイヤーをダブルクリックしてグラデーションオーバーレイ設定していきます。
内側にドーナツ型のオブジェクトを作成していきます。
内側にドーナツ型のオブジェクトを作成していきます。
新規レイヤーを作成し、先ほどの手順2と同様の手順で内側にドーナツ型のオブジェクトを作成していきます。作成したらこちらも同様に、ドーナツ型に選択範囲をとったレイヤーをダブルクリックしてグラデーションオーバーレイ設定していきます。

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

現在の状態
現在このような状態になっています。
さらにメタリック感を加えます。
さらにメタリック感を加えます。
次に手順4で作成したオブジェクトにさらにメタリック感を出します。新規レイヤーを作成します。手順4で作成したレイヤーをCtrlを押しながらクリックし、選択範囲をとります。楕円形選択ツールを選択し、altを押すことで、マウスが[-]になったことを確認してから選択範囲を一部削除します。 グラデーションツールを選択し、白からグレーのグラデーションをかけます。
ドーナツ型の穴の開いた部分に色をつけていきます。
ドーナツ型の穴の開いた部分に色をつけていきます。
次にドーナツ型の穴の開いた部分に色をつけていきます。新規レイヤーを作成します。(レイヤーの位置はほぼ一番下に持っていきます。)楕円形選択ツールを選択し、穴の開いた部分に合わせて正円の選択範囲をとります。一旦黒く塗りつぶしておきます。

グラデーションオーバーレイを設定レイヤーをダブルクリックしてグラデーションオーバーレイを設定します。

シャドウ(内側)を設定
さらにシャドウ(内側)を設定します。

現在の状態
現在このような状態になっています。
内側の円に立体感を加えていきます。
内側の円に立体感を加えていきます。
新規レイヤーを作成します。これまでの手順と同様に楕円形選択ツールでドーナツ型の選択範囲をとります。

白から透明のグラデーションを設定グラデーションツールから、白から透明になるグラデーションを設定し、上からと下からにグラデーションをかけます。

ぼかしを設定Ctrl+Dで一旦選択範囲を解除し、上のメニューの「フィルター」ぼかし」「ぼかし(ガウス)」を選択します。半径はここでは6pxに設定しました。
さらに内側の円に立体感を加えていきます。
さらに内側の円に立体感を加えていきます。
新規レイヤーを作成します。楕円形選択ツールで、上記のように選択範囲をとります。

ブレンドモードを「ソフトライト」に設定グラデーションツールから、白から透明になるグラデーションを設定し、上からグラデーションをかけます。その後、レイヤーのブレンドモードを「ソフトライト」に設定します。
さらに内側の円に立体感を加えていきます。
さらに内側の円に立体感を加えていきます。
最後に文字を入力していきます。「横書き文字ツールより」Wの文字を入力します。ここでは、Didotというフォントを選択しました。

グラデーションオーバーレイを設定手順3で適用したグラデーションオーバーレイの効果と同様の効果をこの文字にも適用します。
文字に立体感を加えていきます。
文字に立体感を加えていきます。
次にWの文字のレイヤーをCtrl+クリックし選択範囲をとります。上のメニューの「選択範囲」「選択範囲を変更」「縮小」を選択し3pxと設定します。ここで新規レイヤーを追加し、任意の色で仮に塗りつぶしておきます。

グラデーションオーバーレイを設定レイヤーをダブルクリックし、グラデーションオーバーレイの効果を手順9で適用したグラデーションオーバーレイの効果と同様の効果をこの文字にも適用します。
もう一手間加えて完成です。
もう一手間加えて完成です。
最後のもう一手間加えて終わりです。手順10で作成したレイヤーをCtrl+クリックし選択範囲をとります。楕円形選択ツールを選択し、Altを押しながら選択範囲の一部を削除します。新規レイヤーを作成します。白く塗りつぶし、レイヤーブレンドモードをソフトライトにして完成です。

完成

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

PhotoshopでWordpress風のメタリックロゴを作る方法の前後の記事

前の記事は「短時間で出来るPhotoshopで作る光の抽象的背景

次の記事は「短時間で出来るPhotoshopで作るカラフルな抽象的背景

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.