CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ

ウェブサービスタイプの各種RSSリーダー用のボタンをいくつもブログのサイドバーに貼るのではなく、それらをすべて1つのボタンにまとめることができるという無料サービスです。 タイプは2種類で、2列に渡るタイプと、1列で縦に長く伸びるタイプ。好きな方を選択できます。 利用は以下から。 FeedButton Beta. Uncluttering Blogs & simplifying RSS Feeds. 作り方は簡単、右下の「Create My Feed Button」の空欄にRSSのアドレスを入力し、「Make My Feed Button」をクリックするだけ。あとは出てきたコードをコピペして貼れば完了です。デフォルトでは「Normal」が選ばれていますが、これを「Long (110 px wide. 1 column)」にすれば縦長版にチェンジします。 なお、各RSSリーダー用はここから個別

以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲　レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ

【PR】あなたの写真を簡単キレイに無料補正 写真をポラロイド風に ひとつ目は、あっという間に写真をオシャレにできるオンラインツール Polaroid-o-nizer™ アップロードした画像（GIF・JPEG・PNG）のURLを入れてクリックするだけ 余白に文字を入れることもできます。（英語のみ） お好みで写真の角度を自由に変えられます。 ■ポラロイドイメージの作り方 Background color (RGB value) RGB値で背景色を設定できます。（デフォルトは白） URL to image (GIF, JPEG or PNG, 200x200 pixels minimum) 使用できるイメージサイズの最小サイズは200x200ピクセル x and y coordinates (optional) オプションで座標の指定ができます。 Rotation angle (between

いろいろな背景パターンとして利用できる画像が置いてあります。画像によっては商用利用可能なものもあります。とにかくものすごい数があるので、飽きません。 詳細は以下から。 Kaliber10000 { The Designers' Lunchbox } 「Next」をクリックしてたどることができる数はわずかなので、ドロップダウンメニューの「View by name」からであれば確実に全種類を閲覧可能です。 日付によって絞り込むこともでき、ランダムにいくつかの背景画像を表示させてそこから選ぶといったこともできます。

PHPテンプレートエンジンというのは、PHPによるプログラム部分と、HTMLによるデザイン部分を分離することによって、メンテナンス性を向上させることができる、というもの。 プログラムするPHPを扱う側の人にとって見れば、デザイナーの仕上がりを待たずにソースの修正などが可能になり、デザイナー側から見れば、PHPの知識が無くてもテンプレートファイルの部分を変更するだけでデザイン可能になる、というわけ。 そんなPHPテンプレートエンジンの中でも特に有名なトップ25を見てみましょう。 Jaslabs >> Top 25 PHP template engines 中には知らないのも混じってますが、それだけいろいろあるよ、ということで。 Smarty 動作速度の高速さとフレキシブルなところがウリ、かなり有名。 Heyes Template Class とても使うのが簡単で、パワフルらしい。ページレイア

Photoshopと違って拡大縮小しても画像が荒くならないベクター形式をIllustratorは採用しているわけですが、そんなIllustratorを使って写真のようにリアルなイメージを作り出すという驚愕のテクニック。 上記サンプル画像を見れば分かるように、写真っぽく見えますが中身はベクター形式のものになってます。 その他のサンプル画像や作り方は以下の通り。 The World's Most Photorealistic Vector Art 上記ページからたどることのできる画像はどれもコレもものすごい 作り方はこんな感じ。手間がかかってる。 Gradient Mesh Tutorial その他のベクター形式のイラストはここにいっぱいあります。 deviantART: Browse deviantART こういうフォトリアリスティックなものを通常通り、Photoshopで作る場合はこんな手

JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。

WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1：WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2：Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3：Minitabs http://www.aplus.co.yu/adxmenu/exam

サイトデザインをするときは、たいてい他のかっこいいサイトを眺めながらインスピレーションを得ることにしている（真似にならない程度にね）。 そうした場合、たいてい色合いだけは決まっているので「青系でなんかいいサイトないかなぁ」と探すことになる。これはこれで結構面倒で、色合いで探せるデザインサイト検索サイト（ややこしいな・・・）がないかなぁ、と思っていたところ、あった。 Dark-iのサイトではまさにそのような検索を実現してくれている。これを使えば今までの作業が大幅に効率化されそうだ。 無意識に行っている検索手順をツール化してみる。デザインサイト検索以外にも応用ききそうですね。

通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。 ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。 ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ

赤外線写真（あるいは赤外写真）というと水着が透けるとかああいうアヤシイのを思い浮かべる方が多いかも知れませんが、そもそもそんなものではなく、写真撮影テクニックの1つ。 というわけで、赤外線写真をいろいろ集めてみました。なかなか不思議な感じ。ほかに、Photoshopで赤外線写真風にする方法も載せておきました。 Infrared Photo Gallery by Jeffrey Klassen at pbase.com 上記写真はTiffen 87、及び Hoya R72というフィルタで撮影された物だそうで。 その他のきれいな赤外線写真集は以下の通り。同じものでも違う世界に見えて幻想的です。 Infrared - a photoset on Flickr fine art nudes - a photoset on Flickr Nudes indoor - a photoset on Fl

ミニチュア風、あるいはミニチュアっぽく見える写真というのがある。実写をミニチュアっぽく撮影するわけだが、もちろんある程度のテクニックが必要となる。 しかし、「HDR（ハイダイナミックレンジ）」という機能が搭載されたフォトレタッチソフトを使えば、あっという間に誰でもミニチュア風写真が作成できる。ミニチュア風と言うより、ものすごくファンタジーな感じにできるし、上記写真のようにまるで映画のセットみたいな非現実的光景を作り出すことができる。 以下、実写をミニチュア化っぽくしたり、映画セットみたいな画像を作る「HDR（ハイダイナミックレンジ）」についての説明。 ■まずミニチュア風写真の例 有名どころでは以下のような感じとなる。これらは今回の「HDR（ハイダイナミックレンジ）」とは違う手法なのだが、とにかくミニチュアっぽい。 Model World | Metropolis Magazine MONT