Adobe Illustratorを使って制作を行う際のチュートリアル。33の作例とチュートリアルが紹介されてます。イラストや写実的な表現、アートワーク制作、ロゴ制作などがその内容。イラストレーターの勉強するにはちょうどイイかもしれません。キーボードの写実的な表現とかなかなかスゴいっす。

33 New High Quality Adobe Illustrator Tutorials

Wordpress用のテーマ100選。2010年1月って事は、毎月選ぶんでしょうか。数が数だけに、「これはちょっと微妙」って思うテーマも中にはありますが、いくつか気になるテーマがあったので紹介。Dream Sky Wordpress Themeとかそうだけど、CSS3を使い始めてるテーマもチラホラあります。WPのテーマ探しの際に使えそう。

100+ Best Free Premium Wordpress Themes of Jan 2010

ウェブデザインにおいてアップルのサイトほど多くの事を学べる例というのは他にないんじゃないかと、わたくし本気でそう思うのであります。この記事ではアップルのサイトから学べる事を分かりやすく解説されてます。いくつか抜粋して紹介すると、シンプルに、製品をクールに見せる写真、注意を引きたい場所にはコントラストを付ける、Flashを使わない、フレンドリーな印象を持たせる、堅牢なグリッドで表示する、美しいカスタムアイコンを使う、など。ウェブサイトとして特別派手なデザインではないだけに、そこで使われるTipsというかデザイン姿勢というのは、堅実で一貫性のある手法だと言えます。見習いたいところです。

15 Design Tips to Learn From Apple

サイトによっては特別重要なパーツ、「登録はこちら！」ボタンの作例が色々と紹介された記事。もちろん英語圏と日本語圏とではボタン内の文字表記は異なりますが、ボタンのデザインとして共通する部分は多いはず。どのサイトもボタンを目立たせるために色々と工夫してます。コントラストの付け方や位置取り、大きく主張するデザインにするなど、その手法は色々です。ボタンデザインで迷った時にイイですね。

A Look into Registration Buttons in Web Design

Web Creators 2010年3月号に記事が掲載されました。巻頭の“CSSテクニックを完璧にする38のレッスン”という特集内で、p.40「表示速度アップにCSS Spriteを活用する」と、p.54「一歩進んだ汎用テキストボタンをつくる」という内容で、合計2ページ書かせて頂きました。CSS SpriteとSlidingdoorという、ウェブのコーディングをしてる人なら1度は聞いたことのあるテクニックについての内容です。書店にお立ち寄りの際は是非これひとつ。頑張って書きました！

MdN Web Creators

CSS3を使って表現するアニメーションデモをまとめた記事。JSではなくCSS3のみで動きを表現している作例ばかり（だと思う）のようです。CSS3ではTransitionとTransformという新しいプロパティを使う事で動きを表現できますが、それらを使った動きがメインとなるデモ（時計とか）や、装飾的に動きを使ったもの（マウスオーバーでニュっと動くとか）の作例を見る事ができます。マウスの動きに合わせたSpotlight Cast Shadowとかなかなかホットです。

47 Amazing CSS3 Animation Demos

やってまいりました、マックユーザーのクールなデスクトップまとめ記事でございます。わたくしこの手の記事大好きです。ミニマリストのワークステーションというタイトル通り、ゴテゴテした要塞のようなデスクトップではなく、シンプルでスッキリとした環境が多く紹介されてます。一部マックじゃないのもありますが、やはり美しいのはマックユーザーの机だなぁと、ワンワン的なひいき目たっぷりに思いました。こういうの見習って机の上はキレイにしておきたいものです。ウチの場合はガンプラが転がってますが・・・。

A Showcase of Minimalist Workstations

iPadやiPhoneのGUIやアイコン類のPSDファイルを配布しているサイトを2つ紹介。基本パーツがレイヤー分けされてるPSDなので、「アプリ作りたいけどデザイナーがいない」といった人にちょうどイイ感じ。一部のアップル否定派の人からは「使い道が分からない」などとも言われているiPad。これって同じ事をiPhoneの時にも言われてましたね。ようするに「こんな使い方したら楽しそう！」みたく想像できる人向けの端末ですな。わたしですか、3G版の値段と販売モデル次第かなぁ・・・。

iPad GUI PSD | iPhone / iPad icon PSD template

ピュアCSS3なアニメーション作例。Flashではなく、JSさえ使っていない、CSSだけで動かしている作品。こんな事できるんですね。iPadでFlashが動かない事が分かり、今後iPhoneにも搭載される見通しは低いという現状、そしてWebkitエンジンのブラウザが着実にシェアを伸ばしているという点などを見ると、今後HTML5 + CSS3のスキルは確実に求めらるようになるでしょう。いやーしかしアニメーションの題材にSTAR WARSのAT-ATをチョイスするあたりがシビれます。

Pure CSS3 AT-AT Walker

このサムネールにピンときた方、かなり長年のフォトショップユーザーですね。わたくし初めてフォトショに触れたのがこのVersion3でした。大学のマックに入ってたのがこのバージョンで、これ使って当時やってたバンドのウェブサイト作ってました。というわけでフォトショップの20年を、起動画面と各種パネルを通して振り返ってみるという内容の記事。古くからのユーザーにとっては懐かしいんじゃないでしょうか。ただひとつ残念なのは、途中からウィンドウズ環境のスクリーンショットが中心となる点。フォトショと言えばマックだろ常考。まぁウィンドウズバージョンも使った事あるけどさ。古き良き時代を思い出したい方にオススメです。

20 Years of Adobe Photoshop

Adobe Fireworks関係のリソースまとめ記事。ライブラリ、パターン、シンボル、スタイル、オートシェイプ、コマンドやスクリプト、オートメーション、エフェクト、テンプレート、テクスチャ、ベクターオブジェクト、チュートリアルなどが紹介されてます。自分の場合Fireworksは全く使わず専らフォトショップばかりなのですが、その理由のひとつにフォトショップの方が圧倒的にリソースが多いという点。ウェブデザインの現場においてもフォトショップユーザーの方が多数派だという印象。けどFireworksのスライスコピペ機能だけはイイなぁっていつも思います。

An Explosion of Adobe Fireworks Resources

欧米が今最もアツいと感じているのがCSS3とJavascriptなんだけど、いやぁこれらの作例にはホントまいったよ。エクセレーント！　という感じのまとめ記事。ぼちぼちCSS3ガラみのこうした作例紹介も本格的になってきましたね。AppleのiPad & iPhone向けコンテンツを視野に入れた場合必須となるスキルだけに、そろそろこれ系もちゃんと勉強しなきゃな、という感じであります。しかしウェブでできる表現の幅が広がる事は素直に歓迎したいですね。

50 Brilliant CSS3/JavaScript Coding Techniques