Advertisement

transparentlayout1

↑ クリックすると参照元サイトに移動します。

 

今回は、フォトショップでつくる、透明感たっぷりなウェブレイアウトの作り方をご紹介します。

デザインされているボックス枠などもすべて透明になっており、背景画像が透けたデザインになっています。

背景に大きな画像ファイルなんかを使って、ウェブレイアウトを作成したいと考えている人には、参考になるのではないでしょうか。

 

チュートリアル情報

プログラム : Photoshop

バージョン : CS4で作成 (古いバージョンでも可能)

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

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

 

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

・ グリッドを使った、見やすくてシンプルなウェブレイアウト方法

・ レイヤースタイルを加えるだけの簡単テキストエフェクトをロゴに使用

・ 立体的なタブの作りかた

などがあります。

 

サンプルPSDファイルを£2.5(約380円)でダウンロードすることもできるので興味のある方はどうぞ。

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

 

詳細は以下より。

 

 

レイヤースタイルを適用するだけで、型押し風のエレガントなロゴを作成します。

step8

 

こちらもレイヤースタイルを適用するだけで、背景の透けた透明ボックスをデザインすることができます。

step13

 

こんな立体的なタブの作りかたはとても参考になります。

簡単なステップのみなので、自分でもさくさく作成できます。

step221

 

グリッドを使って、整列させることで、とても見やしレイアウトになりますね。

step38