DesignWalker » チュートリアル

ここまでできる！CSS3を使ったチュートリアルまとめ

admin — Mon, 17 May 2010 21:40:28 +0000

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。

CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。

デザイナーの皆さんは、是非CSS3でどんなことができるの？って事だけでも今のうちから知っておいても損はないと思いますよ。

今回は、そんなCSS3を使えばここまでできる！っと可能性を感じられるチュートリアルをいろいろ集めてみました。

20 CSS3 Tutorials and Techiques for Creating Buttons

CSS3を使って、美しいボタンを作るチュートリアルが20パターン紹介されています。

12 Excellent CSS3 Button and Menu Techniques

こちらも美しいボタンやメニューのチュートリアルが12種類。

CSS3 Gradient Buttons

これまで画像を使って表現していたグラデーションとシャドウの美しいボタンもCSS3を使えば簡単に表現できるようになります。

Creating a Realistic Looking Button with CSS3

Mac風のボタンも簡単に表現できますね。

15 CSS3 Navigation and Menu Tutorials and Techniques

こちらはCSS3を使ってとっても綺麗なナビゲーションを作るチュートリアルが15種類もまとめられております。

CSS3 Glow Tabs

奥行きのあるきれいなタブもCSS3で表現できますね。

Create a Cool Messy List with CSS3 and nth-child

CSS3のrotateファンクションでメニューを微妙に歪めることも可能ですね。

Elegant Accordion with jQuery and CSS3

jQueryとCSS3でアコーディオンの美しいメニューを作ることもできます。

Cross Browser Pure CSS3 Horizontal Accordion

jQueryなどのスクリプトを使わなくてもCSS3だけでアコーディオンメニューを作ることもできます。

Pimp Your Tables with CSS3

テーブルもCSS3で美しく装飾しましょう。

Contextual Slideout Tips With jQuery & CSS3

jQueryとCSS3でびよーんっと開くスライドボックスを作ることもできます。

Halftone Navigation Menu With jQuery & CSS3

メニューにマウスオーバーすると、うつくしいハーフトーンのアイコンがアニメーションで表示されるチュートリアル。

Carbon Fiber Signup Form With PHP, jQuery and CSS3

登録フォームもCSS3とjQueryで作るとこうなります。

Colorful Sliders With jQuery & CSS3

3Dの美しいバーとスライダー。

Interactive Image Vamp up with jQuery, CSS3 and PHP

左側にあるアイテムを中央の画像に配置することができます。

jQuery quickie: Colourful rating system with CSS3

とってもカラフルでうつくしいレーティングシステム。意味なくマウスオーバーしてしまいますね。

25 Out of the Box Tutorials powered by jQuery and CSS3

まだまだあります。jQueryとCSS3を使って作られたチュートリアルが25種類もまとめられています。

10 examples of futuristic CSS3 techniques

ふきだしやボタン、メニューなどなどCSS3を使って表現するテクニックが10種類。

CSS3 Examples and Best Practices

ファンクションごとに実際の例をピックアップして紹介されています。

60 Excellent CSS3 Tutorials and Techniques You Should Know

こちらもたくさん！60種類のCSS3のチュートリアルがまとめられています。

50 Awesome Animations made with CSS3

こちらも必見！50種類のCSS3を使ったアニメーションがまとめられています。

ビジネスサイトに使えるレイアウトのチュートリアルいっぱい

admin — Tue, 01 Dec 2009 06:27:15 +0000

最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね。

これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか？

今回は、そんなウェブデザイン初心者の方でも、つかえそうなビジネスサイトのレイアウト系のチュートリアルをいっぱい集めてみました。

いくつかのサイトでは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

インパクトのある写真があるのなら、このレイアウトは使えそう。

ウェブデザインに使えるイラストのチュートリアルいろいろ

admin — Tue, 13 Oct 2009 22:27:58 +0000

イラストをうまく使ったウェブサイトはたくさんありますね。

