デザイン系 Archive

http://www.dreamtemplate.com/

有償のものもありますが、とにかく数が豊富なので、デザインの参考になりますね。

http://www.designwalker.com/2009/08/wp-jquery.html

こりゃ見違えるわ。

http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/

いっぱい載ってる。全部英語だけど。本書けちゃうね、こりゃ。

http://www.designwalker.com/2009/08/hover.html

CSSやjQueryを使ったマウスオーバーの効果がイロイロ紹介されてた。

マウスオーバーってデザイン中には、忘れがち。最後のコーディングのところになって、う～ん、どうしよ？ってことが多いもの。。。

デザインのアイデアフラッシュとして◎デスネ。

http://www.designerstoolbox.com/designresources/elements/

WEBページのデザインをしたり、WFを作成するときに、ラジオボタンやテキストエリアのパーツが必要なことって意外とある。

そういうときのために、ブラウザごとのパーツを公開しているサイト。

一度DLしておけば、ブラウザのバージョンアップまでは使えるので、暇なときに集めておくのも手。

http://dzineblog.com/2009/01/27-best-photoshop-web-layout-design-tutorials-part-2.html

http://www.2expertsdesign.com/2009/03/13/150-adobe-photoshp-web-design-layout-tutorials/

http://sixrevisions.com/photoshop/25-photoshop-tutorials-for-web-designers/

全部基本は英語だけど、画像を見ながらのチュートリアルなので、いいかも。

さらには、こんなエントリーも。

「WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集」

 http://phpspot.org/blog/archives/2009/03/webweb_2.html

鉄板な感じがシマスネ。

http://sixrevisions.com/design-showcase-inspiration/25-great-examples-of-using-gradient-effects-in-web-designs/

上品できれいですな。

共通して言えることは、大げさすぎない立体感が、いいんでしょうな。

http://www.1stwebdesigner.com/resources/36-color-gradient-sets-for-photoshop-and-resource-sites-part-1/

ボタンとか背景とか。

ちょっと奥行き出したいときに、グラデ、使いますね。あんまり大げさじゃなくて美しいグラデって意外と難しい。そんな時に、こういうスタイル集って、本当に便利。

普段からお気に入りを集めておくと、重宝しまっせ。

なんちゃってWEBデザイナーは、手軽にカッコエエ～フラッシュボタンを付けたい。フラッシュって、ガッツリいくならありだけど、ページもいっぱい作んなきゃだし、正直めんどくさい。

大体トップのメインとこくらいしか使わないし。

時々バナー作るだけだし。

手軽に、楽に、いきたい。ほんと。

んで、見つけました。

これ、便利。

気に入った！

画像を用意して、リンク位置とか設定するだけで、カッコエエ効果の付いたフラッシュビジュアルが作れるエンジン。

フラッシュファイルとXMLとかJSがセットになってて、こちらでは、ベースになる画像とマウスオーバー時の画像なんかを用意するだけ。

んで、ちょっと座標とかちょこちょこ設定すると。。。

あ～ら、不思議。なんか、えらい凝ったフラッシュできた！みたいな感じになってますけど。

これ、トップページのフラッシュまで予算取れないときとか、ＥＣサイトなんかで、結構いいですね。（＾＾）//

http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/

フォームデザインの参考に。

こういうアイデアにあふれたフォームであれば、お問い合わせなど送りやすいですね。

http://www.smashingmagazine.com/2009/06/07/50-beautiful-flash-websites/

フラッシュの動きやデザインの参考になる海外サイトがいっぱい。

http://www.smashingmagazine.com/2009/06/05/beautiful-high-quality-free-fonts-for-your-designs/

英字フォントだが、個性的で美しいものが色々DLできる。

http://www.smashingmagazine.com/2009/06/04/6-free-psdxhtml-templates/

ここで公開されている6つのサイトデザインが、テンプレートとPSDとどちらもDLできる。

サイトデザインの勉強にもいいだろうと思う。

http://www.iconshock.com/

動物やオフィス、病院、ソフトウエアなど、カテゴライズされた秀逸なアイコン集。

ロゴのテンプレートなどもあり、種類も豊富。

見ているだけでも楽しい。

http://mdaines.com/plumb/

