WEBデザイン

Photoshopで空模様の画像を作る方法

はじめまして、
テイクフォーの谷口です。
今回初めて記事を書きます。

さてその初回は、Photoshopで空模様の画像を作る方法をご紹介します。

psd_sky00

まずPhotoshopを立ち上げたら、描画色を黒、背景色を白に設定します。
描画色と背景色を設定したら、背景レイヤーをスマートフィルター用に変換させます。
フィルター>スマートフィルター用に変換
psd_sky01

フィルターを適用する前に、レイヤーをスマートフィルターに変換しておくことで、後でフィルターの設定を変更できるようになります。
次に、背景レイヤーに雲模様のフィルターを掛けます。
フィルター>描画>雲模様1
psd_sky02

するとカンバスに雲模様が表示されます。

psd_sky03

雲模様はランダムで表示されるため、模様を変更したい場合は雲模様のフィルターレイヤーをダブルクリックし変更します。

psd_sky04

ただ通常の雲模様は雲にあたる白色(背景色)と空にあたる黒色(描画色)とのコントラストが弱いため、柔らかい印象を受けます。
そこでwindowsならaltキーを、macならoptionキーを押しながら雲模様のフィルターレイヤーをダブルクリックします。
すると先程よりコントラストが強い雲模様が表示されます。

psd_sky05
(もちろんコントラストを強くしなくても模様は作れます。)

次に背景レイヤーの前面に新規レイヤーを作成し、先程同様にスマートフィルター用に変換させます。
変換したらこのレイヤーを選択した状態で色域指定を用いてグレーにあたる中間調の部分を選択します。
選択範囲>色域指定
psd_sky06

また選択範囲のプレビューのクイックマスクを選択しておくとカンバス上で選択された範囲が色付けられ、選択範囲が一目で分かります。

psd_sky07

その他特に細かい設定は必要ないので、中間調を選択したらOKをクリックします。

psd_sky08

すると中間調の部分が選択されるので、この状態で先ほど追加したレイヤーを選択し、雲模様1のフィルターを掛けます。

psd_sky09

追加した雲模様もコントラストが弱いので、上記と同じ方法で追加した雲模様1のレイヤーをダブルクリックしてコントラストを強くします。

psd_sky10

雲模様を設定できれば、最前面レイヤーを選択した状態で色調補正の色調・彩度の調整レイヤーを追加します。
色相・彩度の属性パネルを開いて一番下にある「色彩の統一統一」にチェックを入れます。
あとは色相・彩度・明度を調整していきます。

psd_sky11

色相:水色寄りの青
彩度:高めに設定(目安85以上)
明度:こちらも高め(目安+50以上)

psd_sky12

これで空模様は完成です。
一度作成した後でも、雲模様や色調の変更は可能です。

psd_sky13

以上で空模様の作成方法の紹介を終了します。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)

    おはようございます、私です。8月半ばから胃の不調に悩まされ続け、一時は胃潰瘍かとも思われておりましたが、先日とうとうお茶漬けを前にして一口…

  2. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

  3. WEBデザイン

    色相環でグラデーションを描いてみよう

    最近めっきり寒くなりまして熱燗のおいしい季節になってきました、こんにちはともさんです。今回は色相環を使ってグラデーションを描いてみましょう、という…

  4. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lightの使い方!

    おはようございます、これを書いている間5回はchromeのブラウザが落ちたふきちゃんです。WordPressで記事を書いていると勝手に記事を下書き…

  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  6. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?

    おはようございます、ブログ連続更新中のふきちゃんです。会社の下にあるコンビニで温かい飲み物とシュークリームを買ったら「同じ袋にまとめてもいいですか…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編
  2. レポート

    さくさく進める勉強会準備
  3. WEBデザイン

    色相環でグラデーションを描いてみよう
  4. WEB集客

    GoogleがMFI(モバイルファーストインデックス)を発表しました。
  5. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
PAGE TOP