例えば、SilverbackとかMailChimpなどは、とてもわかりやすいイラストをうまく使ったウェブサイトの例なのではないでしょうか？

一度見ると、『あぁ、あのゴリラのイラストのサイトね。』なんて覚えてもらえる確率が高まります。

イラストをうまく使う事でウェブサイトによりインパクトを与える事ができるのではないでしょうか？

noupeさんでまとめられていた『30+ Outstanding Character Illustrations in Modern Web Design』なんかのまとめも、すごく参考になります。

今回は、そんなイラストをきれいに描くために使えるチュートリアルをいろいろまとめてみました。

Drunken Monkey Photoshop Tutorial

ジャッキーチェンの酔拳をモチーフにした、かっこいいカンフーモンキーのキャラクターを描くチュートリアル。かなり細かく解説してくれています。

Digital manga illustration

かわいらしい女の子のキャラクターを描くチュートリアル。

Primitive Art Man Cartoon

ちょっぴりシュールな老人を描くチュートリアルが公開されています。

How to Create a Web Site Mascot

いろいろな場面で使えそうな男の子のキャラクター。

StudioQube Painting Tutorial

これはかなりレベル高いですね…。絵心ある方は是非、挑戦してみてください。

How to Illustrate a LeBron James Cartoon Character

バスケットボール選手レブロン・ジェームスをモチーフにしたキャラクター。似顔絵キャラクターの作り方が解説されています。

Drawing Vector-Looking Cat Illustration Using Photoshop

ちょっぴりシュールな猫のキャラクター。

Character Illustration

悪魔っぽいけど、かわいらしいキャラクターです。

Create a Twitter Style Bird Mascot

Twitterバードのイラスト

Creating vector characters in Illustrator

なんだかわかりませんが…。かわいらしいキャラクター

How to Create a Cute Bunny Vector Character

ウサギのイラストを描くチュートリアル。

How to Create a Cute Hippo Character!

カバのイラストもかわいらしいですね。

Create a Cute Panda Bear Face Icon

お目めぱっちりのパンダのキャラクター。

Create a Cute Furry Vector Monster in Illustrator

ムック？みたいなモンスター。

How to Create a Killer Chainsaw Bunny Character

ハードなチェーンソーを持った殺人鬼のキャラクター

How to Create a Cartoon Character with Expressive Lines

印象的な男の子のキャラクター

How to Illustrate a Cute Emo Kid

バンドGorillazのジャケットに出てきそうなイラスト。

Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch

かわいらしい海賊のイラスト

How to Create a Stinking Zombie Flesh-Eater in Illustrator

ゾンビのイラストはあまり使い道無いかも…。

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

マップを持った男の子のイラスト。

How to Create a Rocketing, Vector Aircraft Shuttle

なんだか懐かしい昔のアニメに出てきそうなタイプの飛行機のイラスト

Create a Character Mascot with Adobe Illustrator CS4

男性のキャラクターマスコット

How to Create a Landscape Wallpaper for your Desktop

夕日がきれいな風景のイラスト

Create a Super Happy Octopus Character

宇宙人みたいなキャラクター

How to Turn a Sketch into a Fat Cat Vector Illustration

怒っている猫？のイラストみたいです。

Illustrator Tutorial – Create a Gang of Vector Ninjas

かわいらしい忍者のキャラクター

Tutorial: Creating convincing characters

シュールな女の子のイラスト

マウスオーバーをデザインする

admin — Mon, 10 Aug 2009 21:26:06 +0000

ウェブデザインには欠かせないリンク要素。

メニューやボタン、画像、テキストのリンクなどちょっとした工夫で、ユーザーがリンクをマウスオーバーしたときに小さな驚きと楽しみを与えられるのではないでしょうか？

今回は、そんなマウスオーバーをデザインするアイデアをいくつかまとめてみました。

Realistic Hover Effect With jQuery — Adrian Pelletier

マウスオーバーすると、オブジェクトが浮かび上がり、反射や影の部分も小さくなります。とってもリアルなエフェクトですね。

