ビジネスサイトに使えるレイアウトのチュートリアルいっぱい
最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね。
これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか？
今回は、そんなウェブデザイン初心者の方でも、つかえそうなビジネスサイトのレイアウト系のチュートリアルをいっぱい集めてみました。
いくつかのサイトではPhotoshopのファイルがダウンロードできるサイトもありますので、とても参考になるのではないでしょうか？
まずは、気に入ったデザインを真似するところからはじめて見ましょう！
Create a Clean and Effective Product Layout
Appleのウェブサイトっぽいシンプルで洗練されたレイアウトのチュートリアルです。
Create a Clean and Colorful Web Layout in Photoshop
背景のグラデーションが印象的なチュートリアル
Design a Beautiful Website From Scratch
細部にまでこだわって作られている美しいウェブサイトのチュートリアル
Design a Clean and Colorful Portfolio in Photoshop
ブルーの背景も微妙にグラデーションを加える事でベタにならないですね。
Create a Professional Portfolio Design in 17 Easy Steps
破れた紙を敷いたような美しいレイアウト
Business Layout #2
上から見下ろしたようなバードビューのレイアウト。
Business Layout #3
やさしい色使いが美しいチュートリアルです。
Sleek and modern portfolio layout
シンプルですが力強い印象のレイアウトですね。
Design a Premium Theme Marketplace Layout Using Photoshop
グリーンとブラウンと配色が美しいレイアウトのチュートリアル
Create a Business PSD Layout in less than 10 minutes*
オレンジの帯で全体を引き締めていますね。
Modern Web 2.0 Web Layout
こちらはブルーのライン。
Clean Business Layout Tutorial
角丸のレイアウトの参考に
Create a Clean Business Web Template Design in Photoshop
とてもシンプルなレイアウトですね。これをベースに手を加えていってもかっこいいウェブサイトが出来上がりそう。
Business Layout #5 Tutorial
背景に大胆な色味をつけるパターンもありですね。
Computer Store Web Layout
ラップトップの画像を枠から飛び出させる事で動きが出ています。
Create a professional dark web hosting layout
シンプルながら、微妙に光のあたり具合を調整していたりして細かいところまでこだわって作られている感じ。
Create a communication layout in Photoshop
ボタンの背景などに単純なグラデーションだけでなくテクスチャーを加える事でさらに質感がアップしていますね。
Corporate Business Layout
トップの写真を変えるだけで大きく印象が変わりそう。シンプルな作りなのでいろいろと使い回しがききそうですね。
Business Layout #4
こちらも角丸レイアウトの参考にできそうなレイアウトですね。
Design Blue Corporate Website in Photoshop
ブルーですっきりと清潔な印象のデザインですね。
Softblue Template Tutorial
アイコンを使って分かりやすいサイトに仕上がりそうですね。
Make a nice corporate website for a product
文字だけでも結構インパクトを与えられそう。
Design a Clean Corporate Website With Illustrator
色味やレイアウトを参考に、もうひと手間加えれればかっこいいサイトになりそう。
Professional Web Layout for Business Solutions
サイドバーのラインが突き抜けてインパクトアップですね。
Design a Green Corporate Layout in Photoshop
グリーンの背景もなかなか使えそう。
How to Make a Green & Sleek Web Layout in Photoshop
ふんわりとした優しい感じのウェブサイトに仕上がりそう。
Photoshop tutorial to design a clean business layout
力強いインパクトのあるウェブサイトですね。
Web Design Layout #9
ヘッダーにテクスチャを使用したレイアウトの例。
Product Sales Page
ブルーで清潔感アップしたレイアウト。
Create a Clean Modern Website Design in Photoshop
とってもシンプルなレイアウトですね。
Corporate WordPress Style Layout
インパクトのある写真があるのなら、このレイアウトは使えそう。
|
|
|
12月 1st, 2009 at 12:53 AM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker [...]
12月 1st, 2009 at 6:43 AM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalke r 最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方 々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね 。これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビ ジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか？今回は、 そんなウ… original article [...]
12月 1st, 2009 at 3:47 PM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい [...]
12月 1st, 2009 at 4:52 PM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker [...]
12月 2nd, 2009 at 2:49 AM
[...] http://www.designwalker.com/2009/11/corporate-tutorial.html [...]
12月 2nd, 2009 at 5:31 AM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker 沢山…。 [...]
12月 2nd, 2009 at 12:48 PM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker (tags: webdesign) [...]
12月 5th, 2009 at 10:05 PM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい [...]
12月 7th, 2009 at 11:36 PM
[...] ビジネスサイトに使えるレイアウトのチュートリアルいっぱい 最近のトレンドを踏襲したウェブサイトを作成するチュートリアル集 [...]