Advertisement

advancedphotoshoptechnique

昨今の世界中のウェブデザインを見ていると、シンプルな中にさまざまなこだわりが出てきています。

今までは平面的だったウェブデザインを立体的に見せるなど2009年度に流行しているトレンドがいくつかあります。

それらをわかりやすくまとめた記事「5 Advanced Photoshop Techniques for Web Designers」と「5 Advanced Photoshop Techniques for Web Designers Part 2」をCarsonfiedさんで紹介されていたのでまとめてみました。

海外記事ですが、日本のウェブサイトデザインにおいても見かけることが多くなっていますので、覚えておくと便利なフォトショップテクニックが全部で10個まとめられています。

説明が詳しくされたフォトショップチュートリアルが掲載されていますので、よかったら参照元も合わせてご覧ください。

 

詳細は以下から。

 

1. 立体的なボタン

buttons

by transmissionapps.com

まず2009年のウェブトレンドのひとつとして、立体的なボタンを効果的に配置しているサイトをよく見かけます。

商品購入手続きに進む「ショッピングカーとボタン」やサンプルなどをダウンロードできる「ダウンロードボタン」など使い方はさまざまなです。

効果的なボタンを作成することによって、読者の人にとってもわかりやすく、かっこいいデザインを作ることができます。

以下のようなシンプルで立体的なボタンの作り方を詳しく説明しています。

button_141

Awesome Buttons

 

 

2. ナビゲーションメニュー

nav

by Legacy Locker

ナビゲーションメニューは多くのリーダーが直感的に操作するため、ウェブサイトにおいて最も重要なパーツとして考えられます。

見やすくて、使いやすいナビゲーションメニューにすることでウェブサイトの印象もがらりと変わりますよ。

今回は、徐々に透明にフェードアウトするナビゲーションメニューの作り方が紹介されています。

nav_12

Navigation Menus

 

 

3. 型押し文字

type_inset

by forabeautifulweb.com

よく見かけるテクニックのひとつで、文字を立体的に見せることが可能です。

先日、Photoshop VIPでも、「サンプルPSD付、フォトショップで「Photoshop CS4」の様な型押し文字を作る方法」で作り方を紹介しました。

よければそちらも参考にしてみてください。フォトショップ用サンプルPSDを配布しています。

今回は、以下のような簡単な型押し文字の作り方をご紹介しています。

type_6

Typography Inset

 

 

4. 立体的なボックスの作成

fade_shadow

by mint.com

ボックスの下に影を作成することによって、背景より浮き出したように見えるボックスを作成することができます。

すべてのボックスに使用しなくても、強調したい場所を効果的に目立たせることができます。

今回はいろいろ応用できそうなシンプルなボックスの作り方をご紹介しています。

faded_shadow_6

Faded Shadow

 

 

5. 奥行きのある3Dボタン

depth1

by mosaiko.com.br

最近のウェブデザインにおいて、奥行きを作ることによって、ダイナミックな3Dボタンを配置しているウェブサイトをよく見かけます。

難しそうに見えますが、少ないレイヤーのみで簡単に作成することができるので、覚えておくといいかもしれません。

今回は、以下のシンプルなボタンの作り方を紹介しています。

depth_12

Depth and 3D Space

 

 

6. ページの折り込み

fold

by Bridge 55

Web2.0デザインにおいて、当初からよく使われているテクニックですが、現在もいまだに人気のテクニックです。

ウェブサイトを効果的に立体的に見せることができます。

以下のように簡単なページの折り込み方法を紹介しています。

fold_10

Fold

 

 

7. ボックスから飛び出した3Dボタン

out_of_box

by Dave Jay

効果的に読者の目を引く方法のひとつとして、ボックスから飛び出したように見える3Dボタンの設置があります。

デザイン的にもかわいいですし、ボタン以外にもいろいろ使えそうなテクニックです。

outbox_13

Out of the box

 

 

8. ぼかし効果

blur

 by Phodana

見落としがちなテクニックのひとつですが、ボックスの周りに透明のボックスを配置することで、きれいでシンプルなウェブサイトを完成させることができます。

このテクニックを使うことで、背景画像が透けて見えて、さらにあなたのウェブサイトを立体的に見せることができます。

以下のチュートリアルも応用しやすいシンプルなものになっています。

blur_7

Blur

 

 

9. ライティングエフェクト

light_fx

by PRO Design

人気デザインブログのひとつ、PsdTuts+さんでも使われている、繊細だけど効果的なライティング効果を発揮します。

とても細かい作業ですが、ホームページを「本物志向」に近づけたいなら必須のテクニックです。

以下のチュートリアルは、青系のウェブサイトを具体例にデザインしていますが、色を変えることによって思い通りにデザインできます。

lightfx_11

Light Effects

 

 

10. 奥行きのある背景デザイン

bg_fx

by Forty Two

奥行きのある背景画像をデザインすることで、読者にさらに強いインパクトを与えることができます。

作り方は簡単ですが、ほかのチュートリアルに比べると時間がかかるのも事実です。

しかし、ウェブデザインに使われているか、使われていないかによってウェブサイトの印象ががらりと変わります。

ゆっくりステップ順にしていけばきっと納得のいくものが完成します。

bgfx_16

Background effects

 

日本の人気デザインブログColissさんでも同じまとめ記事がありました。よかったら合わせてどうぞ。

[参照元 : 5 Advanced Photoshop Techniques for Web Designers – Carsonfied]

 

Photoshop VIPではほぼ毎日フォトショップを中心にデザインに関するさまざまな情報をお届けしています。
RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。
もちろん無料ですのでお気軽にどうぞ。
RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

PhotoshopVIPのRSS購読をする 

rss-feed-icon