LINEで送る
Pocket

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

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

先日、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

Similar Posts:

LINEで送る
Pocket


10 Thoughts on “真似からはじめるウェブデザイン”

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です