スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでレトロなグリッドの背景を作る方法

Photoshopでレトロなグリッドの背景を作る方法

投稿日:2009年04月14日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでレトロなグリッドの背景を作りたいと思います。


Step1:はじめに

新規ドキュメントを作成します。
サイズは18ピクセル×18ピクセルで解像度は72pixels/inchにします。
カンバスカラーを「透過」に設定してください。

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


Step2:パターンを作成する

レイヤー1を黒く塗ります。
「編集」−「塗りつぶし」を選択します。

黒く塗りつぶす


黒く塗る

移動ツールで「←」キーを7回、「↑」キーを7回押します。

移動ツールで「←」キーを7回、「↑」キーを7回押す

レイヤー1の上に新規レイヤーを作成して(「レイヤー」−「新規レイヤー」)白く塗ります。
「編集」−「塗りつぶし」を選択します。

新規レイヤーを作成して(「レイヤー」−「新規レイヤー」)白く塗る


白く塗る

移動ツールで白く塗った箇所に「←」キーを7回、「↑」キーを7回押します。

移動ツールで白く塗った箇所に「←」キーを7回、「↑」キーを7回押す

画像全体を選択します。
「選択範囲」−「すべてを選択」と操作します。

はみ出た部分を切り取ります。
「イメージ」−「切り抜き」を選択します。
サイズは11ピクセル×11ピクセルにします。

最後に移動ツールで白く塗った箇所を右側に2ピクセル、下側に2ピクセルずつ移動させます。

右と下に2ピクセルずつ移動させる

白く塗ったレイヤー(レイヤー2)の不透明度を14%にします。

白く塗ったレイヤー(レイヤー2)の不透明度を14%にする

黒く塗ったレイヤー(レイヤー1)の不透明度を60%にします。

黒く塗ったレイヤー(レイヤー1)の不透明度を60%にする

新しいパターンを定義します。
「編集」−「パターンを定義」を選択します。

新しいパターンを定義する

作業したドキュメントを閉じます。


Step3:背景を作成する

新規ドキュメントを作成します。

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

新規ドキュメントの背景レイヤーをミディアムレッド(R:117、G:0、B:0)で塗ります。
「編集」−「塗りつぶし」を選択します。

背景レイヤーをミディアムレッド(R:117、G:0、B:0)で塗る


結果


Step4:パターンを入れる

新規レイヤーを作って先ほど作ったパターンを入れます。
「レイヤー」−「新規」を選択します。

新規レイヤーをグリッドのパターンで塗ります。
「編集」−「塗りつぶし」を選択します。

グリッドのパターンで塗る


結果

パターンのレイヤーの不透明度を25%にします。

パターンのレイヤーの不透明度を25%にする

パターンの上のレイヤーにグラデーションを入れます。
「レイヤー」−「新規塗りつぶしレイヤー」−「グラデーション」を選択します。
黒と白のグラデーションを選択します(通常は左から3番目を選択)。

グラデーションを入れる

グラデーションレイヤー

最後に、グラデーションのレイヤーのブレンドモードを「乗算」にして不透明度を65%にします。

「乗算」にして不透明度を65%にする


Step5:完成

結果

追記:変形ツールとをフィルタのゆがみを使うとパターンを立体的に作ることができます。

変形ツールとをフィルタのゆがみを使うとパターンを立体的に作ることができる


引用:Web Design Library 著者:thedesignplaybook.wordpress.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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