秒刊ネットマガジン

2007年12月29日

PhotoShopでWeb2.0風オブジェクトを作る方法３つ

PhotoShopでWeb2.0風オブジェクトを作る方法３つ

PhotoShopでWeb2.0 風オブジェクト（背景画像・テキスト画像・バナー）などのレクチャを紹介します。やり方は結構簡単に説明しておりますが、その為判りにくいところが満載なのですが、一応私のような素人でもつくれました。

◆ストライプ背景

◆シェイプツールで四角形を描画

好きな色をピックアップし、ツールボックスからシェイプツールを選択します
んで、適当な大きさで長方形を描画

◆レイヤー効果をつける

レイヤー効果を選択し、グラデーションオーバレイを選択します。
レイヤー効果は、レイヤーの横の（F）マークを選択するか、レイヤーの下にある（F）マークを選択するかどちらでもOK

◆レイヤー効果を設定

設定値などは画像のように設定します。(乗算で40％）
乗算でないと、きれいにグラデさせれません。

◆背景の設定

背景のグラデーションなどを設定します。
レイヤーを一番下に作成しておくと良いでしょう

ストライプを制作するために、鉛筆ツールでストライプを書いていきます。
４×４ピクセルにすると、パターンとして使いやすい。

パターンは保存しておきます。
（編集→パターン定義）

保存してあるパターンはいつでも使えるようになります。
んで、再び、レイヤー効果から今度はパターンオーバレイで先ほどのストライプをひく

この使い方は、覚えておく価値がある。本をわざわざ買うってのもいいが、使いこなせばこれだけでも1冊分の価値がある。

◆透明グラデーション文字

◆文字を書く

テキストツールから文字を書きます。
それをコピーし、拡大縮小ツールなどで上下反転させます。

また、反転させた文字は透明度を薄くします（６０％）ぐらい

◆マスクさせる

反転文字を、グラデーション透明させるためにマスクツールを使います
（下の●アイコンがマスクツール）

マスクツールでグラデーションをかけると、文字がグラデーションしながら
透明になります。

◆ガラス風バナー

◆長方形をかく

グラデーションをかけた長方形をかきます

◆白い長方形をかく

そのうえに白い長方形をかきます
グラデーションもかける。

◆透明度をさげる

さいごに透明度をさげて完成です。

実際、FireWorksとかでもできるんですが、はっきりいってドッチが楽なのかそれは使う人次第なのかもしれません。まあ僕は、FWのほうが軽くて好きですが。

私のような素人でもできましたので、もしわかりにくかったら遠慮なく質問どうぞ。

【関連】

■Byozine|^^|: WEB業界の、ありがちな偽装隠し
■Byozine|^^|: あの人気サイトにズバッと掲載される方法・秘訣
■Byozine|^^|: 凄いクオリティの人物アートを描くためのGIFアニメ