デザイナーのためのタイポグラフィーチュートリアル。テキストレイアウトよりは、どちらかというとテキストエフェクト寄りの内容です。最近3DCGソフトと組み合わせた作例を見る機会が増えたような気がします。フォトショップもCS4 Extendedでは3Dモデルデータ扱えるようになりましたしね。まぁ自分の場合ソレ系のソフトってまるで使えないんでアレだしナニですが。
Tag Archives: Tutrial
[ICON] 22 Extremely Well Written Icon Design Tutorials – よくできたアイコンデザインのチュートリアル
ウェブ上で公開されている、よくできたアイコンデザインのチュートリアルが22例紹介されています。オリジナルのアイコンや、既存のアイコン（主にアップル関係が多いです）をゼロから作るもの、カメラやエンピツなどをイラストとして描くものなどが紹介されてます。アイコンってウェブ制作でわりと使用頻度が高いパーツなので、こういうチュートリアルまとめは勉強になりますな。
[WEB DESIGN] 10 HTML Tag Crimes You Really Shouldn’t Commit – やっちゃイケないHTMLの書き間違い
ついやってしまいがちだけど、そこんトコは気をつけなきゃイケないHTMLの記述ミスという記事。インライン要素の中にブロック要素を入れない、ALTの入れ忘れ、Listタグを使うべき場所でBRタグを使ってる、BタグやIタグを使っている、スペーシング目的でBRタグを使ってる、スタイル要素をインラインで書いちゃう、ボーダーゼロをHTMLで書いちゃう、Hタグを使ってない、昔懐かしいBLINKタグやMARQUEEタグをまだ使ってる、といった内容。BLINKとかMARQUEEってありましたよね。なんだか懐かしいなぁ。けど自分もこの中のいくつかの間違いを、ついついやっちゃう時あります。ALT入れ忘れとかスタイルのインライン記述とか。丁寧なコーディングをしなきゃなー、って思ってはいるんですけどねｗ
[WEB DESIGN] 45 Step-by-Step Tutorials on Web Design with Photoshop – フォトショップを使ったチュートリアルサイトまとめ
フォトショップを使ったチュートリアルがまとめられた記事。目的別にサイトデザインを行う方法、グランジ表現、ナビゲーション関係、水彩画のようなエフェクト、テンプレートの紹介など、広い範囲に渡っていろんなチュートリアルが紹介されてます。雑多な印象ですが、わりとネタ帳としても機能してくれそうな記事です。
[CSS] 22 CSS Button Styling Tutorials and Techniques – CSSでデザインされたクールなボタンのチュートリアル
CSSでデザインされたスタイリッシュなボタンのチュートリアルや素材がまとめられています。各リンク先ではカスタマイズ方法の紹介や、Zipファイルのダウンロードができます。角丸＆テキストボタンでは、スライディングドアの技術が使われるのが最近では一般的のようです。ボタンデザインやコーディングの際に参考になりそうな内容です。
[PHOTOSHOP] 33 Excellent Web Layout Photoshop Tutorials – フォトショップで行うウェブレイアウトのチュートリアル集
フォトショップを使って行う、ウェブレイアウトのチュートリアルが33例まとめられています。ウェブデザイナーの多くはフォトショップを使ってデザインワークをしてると思いますが、特にレイアウトを行う上でのTipsなんかが紹介されてます。どれもよくデザインされているので、ネタ帳としても秀逸な記事。チュートリアルによってはPSDファイルが配布されてるかもしれません。
[WEB DESIGN] Styling your Lists: 20+ Brilliant How to’s and Best Practices – リストタグを使ったスタイル表現
liタグを使ったクールなリスト表現と、そのチュートリアルがまとめられています。liタグなんて5年前はまるで用事がなかったタグなのに（少なくとも田舎デザイナーの俺にとってはそうでした）、今じゃめっちゃ使いますもんね。あとhタグなんかもそう。メニューからカレンダーまでいろんな用途が紹介されてます。
Styling your Lists: 20+ Brilliant How to’s and Best Practices >>