こちらは、グリッドを見ながら、直感的にレイアウトブロックを作成して、ＣＳＳとHTMLを描きだせるツールplumb。

オンラインでグリッドレイアウトのためのカラムを作成するサイトGRID DESIGNER。

グリッドの幅やマージンを調節しながら、ベースグリッドを作成できる。

http://www.designwalker.com/2008/12/free-stock.html

フォト素材をDLできるサイトが色々紹介されている。

いつも色々な役に立つ情報を提供してくれるすばらしいサイト！

http://www.cleardetails.com/templates-tutorials.php

テンプレートをリーズナブルな価格で販売している。フォトショップでページを作成するチュートリアルがあり、なかなか面白い。

http://www.obsidiandawn.com/

こちらも、デザインファイル色々。ブラシがきれい。

http://www.photoshopmosaic.com/

個性的なブラシやパターン満載。ハートのブラシもひとひねりあるデザイン。

http://www.designlinkdatabase.net/

http://yutaka.blush.jp/bannerworld/index.html

http://creativezone.eyeblaster.com/Default.aspx

すごくかっこいいサイトもいっぱい。

参考になる。

http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

相変わらず、SMASHING MAGAZINEはネタが豊富。

CSSやJSを利用したナビゲーションの面白いアイデアが掲載されています。
どれも個性的で、デザインだけでなく動作も洗練されているので、応用しだいで素敵なナビゲーションデザインができそう。

http://picol.org/icon_library.php

全部シンプル。

だけどカッコイイ。

http://www.designbliss.com/2007/09/27/over-25-different-styles-of-rss-icons/

http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/

iPHONEのデザインのフォトショップファイルがダウンロードできる。

アイコンなどのデザイン再現性はすごい！

ブログやインターフェイスを操作するようなWEBデザインにも使用できそう。

http://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/

確かにイケとります。

カッコエエです。

http://sixrevisions.com/web_design/30-beautiful-examples-of-grunge-in-web-design/

どれも、完成度が高くとても美しいサイトばかりです。

デザイン・レイアウトの参考に。

http://vandelaydesign.com/blog/galleries/inspirationalnavigation-menus/

洗練された美しいナビゲーションがいっぱい♪

デザインの参考に。

http://www.smashingmagazine.com/2008/11/10/50-must-have-photoshop-brushes/

デザインパーツとしてかなり応用できそうなブラシがスプラッター、ストロークといったテーマごとにいっぱい♪

そろそろブラシの整理を考えねば･･･

http://www.1stwebdesigner.com/resources/48-snow-ice-snowflake-and-christmas-brushes/

雪や氷、クリスマスをモチーフにしたロマンチックなブラシがいっぱい。

http://acomment.net/most-practical-free-fonts-for-designers-53-of-the-best/485

こんな感じのフォントがいっぱい。デザインのアクセントに。

http://www.hongkiat.com/blog/100-great-abstract-and-grunge-fonts/

その他いっぱい・・・

http://www.webmonkey.com/tutorial/Stylize_Forms_With_CSS

フォームをデザインする際の汎用的なマークアップ、CSSの記述の仕方がチュートリアルとしてまとまっている。

http://vandelaydesign.com/blog/galleries/blog-footers/

フッターデザイン集。

どのデザインもきれいに作ってあって、すばらしい！

フッターっていうと、最後にユーティリティを記することが多いのだけど、カテゴリの多いサイトなんかはこういう感じでデザインされていると、ページのアクセントにもなっていいな、と思う。

http://designm.ag/resources/adobe-illustrator-brushes/

掲載されているどのブラシもきれいで完成度も高い。

WEBにも使えそうなものがいっぱい。

http://sixrevisions.com/graphics-design/20-exceptional-websites-for-learning-adobe-illustrator/

ブログのデザインなど、adobeイラストレーターでのデザインチュートリアルが掲載されている。

1. http://www.abstractfonts.com/
   
2. http://www.dafont.com/
   
3. http://www.myfonts.com/WhatTheFont/
   
4. http://www.myfonts.com/WhatTheFont/
   
5. http://www.searchfreefonts.com/
   

その他にも色々。

