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デザイン

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

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

  2. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

  3. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

  4. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

  5. WEBデザイン

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

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

  6. WEBデザイン

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    色相環でグラデーションを描いてみよう
  2. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置…
  3. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法
  4. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  5. WEB集客

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