真似からはじめるウェブデザイン

ウェブデザインを上達させる一番早い方法は、やはり真似をすることなのではないでしょうか?

特にこれからウェブデザインをはじめる方々には、チュートリアルなどを沢山こなして、いろいろなデザインの手法などをひとつひとつ身に着けていくうちに自分のスタイルができてくるのではないでしょうか?

先日、noupeさんのブログで『Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices』というすばらしいまとめがアップされていたので、そこからピックアップしてご紹介。

この記事では、人気のウェブデザインの背景デザインとそのデザインのチュートリアルがまとめて紹介されています。

『あぁ。このデザインかっこいいなぁ』と思っても、なかなか真似できないレベルの高いデザインでもチュートリアルを追っていけば何とかそれっぽくできるものです。

少しずつマスターして、カッコいいデザインが作れるようにがんばりましょう!

Viget Labs

水彩画風の背景デザイン

Viget Labs

Viget Labs

How To: Make the Viget Inspire Background

こちらは、Viget Labs自らチュートリアルを公開されています。風景写真を元に加工して背景を作っていきます。

How To: Make the Viget Inspire Background

Create a Nature Inspired Painted Background in Photoshop

こちらは、ブラシを利用して、背景を描いていく方法です。

Create a Nature Inspired Painted Background in Photoshop

Sony CES 2009

ちょっぴりレトロなデジタルのボケ味風の背景

Sony CES 2009

Sony CES 2009

Awesome digital bokeh effect in Photoshop

Photoshopを使って、ボケ味風の背景を作る方法です。

Awesome digital bokeh effect in Photoshop

GoodBytes Blog

キレイな光のラインを背景に使った例

GoodBytes Blog

GoodBytes Blog

Abduzeedo Job Board banner in Fireworks

こちらは、Fireworksのチュートリアルですが、光のラインをキレイに作り出しています。

Abduzeedo Job Board banner in Fireworks

hereslifeafrica

破れた紙を背景に

hereslifeafrica.com

hereslifeafrica.com

Create a Realistic Torn Paper Effect in Photoshop

ブラシとテクスチャをうまく使えば、やぶれた紙の質感が作り出せます。

Create a Realistic Torn Paper Effect in Photoshop

Blog Amuki

古びた紙を背景に

Blog Amuki

Blog Amuki

Creating Old Paper With Custom Brushes

紙をクシャクシャにして、スキャンして加工すれば、古びた紙が作り出せます。

Creating Old Paper With Custom Brushes

STUDIO7DESIGNS

オーロラを背景に

STUDIO7DESIGNS

STUDIO7DESIGNS

Aurora Borealis – North-South Polar Lights

グラデーションとフィルターを使えば、オーロラ風の背景が作れます。

Aurora Borealis - North-South Polar Lights

AdaptD

虹のラインを背景に

AdaptD.com

AdaptD.com

Mix Cool Retro Curves Into Your Photographs

ブラシと変形ツールでキレイな虹を再現

Mix Cool Retro Curves Into Your Photographs

Jared Campbell

ビンテージ風な背景

Jared Campbell

Jared Campbell

Create a Wicked-Worn Vintage Pop Art Design

テクスチャとシェイプツールでビンテージな背景を作るチュートリアルです。

Create a Wicked-Worn Vintage Pop Art Design

Bart-Jan Verhoef

擦り切れた感じの背景

Bart-Jan Verhoef

Bart-Jan Verhoef

Bart-Jan Verhoef: Make it worn

Bart-Jan Verhoefさん自身が、この擦り切れた感じのデザインの作り方を解説してくれています。

Bart-Jan Verhoef: Make it worn

Boompa

カラフルな背景

Boompa

Boompa

Painted Photo Manipulation

写真とブラシでコラージュしていけば、カラフルな背景ができていきます。すこしセンスが必要?

Painted Photo Manipulation

Starbucks Coffee At Home

手書き風の背景

Starbucks Coffee At Home

Starbucks Coffee At Home

Pencil It In

手書きで書いてスキャンして、テクスチャ画像と合成

Pencil It In

15 Great Examples of Cloned WordPress Themes