Advanced CSS Menu Trick

メニューにマウスオーバーすると、選択されていないメニューにはぼかしがかかります。おもしろいアイデアですね。

サンプルはこちら

Color Fading Menu with jQuery

メニューにマウスオーバーすると、色がフェードインしてくるメニューです。

サンプルはこちら

jQuery hover fade method

ボタンにマウスオーバーすると、フェードインされてONが浮き上がってきます。マウスアウトでフェードアウトします。

Advanced CSS Menu

マウスオーバーで手描き風メニューにエフェクトがかかります。

サンプルはこちら

Using jQuery for Background Image Animations

マウスオーバーでメニューがアニメーション。動きが軽快で気持ちいいです。

サンプルはこちら

Sexy CSS Hover Button

マウスオーバーでボタンが押し込まれたイメージに切り替わります。

Animated Hover Demonstration

マウスオーバーしているメニューがハイライトされます。マウスを他のメニューにスライドすると、ハイライトがアニメーションでついてきます。

The hoverFlow Plugin – A Solution to Animation Queue Buildup in jQuery

マウスオーバーでメニューが右側にスライドします。シンプルですがわかりやすいメニューになりそうですね。

HoverAccordion jQuery Plugin

メニューにマウスオーバーすると、サブメニューがスライドして表示されます。他のメニューにマウスオーバーすると開いているメニューが閉じられます。

hoverIntent jQuery Plug-in

ボックスにマウスオーバーすると、そのボックスが下方向に拡大されます。メニューに使えそうです。

jquery-glow

テキストにマウスオーバーするとテキストカラーがフェードします。マウスアウトでフェードアウトしてくれます。

CSS element hover effect

CSSで簡単にマウスオーバーをデザインできるサンプルが紹介されています。

jQuery columnHover plugin

テーブルのカラムにマウスオーバーするとカラムをハイライトしてくれます。スペック表などに使えそう。

Fancy Thumbnail Hover Effect w/ jQuery

サムネイル画像にマウスオーバーすると画像を拡大してポップアップしてくれます。

サンプルはこちら

Maximize the Use of Hover

画像にマウスオーバーすると複数のテキストリンクのボックスを表示してくれます。

サンプルはこちら

CSS hover effect

ボックスにマウスオーバーするとボックスがハイライトされます。いろいろ使い道がありそうですね。

サンプルはこちら

Animate a hover with jQuery

ギャラリーやポートフォリオ系のサイトに便利なのではないでしょうか。画像にマウスオーバーすると詳細がスライドしてきます。

サンプルはこちら

CSS swap hover effect

こちらもイメージにマウスオーバーすると詳細が表示されます。

Hover Effects in Web Design: Best Practices and Examples

マウスオーバーをうまくデザインに組み込んでいるウェブサイトをまとめられています。

jQueryでワンランクアップするWordPressのプラグイン・チュートリアルいろいろ

admin — Tue, 04 Aug 2009 03:35:24 +0000

jQueryを使えば、WordPressがブログとは思えないほどに見違えます。

特に海外のブログなどを見ていると、jQueryなどを上手く使いこなして、クールに仕上がっているブログがたくさんありますね。

今回は、jQueryを使ってワンランク上のブログに仕上げるプラグインとチュートリアルをいくつかまとめてみました。

Snazzy Archives

アーカイブページをクールにカスタマイズ。カレンダーっぽく配置すると、とっても見やすくなりますね。

Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

ページの上部から、タブをクリックするとコンテンツがスライドする、スライディングパネル。

Sliding Panel: WordPress Plugin

プラグインで簡単に実装できるスライディングパネル。

Infinite scroll

ページの下部までユーザーがスクロールすると、次のコンテンツを先読みしてくれるプラグインです。ページングする必要が無いので便利ですね。

Insights

管理画面から、FlickrやYoutube、WikipediaにGoogleMapsなどを検索して、そのまま貼り付けることが出来る便利なツール。

WordPress Multi-Level Drop Down menu using jQuery

