MENU
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
ティアグラフ
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
  • カメラ
  • 動画編集
  • 写真編集
  • Webデザイン
  • お問い合わせ
 検証、レビュー、Vlogなどはこちら

Photoshopで大理石風の背景を作る方法

2024 4/28
Webデザイン デザインツール
2024年4月28日
当ページのリンクには広告が含まれています。
  1. ホーム
  2. Webデザイン
  3. Photoshopで大理石風の背景を作る方法
  • URLをコピーしました!
ティアラ

大理石みたいな背景ってどうやって作るんだろう?

suzuto

意外と簡単にできます!
今回はPhotoshopで大理石背景の作り方を紹介するよ。

こんにちは、suzutoです。

サイト制作で少し変わった背景画像を使ってみたいと思ったことはありませんか?

ボクはサイト制作で大理石風の背景を作る機会があったので、今回はPhotoshopで大理石の背景を作成する方法を共有します。

完成形は以下のようになります。

大理石背景画像

Photoshopを使うと、こんな感じの変わった背景を作ることができますのでぜひ参考にしてみて作ってみてください。

本記事の内容

Photoshopで大理石風の背景を作る方法

Photoshopでの作業は以下の通りです。

STEP
アートボードをスマートオブジェクト化
STEP
フィルターで雲模様を適用させる
STEP
雲模様を色調補正
STEP
描画モードで合成
STEP
グラデーションマップで調整

上記の流れで作っていきます。では早速解説していきますね。

アートボードをスマートオブジェクト化

まずは画像をスマートオブジェクト化します。レイヤーで背景を右クリック→「スマートオブジェクトに変換」をクリックしてスマートオブジェクトにします。

スマートオブジェクトにすることによって画像加工をしても画像の劣化を防ぐことができます。

フィルターで雲模様を適用させる

雲模様のフィルターを適用させていきます。雲模様のフィルターは「1」と「2」がありますが、両方適用させる必要があるんです。

「メニュー」→「フィルター」→「描画」→「雲模様1」を選択します。

同様に、

「メニュー」→「フィルター」→「描画」→「雲模様2」を選択します。

これでアートボードが上の図のようになればOKです。

雲模様を色調補正

次に雲模様を色調補正していきます。

雲模様が適用されているレイヤーを選択して状態で「イメージ」→「レベル補正」を選択。

レベル補正の画面で下の図のように設定します!

チャンネル:RGB
入力レベル:[0] [3] [55]
出力レベル:[120] [255]

この時点でだいぶ大理石っぽくなります。

描画モードで合成

次にレイヤーを複製します。雲模様が適用されているレイヤー1をコピー。

コピーした上のレイヤーを選択した状態で描画モードを選択します。

レイヤーのところのプルダウンから「比較(明)」を選択。

グラデーションマップで調整

コピーしたレイヤー(上のレイヤー)を選んだ状態でレイヤーパネルから「グラデーションマップ」を選択。

グラデーションの調整をします。

白黒が選択されていますが、「青」「赤」などの色相を変更することで青や赤の大理石を作ることができます。また、上の画像のバーを動かすことで、自分好みの代理席にすることが可能です!

調整が完了したら書き出して完了です。お疲れ様でした。

【まとめ】Photoshopで大理石風の背景を作る方法

Photoshopを使うと簡単に大理石風の背景画像を作ることができます。

  • アートボードをスマートオブジェクト化
  • フィルターで雲模様を適用させる
  • 雲模様を色調補正
  • 描画モードで合成
  • グラデーションマップで調整

上記の手順で作ることができます。

ポイントはフィルターの雲模様をベースに作っていくこと。色相を変えてオリジナルで自分好みの大理石を作れますのでぜひお試しください。

Webデザイン デザインツール
Photoshop デザイン
大理石背景のイメージ画像

この記事が気に入ったら
フォローしてね!

Follow @bell_LoneWolf Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • 【Webサイト制作】簡単!ハンバーガーボタンの作り方【後編】
  • 【VScode Cursor対応】HTML記述を高速化させるラップ変換機能(タグで囲む)

この記事を書いた人

suzutoのアバター suzuto デジタルクリエイター

30代|デジタルクリエイター|Webデザイン|
ロイヤルティーカッププードルと暮らしてます。デザインやカメラ、撮影、編集に関することを書いています。お仕事の依頼はお問い合わせより

関連記事

  • 【1ヶ月レビュー】初めてのスマートリングはこれで正解?RingConn Gen2(RingConn第2世代)を試してみた
    2025年6月8日
  • DJI Mic MiniをVlog撮影で使ってみたら最高すぎた
    2025年6月1日
  • 【Webサイト制作】簡単!ハンバーガーボタンの作り方【後編】
    2024年4月20日
  • 【Webサイト制作】簡単!ハンバーガーボタンの作り方【前編】
    2024年4月18日
  • ライトモードとダークモードの切り替えイメージサムネイル
    【Webサイト制作】ダークモードとライトモードの切り替えを実装してみよう!
    2024年4月13日
  • JavaScriptアニメのサムネイル
    【JavaScriptアニメ】タイトルの周りに動く枠線を作る方法
    2024年4月12日
  • 【CSS】背景透過画像とCSSアニメーションでオシャレなキラキラバナーを表示させる方法
    2024年1月29日
  • 【Photoshop】テキストやアイコンの型抜き透過画像の作り方
    2024年1月28日
category
  • ChatGPT (7)
  • Webデザイン (14)
  • カメラ (28)
  • コーディング (8)
  • デザインツール (22)
  • 仕事 (6)
  • 写真 (13)
  • 写真編集 (12)
  • 動画編集 (18)
サイト管理人プロフィール
プロフィール

suzuto(スズト)
ティアグラフの管理人です。
30代|フォトグラファー|Webクリエイター|
ロイヤルティーカッププードルと暮らしてます。
写真や動画、デザインに関することを書いています。お仕事の依頼はお問い合わせより

◆写真素材コチラ
◆Xコチラ
◆お問い合わせはコチラ
アシスタントプロフィール
プロフィール

ティアラ
管理人のアシスタント兼撮影モデル
ロイヤルティーカッププードルの女の子
11月6日生まれ 九州出身
趣味はモデルとグルメ
ハリウッド女優を目指している
◆ティアラのInstagramコチラ
人気記事
  • 【ファイナルカットプロ】縦動画の作成方法を解説します
  • 【iPhoneでペット撮影】可愛く撮影する3つのコツ
  • 【ファイナルカットプロ】やっておくべきオススメ設定4選【動画編集をもっと効率的に】
Portfolio

【ポートフォリオまとめサイト】

 

© ティアグラフ.

本記事の内容