↑　クリックすると原寸拡大表示されます。

今回はフォトショップを使って、光沢感たっぷりなツヤツヤ文字をデザインする方法をご紹介します。

特に難しい手順もなく、フォトショップの便利な機能のひとつ「レイヤースタイル」を適用する簡単なチュートリアルとなっていますので、どなたでも気軽にチャレンジすることができます。

ロゴデザインなどで使えば、デザインが映えそうなテキストエフェクトですので、これを機会につくり方を覚えてみてもいいかもしれません。

サンプル用PSDファイルも無料でダウンロードできるので、実際のデザインを確認しながらデザインすることができます。

詳細は以下から。

チュートリアル情報

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　レイヤースタイルを適用したテキストレイヤーを重ねて立体的なテキストエフェクトを完成

・　ツヤツヤ感を出すために「覆い焼きカラー」を使ったトリック

などがあります。

サンプル用PSDファイルダウンロード

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

 サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 700KB

ファイル形式 : psdファイル (zipファイルで圧縮されています。）

チュートリアルハイライト

今回はあらかじめ用意された壁紙の上にテキストエフェクトを完成させます。

もちろん壁紙はお好みのものでもかまいませんが、青色系の壁紙を使うことでよりツヤツヤ度をアップすることができますよ。

「ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ」で紹介したBallpark Weinerフォントを使ってデザインします。

適当な文字を入力したら、「文字レイヤー」を複製しましょう。

一番上に配置されているレイヤーを「非表示」として、下のレイヤーからまずレイヤースタイルを適用していきます。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番にエフェクトを適用していきましょう。

細かい設定はサンプルPSDファイルで適用されている値を参考にしても良いですし、以下のサムネイルをクリックすると拡大表示されます。

レイヤースタイルを適用することで以下のようになります。

先ほど「非表示」にしておいたレイヤーを「表示」して、こちらの文字レイヤーにもレイヤースタイルを適用します。

ここまでレイヤースタイルをうまく適用すると、以下のようになると思います。

出来上がった2つの文字レイヤーをひとつのフォルダに格納して、フォルダの描画モードを「覆い焼きカラー」としましょう。

これがライティングエフェクトを加えたような透明感を出すポイントとなります。

レイヤーパレット上で、Ctrlキーを押しながら、どちらかのテキストレイヤーのサムネイルをクリックすると、選択範囲が指定されます。

続けてメインメニューより「選択範囲」＞「選択範囲を反転」を適用します。（Ctrlキー＋Iがショートカットとなります。）

新しいレイヤーをフォルダの中の一番下に作成し、メインメニューより「レイヤー」＞「レイヤーマスク」＞「選択範囲外をマスク」を適用します。

あとはツールボックスより描画色「白」(#ffffff)のソフトブラシを使って、少しずつペイントしましょう。

レイヤーの「不透明度」や「塗り」を調節するのも忘れずに。

以下のサムネイルをお手本にペイントしていきましょう。（分かりやすいようにテキストレイヤーを非表示にしています。」

完成

レイヤースタイルとソフトブラシを少し使ってペイントするだけの簡単なテキストエフェクトをご紹介しました。

参照元サイトでは、このほかにも高品質なフォトショップのテキストエフェクトのみを紹介しています。

ウェブデザインもすっきり見やすいので、一度覗いてみてはいかがでしょうか。

↑　クリックすると原寸拡大表示されます。

今回はフォトショップを使って、ザラザラした背景の質感が印象的なシンプルなウェブレイアウトをデザインする方法をご紹介します。

紙テクスチャを背景デザインに使うことで、ザラザラとしたユニークなデザインに仕上げています。

またウェブトレンドのひとつでもある型押し文字を簡単にデザインする方法も一緒に学ぶことができます。

詳細は以下から。

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 1時間30分から2時間ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　グリッドを使ったすっきりとして使いやすいウェブレイアウトの方法

・　テクスチャを使ったユニークな背景画像をデザインする方法

・　型押し文字を簡単にデザインする方法

・　サムネイル画像に影を加えて立体的なデザインをつくる方法

などがあります。

チュートリアルハイライト

---

ウェブレイアウトを作成するときに、最近必ずと言っていいほどグリッドを使ってデザインされることが多いようです。

今回もグリッドの補助ツールとして960 Grid Systemを使用しています。

グリッドをダウンロードすることで以下の様な半透明のラインレイヤーを使ってデザインすることになります。

これによって、ピクセルのずれなどを考えずに自由な発想でレイアウトをすることができそうです。

今回背景に使用したテクスチャは500×500pxの継ぎ目のないテクスチャパターンをデザインすることで表現しています。

薄茶色(#d9cfc0)でペイントしたカンバスに紙テクスチャを重ねます。

重ねた紙テクスチャの彩度を下げ（Ctrl+Shift+U)、レイヤーの描画モードを「乗算」とし、不透明度を20パーセントに下げます。

さいごにメインメニューより「編集」＞「パターンを定義」を適用しましょう。

テクスチャ素材はそのまま使うよりもこのように描画モードを変更したりして使うこともできますね。

このウェブレイアウトのアクセントとなっている型押し文字。

型押し文字のデザインはレイヤースタイルを適用するだけのお手軽なデザイン方法となっています。

まず「文字ツール」を選択し、お好みのテキストを「白」(#ffffff)で入力しましょう。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番に適用していけば完成です。

レイヤー効果 : カスタム

シャドウ（内側）

使用する色（#4e2e09)がポイントになってきます。

カラーオーバーレイ

シャドウ（内側）よりも薄い色（#978667)を使用するようにしましょう。

サムネイル画像を掲載する枠にもちょっとした工夫を加えることで立体的なデザインとなります。

作成したボックス枠を複製し、「黒」(#000000)で塗りつぶします。

続けてメインメニューより「編集」＞「変形」＞「ゆがみ」を選択し、以下の用にボックス枠から少しずらします。

変形を適用後、メインメニューより「フィルタ」＞「ぼかし」＞「ぼかし(ガウス)」を適用します。

ツールボックスより「消しゴムツール」を選択し、ソフトブラシを使って部分的に消去していきましょう。

ウェブレイアウトに立体的なデザインを加えたいときなどに応用することができるテクニックではないでしょうか。

詳しいチュートリアルに関しては参照元サイトを参考にしてください。

パーツごとに詳しい説明がされているので、英語表記でも比較的分かりやすくなっていますよ。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使って本物そっくりなネオン管ロゴをデザインする方法をご紹介します。

テキストエフェクトだけでなく、ネオン管の骨組みも一緒にデザインするので、どんなデザインにも簡単にオリジナルのネオン管ロゴをレイアウトすることができます。

特に難しいステップもなく、レイヤーの描画モードを多用したお手軽なチュートリアルとなっていますよ。

詳細は以下から。

チュートリアル情報 

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 30分から1時間ほど

チュートリアルをはじめるまえに、今回使用するフォントをダウンロードしましょう。

今回は「見出し文やタイトルに使えるユニークなフリーフォント20個まとめ」で紹介した「Museo」フォントを使用しました。

つぎに使用するレンガテクスチャをダウンロードしておきましょう。

今回はこちらより購入しましたが、「知っていると便利な「壁」を集めた無料テクスチャセット」で紹介しているレンガテクスチャでも問題ありません。

またレンガテクスチャ以外にも「継ぎ目のないナチュラルなグランジテクスチャパターン5枚セット」で紹介したウッドテクスチャなどでもうまくデザインできると思いますよ。

※　サンプル用PSDファイルを公開したいのですが、サーバーに負荷がかかりすぎるため見合わせています。

サイトリニューアル時にサーバー移行を同時に行おうと考えてますので、もうしばらくお待ちください。

twitterで@photoshopvipまでメッセージもらえれば、個別配布させてもらいます。

 チュートリアル　

---

STEP 1　テクスチャをカンバスに追加する

メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。

このチュートリアルでは、キャンバスの大きさを1900ｘ1200pxの72px/inchとします。

あらかじめダウンロードしておいたテクスチャ素材をカンバスにレイアウトします。

つぎにメインメニューより「イメージ」＞「色調補正」＞「色相・彩度」を選択し、以下のように適用しましょう。

これによってダーク系デザインに最適な色調に調整します。

STEP 2　背景をデザインする

新しいレイヤーを一番上に作成し、描画色「黒」(#000000)、背景色「白」(#ffffff)とします。

メインメニューより「フィルタ」＞「描画」＞「雲模様１」を適用します。

続けて「レイヤー」＞「レイヤーマスク」＞「すべての領域を表示」を選択し、レイヤーマスクを適用します。

ツールボックスより「ブラシツール」を選択し、描画色「黒」(#000000)のソフトブラシを使い、中心部以外をマスクしていきます。

「雲模様レイヤー」の描画モードを「覆い焼きカラー」としましょう。

つぎに新しいレイヤーを「雲模様レイヤー」の下に作成し、ツールボックスより「ブラシツールを選択します。

大きなソフトブラシを使い、カンバスの周りを少しずつペイントしていきましょう。

このステップによってカンバスに奥行きを与えることができます。

STEP 3　テキストを加工する

ツールボックスより「文字ツール」を選択し、描画色「水色」(#38bfff)で適当な文字を入力します。

今回は文字サイズを280ptでデザインしています。

テキスト入力後、テキストレイヤーをもうひとつ複製しておきましょう。

下に配置してあるテキストレイヤーを選択し、右クリック＞「テキストをラスタライズ」を適用します。

メインメニューより「フィルタ」＞「ぼかし」＞「ぼかし（ガウス）」を適用します。

STEP 4　レイヤースタイルを適用する

もうひとつの「テキストレイヤー」を選択し、メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番に適用していきます。

レイヤー効果 : カスタム

ドロップシャドウ

シャドウ（内側）

光彩（外側）

ベベルとエンボス

カラーオーバレイ

すべてのレイヤースタイルを適用すると以下のようになります。

レイヤースタイルを適用した「テキストレイヤー」をひとつ複製します。

こちらのレイヤーの「不透明度」は「50%」に設定しておきましょう。

これによりネオンロゴの輝きが増します。

STEP 5　さらにロゴを輝かせる

もうひとつ「テキストレイヤー」を複製し、一番上に配置します。

適用されているレイヤースタイルを削除し、オリジナルのテキストレイヤーに戻します。

このときにレイヤーの「塗り」を「100%」に戻すのを忘れないようにしましょう。

レイヤーパレット上で、このテキストレイヤーを選択し、右クリック＞「テキストをラスタライズ」を選択します。

続けてメインメニューより「フィルタ」＞「ぼかし」＞「ぼかし（ガウス）」を適用し、レイヤーの描画モードを「覆い焼きカラー」に設定します。

STEP4、5で作成した文字レイヤーをひとつのフォルダに収納しておくと、作業を進めやすいかもしれません。

STEP 6　ネオン管の骨組みをデザインする

新しいレイヤーを一番上に作成し、ツールボックスより「ブラシツール」を選択します。

描画色「黒」(#000000)とし、15pxのブラシを使い図のようにペイントします。

テキストレイヤーと重ならないように注意しましょう。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、「ベベルとエンボス」を順番に適用していきます。

このときにレイヤーの「塗りの不透明度」を「31%」にするのを忘れないようにしましょう。

レイヤー効果 : カスタム

ベベルとエンボス

レイヤースタイルを適用すると以下のようになります。

ネオンテキストと骨組みがうまく重なるようにレイヤーマスクを使って境目をぼかしましょう。

メインメニューより「レイヤー」＞「レイヤーマスク」＞「すべての領域を表示」を選択します。

つぎにツールボックスより「ソフトブラシ」を使い、少しずつ重なる部分をマスクしていきます。

新しいレイヤーを「骨組みレイヤー」の下に作成します。

ツールボックスより「ブラシツール」を選択し、15pxのソフトブラシを使って何度かペイントします。

これによってデザインの奥行きが出て、立体感をアップさせることができます。

同様の方法で、他の文字部分にも骨組みをデザインしていくと、以下のようになります。

これで本物そっくりなネオン管ロゴが完成しました。

完成

いかがでしたでしょうか。

本当に作ってしまったような立体感のあるテキストエフェクトを簡単にデザインすることができました。

このチュートリアルのポイントとしては、レイヤースタイルを適切に設定することでぼんやりと輝くライティングエフェクトを再現しました。

背景画像を変更してみたり、ネオンの色を変更するとまったく違う印象で仕上がりますよ。

ただしロゴのサイズを変更したり、ラインの細いロゴを使用する場合は、レイヤースタイルの値を変更する必要があります。

参照したチュートリアルはデザインブログのひとつAbduzeedoのチュートリアルを元にデザインしています。

また参照元には動画チュートリアルも公開されていました。

すべて英語での説明となりますが、ゆっくりステップごとに進められているので見ているだけでも理解しやすいと思いますよ。

Photoshopping Neon Text from Ash Davies on Vimeo.

PhotoshopVIPは高品質のフォトショップチュートリアルを皆さんにお届けしています。

随時更新されるチュートリアルのRSS定期購読をしませんか。

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

↑　クリックすると原寸拡大表示されます。

今回は、ファッション雑誌などでもよく使われているライティングエフェクトを使ったPhotoshopデザインの方法をご紹介します。

デザイン自体も簡単な手順のみで作成できるので、覚えてしまえばオリジナルデザインにも使うことができそうです。

また質感の高い壁紙デザインの作り方も一緒に学ぶことができます。

詳細は以下から。

チュートリアル情報 

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 30分から1時間ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　グラデーションを使った質感の高い背景画像をデザインする方法

・　テキストをきらきらに輝かせる方法

・　切り取り写真と背景の質感を整える方法

などがあります。

チュートリアルハイライト 

---

背景画像を単色で塗りつぶすのではなく、淡いグラデーションをかけてみましょう。

今回使用したグラデーションは灰色(#454545)から黒(#000000)を中心より円形にかけています。

新しいレイヤーを作成し、メインメニューより「フィルタ」＞「描画」＞「雲模様１」を適用します。

このときに描画色を「黒」(#000000)、背景色を「白」(#ffffff)としておくことでうまくデザインすることができます。

出来上がったレイヤーの透明度10％ほどに下げ、ツールボックスより「消しゴムツール」を選択します。

カンバスの下部分を中心に、不要な部分をソフトブラシで消去していきましょう。

こんなエレガントなテキストエフェクトもレイヤースタイルのみを適用するお手軽な作成方法となっています。

適用したレイヤースタイルは光彩（外側）とグラデーションオーバーレイの2種類のみとなっています。

デザインにおいてテキスト部分をより目立たせたいときは、テキストレイヤーの下に、ソフトブラシを使って描画色「白」(#ffffff)で軽くペイントしてみましょう。

テクスチャを重ねたような立体的な奥行きを表現することができます。

各レイヤーの不透明度を調整することで、デザインとのバランスをまとめてくれます。

今回はテキストのほかに、写真より切り抜かれたモデル画像を一緒にデザインしています。

切り抜きに関しては、ペンツールなどお好みの切り抜き方法でかまいません。

デザインを合成するときのポイントとしては、デザインで使われているパーツのデザインの色調を整えることです。

そんなときにオススメな方法としては、「新規調整レイヤー、グラデーションツール」を使用する方法です。

メインメニューより「レイヤー」＞「新規調整レイヤー」＞「グラデーションオーバーレイ」を選択し、お好みのグラデーションカラーを決めます。

今回は、紫(#6f156c)、緑(#00601b)、オレンジ(#fd7c00)の3色を使ったグラデーションを使用しています。

調整レイヤーの描画モードを「オーバーレイ」とし、不透明度を「75%前後」に設定しましょう。

いかがでしょう、光の当たり方などが異なる背景、テキスト、人物レイヤーの色調を見事にそろえることができました。

ライティングエフェクトをデザインするには、ツールボックスより「長方形選択ツール」を選択し、適当な大きさを選択します。

つぎに人物レイヤーを選択した状態で、Ctrl＋Cキーでコピーし、Ctrlキー＋Vでペーストします。

これで選択範囲のみを複製することが可能です。

オリジナル画像の選択範囲内も削除しておくことを忘れずに。

新しいレイヤーを作成し、長方形選択ツールを使い選択範囲を指定します。

ツールボックスより「グラデーションツール」を選択し、白(#ffffff)から透明でペイントします。

作成したレイヤーにレイヤーマスクを適用し、「黒」(#000000)のソフトブラシを使って、グラデーションを部分的にマスクしていきます。

最後にレイヤーの描画モードを「オーバーレイ」とします。

同じ要領でデザインに切り込みを入れましょう。

すべてのパーツにデザインエフェクトを加えるといかのようになります。

簡単な作り方ですが、デザインのアクセントにもなるテクニックのひとつではないでしょうか。

ライティングエフェクトは、使用するグラデーションの色を変更してもまた違うデザインに仕上がりそうです。

さらに詳しいチュートリアルに関しては、参照元サイトにてお願いします。

英語表記でのチュートリアルとなっていますが、サムネイルを豊富に使っているので、比較的わかりやすくまとめられています。

↑　クリックすると原寸拡大表示されます。

今回はフォトショップを使って、大型スクリーンなどに映された映像のようなデザインをつくる方法をご紹介します。

どんな画像でも簡単に画質の荒いピクセル画に仕上げることができます。

詳細は以下から。

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 15分から30分ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　オリジナルパターンファイルの定義方法

・　どんな画像も電光掲示板に表示されたようなデザインにする方法

などがあります。

チュートリアルハイライト

---

今回は画像と一緒にテキストを入力したデザインに加工を加えます。

まずあらかじめダウンロードしておいた画像ファイルを開きます。

次にメインメニューより「文字ツール」を選択し、適当な文字を入力しましょう。

大型スクリーンに映ったとき特有のざらざら感を表現するために、画像サイズを変更しておきましょう。

今回は横幅を1200pxとすることで、うまくデザインすることができます。

画像ファイルの大きさを変更したら、テキストレイヤーと画像レイヤーを結合します。

レイヤーパレット上で2つのレイヤーを同時に選択し、右クリック＞「レイヤーを結合」を適用します。

結合した画像レイヤーを選択し、メインメニューより「フィルタ」>「ピクセル」＞「モザイク」の順番に適用します。

モザイクのサイズは10pxに指定しましょう。

このステップによって、故意に画質を荒くするのがポイントとなります。

10×10pxのカンバスに透明背景レイヤーの設定とし、新しいファイルを開きます。

メインメニューより「楕円形選択ツール」を選択し、描画色「白」(#ffffff)でカンバスいっぱいに円を描きます。

このときに、Shiftキーを押しながら円を描くことで、まん丸の円をデザインすることができますよ。

メインメニューより「編集」＞「パターンを定義」を選択し、前のステップで作成した白い円をパターンとして定義します。

新しいレイヤーを作成し、メインメニューより「編集」＞「塗りつぶし」を選択し、先ほど作成したパターンファイルを使って塗りつぶします。

さらにもうひとつ新しいレイヤーを一番上に作成します。

レイヤーパレット上で、パターンファイルで塗りつぶしたレイヤーのサムネイルをクリックします。

これで、選択範囲を指定することができます。

続けてメインメニューより「選択範囲」＞「選択範囲を反転」を適用します。

選択範囲を指定した状態で、新しいレイヤーを描画色「黒」(#000000)で塗りつぶします。

なおパターンで塗りつぶしたレイヤーは非表示or削除しておきましょう。

最後に画像サイズを変更したレイヤーにメインメニューより「フィルタ」＞「各種設定」＞「ポスタライズ」を選択し、レベルを10に設定したら完成となります。

このテクニックを使うことで、以下のようなデザインも簡単につくることができます。

こちらはカラー写真を白黒写真に変更して、同様の手法でデザインしたものとなります。

電光掲示板に映されたようなドットデザインをリアルに表現することができます。

また画像ファイルなどを使わずに、テキストレイヤーのみにパターンを適用することで以下のような文字デザインも簡単につくることができますよ。

さらに詳しいデザイン方法については、参照元サイトをご覧ください。

英語表記となっていますが、大きなサムネイル画像を使って、細かく紹介されているので、直感的に学ぶことができますよ。

↑　クリックすると拡大原寸表示されます。

今回はフォトショップを使って、シンプルでオシャレな企業用ウェブレイアウトをデザインする方法をご紹介します。

きれいな緑色をアクセントカラーに使い、ウェブトレンドを意識したクリーンなデザインは参考になるテクニックが満載となっています。

企業用ウェブサイト以外にもポートフォリオサイトなどの使い方もできるのではないでしょうか。

また今回このウェブレイアウトを作成したデザイナーさんは、エジプト出身の弱冠15歳のMahmoudさんです。

現在ホームページはリニューアル中とのことですが、これからがとてもたのしみなデザイナーさんのひとりではないでしょうか。

詳細は以下から。

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 1時間30分から2時間ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　グリッドを使ったすっきりとして使いやすいウェブレイアウトの方法

・　グラデーションを使うことで奥行きのある立体的なデザインをつくる方法

・　1pxの白ラインをデザインに加えることで光沢感を出す方法

・　レイヤースタイルを適用するだけの押したくなるようなボタンの作成方法

・　立体的なリボンをデザインする方法

などがあります。

チュートリアルハイライト

---

ウェブレイアウトを作成するときに、最近必ずと言っていいほどグリッドを使ってデザインされることが多いようです。

今回もグリッドの補助ツールとして960 Grid Systemを使用しています。

Photoshop、Illustrator、Fireworks、InDesignなどさまざまなアプリケーションに対応してくれる点もうれしいですね。

フォトショップのガイドを使ってラインを引くと以下のようになります。

グリッド上にテキストやボックス枠などを並べることですっきりとしたデザインに仕上げることができます。

メニューボタンはウェブサイトにおいても、最もよくクリックされるパーツのひとつです。

以下のような1色で塗りつぶしたデザインよりもレイヤースタイルを適用するようにこころがけましょう。

こちらがレイヤースタイル適用前のメニューボタン。

そしてこちらがレイヤースタイル適用後のメニューボタンとなります。

細かい部分ですが、ウェブサイト全体のイメージが変わってきます。

上記のメニューボタンには以下のようなレイヤースタイルを適用しています。

使用したスタイルは、グラデーションオーバーレイと境界線となっています。

奥行きのある立体的なデザインを作成するには、2つの微妙に色の異なるグラデーションをあわせて使います。

まず濃いグラデーションを使って、カンバス全体をペイントします。

グラデーションの詳細は以下のとおりです。

使用している配色は参考になるのではないでしょうか。

次にもう1つの異なる色のグラデーションを使い下から上にグラデーションをかけます。

このときに2つのグラデーションが交わる部分の色を同じにすることがポイントとなります。

使用したグラデーションは以下のとおりです。

2つのグラデーションを組み合わせることで、奥行き感のあるデザインを作ることができました。

今回は緑をメインとしていますが、色を変更することで他のデザインにも応用することができそうです。

1pxのラインをデザインすることで、ウェブデザインの質感をアップすることができます。

ラインを描くときは、使用している色よりもやや明るい色を使用することで、立体感が増します。

今回は緑色をメインとしているので、薄黄緑色(#acd86e)を使用しています。

テキストを入力する際も、レイヤースタイルを使い淡いグラデーションを適用することでクリーンなレイアウトに仕上がります。

ボックス枠などをレイアウトするときに映り込みをデザインすることで、立体感がさらにアップします。

映り込みをデザインするときにはレイヤーマスクを使用することで簡単にデザインすることができます。

このときも緑色の同系色を使うことで背景レイヤーとなじみやすくなります。

このようなボタンだと思わずクリックしたくなりませんか。

こちらもレイヤースタイルをうまく利用するだけで簡単にデザインすることができます。

レイヤースタイルは以下のように適用しましょう。

アイコンなどをレイアウトするときにはグリッドを使うことできれいに整列させることができます。

またレイアウトする場所も分かりやすく、デザインの時間も短縮することができそうです。

立体的なリボンをデザインするには、2つのレイヤーを組み合わせることで作成します。

まずリボンの表面部分となる長方形を描き、レイヤースタイルを以下のように設定します。

次に10×43pxの長方形を作成し、メインメニューより「編集」＞「自由変形」を選択し斜めに傾けます。

この部分が立体的に魅せるポイントとなります。

詳しいチュートリアルに関しては、参照元サイトを参考にしてください。

使われているテクニックはウェブデザインのトレンドをうまく取り入れているので、ぜひ覚えておきたいところです。

また以前ご紹介した「(海外記事) フォトショップでシンプルでオシャレなウェブレイアウトをデザインする方法」でも同じテクニックをいくつか使ってデザインしています。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップでレトロなカラーリングがきれいなテキストエフェクトをデザインする方法をご紹介します。

テクスチャを使うことでビンテージデザイン特有の色合いを表現しており、ほかのデザインでも応用することができるテクニックです。

チュートリアルと同時にサンプル用PSDファイルも公開されているので、ダウンロードして確認しながらデザインすることができますよ。

詳細は以下から。

サンプル用PSDファイルダウンロード

---

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

 サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 15.6MB

ファイル形式 : psdファイル (zipファイルで圧縮されています。）

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 30分から1時間ほど 

 このチュートリアルから学ぶことのできるポイントとしては、

・　ペンツールを使ってレトロなウェーブデザインを描く方法

・　レイヤーマスクを使って、文字の上だけにデザインを反映させる方法

・　グラデーションオーバーレイを使った効果的な光の反射をデザインする方法

などがあります。

チュートリアルハイライト

---

今回のデザインのアクセントとなっているウェーブデザインはペンツールを使って、デザインしています。

レトロ感を表現することができる配色はポイントです。

ペンツールで無造作に描いたシェイプを4つ重ねることで、以下のようなデザインに仕上がります。

すべてのレイヤーにおいて「境界線」レイヤースタイルを適用しています。

これをカンバス全体にデザインするとこのようになります。

出来上がったパターン柄にテクスチャを重ねることで、独特のビンテージ感を表現します。

今回使用したテクスチャはすべてZen Texturesにて無料ダウンロード可能となっていますよ。

Zen Texturesには合計500枚以上の高画質なテクスチャ画像が掲載されており、すべて無料でダウンロードできるのでチェックしておくとよいかもしれません。

以下はPaper Texturesをレイヤーの上に重ね、不透明度を40%に設定しています。

ツールボックスより「文字ツール」を選択し、適当な文字を描画色「白」(#ffffff)で入力します。

お好みのフォントを使用して構いませんが、太めのフォントを使うと仕上がりのデザインがよくなりますよ。

今回使用したフォントは、Bodini Fontとなっています。

ウェーブパターン柄の下にテキストレイヤーを配置します。

続けてレイヤーパレット上で、レイヤーの間をAltキーを押しながらクリックします。

これでテキストレイヤーにのみレイヤーマスクを適用することができます。（以下のサムネイルを参照）

新しいレイヤーを一番下に作成し、紺色(#003547)で塗りつぶします。

レイヤーマスクを適用したテキストレイヤーにメインメニューより「レイヤー」＞「レイヤースタイル」を順番に適用することで立体感のあるデザインに仕上げています。

ドロップシャドウ、ベベルとエンボス、グラデーションオーバーレイ、境界線を適用することで以下のようになります。

新しいレイヤーを背景レイヤーの上に作成します。

ツールボックスより「長方形選択ツール」を選択し、ぼかしを「100px」で全体を選択します。

Ctrlキー＋Shiftキー＋Iのショートカットキーを使い、選択範囲を反転させたら、描画色「黒」(#000000)で塗りつぶします。

次にレイヤーの不透明度を「30％」に設定するとこのようになります。

背景デザインに立体感を出すために、「背景」レイヤーに「グラデーションオーバーレイ」を適用します。

グラデーションの配色には2色とも「白」(#ffffff)を使いますが、片方の「不透明度」を「0%」にすることがポイントとなります。

このグラデーションのかけ方はいろいろなデザインでも応用することができそうです。

デザイン全体の質感を整えるために、あらかじめダウンロードしておいたテクスチャStained Paper Textureをレイヤーの一番上にレイアウトします。

レイヤーの描画モードを「乗算」として、「不透明度」を「50%」に設定しましょう。

さらに質感を高めるために「ノイズ」フィルタを使って、全体にグランジデザインを加えます。

新しいレイヤーを一番上に作成し、描画色「白」(#ffffff)として、メインメニューより「フィルタ」＞「ノイズ」＞「ノイズを加える」を適用します。

つづけて再度メインメニューより「フィルタ」＞「ぼかし」を加えることでテクスチャが完成します。

このレイヤーの描画モードを「乗算」、不透明度を「40％」としましょう。

デザインを立体的に魅せるために、グラデーションツールを使い立体的なラインを描く方法が紹介されています。

新しいレイヤーを作成し、「長方形選択ツール」を使ってカンバス上部を選択します。

ツールボックスより「グラデーションツール」を選択し、選択範囲の下部分に「黒から透明」のグラデーションをペイントします。

つづけてメインメニューより「選択範囲」＞「選択範囲を反転」を適用し（Ctrlキー＋Shiftキー＋Iでも可）、選択範囲の上部を「白から透明」のグラデーションを使ってペイントします。

グラデーションを使ってペイントしたそれぞれのレイヤーの不透明度を「黒」は50%、「白」は20%に設定すると立体的なラインを描くことができます。

この立体的なラインは、ウェブサイトデザインなどでも最近よく使われているので、覚えておくとよいかもしれません。

作成した立体的なラインを滑らかにするためにレイヤーマスクを使って、両端部分をソフトブラシを使ってペイントすれば完成です。

さらに詳しいチュートリアルに関しては、参照元サイトをご覧ください。

英語表記でのチュートリアルとなりますが、ステップごとにたくさんのサムネイル画像を使って説明されています。

またサンプル用PSDファイルも公開されているので、確認しながらオリジナルデザインを作成することもできますね。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使ってメタリックな銀色文字をつくる方法をご紹介します。

フォトショップの便利な機能のひとつ「レイヤースタイル」を適用するだけで簡単にデザインできるテキストエフェクトとなっています。

レイヤースタイルを保存しておけば、ボタンひとつでいつでもシルバー文字をデザインすることができます。

最後にサンプル用PSDファイルも一緒に公開していますので、ダウンロード確認しながらデザインするといいかもしれません。

詳細は以下から。

チュートリアル情報 

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

チュートリアルをはじめる前に今回使用するパターン画像をダウンロードしておきましょう。

>> 銀色文字用パターン画像

※ダウンロードを完了したら、フォトショップで画像を開きましょう。

次にメインメニューより「編集」＞「パターンを定義」を選択し、パターンの定義をしておきましょう。

これでパターンファイルとして使用することが可能になります。

次に使用するフォントをダウンロードしましょう。

今回は「2010年の年はじめにまとめられたフリーフォントのまとめ」で紹介した「Harabara」フォントを使用しました。

最後に背景画像に使用するパターンファイルをダウンロードしましょう。

今回は「継ぎ目のないPhotoshop用レザーテクスチャパターンセット「5 Tileable Leather Pattern」」のパターンファイルを使用しました。

ダウンロードしたパターンファイルはあらかじめフォトショップにインストールしておきましょう。

 チュートリアル

STEP 1　テキストを入力する

メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。

このチュートリアルでは、キャンバスの大きさを1000×600pxの72px/inchとします。

ツールボックスより「文字ツール」を選択し、適当な文字を入力します。

今回は文字サイズ240ptでデザインしています。

STEP 2　レイヤースタイルを適用する

2つの文字レイヤーのうち一番上に配置されているレイヤーを選択し、メインメニューより「レイヤー」＞「レイヤースタイル」を順番に適用していきます。

レイヤー効果 : カスタム

ドロップシャドウ

シャドウ（内側）

光彩（外側）

べベルとエンボス

サテン

パターンオーバーレイ

あらかじめダウンロードしておいたパターンを使いましょう。

境界線

すべてのレイヤースタイルを適用すると以下のようになります。

STEP 3　さらにレイヤースタイルを適用する

複製しておいたもうひとつの文字レイヤーを選択し、再度メインメニューより「レイヤー」＞「レイヤースタイル」を順番に適用していきます。

レイヤー効果 : カスタム

ドロップシャドウ

光彩（内側）

べベルとエンボス

べベルとエンス（輪郭）

サテン

グラデーションオーバレイ

グラデーションの設定は以下のようになっています。

境界線

グラデーションの設定については以下を参考にしてください。

すべてのレイヤースタイルを適用すると以下のようになります。

STEP 4　背景をデザインする

STEP 2, 3で作成したレイヤーを重ねると、以下のようになります。

2つの文字レイヤーがずれないように、フォルダを作成しておくとよいですよ。

「背景」レイヤーを選択し、メインメニューより「編集」＞「塗りつぶし」を選択します。

あらかじめダウンロードしておいたレザーテクスチャを使い、カンバスを塗りつぶしましょう。

新しいレイヤーを「背景」レイヤーの上に作成します。

次にツールボックスより「ブラシツール」を選択、描画色「黒」(#000000)のソフトブラシでカンバスの周りを少しずつペイントしていきます。

最後にレイヤーの「不透明度」を80%に下げたら、完成です。

完成

いかがでしたでしょうか。

質感の高いテキストエフェクトを作成する場合は、2つの文字レイヤーにそれぞれレイヤースタイルを適用することで立体感やツヤなどを倍増してくれます。

なお、今回は文字サイズを240ptと設定しましたが、変更する場合はレイヤースタイルの値、特に「ベベルとエンボス」を変更すると仕上がりがよくなりますよ。

銀色文字の別の種類などと一緒にぜひ覚えておきたテクニックのひとつではないでしょうか。

今回作成した銀色文字のサンプル用PSDファイルをダウンロードすることができます。

PhotoshopVIPは高品質のフォトショップチュートリアルを皆さんにお届けしています。

随時更新されるチュートリアルのRSS定期購読をしませんか。

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使って淡いグラデーションとピンクのカラーリングがオシャレなウェブレイアウトをデザインする方法をご紹介します。

行間幅や1pxの白ラインなどまで細かくていねいに説明されているチュートリアルで、覚えておきたいテクニックがたくさん使われています。

チュートリアルと同時にサンプル用PSDファイルも公開されているので、ダウンロードして確認しながらデザインすることができますよ。

詳細は以下から。

サンプル用PSDファイルダウンロード

---

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

 サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 3.0MB

ファイル形式 : psdファイル (rarファイルで圧縮されています。）

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 1時間から1時間30分ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・　グリッドを使ったすっきりとして使いやすいウェブレイアウトの方法

・　淡い色のグラデーションを使うことでスタイリッシュでオシャレなウェブデザインを演出する方法

・　1pxの白ラインをデザインに加えることで光沢感を出す方法

・　レイヤースタイルを適用するだけの押したくなるようなボタンの作成方法

・　サムネイルに影をつけて立体的に魅せる方法

などがあります。

チュートリアルハイライト

---

ウェブレイアウトを作成する際に、等間隔に区切りをつけた「グリッド」を使うことで、見た目もすっきりしますし、デザイン作業も比較的簡単に進めることができます。

「(海外記事) Photoshopでシンプルなポートフォリオサイトデザインをつくる方法」でも紹介しましたが、グリッドラインデザインの補助ツールに関しては960.gsをオススメします。

（参照サイト） 960.gs

実際に定規を表示して、グリッドをガイドで表示すると以下のようになります。

ガイドをレイアウトに使用する場合は、Shiftキーを押しながらレイアウトすると、10px単位で正確にラインを挿入することができます。

真っ白のカンバスに淡いグラデーションを全体に加えてあげることで、ウェブデザインの雰囲気ががらりと変わります。

今回使用したグラデーションは「白」(#ffffff)から薄灰色(#dcdcdc)を使っています。

これはappleなどのサイトにも共通するカラーリングとなります。

ナビゲーションメニューの選択された状態を表す場合もべた塗りではなく、レイヤースタイルを使うように心がけてみましょう。

型押し風デザインを作成する場合は、レイヤースタイルのシャドウ（内側）、光彩（内側）を使うことでうまく表現することができます。

今回は、光彩（内側）を使っていますね。

このレイヤースタイルを適用することで、以下の様になります。

細かいところですが、ウェブデザインにおいて差が出るテクニックではないでしょうか。

テキストをレイアウトする場合もグリッドを念頭においてデザインしています。

すべてのテキスト、ボックス枠、ロゴなどが整列されているだけですっきりとした印象を与えることができます。

サムネイル画像を表示する際は、少しだけ影をつけることで立体感がまします。

楕円形ツールなどで選択範囲を指定した後、「黒」(#000000）でペイントします。

つづけてメインメニューより「フィルタ」＞「ぼかし」をてきようすることで、うまく影を表現できます。

影が濃い場合は、レイヤーの「不透明度」を下げてあげることで解決します。

こんなタイプのボタン見たことありませんか。

appleなど多くのウェブサイトで最近使われているボタンデザインですね。

こちらもレイヤースタイルを適用するだけで簡単にデザインすることができます。

ウェブデザインにおいて立体的に魅せるコツのひとつがこの1pxの白ラインです。

まず「鉛筆ツール」を使い、太さ1pxの灰色（#8d8d8d)のラインを描きます。

続けて「白」(#ffffff)のラインを引くことで、立体的なラインをデザインすることができます。

このラインを使うだけでとてもスタイリッシュな印象に仕上がります。

拡大してあるとよく分かりませんが、原寸サイズで見ると立体的に見えます。

今回ご紹介したテクニックの多くは、他のウェブデザインを行うときにも使うことができるのでぜひ、サンプルPSDファイルをダウンロードして確認してみてください。

詳しいチュートリアルに関しては、参照元サイトを参考してもらうようにお願いします。

英語でのチュートリアルとなりますが、サムネイル画像をたくさん使っているので、直感的にデザイン方法を覚えることができますよ。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使って本物の様な輝きがまぶしい銀色文字をつくる方法をご紹介します。

「レイヤースタイル」を適用するだけで、簡単に質感の高いデザインに仕上げることができるので、覚えておくと便利なテクニックのひとつです。

最後にサンプル用PSDファイルも公開していますので、レイヤースタイルを保存しておけばボタンひとつでデザインすることができますよ。

詳細は以下から。

チュートリアル情報 

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

チュートリアルをはじめる前に今回使用するパターン画像をダウンロードしておきましょう。

>> 銀色文字用パターン画像

※ダウンロードを完了したら、フォトショップで画像を開きましょう。

次にメインメニューより「編集」＞「パターンを定義」を選択し、パターンの定義をしておきましょう。

これでパターンファイルとして使用することが可能になります。

次に使用するフォントをダウンロードしましょう。

今回は「ウェブデザイナーにもおすすめ、あまり見かけない新しいフリーフォント20個まとめ」で紹介した「Sorts Mill Goudy」フォントを使用しました。

 チュートリアル

STEP 1　背景画像をデザインする

メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。

このチュートリアルでは、キャンバスの大きさを1000×600pxの72px/inchとします。

ツールボックスより「グラデーションツール」を選択し、黒(#000000)から灰色(#2f2f2f)のグラデーションを中心から円形にかけます。

メインメニューより「フィルタ」＞「テクスチャ」＞「テクスチャライザ」を適用します。

今回は「拡大・縮小」を100%、「レリーフ」を4に設定しました。

STEP 1　テキストエフェクト

ツールボックスより「文字ツール」を選択し、あらかじめダウンロードしておいたフォントを使い、描画色「白」(#ffffff)で適当な文字を入力する。

今回は文字サイズを240ptに設定しています。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番に適用していきます。

ドロップシャドウ

シャドウ（内側）

光彩（外側）

光彩（内側）

べベルとエンボス

グラデーションオーバーレイ

グラデーションの設定は以下のようになります。

パターンオーバーレイ

すべてのスタイルを適用すると以下のようなテキストエフェクトが完成します。

完成

いかがでしたでしょうか。

レイヤースタイルを適用するだけで、光り輝く銀色文字を5分で完成させることができました。

出来上がったテキストのレイヤースタイルを保存しておけば、いつでもボタンひとつで銀色文字をデザインすることができます。

文字サイズが小さい場合は、レイヤースタイルの値を変更してあげることで、うまく仕上がりますよ。

金色文字のつくり方と一緒に覚えておくとよさそうです。

今回作成した銀色文字のサンプル用PSDファイルをダウンロードすることができます。

PhotoshopVIPは高品質のフォトショップチュートリアルを皆さんにお届けしています。

随時更新されるチュートリアルのRSS定期購読をしませんか。

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。