多段階のドロップダウンメニューをWordPressに実装することが出来ます。

WordPress Sidebar Turned Apple-Flashy Using jQuery UI

サイドバーがスライドして、コンテンツを切り替えます。

Tabbed Content using jQuery and WP_Query

タブ切り替えでコンテンツをスライドさせることが出来ます。

HOW TO: Create a jQuery Carousel with WordPress Posts

jQuery CarouselをWordPressに実装すれば、コンテンツ自体をスライドさせるクールなブログに仕上がります。

WordPress jQuery Lightbox Plugin

画像をたくさん掲載するブログには便利なLightboxのプラグイン

WP-Slimbox2

こちらもシンプルなLightboxです。

J Post Slider wordpress plugin – jQuery post animation show

スライドショーを簡単に

SimpleModal Contact Form (SMCF)

とってもシンプルなモーダルでお問い合せフォームをつけることが出来るプラグイン。

WordPress & jQuery Contact Form without a Plugin

プラグインなしでjQueryを使ったコンタクトフォームの実装方法が紹介されています。

Adding Form Validation to WordPress Comments using jQuery

必須入力項目の抜けなどのアラートを表示する事ができるようになります。

jQuery Comment Preview WordPress Plugin

コメントにプレビュー機能を加えることが出来るプラグインです。

Photoshop ブレンドモードを使いこなしてワンランク上の画像合成

admin — Tue, 28 Jul 2009 05:13:26 +0000

Photoshopを使って複数の画像を合成する際に利用するブレンドモード。

Photoshop初心者の方々は、あまり使われない機能かもしれませんが･･･。

ブレンドモードは、上図のように、Photoshopにあるレイヤーウインドウにある設定の部分の事です。

このブレンドモードを効果的に使いこなすことでワンランクアップした画像合成が出来るようになるのではないでしょうか。

今回は、Photoshopのブレンドモードをわかりやすく説明してくれているサイトや、ブレンドモードを使ったチュートリアルなどをまとめてみました。

osakana.factory – ブレンドモード詳説

Photoshopのブレンドモードを日本語でわかりやすく、詳しく説明してくれているサイトです。画像もたくさんあってとてもわかりやすいです。

An Explanation of Photoshop Blend Modes

テクスチャ画像と写真をブレンドするとどのような効果が出るのか、サンプルが公開されています。

Understanding blending modes

左側のグラデーションレイヤーと、右側のイラストをブレンドされています。どのモードでブレンドしているかも表示されているので、とってもわかりやすいです。

Color Dodge Blend Mode for Light Effects

黒の背景に白いオブジェクトにぼかしをかけて、その上に新規レイヤーを黒で塗りつぶしてブレンドモードを覆い焼きに設定すると輝いたエフェクトを作り出すことができます。

Photoshop Blend Mode Math

２枚の画像をブレンドするとどうなるのか、サンプルが紹介されています。

Photoshop Brush Tutorial

光のブラシも、ブレンドモードでクールに色づけできます。

Criando dobras na Bandeira do Brasil em Photoshop

旗の画像と、テクスチャをうまく合成すれば、揺らめく旗を作れます。ポルトガル語？のサイトですが、画像を見ているだけでも十分に理解できるのではないでしょうか。

Grunge style layer tutorial

写真とテクスチャ画像をオーバーレイで質感のあるグランジスタイルに

Blur, Layers and Blending Modes, a Magic Mix in Photoshop

画像のレイヤーを複製してぼかしをかけて、ブレンドモードを変更するだけで画像の質感が大きく変わります。サンプルもたくさんあっていいですね。

Photoshop Blending Modes

ブレンドモードをうまく操れば、こちらのようなクールな画像が作れます。動画でわかりやすく解説してくれています。

Badass Bling Effect in Photoshop

白黒画像に黄色のレイヤーを焼き込みカラーに設定する事で、ゴールドな輝きを表現できます。

photoshopでゼロから作るウェブデザインチュートリアル30選

