ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年4月11日～2011年4月18日の間に見つけた記事のベスト5です。

1. Pixel Perfection When Rotating, Pasting And Nudging In Photoshop - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/14/mastering-photoshop-pixel-perfection-when-rotating-pasting-and-nudging/

Photoshopで、ピクセル単位できっちりと画像を扱うためのテクニックを紹介した記事です。

不自然にアンチエイリアスがかかったり、線が太くなったりしないように、

（1）ドット絵を回転させる方法

（2）ベクター画像をペーストする方法

と、

（3）ベクトルシェイプを常にピクセル単位で移動させる方法

について解説しています。なるほどという内容なので、以下で簡単に説明します。

（1⁠）⁠、（⁠2）のポイントは、扱う図形の縦横ピクセルが偶数か奇数かということです。

回転させた結果、縦横のピクセル数が「偶数から奇数」または「奇数から偶数」に変わると問題が起きます。なので、たとえば正方形の選択範囲を作って回転させればきれいに回転できます。

また、「⁠パスを自由変形」の基点を左上に設定してから回転するという方法もあります。

Illustrator上でピクセルベースで作ったベクター画像をPhotoshopにシェイプレイヤーとしてペーストする場合、画像サイズと同じ選択範囲を作ってからペーストすればキレイなビットマップになります。

また、画像の縦横のピクセル数が奇数なら1ピクセル、偶数なら2ピクセルの選択範囲でも大丈夫です。たとえば横が偶数で縦が奇数の画像なら、2×1ピクセルの選択範囲を作ってからペーストしてもOKです。

（3）は、ベクトルシェイプツールで描いた図形を矢印キーで移動させる場合、表示が100%の場合は1ピクセルずつ移動するのですが、200%だと1/2ピクセル、300%だと1/3ピクセルずつしか移動しなくなってしまうことへの対処法です。

新規ウィンドウを作り100%表示と拡大表示の2つのウィンドウを開いた状態にして、移動は常に100%表示のウィンドウで行うようにする方法が紹介されていました。

2. 16 Unusual Ways to Build Great Wordpress Websites - tripwire magazinehttp://www.tripwiremagazine.com/2011/04/16-unusual-ways-to-build-wordpress-websites-web-designers-should-know.html

ブログ以外の用途にWordPressを使った例を多数紹介しています。

13種類の例を挙げた「Turn your blog into anything: 13 unusual uses for WordPress」という同様の記事を以前紹介しましたが、今回の記事はさらに増えて16種類です。

そのときには紹介されていない事例を以下に挙げます。

• ソーシャルネットワーキングサイト
• 会員サイト
• チケットシステム（トラブル処理の情報管理などのシステム）
• ECサイト
• グループワークのためのサイト
• オンラインマガジン
• ニュースポータル
• 商品レビューサイト

その用途を実現するためのテーマへのリンクが紹介されているものもあって便利です。

3. 40 Facebook Fan Page Designs and Practices | inspirationfeed.comhttp://inspirationfeed.com/2011/04/40-facebook-fan-page-designs-and-practices/

Facebookページのデザインショーケースと、Facebookページ制作に役立つ情報を紹介しています。

より凝ったFacebookページを作るためのテンプレートやFacebookアプリ、ヒントやチュートリアルへのリンクなど便利な情報がたくさん掲載されています。

4. CSS3 Patterns Galleryhttp://leaverou.me/css3patterns/

画像を使わずCSS3だけで作ったパターン画像のギャラリーです。

繰り返しパターンの背景画像として使うことを想定しており、複雑な形状のものもあります。

選択すると、実際に背景に敷き詰めた状態を確認できます。CSSのコード部分を書き換えると、すぐに反映されます。

5. Using Photos in Web Design, Excellent Examples for Inspiration - DesignModohttp://designmodo.com/using-photos-in-web-design-excellent-examples-for-inspiration/

大きな写真画像を背景に使ったWebデザインのギャラリーです。

ブラウザサイズを変更しても、それに合わせていっぱいまで写真が広がるテクニックを使ったサイトが多いですね。

そのほか、先週の記事の中から、気になる記事を3つ紹介します。

• Web Design Evolution: Two Decades of Innovation [INFOGRAPHIC]
  Webデザイン技術の進化の20年史をインフォグラフィックにまとめています。
• iPhone Painters Japan: WacomからiPad向けスタイラスペンが登場
  WacomからBambooのブランドでiPad向けスタイラスペンがお披露目されたそうです。
• iPadで本を貸し出し　電子図書館サービス「武雄市MY図書館」スタート - はてなブックマークニュース
  専用アプリで本を借りられ、貸出期間を過ぎると閲覧できなくなるそうです。

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

24-bit PNG to 8-bit PNG with alphahttp://www.8bitalpha.com/

アルファチャンネル付きの24bitのPNG（Fireworksでは32bit PNG扱い）を、8bitの透過PNGに変換するWebサービスです。

ドラッグ＆ドロップで24bit PNGをアップロードすると、8bit PNGに変換された画像が生成されます。

8bit PNGにすると、もちろんファイル容量が減るのですが、IE6でも問題なく表示できることもメリットになります。

このサイトの解説によると、Photoshopはアルファチャンネル付きの8bit PNGを書き出すことができず、うまく開けないこともあるとのことです。Fireworksはアルファチャンネル付き8bit PNGを書き出すことができます。