Device-Agnostic Approach To Responsive Web Designという記事で、レスポンシブデザインのテストツールが4つ紹介されています。 Responsive Design Testing URLを入れると4つの画面でプレビューできるツール Responsive.is URLを入力すると、デバイスごとのアイコンクリックで表示を切り替えられる Responsinator URLを入力すると、デバイスごとの見え方をざっと見渡すことができるツール BriCSS ブックマークレットとして追加して、ワンクリックでデバイスごとの表示を確認 via. Device-Agnostic Approach To Responsive Web Design

「Useful CSS Snippets for Your Coding Arsenal」という記事で、コーディングに役立つCSSスニペット集が紹介されています。 垂直方向のセンタリング

綺麗なグラデーションや立体感のあるメニューやボタンを作りたい。 そんなときに参考になるのが、「Free PSD Web UI Element」。無料でダウンロードできるUIデザインのPSDファイル集です。 なかなかいい感じのものが揃っています。 Modern Web UI Set かっこいいメニューやボタン、フォームなど。商用でも利用可 Massive Web UI & Button Set カラフルなアイコンやパンくずなどのPSDファイル Free PSD : Checkbox Replacement iPhoneのオンオフボタンのような、チェックボックスのデザイン Webdesigner Toolkit 優しいトーンで角丸デザインのUIパーツ Scalable calendar シンプルなカレンダーのPSDファイル UIの要素をさくっと作りたいときに、参考にしてみてはいかがでしょうか。

美しいサイトの元ファイルが見たい。 そんなときに参考になるのが、『BlueMasters』。高品質なPSDをダウンロードできるページです。 今現在サーバが落ちているようでアクセスできないんですが、SmashingMagazineとのコラボで、BlueMastersというテンプレートが公開されています。 You can freely use it for both your private and commercial projects, including software, online services, templates and themes. とのことで、商用的にも利用可能になっています。 テクスチャや透過度など、細かいところまで参考になると思うので、一度見てみてください。 BlueMasters さてと週末か。がっつりと進めなくては。

91137817/ iStockphoto/ Thinkstock デザインの幅を広げたい。 そんなときに参考になるのが、『80 Fresh Photoshop Tutorials For Creating Awesome Websites』。素晴らしいサイトをデザインするためのPhotoshopチュートリアル集です。 ディテールまで解説されたものばかりで、いい感じですね。 Create a Watercolor-Themed Website Design with Photoshop 水彩画のようなテイストのデザイン。ワイヤーフレームの書き方から、960 Grid Systemを使ったレイアウトの方法、テクスチャをどこから探してどう使うのか、Photoshopでのエフェクトのかけ方など Create a Theme Store Website Layout in Photoshop デザ

99452197/ Hemera/ Thinkstock リアルなガジェットやデザインパーツをデザインしたい。 そんなときに参考になるのが、『40 Free PSD Files』。フリーのPSDファイル集です。 かなりクオリティーの高いものが揃っていますね。 Digital Stamp 美しい切手のデザイン Magnifying Glass 光の反射がうまく作り込まれた虫眼鏡のPSDファイル Stratocaster Classic ストラトギターのPSDファイル Knob Mash リアルな質感のボタン Apple Display とてもクールなAppleのディスプレイ iPhoneアプリをつくるときなどの参考に、ぜひ見てみてはいかがでしょうか？ 40 Free PSD Files 今日は打ち合わせ続きの一日。いい内容の打ち合わせができたりと、充実した一日でした。夕方クロスバイクで豪雨に

95715262 iStockphoto/ Thinkstock Photoshopで写真にエフェクトをかけたい。 そんなときにおすすめなのが、『25 Advanced Photo Effects and Techniques with Photoshop』。Photoshopで使えるクールなエフェクト集です。 いい感じのものが揃っていますね。 Cool Watercolor Effect 水彩画のようなエフェクトをかけるチュートリアル Water Effect 人を水しぶきで型どったエフェクト Photo To Oil Painting Effect 油絵のように見せるチュートリアル Paint Splatter Mold ペンキが飛び散ったようなエフェクト Impressionist Painting Effect 写真を印象派の絵画のように見せるチュートリアル Photo to Pe

デザインについていろいろと学びたい。 そんなあなたにおすすめなのが、『Creative Sessions』。クリエイティブなWeb講座が見られるサイトです。 Sessions are blocks of articles, interviews, tutorials and content on a particular creative subject. とのことで、クリエイティブに関するあるテーマについての記事やインタビュー、チュートリアルなどを掲載していくようですね。Tuts+ネットワークのサイトです。 第一回目は、「Character Illustration」ということで、キャラクターのスケッチからイラレを使ってのイラストレーションの方法が、たくさん解説されています。 次回は「Illustrative Lettering」ということで、手作りのフォントの作り方などが紹介されるよう

HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか？ Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と

98125356/ iStockphoto/ Thinkstock かっこいいアイコンを自分で作りたい。 そんなときに参考になるのが、『35 icon design tutorials in Photoshop and Illustrator』。クオリティーの高いアイコンデザインチュートリアル集です。 Photoshopと、illustratorのチュートリアルがたくさん紹介されていますね。かなり細かく解説されているのでわかりやすいのと、psd、ai(eps)　ファイルがダウンロードできるものもあります。 How to Make a Professional Buddy Icon in Photoshop Photoshopでスーツ姿の男性のアイコンを作るチュートリアル Icon design tutorial:How to make a Calendar icon iCalのような、カレ

97653441/ iStockphoto/ Thinkstock Photoshopでテキストにかっこいいエフェクトをかけたい。 そんなときに参考になるのが、『70 Photoshop Tutorials For Creating Perfect Typography』。Photoshopで作るタイポグラフィーチュートリアル集です。 かっこいいエフェクトが揃っていますね。 Create a Cool Wet Ink Typography Effect in Photoshop インクが滲んだようなエフェクトをかけるチュートリアル Suspended Text Effect ぶらさがったように見せるタイポグラフィー Photoshop Tutorials: Colorful Light Burst Text 閃光が奥から迫ってくるようなエフェクト Wood Inlay Text 木のオブジ

CSSでグラデーションを表現したい。 そんなときにおすすめなのが、『Cross-Browser CSS Gradient』。クロスブラウザで動作するCSSグラデーションです。 画像を使わずに、ブラウザ上でグラデーションを描く方法ですね。CSS3の書き方ではFirefox3.6+やSafari4、Google ChromeなどのモダンブラウザにCSS Gradientsが効きますが、IEには対応していません。 そのため、IE用にfilterの記述を追加したものになっています。 IEのfilterでは、水平か垂直方向の2色のグラデーションしかできないため、それに対応させた書き方になっているようです。シンプルなグラデーションを表現したいときにはいいかもですね。 一度見てみてください。 Cross-Browser CSS Gradient 一つ挽回。 久々に服を買いたくなってきました。週末に見に行

91831729/ iStockphoto/ Thinkstock サイトをさっと作りたい。 そんなときにおすすめなのが、『Top 10 Html/CSS Web Templates Of March 2010 For Free Download』。フリーのXHTML / CSSテンプレート集です。 いい感じのものが揃っています。 Photographer Enterprise Solutions Corporate 使いやすいものが揃っていると思うので、ぜひ見てみてください。 Top 10 Html/CSS Web Templates Of March 2010 For Free Download また遅れてしもうたすんまへんm(_ _)m今日は天気よくて気持ちいいですね〜。 いろいろ詰まっているので進めます。

96124501/ Hemera/ Thinkstock Photoshopのグラデーションファイルを探している。 そんなあなたにおすすめなのが、『25 High Quality Gradient Sets for Photoshop – 750+ Gradients』。クオリティーの高いPhotoshopのグラデーションファイル集です。 いい感じのグラデーションがまとまっていますね。 Clean Gradients Set 著者が注意深く選んだ約50個のグラデーションファイルを、フリー素材として配布しています Ocean Breeze 海をテーマにした青系のグラデーションファイル Vintage 深みのあるグラデーションファイル集 Dooffy Gradients Set 美しいグラデーションファイルがまとまっています Adobe CS3 Gradients Adobe CS3のアイコン

