スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > 再利用が可能で何にでも使える背景模様

再利用が可能で何にでも使える背景模様

投稿日:2013年2月19日   レベル:初心者    ソフトウェア:photoshop

このチュートリアルでは再利用が可能で何にでも使える背景模様を作成する方法について紹介します。


Step1:はじめに

透明のパターン画像を使えば、カラーコードを変えるだけで簡単に背景色をカスタマイズすることが可能です。

カラーコードを変えるだけで簡単に背景色をカスタマイズ

このPhotoshopの技はほとんどの模様画像に使えます。
今回の説明では下記のタイル模様を使用します。

カラーコードを変えるだけで簡単に背景色をカスタマイズ

下記の手順に従って画像から模様を抽出してみましょう。

このチュートリアルではPhotoshopのチャンネルを使って選択範囲を作成する方法を学びます。

Step2:白黒に変換する

まず最初に、画像レイヤーを白黒に変換する必要があります。(「イメージ」−「色調補正」−「彩度を下げる」)
次に、「イメージ」−「色調補正」−「レベル補正」を選択します。シャドウ、中間調、ハイライトのスライダを動かしてレベルを調整し、透明な部分が完全に白になるようにしてください。

白黒に変換する




Step3:選択範囲を設定

画像は白と黒の模様になっているはずです。
「イメージ」−「色調補正」−「階調の反転」(もしくはCmd+Iのショートカットを使ってください)全てを選択し、模様をコピーします。
チャンネルパレットを開き、新規チャンネルを作成して、そのチャンネルレイヤーに模様をペーストしてください。
チャンネルレイヤーの白のピクセルが選択範囲になります。

選択範囲を設定

Step4:選択範囲を塗る

レイヤーパレットに戻ります。
新規レイヤーを作成してください。
「選択範囲」−「選択範囲を読み込む」を選択し、先ほど作成したチャンネルを選んでください。
次に、その選択範囲を塗りつぶしてください。(例えば黒色)
チャンネルの選択範囲を呼び出すショートカット:Cmdキーを押しながらチャンネルレイヤーのサムネイルをクリックします。

選択範囲を塗る

Step5:不透明度

模様の強弱や明暗を変えるにはレイヤーの不透明度を調整してください。

不透明度

Step5:最後に

完成したものを透明のPNGファイルとして保存してください。
CSSを使えば背景色をどんなカラーコードの色にも簡単に変えることができます。

.pattern {
background-image: url(pattern.png);
background-color: #666;
}

引用:Web Design Library 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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