こんにちわ。年が明けて早々、「2009年の抱負は、誘われた飲みを断らない！」と決意したmBlogのQuattroです。毎年ろくでもない抱負ばかりを決意してるので自分でもほとほと困っております。

さてそんなわけで新しい年になったのですが、みなさんにとって2008年はどんな年でしたか？　ドッグイヤーと言われるウェブのデザイン業界にも色々と変化があり、今年は特にWindows Vistaの影響か、光を使ったエフェクトや半透明DIVを使ったトランスルーセントデザインをよく見かけました。そこで今回は、そうしたデザインを行う上で役立つチュートリアルサイトを集めてみました。

• Windows Vista風のライティングエフェクト

まずはコチラ。Windows Vista標準の壁紙風のオーロラエフェクトを作成するチュートリアル。最初に用意する画像は何でもイイので、“ぼかし（ガウス）”フィルタを使ってボヤっとした背景を作成します。

あとはそれを、“色相・彩度”、もしくは“カラーバランス”あたりを使って好みの色に変えて、オーロラ部分を複数配置して完成。とっても簡単にモダンな印象を与えるアートワークを作る事ができます。

• Leopard風のオーロラエフェクト

Vistaときたら当然MacOS風のものも紹介しなければいけませんね。MacOS 10.5 Leopardの初期ウォールペーパーのオーロラエフェクト制作のチュートリアルが紹介されてます。

ここではまず最初に天文写真を素材に使ってレタッチを初めていますが、このへんはフィルタ類でも代用できるかと思います。肝心なのは放射状フィルタの使い方と、その後の細かい色付け。ちょっとした一手間で作品が良くなるという例ですね。

• 日食をテーマにしたライティングエフェクト

虹色のライトエフェクトと、日食をテーマにしたアートワークを組み合わせたもの。自分の場合よく“雲模様フィルタ”や“ノイズフィルタ”などを組み合わせてテクスチャを作るのですが、この場合最初の手順でオリジナルのブラシを作っている点が興味深い。

地球の部分のテクスチャは写真素材から持って来るもよし、フィルタを使って自作するもよし。ひとつのチュートリアルから多くの事を学べるという好例です。デザイナー同士はこうして助け合わなきゃね。

• 実写とライトエフェクトとの合成

良質なフォトショップ用チュートリアルをいつも提供してくれるPSDTutsからの記事。

切り抜いた人の周りに色を付けた雲模様をボヤっと配置したり、描画後のブラシを馴染ませる作業、イラレとの連携等々、細かいテクニックが効いてます。ここの作例はいつもセンスがイイので勉強になります。

• 背景の透過するエフェクト

最後に紹介するのは、ガラスのように下地が透けて見えるトランスルーセントなテキストエフェクト。もちろんテキストだけでなく、DIVにも応用できます。けど残念なことにレイヤースタイルの生きてるPSDの配布が終わってるようなので、自分で作っちゃいました。

レイヤースタイルを使って素体を作成したので、ココからご自由にDLしてお使いください。PNGと組み合わせてデザイニングするととってもイイ感じ。

さて今回の内容、いかがでしたでしょうか。ウェブのデザイニングって、言ってみれば印刷媒体に比べて普遍性という側面が希薄なだけに、常に流れを見極めなきゃならない、ついていくのが精一杯だと感じる分野ではありますが、そこに魅力があるというのもまた事実だと思うのです。変化を美徳とする人たちの表現の場としては、案外居心地のイイ業界だなと、そんな風に思うのであります。

それではまた来月！

関連リンク

「やるな！」と思われるデザイナーに バックナンバー
デザインの必需品、写真素材サイト（「やるな！」と思われるデザイナーに ♯30）
もっと勉強したい人に。チュートリアルサイト（「やるな！」と思われるデザイナーに ♯26）