(海外記事) フォトショップでナチュラル系透明ウェブレイアウトをつくる方法

↑　クリックすると原寸大サイズに拡大します。

 

今回は、フォトショップを使って、自然をモチーフにした、透明感たっぷりのウェブレイアウトの作り方をご紹介します。

ウェブトレンドのひとつでもある、背景全体に使用したデザインテクスチャに、透明ボックスがうまくマッチしています。

お好みのデザインを使いながら、学習することも可能なので、便利です。

 

チュートリアル情報

プログラム : Photoshop

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

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

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

 

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

・ ウェブトレンドを意識した、大きな背景を使用したシングルページの作り方

・ PNG透過を考えて、透明ボックスの簡単な作り方

・ てんとう虫や蝶を切り抜いた画像ファイルを配置して立体感をアップ

・ グリッドラインを使用したすっきりとしたウェブレイアウト方法

などがあります。

 

詳細は以下より。

 

こんな感じの背景画像が透けて見える半透明ボックス枠もレイヤースタイルのみで作ることができるんです。

ウェブデザインだけでなくて、いろいろな使い方がありそうです。

 

てんとう虫を切り抜いた画像がレイアウトに奥行きを表現しています。

グロス調のメニューバーとの相性もよさそうです。

 

グリッドを使用してデザインされているため、等間隔にすっきりと配置されています。

これは、基本になってきていますね。