フォトショップのデザインが好きで、世界中のチュートリアルを毎日見ているですが、ひとつ感じたことがありました。
昨年ごろから、テキストにデザインを加工する「テキストエフェクト」やまばゆい光を演出する「ライティングエフェクト」などが人気があります。
その流れに沿うように、プロ仕様のウェブレイアウトをデザインする方法を紹介しているチュートリアルがたくさん公開されるようになっています。
そんなハイクオリティーなウェブレイアウトを作成するチュートリアルをまとめた「20 Mind Blowing Website Layout Design in Photoshop」をご紹介します。
その中でも特にサンプルになるものをいくつかピックアップしてみました。
ひとつずつ、勉強になるポイントをまとめています、参考にしてみてください。
詳細は以下より。
海外のウェブサイトを中心に透明感のある立体的なウェブレイアウトが人気になっています。
細かいエフェクトを適用することで、最大のインパクトを与えてくれます。
日本国内のウェブサイトにおいても、徐々にその傾向があると感じています。
今から少しずつチェックしておきたいものです。
Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!
テクスチャを効果的に背景レイアウトに使用しています。
また、立体感のあるタブを「ペンツール」を使って作成する方法が紹介されています。
グリッドを使ったシンプルでミニマルなデザインレイアウトになっています。
Design a Beautiful Website From Scratch
ウェブトレンドの「ライティングエフェクト」や「1pxの白ライン」を使うことで、エレガントなプロ仕様のレイアウトを完成させます。
また、影をつけることで、立体的なコンテンツメニューバーをデザインする方法も紹介されています。
こちらも960 Gridを使った、グリッドで枠組みをデザインしています。
Hosting Layout #2
先日ご紹介した「背景に粒状のざらざらテクスチャを使った、立体感のあるウェブサイトまとめ」を使った、ウェブレイアウトを作成することができます。
また紙を折り返したような立体的なデザインを簡単に作ることができます。
サーバーサービスなど企業ウェブレイアウトに使用すると効果がありそうです。
Corporate WordPress Style Layout
企業ウェブレイアウトを作るときに参考にしたいチュートリアル。
トップ部分に画像を大きく使った印象的なウェブレイアウトを完成させます。
過去記事「企業サイト作成のサンプルになるクリエイティブなサイト60個まとめ」でもう少し詳しく、企業ウェブサイトについて触れています。
よろしかったら、あわせてどうぞ。
How to Make a Light and Sleek Web Layout in Photoshop
Apple(アップル)社のホームページにそっくりな質感をもったウェブレイアウトを作るチュートリアルです。
デザイン方法も非常に簡単なステップのみで作ることができます。
たとえば、ボックス枠組みも「レイヤースタイル」を適用するだけのお手軽さです。
ぜひ、覚えておきたいチュートリアルのひとつです。
How to Create a Clean Web 2.0 Style Web Design in Photoshop
グリッドを使ってデザインされたすっきりとしたシングルページを作る方法を紹介しています。
大きくて見やすいアイコンを使うことで、ゆーざーにもわかりやすい親切なホームページという印象を受けます。
ヘッダー部分にライティングエフェクトを加えることで、高級感のあるデザインになります。
Hand drawn layouts – hottest design trends
ウェブトレンドでもある大きな背景テクスチャを使用することによって、オリジナル性が強いレイアウトを作ります。
手書き風のデザインということで、やさしいイメージが好印象です。
Create a clean PSD layout with a 3D look
奥行き感のあるウェブレイアウトをグラデーションを効果的に使うことで実現します。
また、1px白ラインの端を「ブラシツール」でぼかしながら消去すると、リアル感が表現されます。
ウェブサイトを作成するときに、参考にしたいチュートリアルのひとつです。
参照元サイトにはこれら以外にも、グランジデザインをレイアウトに適用する方法などがありましたよ。
よろしかったら、あわせてどうぞ。
[参照元 : 20 Mind Blowing Website Layout Tutorials in Photoshop – ThreeStyles.com]
