綺麗なグラデーションや立体感のあるメニューやボタンを作りたい。
そんなときに参考になるのが、「Free PSD Web UI Element」。無料でダウンロードできるUIデザインのPSDファイル集です。
なかなかいい感じのものが揃っています。
UIの要素をさくっと作りたいときに、参考にしてみてはいかがでしょうか。
]]>
オリジナルのテキストをデザインしたい。
そんなときに参考になるのが、「Create a Silky Ribbon Text Effect」。illustratorで描くシルクのリボンで作ったようなテキストです。
まず、「Giddyup Std」というフォントで、テキストを打ち、ペンツールでラインをトレースします。塗りを透明にして、0.25pxのカラーの線を指定。
その後、「効果 / 3D / 押し出し・ベベル」で立体感を出し、「オブジェクト / アピアランスを分割」...といった手順で解説されています。
リボンをくるくるっと巻いたときに光と影ができますが、そのグラデーションのかけ方が一文字ずつ詳しく解説されているのがいい感じです。
illustratorのスキルを上げたい方は、一度見てみてください。
Create a Silky Ribbon Text Effect
]]>8月23日（月） 15:00まで受け付けていますので、ご興味のある方はご連絡いただけるとありがたいです。
Flexを使用した、テンプレートプログラムのカスタマイズ案件となります。お手数ですが、詳しくは以下をご覧ください。
よろしくお願いします！
]]>
HTML5でサイトを作りたい。
そんなときに参考になるのが、「S5 Style」。アニメーションの美しいポートフォリオサイトです。
shogo Tabuchiさんというデザイナーの方のサイトですね。アーキタイプさんにいらっしゃるようです。
Processing.jsを使って、canvas内に描画しているようですね。Processing.jsは、jQueryの作者であるJohn Resig氏が公開したライブラリで、amachangさんの以下のエントリーに詳しく書かれています。
ブラウザでお絵描きプログラミング！ Processing.js 登場！
簡単な描画ならすぐにできるようですね。ソースも読みやすいです。
サイトには音もついていて、サウンドデザイナーのCubic Roomさん作とのことです。こういうコラボは素敵ですね。
Flashサイトではない、新しい技術の参考になると思うので、一度見てみてください。
]]>
クールなフルフラッシュサイトを作りたい。
そんなときに参考になるのが、「Despark」と「nano・universe × sony "α"」。どちらも、とてもかっこいいサイトになっています。
上記は「Despark」。画面の切り替えやスクロール時の表示が気持ちいいです。swfaddress.js、swfmacmousewheel2.jsが使われていて、それぞれ画面別に個別URLを割り当てているのと、Macでのスクロールに対応しています。
上記は、「nano・universe × sony "α"」。ファッションとカメラのコラボということで、とても魅力的なサイトになっています。斜めのラインの使い方が綺麗で、動きが気持ちいいですね。
どちらのサイトも、swfを読み込むためのswfobject.jsと、swfの最小サイズを指定するためのswffit.jsが使われています。
デザイン的にも機能的にも参考になると思うので、一度見てみてください。
Despark
nano・universe × sony "α"
スケジュールがかなりタイトなので、受けてくださる方がいたらすぐにお願いしたいと思っています。テンプレートのプログラムがありまして、そのカスタマイズ案件となります。
フリーランスの方でも構わないですし、会社さんでもOKです。ただお会いして打ち合わせをさせて頂きたいので、東京近辺の方、あるいは東京に打ち合わせに来ることができる方にお願いできればと思います。
興味のある方がいらっしゃいましたら、下記の連絡先までご連絡ください。実績がありましたら、そちらも教えていただけるとありがたいです。
info[at]creamu.co.jp（[at]を@に変えてください）
一旦、8月19日（金）15:00までの募集とさせて頂きます。
よろしくお願いいたします。
P.S. 先日募集させて頂きました、Javaプログラマ募集へのたくさんのご応募ありがとうございました。今回はご期待に添えられず申し訳ありません。クライアントの意向で、フリーの方にお願いする形となっています。また機会がありましたら、よろしくお願いいたします。
]]>
CSS3でかっこいい表現をしたい。
そんなときにおすすめなのが、「Subtle CSS3 Typography that you'd Swear was Made in Photoshop」。Photoshopで作ったようなCSS3のタイポグラフィーです。
Safari, Google Chromeなどで使用可能な「-webkit-mask-image」でマスクが指定してあったり、グラデーションを適用するgradientプロパティ、色を指定するRGBaプロパティ、hover時にアニメーションするtransitionプロパティが使われています。
フォントには、Appleのサイトでもよく使われている「Myriad Pro」が使われていますね。
ソースがダウンロードできて参考になるかと思うので、一度見てみてください。
Subtle CSS3 Typography that you'd Swear was Made in Photoshop
]]>
jQueryを使ってクールなインターフェースを実装したい。
そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。
結構いい感じのものが揃っています。
気に入ったものがあったら、一度試してみてはいかがでしょうか？
30 Useful Jquery Plugins For Developer & Designer
]]>
Flashでディテールの動きを表現したい。
そんなときに参考になるのが、「PANOPLIE」。浮遊する動きが独特なサイトです。
フランスの制作会社のようですね。ふわふわうにょうにょと浮遊する動きが独特です。
ポートフォリオをクリックして、拡大後に矢印をクリックすると、布をめくったようにふわ〜っと画面が飛んでいきます。
細かい動きが参考になるかと思うので、一度見てみてください。
PANOPLIE - Artificial Emotions
]]>
ふと思い立って、facebookのいいねボタンを付けました（思い立ちすぎやろ）。
IE6と7でも正常に表示されて、んーちょっとうれしいです・・・。
なかなかいい感じかも。僕もよくわかってないんですが、facebookにログインしていると、いいね！と投票できるようです。押した後キャンセルもできるようなので、気に入っていただいた記事があったら押してみてください！
公式のページから生成したんですが、ややこしかったので以下にソースを載せておきます。こちらもMTのパーマリンクタグを書いています。
facebook Like button
<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink$>&layout=button_count&show_faces=true&width=120&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>以下から生成できるので、試してみてください。
]]>
ふと思い立って、Twitterのツイートボタンを公式のものに変更しました。リリース直後はカウントがいまいちだった気がするんですが、今は正常になっているようです。
IE6と7でトップページになぜか画像が表示されないんですが、んーとりあえず放置しておきます・・・。
日本語版だと幅が大きくなってしまうので、英語のタイプを選びました。あとURLを個別URLとしてカウントしているようですが、トップページには複数の記事があるので、以下のようにMTタグを設定。
デザインがかわいくていいですね。いい感じに貼付けられました。以前はTweetMemeのものを貼っていましたが、数字をクリックするとTwitterにリンクしたり、「Tweet」ボタンをクリックするとポップアップで表示されるのがいいです。記事のタイトルが選択状態になっていて、すぐにテキストを変更できるのもいいですね。
まだ使っていない方は、ぜひ使ってみてください。
]]>
無彩色のクールなデザインがしたい。
そんなときに参考になるのが、『Ahrens』。白と黒で統一したシンプルなデザインのサイトです。
960pxの幅の中、綺麗なグリッドデザインとなっていますね。色を使わない潔さで、クールなデザインとなっています。
大きく幅いっぱいに配置されたグラフィックがかっこいいですね。
さりげなく置かれているスライドショーは、左右にスライドしてツールチップが表示されて、しかも拡大表示しますが、jquery.cycle, jquery.tipsy, jquery.fancyboxが駆使されています。
シンプルなデザインが好きな方は、一度見てみてください。
]]>
ふと思い立ってMagic Trackpadを買いました。ペンタブを使ってると上下左右のスクロールがやりにくいので、Magic Trackpadを使ったらすごく便利なのでは、と思ったら予想以上に便利です。かなりいい感じ。
]]>
機能美に優れたサイトを作りたい。
そんなときに参考になるのが、『WATERWORKS』。落ち着きのある機能美に優れたサイトです。
落ち着いた配色でとても綺麗ですね。画像が美しくて、レイアウトがかっちりしていてとても見やすいです。
スライドショーには「jquery.cycle.min.js」を、商品個別ページの画像の拡大表示には「jquery.galleria.js」を使用しているようです。
メガメニューにはロゴが入っていたり余白が適度に取られているし、アニメーションもとても綺麗ですね。独自のjsで実装しているようです。
デザインと機能が美しいサイトなので、一度見てみてください。
]]>
今かなり安くなっているので、ぜひ見てみてください！
]]>
Wacomのタブレットを自分なりに設定したい。
そんなときに参考になるのが、『25 Tutorials for Getting Started with your Wacom Tablet』。Wacomタブレットを始めるためのチュートリアル集です。
参考になりそうなものが揃っています。
一度見てみてください。
25 Tutorials for Getting Started with your Wacom Tablet
]]>
Wacom Intuos4 Medium PTK-640/K0
あとWiMAXのトライアルが届きました。結構速くていい感じ。
写真OOGIRIの先週の当選者が発表されました。
最優秀者のpero_tさんには、BUFFALOの350GBハードディスクが贈られます。おめでとうございます！
今週の写真への投稿も絶賛募集していますので、よろしくお願いいたします。
]]>
クールなアイコンを作りたい。
そんなときに参考になるのが、『How to Create a Fun Circus Tent Icon』。illustratorによるサーカステントアイコンの作り方です。
まず長方形ツールで複数描いた形を「効果 / ワープ / でこぼこ」、さらに「効果 / ワープ / 下弦」で三角形に広がるように変形して、テントの垂れている箇所を「効果 / ワープ / 下弦」で丸めて「効果 / ワープ / 上弦」で歪ませて、シャドウ部分をグラデの透過で重ねてと、わかりやすい解説になっています。
複数のツールの扱い方が参考になると思うので、一度見てみてください。
How to Create a Fun Circus Tent Icon
]]>今日から、「写真OOGIRI」の2週目が始まりました。先週の当選者の発表は、明日となります。楽しみにしていてください。今週もたくさんのご投稿をお待ちしています！
]]>
