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

Photoshop(フォトショップ)でMac風の背景というやつをやってみた

Photoshop(フォトショップ)でMac風の背景というやつをやってみた

Photoshop(フォトショップ)でMac風の背景というやつをやってみた

少しおしゃれな感じの背景を作るチュートリアルです。ただ楽しては出来そうにありません。少し手間がかかりました。

参考にしたのはこちらのサイトさせて頂きました。やり方は少し違うところもありますが…http://psd.tutsplus.com/tutorials/tutorials-effects/creating-a-mac-type-background-in-photoshop/

Photoshop(フォトショップ)で作るMAC風の背景

グラデーションの設定
グラデーションの設定まずはベースとなるグラデーションの設定を行います。「グラデーションツール(G)」より何色でもいいのですが、近似色2色のグラデーションを設定します。ここでは、青にしました。
白色をソフトに重ねます
多角形選択ツールで三角形を描く新規レイヤーを追加します。
「多角形選択ツール(L)」を選択し、上記のように三角形を描いていきます。すると三角形の選択範囲が取れると思います。

白色をソフトに重ねます選択範囲が取れている状態で、「ブラシツール(B)」選択します。描画色は白、ブラシはソフト円ブラシ(円がぼやっとしたブラシ)、不透明度・流量を低く設定し、あくまでソフトに、上記のように塗っていきます。(ある程度このあたりは、調整しながらやります。)出来たら、レイヤーを「オーバーレイ」にしておきます。
黒色をソフトに重ねます
多角形選択ツールで三角形を描く新規レイヤーを追加します。
「多角形選択ツール(L)」を再び選択し、今度は上記のように、手順2で描いたものより一回り大きく描きます。

黒色をソフトに重ねます選択範囲が取れたら、「選択範囲を反転(Shift+Ctrl+I)」し、描画色を黒にして、上記のようにソフトに塗っていきます。
出来たら、レイヤーを「オーバーレイ」にしておきます。また、不透明度を50%くらいにしておきます。(適当に調整)
円弧を描いて白のグラデーションを設定
パスツールより円弧を描きます新規レイヤーを追加します。
パスパレットに移動して、「ペンツール(P)」を選択し、上記のように大きなカーブを描きます。パスパレットに描かれたパスサムネールをCtrl+クリックして選択範囲を取ります。

グラデーションを設定「グラデーションツール(G)」より白から透明になるグラデーションを設定します。(枠外くらいからビューとグラデーションを設定した方が良いかもしれません。このあたりも適当に調整します。)
出来たら、レイヤーを「オーバーレイ」にしておきます。また、濃すぎるようであれば、不透明度を下げて調整します。
矩形を描き足し処理を続けます
矩形を描き足していきます新規レイヤーを追加します。
パスパレットに移動して、再び「ペンツール(P)」を選択し、上記のような形を描きます。描けたらパスパレットに描かれたパスサムネールをCtrl+クリックして選択範囲を取ります。

レイヤーマスクを追加手順3の要領で黒いブラシで上記のようにソフトに黒を塗り足していきます。

下の円弧にソフトな黒ブラシ新規レイヤーを追加します。
選択範囲が取れている状態で、今度は「選択範囲を反転(Shift+Ctrl+I)」し、描画色を黒にして、上記の位置にソフトに塗っていきます。出来たら、レイヤーを「オーバーレイ」にしておきます。不透明度は60%くらいにしておきます。

今こんな感じですちなみに今こんな感じです。(あと少し…)
白色を重ねます
選択範囲を縮小新規レイヤーを追加します。
先ほどパスで描いた形をパスパレットよりパスサムネールをCtrl+クリックして選択範囲を取ります。そして、上のメニューの「選択範囲」より「選択範囲を変更」「縮小」「5px」くらいにして、選択範囲を少し縮小しておきます。

白色をに重ねます出来たら、手順2の要領で上記のように、白をソフトに塗り足していきます。(選択範囲の縁はソフトというよりも少し強めの方が良いかもしれません。)
円形のグラデーションを左肩に設定
円形のグラデーションを左肩に設定新規レイヤーを追加します。
「グラデーションツール(G)」を選択し、「円形のグラデーション」を選び(色は白から透明のグラデーション)、左肩に配置します。出来たら、レイヤーを「オーバーレイ」にしておきます。
青色を乗算
青色を乗算新規レイヤーを追加します。
手順1で設定した青とは異なる青をベタ塗りし、レイヤーを「乗算」不透明度を40%程度に設定します。
この設定はお好みでしょうが、引き締めるみたいな効果があります。
ペンツールで最後矩形を描きます
ペンツールで最後矩形を描きます新規レイヤーを追加します。
パスパレットに移動して、「ペンツール(P)」を選択し、上記のような形を描きます。描けたらパスパレットに描かれたパスサムネールをCtrl+クリックして選択範囲を取ります。

グラデーションの設定選択範囲を取った状態で、「グラデーションツール(G)より」線形のグラデーション、色は白から透明で、下から上にグラデーションをかけます。 出来たら、レイヤーを「オーバーレイ」にしておきます。仕上げグラデーションここからの処理はもう好みです。新規レイヤーを追加します。
「グラデーションツール(G)より」線形のグラデーション、色は白から透明で左上に配置します。また不透明度は70%くらいにします。
さらに「グラデーションツール(G)より」線形のグラデーション、色は黒から透明で右下に設置します。出来たら、レイヤーを「オーバーレイ」にし、不透明度を50%程度にしておきます。とりあえずこれで完成です。プロっぽいデザインではありますが、全然楽ではないですね(笑)

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

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

コメントを投稿

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

Photoshop(フォトショップ)でMac風の背景というやつをやってみたの前後の記事

前の記事は「photoshop(フォトショップ)で髪の毛を自然な形で切り抜く方法

次の記事は「ブログの更新をtwitterに自動反映してくれるサイトに登録しました

関連する情報

              

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

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

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

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

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

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

元気をくれた本

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

Copyright Forty - N - Five. All rights reserved.