真似からはじめるウェブデザイン
ウェブデザインを上達させる一番早い方法は、やはり真似をすることなのではないでしょうか？
特にこれからウェブデザインをはじめる方々には、チュートリアルなどを沢山こなして、いろいろなデザインの手法などをひとつひとつ身に着けていくうちに自分のスタイルができてくるのではないでしょうか？
先日、noupeさんのブログで『Website Backgrounds: 70+ Impressive Trends, How To’s & Best Practices』というすばらしいまとめがアップされていたので、そこからピックアップしてご紹介。
この記事では、人気のウェブデザインの背景デザインとそのデザインのチュートリアルがまとめて紹介されています。
『あぁ。このデザインかっこいいなぁ』と思っても、なかなか真似できないレベルの高いデザインでもチュートリアルを追っていけば何とかそれっぽくできるものです。
少しずつマスターして、カッコいいデザインが作れるようにがんばりましょう！
Viget Labs
水彩画風の背景デザイン
Viget Labs
How To: Make the Viget Inspire Background
こちらは、Viget Labs自らチュートリアルを公開されています。風景写真を元に加工して背景を作っていきます。
Create a Nature Inspired Painted Background in Photoshop
こちらは、ブラシを利用して、背景を描いていく方法です。
Sony CES 2009
ちょっぴりレトロなデジタルのボケ味風の背景
Sony CES 2009
Awesome digital bokeh effect in Photoshop
Photoshopを使って、ボケ味風の背景を作る方法です。
GoodBytes Blog
キレイな光のラインを背景に使った例
GoodBytes Blog
Abduzeedo Job Board banner in Fireworks
こちらは、Fireworksのチュートリアルですが、光のラインをキレイに作り出しています。
hereslifeafrica
破れた紙を背景に
hereslifeafrica.com
Create a Realistic Torn Paper Effect in Photoshop
ブラシとテクスチャをうまく使えば、やぶれた紙の質感が作り出せます。
Blog Amuki
古びた紙を背景に
Blog Amuki
Creating Old Paper With Custom Brushes
紙をクシャクシャにして、スキャンして加工すれば、古びた紙が作り出せます。
STUDIO7DESIGNS
オーロラを背景に
STUDIO7DESIGNS
Aurora Borealis – North-South Polar Lights
グラデーションとフィルターを使えば、オーロラ風の背景が作れます。
AdaptD
虹のラインを背景に
AdaptD.com
Mix Cool Retro Curves Into Your Photographs
ブラシと変形ツールでキレイな虹を再現
Jared Campbell
ビンテージ風な背景
Jared Campbell
Create a Wicked-Worn Vintage Pop Art Design
テクスチャとシェイプツールでビンテージな背景を作るチュートリアルです。
Bart-Jan Verhoef
擦り切れた感じの背景
Bart-Jan Verhoef
Bart-Jan Verhoef: Make it worn
Bart-Jan Verhoefさん自身が、この擦り切れた感じのデザインの作り方を解説してくれています。
Boompa
カラフルな背景
Boompa
Painted Photo Manipulation
写真とブラシでコラージュしていけば、カラフルな背景ができていきます。すこしセンスが必要？
Starbucks Coffee At Home
手書き風の背景
Starbucks Coffee At Home
Pencil It In
手書きで書いてスキャンして、テクスチャ画像と合成
15 Great Examples of Cloned WordPress Themes
こちらは、他の有名サイトを真似て作られているWordPressのテンプレート集です。このように、他のサイトを真似てテンプレートを作るとかなり勉強になりますよ。いくつかピックアップしてご紹介。
WPSN
The Beeb
Free Digg-like WordPress Theme
|
|
|
2月 10th, 2009 at 1:01 PM
[...] 真似からはじめるウェブデザイン | DesignWalker (tags: webdesign) [...]
2月 12th, 2009 at 11:38 AM
[...] 真似からはじめるウェブデザイン | DesignWalker チュートリアルさえ見れば真似をするのは難しくない。 (tags: webdesign) [...]
2月 14th, 2009 at 1:07 AM
ただ今、自力でウェブページを作成してまして、よいアドバイスがないかな（；８；）と思い、日々デザインウォーカーを拝見させていただいています。感謝です。
そこで愚問ですが、ベクター画像はどのように利用すべきものですか？あまりにも素敵だったので、いつか使おうとダウンロードさせていただいたんですが、PDFなので使い道が分からず困っています。フリーベクターグラフィックスからダウンロードさせていただいたのですが、一応JPEGに変換しましたが、、、。特に一枚の絵ではなく、いくつかのものから構成されている場合のベクター画像の利用方法が分かりません。アイコンのように利用できるのでしょうか？ひな形のような存在だったらいいなと思いながらダウンロードしました。ちなみに今はBIND2を使用しています。
ものすごい基本的な質問で申し訳ないですが、タグ等として利用したいので、切り取り方というか貼り方を教えて下さい。すみません。
4月 9th, 2009 at 4:35 PM
[...] 画像はこのブラシの画像を参考に真似して作ってみたのですがなかなかうまくいきませんでした＞＜ Webデザインは真似からはじめるってDesignWalkerさんの記事にも書いてあったので真似しようと思ったのですが難しいです。でも少しずつ上達すつ気がするので頑張りたいと思います。 [...]
4月 10th, 2009 at 2:59 PM
[...] 真似からはじめるウェブデザイン | DesignWalker (tags: webdesign まとめ) [...]
4月 13th, 2009 at 4:49 AM
[...] さて、軸足としたのは真似からはじめるウェブデザイン | DesignWalkerというページから。 実はDesignWalkerさんのブログからもひとつ気づきを得られました。 [...]
4月 19th, 2009 at 9:36 PM
大変参考になります。特にBoompaの背景画像のような水彩画に挑戦したいのですが、ここまでこまかく描かれているものもphotoshopで作るのでしょうか。それともペンタブレット等で描いてしまうものなのでしょうか。プロの方たちはどうされているのでしょうか…
6月 9th, 2009 at 4:32 PM
>>ぴー太郎さん
水彩画風の描き方は、デジタルだとペインターとかでできますよ。
多分、Photoshopを利用する場合はフィルタを効率的に多様して、効果を出すと思いますが、「手描き」感と「加工」感の差は出ると思います。
おせっかいだったらすみません。
7月 17th, 2009 at 9:45 PM
[...] 画像はこのブラシの画像を参考に真似して作ってみたのですがなかなかうまくいきませんでした＞＜ Webデザインは真似からはじめるってDesignWalkerさんの記事にも書いてあったので真似しようと思ったのですが難しいです。でも少しずつ上達すつ気がするので頑張りたいと思います。 [...]
1月 21st, 2010 at 1:54 AM
【ウェブデザイン】紙媒体のデザインとの違い 〜 その２｜ウェブ制作…
ウェブは、紙と違って、基本的に全体を一望できません。
画面が上下にスクロールするということを前提としたデザインである必要があります。…
2月 5th, 2010 at 3:41 AM
[...] 真似からはじめるウェブデザイン | DesignWalker [...]
7月 23rd, 2010 at 10:13 AM
いつも参考にさせてもらってます。
イラレとフォトショップを使えば、いろいろな表現ができるのですね。毎回関心させられます。