admin — Tue, 14 Jul 2009 06:05:12 +0000

かっこいいウェブサイトをデザインしたいけど、そもそもどうやってデザインしているのかわからないという初心者の方々もたくさんいらっしゃるのではないでしょうか？

今回はそんな方々にとっても便利なゼロからきれいなウェブサイトを作るPhotoshopのチュートリアルをまとめてみました。

中級、上級者の方々でもデザインの幅を広げる意味でもとっても参考になりそうなチュートリアルばかりです。

Create a Magic Night Themed Web Design from Scratch in Photoshop

How to Create a Grunge Web Design in Photoshop

Making the ‘Clean Grunge’ Blog Design

Design a Beautiful Website From Scratch

Create a Clean and Colorful Web Layout in Photoshop

Create a Sleek, High-End Web Design from Scratch

Create an awesome portfolio layout

Design and Code a Slick Website from Scratch – Part I

Make an Elegant Blog Layout in Photoshop

How to Create a Sleek and Textured Web Layout in Photoshop

How to Create a “Worn Paper” Web Layout Using Photoshop

Photoshop tutorial to design a clean business layout

Design a Layout for a Non-Profit Organization in Photoshop

Create a Dark and Sleek Web Layout Using Photoshop

Modern Portfolio Layout Photoshop Tutorial

Modern Web 2.0 Web Layout

Corporate Business Layout

Clean Business Layout Tutorial

Design a Cartoon Grunge Web site Layout

Real Estate Web Design

Create a Vibrant Modern Blog Design in Photoshop

Photoshop Web Design Tutorial

First Web Design Tutorial!

Portfolio Gallery Layout

Coding a Clean & Illustrative Web Design from Scratch

Design a Unique Grungy Website Layout

Photography portfolio

Photoshop Tutorial: Web 2.0 Layout

Desktop Style Web Layout Photoshop Tutorial

Photoshop Tutorials – HV-Designs.co.uk

Illustratorでつくるテキストエフェクト集

admin — Tue, 26 May 2009 02:52:41 +0000

ロゴやタイトルなどにそのまま使えるテキストエフェクトのチュートリアルは、このブログでも大人気です。

以前は、『Photoshopチュートリアル　テキストエフェクトいっぱい』、『Photoshopチュートリアル　テキストエフェクト　パート2』とPhotoshop編をお送りしました。

今回は、Illustrator編をお送りします。

Creating an Environmentally Friendly Green Type Treatment

葉っぱがとっても可愛いテキストエフェクト。ロゴなどにそのまま使えそうですね。

Old School Type – Line Gradients

クールなエフェクト。バンドのロゴなどに使えるのでは？

Quick Tutorial: Adding Gradients to Text

テキストにグラデーションをほどこして、奥行きを与えます。

Create a Swirly Type Treatment

渦巻きがポップでクールなテキストエフェクト

Ornate lettering

背景の板に馴染んでとっても質感のあるエフェクトが印象的です。

Logo Design Project Step by Step Walkthrough

一見シンプルでも、iの部分が月になっていたり、テキストのスペースが無くなってつながっていたりと細部にまでこだわっています。

How to Create a Trendy Retro Type Treatment

レトロな色使いとシェイプがいい感じです。

This PLUS Tutorial is filled with Great Vector Lettering Advice

とってもかわいらしいこちらのテキストは、光のあたり具合など、細かい部分にまでこだわって作られています。

Create a Vibrant 3D Pixel Type Treatment

ブロックを組み立てたようなかわいらしいテキストエフェクト。

3 ways to apply a line pattern effect on text in Illustrator

ラインパターンをテキストに。

Blueprint-Style Text in Adobe Illustrator

手描き風のテキストエフェクトです。

Creating a crazy cool logo

グラデーションがとってもきれいなエフェクトです。

Tutorial : Grunge effect how to give it to your text

汚れた感じが絶妙なグランジエフェクト

Ornate Lettering Process

下書きから仕上げまでの行程が詳しく説明されています。

