週刊Webテク通信

2009年8月第3週号1位は、Webデザイナーのための5つの上級Photoshopテクニック/気になるネタは、TypePadのマイクロブログ機能はPosterousそっくり

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年8月17日~8月23日の間に見つけた記事のベスト5です。

1. Carsonified ? 5 Advanced Photoshop Techniques for Web Designershttp://carsonified.com/blog/design/5-advanced-photoshop-techniques-for-web-designers/

WebデザイナーのためのPhotoshopチュートリアル記事です。

以下のような、最近のWebデザインのトレンドを押さえたテクニック集となっています。

  1. シンプルで効果的なボタン
  2. 透明度があってフェードアウトしていくナビゲーションメニュー
  3. 型押しされたような文字
  4. ぼかした光と影でボックスを浮かび上がらせる
  5. 奥行きを持った3D的空間の演出

Photoshopでボタンやバッジを作るチュートリアルのリンク集30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazineという記事も併せてご参考に。

図1 WebデザイナーのためのPhotoshopテクニック集
図1 WebデザイナーのためのPhotoshopテクニック集

2. CSS Sprites with Inline Images | CSS-Trickshttp://css-tricks.com/css-sprites-with-inline-images/

imgタグで配置した画像に対して、CSSスプライトを使おうというテクニックの紹介です。

小さなアイコンや記号など、サイト内で何度も出てくる画像を一枚にまとめておくことでロード時間を短縮させようというのがCSSスプライトです。CSSスプライト用の画像は背景画像として配置する方法が一般的ですが、CSSの絶対配置と「clip:rect」を使ってインライン画像に使うこともできるんですね。目から鱗のテクニックです。IE6でもちゃんと使えるそうですよ。

「clip:rect(0 48px 48px 0);」といった指定のとき、この数値はマージンなどの指定と同様に、時計回りに上、右、下、左の順番だそうです。この場合ちょっと分かりにくいのですが、上端のY軸の値、右端のX軸の値、下端のY軸の値、左端のX軸の値ということになります。

MOONGIFT: ? 便利!CSS Spriteを作成するAIRアプリ「Tonttu」:オープンソースを毎日紹介では、CSSスプライト用に複数画像を一枚にまとめてくれるAIRアプリが紹介されています。プロジェクトファイルを保存しておけるので、後から画像を追加/削除できるのが便利なようです。

図2 インライン画像でのCSSスプライトテクニック
図2 インライン画像でのCSSスプライトテクニック

3. A Showcase of Fantastic Footer Designs | Web Design Ledgerhttp://webdesignledger.com/inspiration/a-showcase-of-fantastic-footer-designs

フッタデザインのショーケースです。

昔は単にコピーライトを入れておくだけの使われ方が多かったフッタ部分ですが、今はユーザーに長く滞在してもらうためのナビゲーションを入れる重要な場所としてデザインされているとのことです。

図3 フッタデザインを多数紹介
図3 フッタデザインを多数紹介

4. Taming Advanced CSS Selectors | CSS | Smashing Magazinehttp://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

CSSセレクタに関するまとめ記事です。ブラウザによる対応状況についてもちゃんと触れられています。

探せば日本語でのCSSセレクタの記事もたくさんあると思いますが、虎の巻的ページはたくさんブックマークしておいても損はないと思い紹介しました。

原典に当たりたいという方は、W3Cのセレクタについての項Selectors Level 3もチェックしましょう。

5. What’s in your Cart? 30+ High-Quality Shopping Cart Templates | Noupehttp://www.noupe.com/design/shopping-cart-templates.html

ショッピングカートシステムの高品質のテンプレートを、ベースとなるシステム別に紹介しています。

ECサイト構築のシステムとして取り上げられているのは、以下の5つでした。

  • Wordpress
  • osCommerce
  • Magento
  • Zen Cart
  • CRE Loaded
図4 ショッピングカートのテンプレート集
図4 ショッピングカートのテンプレート集

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から、便利なスクリプトのまとめ記事とチュートリアルを紹介します。

先週の気になるWebサービス

Twilog - Twitterのつぶやきをブログ形式で保存http://twilog.org/

Twilog(ついろぐ)は、Twitterのつぶやきをブログ形式で保存、閲覧できるWebサービスです。

TwitPicなどのURLを含むつぶやきでは画像が表示されたり、過去のつぶやきを検索できたりと、なかなか機能も充実しています。

OAuth認証を使ってTwitterユーザーが気軽に使えるようになっていますし、なにより日本語のサービスなので、Twitter初心者にも使いやすいサービスでしょう。

自分のつぶやきをまとめて公開するという目的では、Friendfeedを使うという方法もありますね。

図5 Twitterのつぶやきをブログ形式で公開できるサービス「Twilog」
図5 Twitterのつぶやきをブログ形式で公開できるサービス「Twilog」

おすすめ記事

記事・ニュース一覧