ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング