Home > デザイン系

デザイン系 Archive

WEBテンプレート6000

http://www.dreamtemplate.com/

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

WORDPRESSを見違えらせるjQueryイロイロ

絶対にお気に入りにしておくべきCSS3とHTML5のネタ70選

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

 

70 Must-Have CSS3 and HTML5 Tutorials and Resources _ Web Resources _ WebAppers

 

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

webデザインイロイロ。マウスオーバー効果もイロイロ。

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

moused

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

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

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

ブラウザのパーツを集める

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

Designers Toolbox_ OS Form Elements

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

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

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

海外のプロレベルのWEBデザインを学ぶ実践チュートリアル色々

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

鉄板な感じがシマスネ。

んで、そしたら、グラデの美しいサイトデザイン25選も見とくか、と。

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

25 Great Examples of Using Gradient Effects in Web Designs

上品できれいですな。

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

サイトデザインに手軽に使えるフォトショップのグラデ集30選

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

36 Color Gradient Sets For Photoshop and Resource Sites_ Part 1 _ Graphic and Web Design Blog - Inspiration_ Resources and Tools

ボタンとか背景とか。

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

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

手軽にフラッシュボタンをつけるとっても便利なFlashEngine

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

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

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

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

んで、見つけました。

これ、便利。

気に入った!

Flash Engine Series

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

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

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

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

これ、トップページのフラッシュまで予算取れないときとか、ECサイトなんかで、結構いいですね。(^^)//

かっこいいフォームデザイン色々25

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

25-stylish-examples-of-web-forms

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

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

ビューティフルなフラッシュサイト50選

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

50-beautiful-flash-websites-_-design-showcase-_-smashing-magazine

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

ビューティフルな高品質フォント色々

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

beautiful-high-quality-free-fonts-for-your-designs-_-fonts-_-smashing-magazine

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

フリーのサイトデザインPSDとXHTMLテンプレートがダウンロードできる

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

6-free-psd_xhtml-templates-_-freebies-_-smashing-magazine

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

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

かっこいい3Dフリーアイコン色々iconshock.com

http://www.iconshock.com/

professional-icons_-web-icons-and-stock-vista-icons

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

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

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

オンライン・グリッドレイアウトツールその2

http://mdaines.com/plumb/

plumb

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

オンライン・グリッドレイアウトツール

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

grid-designer-2

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

フォト素材のダウンロードサイト色々

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

dl-_-designwalker

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

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

WEBデザインのテンプレートとフォトショップのチュートリアル

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

clear-details-web20-premium-website-templates

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

フォトショップのブラシやイメージその他デザインファイル満載の「obsidian dawn」

http://www.obsidiandawn.com/

obsidian-dawn-digital-design-resources

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

フリーのフォトショップブラシやプラグイン配布サイト「PHOTOSHOP MOSAIC」

http://www.photoshopmosaic.com/

photoshop-mosaic2

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

WEBページ&バナーデザイン色々ネタ帳

50の美しくてユーザーフレンドリーなナビゲーションメニュー選

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

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

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

ten

ph

nopoko

モノクロ☆シンプルでカッコイイアイコン集

http://picol.org/icon_library.php

icon-library

全部シンプル。

だけどカッコイイ。

RSSアイコン色々

iPHONEのデザイン構成ファイルキット(PSD&ベクター)

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

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

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

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

クリエイティブでイケてるポートフォリオデザイン集50選

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

確かにイケとります。

カッコエエです。

美しいグランジWEBデザイン30選

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

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

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

美しい!サイトのナビゲーションデザイン色々50選

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

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

デザインの参考に。

絶対持っとくべき!50のフォトショップブラシ集

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

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

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

雪とクリスマスのロマンチックな秀逸ブラシ48選

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

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

使える100のクールなグランジフォント

CSSでデザインするスタイリッシュなフォームデザイン

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

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

細部まで手を抜かない。洗練されたデザインのフッター集

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

フッターデザイン集。

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

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

45のきれいなイラストレーターブラシ集

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

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

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

イラレで作るWEBデザイン20選

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

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

フリーフォントを入手するサイト5選

高品質なフリーのPSDファイル30集

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

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

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

jQuiryを使用したブログのテーマビルダー

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

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

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

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

フォトショップで描く30個の素敵なイラストチュートリアル集

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

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

うれしい限りです。

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

感性が!とか降りてきた!(なにが?)とかってヤバいよねぇ。ヤバイ。

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

青をベースにした30のWEBデザイン事例集

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

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

広告バナーのデザイン色々

カッコイイ背景テクスチャをつくる厳選フォトショップブラシ

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

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

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

ロゴ作成のインスピレーションを喚起する世界のロゴサイト

  • LogoPond  – さまざまなロゴのサムネイル付一覧あり。
  • Faveup - ロゴをサムネイル付で一覧表示している。投票もできる。
  • deviantART – deviantArtのサイトのカテゴリ。
  • LogoSauce  – ユーザが参加してあり。いろいろなロゴがある。
  • Lo8os – ロゴのコミュニティサイト
  • The Identity Archives Project – ロゴのサーチエンジン。色々な会社やブランドのロゴが検索できる。
  • Logo Design Love – ロゴがテーマのブログ。
  • Logoed  -ロゴがテーマのブログ。
  • Brand New -個性的なロゴが色々。
  • LogoLounge – ユーザ投稿型コミュニティ
  • Carbonmade  – ユーザー投稿型で面白いロゴがある。
  • FLASHフォトギャラリー色々。

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

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

    仕組みは大体同じです。

    ituneみたいなクールなフラッシュフォトギャラリー『Mac Style PhotoFlip Gallery』

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

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

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

    インタラクティブなフラッシュフォトギャラリー『Polaroid Gallery v.1.01』

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

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

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

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

    アクションスクリプトから実践サンプルまで『FLASHのお勉強』

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

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

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

    XMLで画像更新が出来るフラッシュフォトギャラリー『SimpleViewer』

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

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

    XMLで管理するFlashフォトギャラリー

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

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

    ホーム > デザイン系

    Search
    Feeds
    Meta

    Return to page top