6133716, Hemera/ Thinkstock Web制作の参考になる情報を探している。 そんなときにおすすめなのが、『All Showcases』。Web制作に役立つサイト集です。 CSSやFlashなどのカテゴリーに分けて、かなりたくさんのサイトがまとまっていますね。 いくつかご紹介します。 CSS Best CSS Design ブログ型のCSSデザインギャラリー CSS Flavor クールなサイトを集めたCSS Flavor Flash Design Charts 週刊のかっこいいFlashサイトランキング DOPE Awards クールなFlashサイトをグリッド状に並べているDOPE Awards その他 CMS Showcase CMSで構築されたサイトギャラリー We Love WP 美しいWordPressで作られたサイトのデザインギャラリー サイト名やUIもか

Photoshopでトーンカーブをうまく使いたい。 そんなときに参考になるのが、『How To Use Curves in Photoshop』。Photoshopのトーンカーブで階調補正するチュートリアルです。 S字カーブで補正する方法や、ヒストグラムを見て補正する方法などが、実例とともに紹介されています。画像にマウスオーバーすると、トーンカーブを適用した状態が見られるのでわかりやすいですね。 一度見てみてください。 How To Use Curves in Photoshop 朝方まで作業してしまったけど今日もがんばります。

サイトをさっと作りたい。 そんなときにおすすめなのが、『30 Latest High-Quality Free (X)HTML/CSS Templates Must See Now』。クオリティーの高いフリーのXHTML/CSSテンプレート集です。 いい感じのものが揃っています。 Urban Gear スライドショーのある、ECサイトのデザイン Ornare サムネイル付きのスライドショーのある、すっきりとしたサイトデザイン My Porfolio ポートフォリオに使えるデザインテンプレート Megan シンプルなタイポグラフィーデザイン Cantya ビジュアルにイラストをうまく使った、見やすいレイアウト PSDファイルが含まれているものもあるので、ぜひ見てみてください。 30 Latest High-Quality Free (X)HTML/CSS Templates Must See

インターフェースデザインに使いやすいアイコンを探している。 そんなときにおすすめなのが、『PC.DE』。インターフェースに使えるかわいいアイコン集です。 ↑のようなアイコンセットが4種類配布されていますね。 These icons are free for personal use and also free for commercial use, but we require linking to our web site (a backlink from your website, contact us if not possible via email to support@pc.de). ダウンロード後のファイルに、上記のようにライセンスが書かれています。 個人利用、商用利用ともに無料ですが、リンクバックは必要とのこと。リンクバックができない場合は、support@pc.deに問い

おっと思わせる仕掛けのあるフォームを実装したい。 そんなときにおすすめなのが、『Sliding Labels v2』。jQueryで作るスライドするラベルです。 フォームにフォーカスすると、ラベルがすっと左に移動しますね。とてもさりげない動きなので、ユーザビリティーを損なわず、おっと思わせる効果があると思います。 デモは以下から。 View the Demo 一度見てみてください。 Sliding Labels v2 DTPデザイナーと近場で飲み。楽しかった。共通点がいろいろあるんですが、やっぱりやりたいのはロックだということを再認識しました。 昨日、CREAMUのコンセプトを見直しました。「web2.0を紹介するデザイナーブログ」としていましたが、「WEB制作・ブランディング」に変更。やりたいのは制作と、アウトプットする対象のブランド価値の向上なので、ワードを絞り込みました。SEO的な観

CSSのフレームワークを使ってサイトを作りたい。 そんなときにおすすめなのが、『ZURB』。クールなCSSグリッドフレームワークです。 カラム数や幅を指定して、CSSを生成できますね。Screen Widthを変えて確認することもできて、なかなかいい感じです。 似たサイトだと、960 Grid Systemがありますね。 こちらは制作事例も多く、参考になるのではないでしょうか。デザインの制約を受けそうですが、コーディングの手間を多少減らしつつデザインする、ということができそうです。 一度見てみてください。 ZURB CSS Grid Builder ここ数日夜はちゃんと寝るようにしているので体調がいい。この調子でいきます。