Tug and Twirl Text in Illustrator

クルクルっと可愛いエフェクト

Illustrator Tutorial – 3D lighted text effect

3Dのクールなライティングエフェクトが詳しく説明されています。

Tutorial : Create a cool water effect

イラストレーターで作る水のエフェクト

Let’s Make a Playful Yet Robust 3D Letter Design

とっても元気な印象の3Dテキストエフェクト

Illustrator Trick #10: Stitched Text Effect

縫い目が素朴でかわいらしいテキストエフェクト

Quickly Add Grunge To Text

適度に汚すグランジエフェクト

TECHNIQUE: Emboss Text Effect

車のナンバープレートのエンボス加工

Distressing Text with Live Trace in Adobe Illustrator CS2

こちらもグランジのテキストエフェクトの作り方。

Better Titles in Illustrator

ロックなテキストエフェクトの作り方。

How to Design a Logotype from Conception to Completion

シンプルなグラデーションでもこれだけ質感がアップします。

画像で見るウェブデザインのプロセスいろいろ

admin — Tue, 19 May 2009 06:03:20 +0000

クライアントの方々のウェブサイトをデザインしているといろいろな追加や変更などがよくあります。

結局、納品の際に、元々想定していたデザインコンセプトから大きく方向性が変わっている事もしばしばです…。

今回は、普段なかなか見ることができないデザイナーのラフデザインから完成までウェブデザインのプロセスが簡単に画像でわかるサイトをいろいろとまとめてみました。

The Evolution of a Website Design

ラフデザインから、完成までデザインが変わっていくところが確認できます。見ているだけでワクワクします。

Monocle: design notes

手描きのラフから美しいレイアウトが完成します。

Building Campaign Monitor Part 3 – Design Process

しっかり作り込まれているワイヤーフレームから、様々なタイプのレイアウトを試されています。どれもとってもきれいなデザインです。

Redesigning the ExpressionEngine Site

こちらもワイヤーフレームから、細部にまでこだわって作られているデザインプロセスが公開されています。

12 Excellent And Useful Design Process Tutorials

サイトやロゴ、パッケージなどのデザインプロセスが12種類まとめられております。

The Design Process Step by Step

ワイヤーフレームからデザインが仕上がっていきます。

Web Design Workflow – Complete Overview

手描きのラフからデザインを進めるプロセスが公開されています。

Mobile Web Book Design

3つのドラフトデザインから、完成したのがこちらのデザイン。

How to Elevate Your Website Design Process and Results

グリッドシステムを利用してサイトをデザインするプロセスが公開されています。

Photoshopで作るウェブデザインレイアウト・チュートリアル50選

admin — Wed, 15 Apr 2009 07:58:11 +0000

ウェブサイトをデザインする際に、一般的にはPhotoshopなどのソフト使って、あらかじめ全体のレイアウトをつくります。

出来上がったデザインから画像をスライスしてhtmlに落とし込んでいく作業へと進めていくのですが、今回はウェブデザインの最も重要な作業である、Photoshopのレイアウトのチュートリアルを50種類集めてみました。

ビジネス系のデザインから、趣味のサイトやブログに使えそうなデザインまで幅広くピックアップしました。

初心者の方にもうれしいPhotoshopファイルが丸ごと公開されているチュートリアルもたくさんあるので、ダウンロードしてファイルの構成がどうなっているのか実際に開いてみれるのでとても参考になるのではないでしょうか？

DesignWalker » チュートリアル

ここまでできる！CSS3を使ったチュートリアルまとめ

ビジネスサイトに使えるレイアウトのチュートリアルいっぱい

ウェブデザインに使えるイラストのチュートリアルいろいろ

マウスオーバーをデザインする

jQueryでワンランクアップするWordPressのプラグイン・チュートリアルいろいろ

Photoshop ブレンドモードを使いこなしてワンランク上の画像合成

photoshopでゼロから作るウェブデザイン チュートリアル30選

photoshopでゼロから作るウェブデザインチュートリアル30選