ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでグランジスタイルのブログレイアウトを作成する方法

Photoshopでグランジスタイルのブログレイアウトを作成する方法

投稿日:2011年4月8日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopでグランジスタイルのブログレイアウトを作成する方法をご紹介します。

Step1:図形の作成

フォトショップで新規ファイルを作成します。
サイズは760×770で、背景は#d8d4c9とします。
長方形ツール長方形ツールを使い、#bebbb1の色で次のようにシンプルな図形を作成します。

図形の作成



Step2:境界線の作成

「レイヤー」−「ラスタライズ」−「シェイプ」を適用します。
次に、「選択範囲」−「選択範囲を読み込む」を選択します。
新しいウィンドウが表示されたら、OKボタンを押します。
すると図形が選択範囲になっていることが分かると思います。

空のレイヤーを追加するために、「新規レイヤーを作成」アイコンをクリックし、「編集」−「境界線を描く」を適用します。
太い境界線(6ピクセルが良いでしょう)とし、位置は中央、色は#aca9a1を適用します。
Ctrl+Dを押して、選択範囲を解除します。
結果は次のようになります。

境界線

次に、境界線にフィルターを適用します。
「フィルタ」−「ブラシストローク」−「ストローク(スプレー)」を選択し、次のように設定します。

フィルタの設定

それから、描画モードを乗算に変更します。

乗算に変更

このようになります。

変更後の境界線



Step3:新規パターンの作成

新しいパターンを作成します。
次の画像をダウンロードし、フォトショップで開いてください。

画像を保存

「編集」−「パターンを定義」を選択します。パターンに名前をつけて、OKを押します。
砂の画像は閉じて、レイアウトに戻りましょう。
大きな画像を選択します。

大きい画像を選択

「レイヤー」−「レイヤースタイル」−「パターンオーバーレイ」を選択し、次のように設定します。

レイヤーの設定

このようになります。

新しいパターン



Step4:画像の追加と図形の作成

次に、画像をいくつか追加します。
長方形ツール長方形ツールを使って、小さな図形も作ります。

画像の追加

小さい長方形を選択し、「フィルタ」−「アーティスティック」−「粗いパステル画」を選んで次のように設定します。
ラスタライズするかどうかを尋ねられるので、「はい」を選択します。

画像のラスタライズ

次に、「フィルタ」−「ブラシストローク」−「はね」を選択し、次のように設定します。

フィルタの設定

それから、レイヤーの描画モードを乗算に変更します。
このようになります。

乗算に変更

同じテクニックを使って、さらに長方形を追加し、上と同じフィルターを適用していきます。
このようになります。

長方形の追加
クリックして拡大



Step5:テキストの追加

テキストを追加します。

テキストの追加
クリックして拡大

もう一度文字ツール文字ツールを選択し、マイナス記号を使って「----------」と書きます。
このマイナス記号を複製して、テキストの間に置いていきます。

マイナス記号の追加



Step6:ロゴの追加

テキストロゴを追加します。

ロゴの追加

このテキストロゴにもフィルターを適用することができます。
「news blog」レイヤーを選択した状態で、「フィルタ」−「ブラシストローク」−「ストローク(スプレー)」を選択します。
次のように設定します。

フィルタの設定

描画モードを乗算にします。
このようになります。

乗算に変更

ヘッダーに別のテキストを追加します。

テキストをヘッダーに追加

さらに、テキストやマイナス記号も追加していきます。



Step7:完成

完成です。

完成
クリックして拡大



引用:Web Design Library 著者:amitk 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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