こちらは、他の有名サイトを真似て作られているWordpressのテンプレート集です。このように、他のサイトを真似てテンプレートを作るとかなり勉強になりますよ。いくつかピックアップしてご紹介。

WPSN

テンプレート | デモページ | オリジナルページ

WPSN

The Beeb

テンプレート | デモページ | オリジナルページ

The Beeb

Free Digg-like WordPress Theme

テンプレート | デモページ | オリジナルページ

Free Digg-like WordPress Theme

デザインblogランキング

コメント 11 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



11 Responses to “真似からはじめるウェブデザイン”

  1. links for 2009-02-10 « 個人的な雑記 Says:

    […] 真似からはじめるウェブデザイン | DesignWalker (tags: webdesign) […]

  2. 09年02月12日 今日の Web ページメモ « Web、プログラミングの技術など - gentenzero blog Says:

    […] 真似からはじめるウェブデザイン | DesignWalker チュートリアルさえ見れば真似をするのは難しくない。 (tags: webdesign) […]

  3. けぇ Says:

    ただ今、自力でウェブページを作成してまして、よいアドバイスがないかな(;8;)と思い、日々デザインウォーカーを拝見させていただいています。感謝です。
    そこで愚問ですが、ベクター画像はどのように利用すべきものですか?あまりにも素敵だったので、いつか使おうとダウンロードさせていただいたんですが、PDFなので使い道が分からず困っています。フリーベクターグラフィックスからダウンロードさせていただいたのですが、一応JPEGに変換しましたが、、、。特に一枚の絵ではなく、いくつかのものから構成されている場合のベクター画像の利用方法が分かりません。アイコンのように利用できるのでしょうか?ひな形のような存在だったらいいなと思いながらダウンロードしました。ちなみに今はBIND2を使用しています。
    ものすごい基本的な質問で申し訳ないですが、タグ等として利用したいので、切り取り方というか貼り方を教えて下さい。すみません。

  4. Sun Drenched追加 | L-Log Says:

    […] 画像はこのブラシの画像を参考に真似して作ってみたのですがなかなかうまくいきませんでした>< Webデザインは真似からはじめるってDesignWalkerさんの記事にも書いてあったので真似しようと思ったのですが難しいです。でも少しずつ上達すつ気がするので頑張りたいと思います。 […]

  5. 私的MEMO - links for 2009-02-12 Says:

    […] 真似からはじめるウェブデザイン | DesignWalker (tags: webdesign まとめ) […]

  6. ブログデザイン探しの旅 - [mu]ムジログ Says:

    […] さて、軸足としたのは真似からはじめるウェブデザイン | DesignWalkerというページから。 実はDesignWalkerさんのブログからもひとつ気づきを得られました。 […]

  7. ぴー太郎 Says:

    大変参考になります。特にBoompaの背景画像のような水彩画に挑戦したいのですが、ここまでこまかく描かれているものもphotoshopで作るのでしょうか。それともペンタブレット等で描いてしまうものなのでしょうか。プロの方たちはどうされているのでしょうか…

  8. May Says:

    >>ぴー太郎さん
    水彩画風の描き方は、デジタルだとペインターとかでできますよ。
    多分、Photoshopを利用する場合はフィルタを効率的に多様して、効果を出すと思いますが、「手描き」感と「加工」感の差は出ると思います。
    おせっかいだったらすみません。

  9. Sun Drenched追加 | L-Studio Says:

    […] 画像はこのブラシの画像を参考に真似して作ってみたのですがなかなかうまくいきませんでした>< Webデザインは真似からはじめるってDesignWalkerさんの記事にも書いてあったので真似しようと思ったのですが難しいです。でも少しずつ上達すつ気がするので頑張りたいと思います。 […]

  10. ITベンチャーの小言|熊本ホームページ制作ゼログラフィックス Says:

    【ウェブデザイン】紙媒体のデザインとの違い 〜 その2|ウェブ制作…

    ウェブは、紙と違って、基本的に全体を一望できません。
    画面が上下にスクロールするということを前提としたデザインである必要があります。…

  11. photoshopのチュートリアルまとめ記事のめも | kuro33.sakura.ne.jp Says:

    […] 真似からはじめるウェブデザイン | DesignWalker […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