• 25 Best License-Free Quality Fonts
• WebPagePublicity
• Urbanfonts
• FontFreak
• DownloadFreeFonts

http://naldzgraphics.com/freebies/30-free-high-quality-psd-files-to-grab-part2/

こちらのデザイン集は、PSDファイル付き。

自分でいじってみて研究したり、応用したりできるのがいいと思う。

http://ui.jquery.com/themeroller/

いわゆるテーマビルダー。

フォーム内の値を変更することで、オンラインで新しいテーマを作成でき、出来上がったテーマファイルは、ZIPでダウンロードできる。

サイトのテーマをいくつも作成したいときなどに、基本データをこれで作っていくとよいかも。

http://sixrevisions.com/graphics-design/30-beautiful-photoshop-illustration-tutorials/

なんていうか、アレですね、イラストレータとかデザイナーさんってのは、やっぱり表現の場を求めてるんすかね。
フォトショップできれいに絵を描くとかデザインするとか、そういう記事の発信が、特に海外サイトで多いですね。

うれしい限りです。

B豚、絵は描きません。
ホームページのデザインは致しますが、それは、デザイナーがいねぇの･･･とか、ちょいとしたテストなの･･･とか、ちょっとクリエイター魂を鼓舞してみようか･･･というような中途半端なオファーによるものが多く、自分では、ストラジストだとかIAだとか、理屈でほごほごとおさめられる領域に身を置いておきたい（＝自分を守りたい）などと思うわけです。

感性が！とか降りてきた！（なにが？）とかってヤバいよねぇ。ヤバイ。

んでも、こういうのを見ちゃうと、やってみたくなりますねぇ。

http://sixrevisions.com/web_design/30_beautifully_blue_web_designs/

いずれも、美しいデザインばかりで、パーツやレイアウトの参考になる。

【色々サンプル】

• http://adsoftheworld.com/taxonomy/media/online
• http://creativezone.eyeblaster.com/Default.aspx
• http://www.online-adpool.de/
• http://www.theflyerwall.co.uk/
• http://www.bannerreport.com/html/gallery.php
• http://adverlicio.us/
• http://www.urbanforestproject.org/banners/

 【チュートリアルとか】

• http://www.fiercepro.com/animated-video-sig-photoshop-tutorial/
• http://www.designersmind.com/tutorials/so-you-want-an-advertisement-banner-eh/
• http://performancing.com/design/photoshop-tutorial-a-performancing-banners
• http://psdtuts.com/interface-tutorials/making-a-message-strip-in-photoshop/
• http://www.tutorialwiz.com/animated_banner/
• http://nobstutorials.com/tutorials/20071010/banner-ad-tutorial/
• http://www.freegraphicsworld.com/banners/

参考：http://www.designwalker.com/2008/05/banner-design.html

http://designm.ag/resources/photoshop-texture-brushes/

汚したり古ぼけたようなテクスチャなどもあって、使い勝手がありそう。

特にWEBページの背景やボタンのテクスチャに使うには、よさげ♪

http://www.visual-blast.com/ja/flash/free-flash-gallery-solutions-for-your-images/

かぶってるのもあるけど、フォトギャラリー色々。

仕組みは大体同じです。

http://www.webdesignerwall.com/tutorials/mac-style-photoflip-gallery/

カッコイイフォトギャラリーを作成するチュートリアル。

手順もステップバイステップで書かれているので、勉強にもなりますね。

http://www.no3dfx.com/polaroid/

これはかなり素敵なフォトギャラリーです。

XMLの外部ファイル空データを読み込んでおり、更新性に優れており、また、インターフェイスも楽しいです。

マウスでドラッグすると、イメージを画面上の好きな位置へ移動することができ、ダブルクリックで拡大します。

http://www.flashiroha.com/index.htm

お勉強総リストにはたくさんのサンプルとフォトギャラリーサンプルがたくさんあります。

簡単なものから応用編までサンプルが豊富でとても役に立ちます。

http://www.airtightinteractive.com/simpleviewer/

シンプルかつ使いやすいフレキシブルなインターフェイスのフラッシュフォトギャラリー

http://swwwitch.com/books/mycom/theFlash/2008/01/xmlflash.html

サンプルとダウンロード可能なファイルがあります。