ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例
Post on:2011年5月13日
sponsors
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。
Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。
Opacity and Overlay Techniques in Web Design
[ad#ad-2]
下記は各ポイントを意訳したものです。
Dark Overlay
ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。
このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGでのオーバーレイを利用していることが多いです。
写真を背景に使ったヘッダの天地に半透明のテクニックを使用したデザインです。洗練した印象を与え、反復を効果的に使用しています。
大きい写真を背景に使用し、コンテンツ全体に半透明のテクニックを使用しています。視認性をよくするため、透明度を限りなく低くするのがポイントです。
Light Overlay
明るいオーバーレイは「Dark Overlay」とは反対で、ホワイト、あるいはパターンやイメージを使用します。暗いオーバーレイがスタイリッシュな印象を与えるように、明るいオーバーレイはもっとライトで、のんびりした印象を与え、ウェブデザインをモダンな感じにします。
コンテンツブロックとヘッダとナビゲーションに非常に繊細なパターンを使用して明るいオーバーレイをしています。多くの階層を必要とするエレメントを切り離す素晴らしいテクニックです。
大きい背景画像を使用したデザインは最近よく見かけますが、このサイトのユニークな点はそれがタイポグラフィであるということです。この素敵なタイポグラフィはコンテンツを読むことを邪魔することなく、明るいオーバーレイを巧みに使用しています。
[ad#ad-2]
Color Mixes
最後に紹介するオーバーレイのテクニックは、ミックスしたいくつかのカラーを使ったオーバーレイです。使いこなすのは難しいかもしれませんが、これはかなりきちんとしたエフェクトを引き起こすことができ、暗いオーバーレイや明るいオーバーレイよりはるかに多くの効果を与えることができます。
ブラックとレッドのタイポグラフィを使い、互いに半透明で重なり合わせ、デザインに抽象的な奥行きを与え、視覚的にしっかりしたエフェクトを作り出しています。ナビゲーションはユーザーのホバー操作で透明度をコントロールして提供しています。テクスチャの質感と半透明の効果がテキストに素晴らしいエフェクトを与えています。
レッド、ブルー、そしてグレーをミックスして、異なるレベルで半透明にしたテクニックです。これらはデザインに奥行きを加え、それぞれ相互に作用しています。斜め方向のパターンがデザイン全体の透明なエフェクトの複雑さとバランスをとるために使用され、その効果でシンプルに見えます。
sponsors
