マンションデータベースを"ど"わかりやすく

がんばるマーキュリー 薩摩だワン
44669

マンションに関わることを"ど"わかりやすく紹介

ビジネスハック

2016.11.24

【Photoshop】マンションから出る光の柱のつくりかた

みなさん、こんにちわ。
ガッキーです。

 

みなさん、一度はマンションのチラシって見たことありますよね。
私の家のポストには結構頻繁にマンションのチラシが入っています。
 
よく見ると、ほとんどのチラシにあるマンション建設地には
光の柱が描かれているのはご存知ですか?
 

マンション案内図

こんな感じのチラシ見たことありますよね。

「ここにマンションが建っていますよー」
と分かりやすくしているんでしょうか。
 
光の柱を高くしてマンションを表現することで、
他の建物が並んでいても、どこにマンションがあるのか
すぐに分かっちゃいますね。
 
実は、このマンションのチラシでよく見かける光の柱、
Photoshop初心者さんでも簡単に作ることが出来ちゃうんです!
 
そこで今回は、
Photoshop初心者さんでも簡単に光の柱が作れる
方法を紹介したいと思います。
 
 

イメージ画像用意をしよう

イメージ画像
まずはイメージ画像を読み込んでみましょう。
イメージ画像は、「ファイル」>「開く」で
読み込むことが出来ます。
 
 

マンションから伸びる光の柱をつくろう

マンション光の柱

さっそく、マンションの建設予定地から高く伸びる
光の柱を作成していきましょう。
 
ポイントは2つあります。
・とにかく他の物件よりも高く、目立たせる
(実際に建つマンションよりも高くしてOK)
・空に向かうにつれだんだん薄くなっていく
 
この2つのポイントを押さえておけばOKです。
 
 

長方形ツール

長方形ツール

ツールボックスより「長方形ツール」を選択し、
写真のような長方形を作ります。
長方形は、作りたい光の柱の高さを考えて縦長に配置します。

背景の色を選択

長方形ツールで長方形を作成したら色を透明に設定しておきます。
塗り」と「」の両方を透明にします。
 
 

グラデーション

グラデーション

完成イメージ画像

メインメニューから「レイヤー」>「レイヤースタイル」を選択し、
長方形にグラデーションをつけていきます。
設定は以下のようにしました。
グラデーション設定

ポイントは、下から上に向かうにつれて、グラデーションを
だんだんと薄くしていくことです。
描画モードを「覆い焼き(リニア)」または「リニアライト」に
設定することで、通常のグラデーションよりも
コントラストを強くすることができます。
 
グラデーションをつけただけでも、
マンションから出る光の柱は出来ましたが、
もう少し目立たせるためにここから光の柱を加工していきます。
 
 

ワープ機能

自由変形ワープ

完成イメージ画像

レイヤー」>「レイヤーを複製」を選択し、
先ほど作成した長方形を3つ複製していきます。

複製が出来たところで一番下に配置されているレイヤーから
形を変えて自然に光が下から上へ広がっていくようにしていきます。
 
下に配置されているレイヤーを選択し、
メインメニューから「編集」>「自由変形」>「ワープ」を
選択しましょう。
長方形にバウンディングボックスが表示されます。
自由変形ワープ

8つのコントロールポイントをドラッグして
長方形の形を変形していきます。
 
まずは、上から2つめまでのポイントを
下から上へ光が広がるようにドラッグしてみましょう。

ワープ自由変形

ここまで出来たら先ほど複製した残り2つの長方形も同じように
ワープ機能で長方形を変形していきます。
 
3つとも変形するサイズはバラバラにして
重ねるところがポイントです。
 
 

ぼかし(ガウス) & 光彩(外側)

マンション光の柱

完成イメージ画像

もっとマンションから出る光の柱を目立たせるために
最後に光の根本部分を追加していきます。

ツールボックスより「楕円形ツール」を選択し、
写真のような楕円を作ります。
楕円系ツール

このままだと、不自然なのでメインメニューから
フィルター」>「ぼかし」>「ぼかし(ガウス)」を
選択しましょう。楕円にぼかしが入ったらOKです。
 

次にメインメニューから
レイヤー」>「レイヤースタイル」を選択し、
楕円に光彩(外側)の設定をしていきます。
そうすることによって、
さらに楕円を目立たせることができるんです。
 

以下のような設定にしてみます。
光彩の設定

今回は、「光彩(外側)」に使用する色を「薄黄色」にして
色を付けてみました。
光の柱部分を白で作成しているので白で設定するよりも、
光が輝いて見えるはずです。
 
 

完成

マンション光の柱
 
 

メイン通りを光のラインで書いてみよう

光のライン

完成イメージ図

次に光のラインを使ってメイン通りを描いていきます。
 
ツールボックスより「ブラシツール」を選択し、
ブラシオプションパレットを開いて以下のように設定します。
ブラシの設定

今回は直径4pxに設定していますが、
通りの太さに合わせてサイズを変えると良いと思います。
 
ブラシの選択が出来たところで、
さっそく光のラインを書いていきます。
 
まずは、「レイヤー」>「新規」>「レイヤー」を選択し、
新しいレイヤーを作成します。
 
次にツールボックスより、「ペンツール」を選択して
メイン通り沿いにラインを作っていきます。
ここで、描画色が白になっていない場合は
白に設定しておきます。
 
ラインが作成できたところでラインのパスを
右クリック>「パスの境界線を描く」を選択します。

このとき、ツールは「ブラシ」に設定し、
強さのシミュレート」にチェックを入れてOKを押します。

白いライン

ペンツールで作成したラインが白くなったらOKです。
 
ただ、このままでは光のラインではなく、ただの白いラインに
なっているので、ここから光彩(外側)を加えていきます。
 
メインメニューより「レイヤー」>「レイヤースタイル」を選択し、
以下の設定にします。

ライン光彩の設定

マンションのチラシやWEBサイトを拝見すると
メイン通りは、だいたいピンクかオレンジ、黄色の
どちらかになっている事が多いので、
今回は「光彩(外側)」に使用する色を「ピンク」にしてみました。
 
ここまでできたら、後はマンションやその最寄り駅の辺りに
文字ツールで名前を付ければ完成です。
 

マンション案内図

まとめ

いかがでしたか?
 
長方形ツール」や「ペンツール」を使えば
簡単にマンションの案内図によく使われる
光の柱やメイン通りが出来ちゃいます。
 
今回紹介した作成方法以外にもPhotoshopでは、
光を作り出す方法は沢山あります。
実は、プラグインを使えば今以上に綺麗な光を
簡単に書くことができちゃうんです。
 
探せば無料のプラグインもあると思うので、
興味がある方は是非探して試してみてください(^_-)-☆

この記事を書いた人:ガッキー

この記事をSNSでシェアする