ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集

繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。

Create a Grungy, Translucent Web Portfolio Design
グランジ風のテクスチャと透明感が美しいレイアウト。

Design a Sleek Textured Blue Portfolio
グランジ風のテクスチャを採用したポートフォリオ。

Your Own Portfolio Web Site
ノートや付箋を使用したデザイン。

Create a Clean and Professional Web Design
クリーンで落ち着いた感じの企業サイト用デザイン。

How to Design a Blue Marketing Company Layout
ブルーをベースに、グレーのグラデーションが視線を集めます。

Portfolio layout created with jeans texture
ジーンズのテクスチャを使用したポートフォリオサイト用。

Create a Professional Web 2.0 Layout
トップページに必要な機能は全ておさえた充実レイアウト。

Design a Bold and Vibrant Portfolio
ボールドの書体が印象に残るレイアウト。

Learn How To Create A Clean Layout
ホワイトスペースを活用したクリーンなレイアウト。

Create a Hosting Layout
上下のタブで豊富なコンテンツを掲載。

Design a Sleek Bokeh Styled Portfolio
ヘッダの背景にある写真の「ボケ」が印象的。

How to Design a Portfolio Site
WordPress用のテーマファイルもダウンロード可。

Create a Slick and Minimalist Web Layout
金属のテクスチャを使用したミニマルなレイアウト。

Create a dark portfolio layout or a CSS design showcase layout
オレンジのアクセントがきいた、ブラックベースのカラースキーム。

Design an Ecommerce Website
Eコマースサイト用のレイアウト。

Create a clean elegant wordpress theme
大胆だけど、エレガントなWordPress用のデザイン。

Design a wordpress theme from scratch
複数のパネルを重ねたWordPress用のデザイン。

Create a gritty website layout
繊細なグランジ風のテクスチャを使用したレイアウト。

Create a Clean and Effective Product Layout
プロダクトをより印象的にみせるレイアウト。

Software Layout #4
ソフトウェアのプロダクトページ用のレイアウト。

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
繊細なペーパーテクスチャを自作したグランジ風のデザイン。

Create A Stylish Portfolio Layout
スタイリッシュなポートフォリオ用のレイアウト。