スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > 初心者向け 背景画像と写真を上手に組み合わせる方法

初心者向け 背景画像と写真を上手に組み合わせる方法

投稿日:2011年7月1日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、初心者の方に、背景画像と写真を上手く組み合わせる方法を紹介します。

  • Step1 : はじめに
  • Step2 : ドキュメントを作成する
  • Step3 : 背景画像を貼り付ける
  • Step4 : グラデーションオーバーレイをかける
  • Step5 : ホワイトブラシをかける
  • Step6 : 雨のような効果をつくる
  • Step7 : ピンクブラシをかける
  • Step8 : メインとなる画像を貼り付ける
  • Step9 : 女の子にレイヤー効果をかける
  • Step10 : 完成
    Step1.はじめに

    Photoshopユーザーの大半が、写真の扱い方について基本的なことは知っていることでしょう。
    しかし、Photoshopは非常にたくさんのことができるソフトです。
    様々なテクニックを学んでいけば、応用でさらに色々なことができるようになるでしょう。

    今回は下のような画像を作成します。

    完成形



    Step2.ドキュメントを作成する

    フォトショップを開き、新しいドキュメントを作成します。
    ここでは、800px × 600pxの大きさで背景を白にします。

    新規ドキュメントの作成をする



    Step3.背景画像を貼り付ける

    背景画像を準備します。
    ここでは、flickrの画像素材を使います。
    下のように、新規レイヤーを作成して貼り付けます。

    背景画像を貼り付ける



    Step4.グラデーションオーバーレイをかける

    「レイヤー」−「レイヤースタイル」−「グラデーションオーバーレイ」を選びます。
    設定は下のようにします。

    グラデーションオーバーレイの設定をする

    これにより、背景画像は下のようになります。

    グラデーションオーバーレイ適用後



    Step5.ホワイトブラシをかける

    新しいレイヤーを作り、「ホワイトブラシ」という名前をつけます。
    ブラシツールブラシツールを選択し、背景の上の方に白(#ffffff)で、まだらになるように点を描いていきます。
    このレイヤーの不透明度を60%にします。
    すると背景は次のようになります。

    ホワイトブラシをかける



    Step6.雨のような効果をつくる

    「ホワイトブラシ」レイヤーを右クリックして複製します。
    次に「フィルタ」−「ぼかし」−「ぼかし(移動)」を選択します。
    値を調整することで、雨が降っているような効果が得られます。

    ぼかし(移動)フィルタをかける



    Step7.ピンクブラシをかける

    新しいレイヤーを作り「ピンクブラシ」という名前をつけます。
    ブラシツールブラシツールを選択し、背景の上部にピンク(#f388a1)で点を描いていきます。
    このレイヤーの不透明度は50%にします。
    これにより、背景画像は下のようになります。

    ピンクブラシをかける



    Step8.メインとなる画像を貼り付ける

    メインの写真画像を準備します。
    ここでは、flickrから女の子の画像を使います。

    まずは女の子の部分だけを切り抜き、新規レイヤーに「女の子」と名前を付け、貼り付けてください。
    すると、このようになります。

    メインの画像を貼り付ける



    Step9.女の子にレイヤー効果をかける

    「女の子」レイヤーを選択し、「レイヤー」−「レイヤースタイル」−「光彩(外側)」を次のように設定します。

    光彩(外側)の設定をする

    このようになります。

    光彩(外側)の適用後

    次に、「レイヤー」−「レイヤースタイル」−「ドロップシャドウ」を次のように設定します。

    ドロップシャドウの設定をする

    このようになります。

    ドロップシャドウの適用後



    Step10.完成
    完成です。

    完成系



    引用:Web Design Library 著者:tutorialchip.com 翻訳:なかけん



    スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング