Web制作を行う全ての方へ

Photoshopでオーロラエフェクトの画像を作るチュートリアル

webサイトの背景なんかで見かけるグラデーションバックに光をを乗せたオーロラのようなイメージのデザイン。今回はこれのチュートリアルをポストします。そんなに難しくないし、やり方を工夫すればもっとクオリティがあげられるので是非ご活用いただければと思います。
解説しているソフトはPhotoshopCS4ですが、他のバージョンでも当然作れます。また、僕は普段windowsを使用しているのでwindowsのキー配列にて説明しています。

元画像
カンバスを800×600で横長に指定します。そして手始めに元となる画像を用意します。今回は「ゆんフリー写真素材集」にありましたこの写真を使います。詳細はこちらより

ぼかし・ガウス
画像を開いたらまずフィルタをかけます。
大きめにぼかしをかけます
プレビューぐらいの画像になったらOKです。

カンバスはこのようになります

カラーバランス
今度は色味を変えます。今回は青色で作りたかったのでカラーバランスレイヤーで色味を調節します。このやり方なら後から色味を変更することも出来るので便利です。

調節
調節する数値は

シャドウ
シアン – レッド 0
マゼンタ – グリーン 0
イエロー – ブルー +30
中間調
シアン – レッド -50
マゼンタ – グリーン 0
イエロー – ブルー +100
ハイライト
シアン – レッド -50
マゼンタ – グリーン 0
イエロー – ブルー +100

レイヤーの透明度変更
ここまでで背景は終了です。

ペンツール
さて、次はラインを引いてきます。ラインはペンツールやオブジェクトツールを使いますが、僕はオブジェクトツールを使いました。工程A:

円作成
こんなかんじで楕円を引いて

選択範囲に変換
選択範囲に変換(ショートカットキー Ctrl+Enter)

ブラシの用意
線を引くにはブラシを使います。(ショートカットキー B)

ブラシの設定

書き方手順
フリーハンドで選択範囲外に線を引き、はみ出す部分が選択範囲に入るように一気に引いちゃいます。この書き方だとあまりガタガタにならなくて良いです。

書き方手順

書き方手順
こんな感じで書きます。

変形
メニューの編集→自由変形(ショートカットキーCtrl+T)で傾けたり移動させます。

レイヤーをオーバーレイに
レイヤーをオーバーレイにしたら、一先ず一つ出来上がり。
上記の工程A:に戻り、レイヤーを作成して同じようなものをつくっていきます。

色々作ったり複製したり

ライン途中経過
このような感じになっていきます。

色味の変更
最後にラインによって色味を変えたします。レイヤーマスクを使ってカラーバランスを指定します。
調節する数値は

シャドウ
シアン – レッド +80
マゼンタ – グリーン -100
イエロー – ブルー +100
中間調
シアン – レッド 80
マゼンタ – グリーン -100
イエロー – ブルー +100
ハイライト
シアン – レッド +80
マゼンタ – グリーン -100
イエロー – ブルー +30

完成品サンプル
これで完成! 他にも色々すればもっと綺麗に仕上がりますが、一先ず今回はこれにて。

他にもこんなのとかも

完成品サンプル他の例

Ad



Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です