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

Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。

95555725/ Hemera/ Thinkstock PHPで文字列を操作したい。 そんなときにおすすめなのが、『10 PHP code snippets for working with strings』。文字列を扱うPHPのコードスニペット集です。 使いやすそうなコードが揃っています。 Twitter用に文字列を140文字以内に整形する function split_to_chunks($to,$text){ $total_length = (140 - strlen($to)); $text_arr = explode(" ",$text); $i=0; $message[0]=""; foreach ($text_arr as $word){ if ( strlen($message[$i] . $word . ' ') <= $total_length ){ if ($tex

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 デザ

サイトをWordPressで作りたい。 そんなときに参考になるのが、『40 WordPress-Powered Websites With Awesome Designs』。WordPressで構築された美しいサイト集です。 かなりかっこいいサイトが揃っています。 Theme Garden WordPressのテーマを配布しているTheme Garden Aaron Irizarry テクスチャとタイポグラフィーが美しいデザイナーのブログ kazuhide fukuyama 日本のフリーランスデザイナー、Kazuhide Fukuyama氏のポートフォリオサイト UpThemes メニューやスクリーンショットの置き方、ボタン等、洗練されたデザインのUpThemes Awesem 反応の速いドロップダウンメニューと、スライドショーが美しいAwesem WordPressユーザの方は、一度見て

もう一つメモ。WordPressをローカルで構築して、テストサーバ、本番サーバにインポートして移行する場合、画像のファイルパスには気をつける必要があります。 画像のファイルパスは絶対パスでDBに入るので、外部サーバに持って行ったときにDBの中を書き換える手間が発生してしまうんですよね。 なので、サイトルート相対で書いておくとその書き換えが不要になるので楽です。 「設定 / その他の設定」で、上記のように「ファイルへの完全な URL パス」にサイトルート相対パスを記述。この場合は「/wp-content/uploads」としていますが、先頭にスラッシュをつけていれば、任意のパスに設定可能です（「/images」など）。 参考にしてみてください！ 天気がよすぎるので出かけようかな。

うーんこれにははまった。過去にも同じことではまったのでいろいろメモ。 HTMLの中でインクルード <!–#include virtual="/dirname/filename.html" –> サイトルート相対パスでOK PHPの中でインクルード（virtual関数が使えるサーバの場合） <? virtual("/dirname/filename.html"); ?> サイトルート相対パスでOK PHPの中でインクルード（virtual関数が使えないサーバの場合（さくらなど）） <? readfile("dirname/filename.html"); ?> 相対パスか絶対パス（サーバ上ではなくURL上の）で記述 SSIを使用可能にするには、.htaccessファイルに以下を記述 AddHandler server-parsed .shtml AddHandler server-parse

86501330, Jupiterimages/ Goodshoot/ Thinkstock かっこいい動きが実装できるjQueryプラグインを探している。 そんなときにおすすめなのが、『25 Amazing and Fresh jQuery Plugins』。新しいjQueryのプラグイン集です。 既出のものがありますが、動きの洗練されたものがまとまっています。 YoxView – jQuer Image Viewer Plugin lightbox系のかっこいいスライドショー Uniform – Sexy forms with jQuery ラジオボタンやファイル選択ボックス、チェックボックスをjQueryでデザイン。ホワイト、グレー+ブルー、ブラックの3タイプがダウンロードできる jQuery Form Wizard Plugin フェードイン&アウトで遷移するバリデーション付きのフ

WordPressで作ったサイトをより魅力的にしたい。 そんなときにおすすめなのが、『20 WordPress Plugins For Better Image Handling』。画像をより魅力的に使うためのWordPressプラグイン集です。 おっと思うようなプラグインが結構ありますね。いくつかご紹介します。 jQuery Image Lazy Loader WP 最近の海外のブログでよく見られるプラグイン。ページをスクロールするのに合わせて画像が読み込まれる。これを使っていたのか。。 Frontpage-Slideshow クリッカブルなスライドショーを作成。記事へのリンク等に使える NextGEN Gallery 画像にFlashのアニメーションのような効果をつけられるNextGEN Gallery。かなりかっこいい FlippingBook ページがめくれたような表現で画像を表示

デザインの幅を広げたい。 そんなときにおすすめなのが、『The Ultimate Collection Of Brilliant Web Design Tutorials』。素晴らしいWebデザインチュートリアル集です。 クオリティーの高いものが揃っていますね。いくつかご紹介します。 Design an Italian Restaurant Web Layout レストランのサイトをデザインするチュートリアル。デフォルトで入っているカスタムシェイプをうまく使う方法など Create a Sleek, High-End Web Design from Scratch 背景のテクスチャやブラシをうまく使った、クールなサイトのデザイン手法 Create a Photo-Realistic Web Layout 木のテクスチャをうまく使ったデザイン Design a Non-Profit Web

ありきたりのデザインをしたくない。 そんな時に参考になるのが、『Creative and Unusual Layouts and Navigation Designs』。一味違ったレイアウト&ナビゲーションデザイン集です。 特に面白いな、と思ったものをご紹介しますね。 26000 Vodka メニューが浮遊しながら、遠近感のある感じで表示される Sursly 横にスクロールしていくタイプのコンテンツ Lucuma ナビゲーションをクリックすると、画面が横にぐいーっと移動する Okay Dave ローディング後のアニメーションがとても美しいOkay Dave Andreas Smetana スクロールすると、すとんすとん、と画像が切り替わる。マウスオーバー時のアクションも気持ちいい Snuggle Fux レイアウトが斬新なSnuggle Fux Im Design 矢印キーで奥行きのあるイ

Diary あなたの生活を刺激するインテリアショップ10選『10 interior shops exciting your life』 自分の部屋の空間デザインがしたい。 そんなあなたにおすすめなのが、『10 interior shops exciting your life』。あなたの生活を刺激するインテリアショップ10選としてまとめてみました。 以下にご紹介。 » CIBONE CIBONE公式サイト。ショップは↓のAoyama Bell Commonsに入っていますね。自由が丘にもあります。 » 青山ベルコモンズ シボネ それにしてもサイトがかっこいいな。。 » CASSINA 青山のカッシーナ。オンラインショップもやっていますね。 » hhstyle.com 原宿のキャットストリート沿いにあるお店。僕も時々行くんですが、とても雰囲気のいいお店です。 青山にもあり、オンラインショップ

ロゴをデザインしたい。 そんなときにおすすめなのが、『45 Rules for Creating a Great Logo Design』。素晴らしいロゴをデザインするための45の法則だ。 以下にご紹介。 3つ以上の色を使わない。 絶対に必要というわけでないものはすべて除外する。 文字はあなたの祖母でも簡単に読めなければならない。 ロゴとはっきり認識できなければならない。 ロゴにユニークな形やレイアウトを取り入れる。 あなたの親や配偶者がデザインについて思うことを徹底的に無視する。 3人以上の人にロゴが魅力的に見えるかを確認する。 有名なロゴの要素を使ってオリジナルだと主張しない。 どんな場合でもイラスト集を使わない。 ロゴは白黒でもかっこよく見えるべき。 逆さにしても認識できること。 リサイズしても認識できること。 ロゴがアイコンやシンボル、テキストを含む場合、それぞれ良さが引き立つよう

Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript

Ali Felskiというサイトで、オーガニックなテクスチャの背景を作る方法が紹介されています。 サイトの背景をどうやって作ったのか、という質問を受けて、それに答えたとのことですね。 以下のような手順になっています。 istockphotoから空の写真と汚れた感じの紙の写真を選択 新規レイヤーを明度の低い青のグラデーションで塗りつぶす ※1 空の写真をその上のレイヤーに配置。地面を切り取り、境界をぼかす 空の写真のレイヤーを「描画モード：乗算」「不透明度：57%」に指定 紙の写真をその上に配置し、「描画モード：ビビッドライト」「不透明度：41%」に指定 少し明るかったため、青のグラデーションを※1の上に「描画モード：オーバーレイ」で重ねる 空の写真を複製し（「描画モード：乗算」「不透明度：48%」）、雲の形が面白いシルエットを描くように位置をずらす 描画モードはこれと決め打ちできるものでは

WebAppStormで、デザイナー・デベロッパーのためのAIRアプリ・ブラウザアドオンがたくさん紹介されています。 いくつかご紹介しますね。 Splashup Light 無料。軽量な画像編集アプリ Fractal4D 無料。3D画像を作成できて、illustratorなどのソフトにエクスポートできる RichFLV 無料。FLVのメタデータ、キューポイント、サウンドなどを編集して、swfやmp3に変換できる e2vector 無料。レイヤー機能、マスク機能などを持ったイラストアプリ ImageSizer 無料。画像のリサイズ、回転、最適化、複数ファイルのリネームができて、複数ファイルをzipで書き出せるアプリ JustResizeIt! 無料。ドラッグ&ドロップで、画像をリサイズしてくれるアプリ kuler desktop 無料。AdobeのカラーマネジメントアプリであるKulerのA

これはすごい。思わずうなってしまった。 Adrian Pelletierさんのブログ&デザインポートフォリオサイトの記事です。 マウスオーバーすると、ふわっとアイコンが浮き上がって、マウスアウトですっと下に落ちます。 落ちた時のバウンドも実装されているので、有機的でとても気持ちいいですね。 デモは以下から。 » View Demo ぜひ見てみてください♪ » Create a Realistic Hover Effect With jQuery 昨日は会社のイベント。「2人のアートディレクター 仕事・生き方・考え方」というタイトルで、mountのイム・ジョンホさんとRAKU-GAKIの西田幸司さんにお話を伺いました。 懇親会でご挨拶させて頂いたんですが、刺激になりますね。

creative NERDSで、illustratorのテキストエフェクトチュートリアルがまとまっています。 ざっといくつかご紹介。 ↑はCreating an Environmentally Friendly Green Type Treatment。 Create a Vibrant 3D Pixel Type Treatment How to Create a Smokin’ Western Type Treatment in Illustrator Illustrator Tutorial – 3D lighted text effect Tutorial : Create a cool water effect その他のリストは以下からどうぞ。 » The Best Adobe Illustrator Text Effect Tutorials 女性がいいって言ってたLEAF &

LINE25というサイトで、CSSスプライトを使ったメニューの作り方が紹介されています。 1枚の背景画像を使って、こんな感じでCSSを指定していきます。 デモは以下から。 » View Demo ソースファイルもダウンロードできますね。 ぜひ見てみてくださいー。 » How to Create a CSS Menu Using Image Sprites プロジェクト管理ツールを整備中。結構整ってきたぞ。

supersizedというjQueryを使ったフルスクリーンのスライドショーを見つけました。 特徴は以下の3つですね。 ・画像の縦横比を維持しながらブラウザに合うように画像をリサイズする ・フェードイン&アウトしながら画像を切り替える ・ナビゲーションで「一時停止・再生・戻る・進む」をコントロールできる こんな感じです。 オプションも数値でいろいろと設定できますね。 とてもかっこいいのでぜひ見てみてください。 » supersized 気持ちいい週末ですね〜。まったりだな。