週刊Webテク通信

2011年4月第3週号1位は、Photoshopでピクセル単位できっちり回転・ペースト・移動させるテクニック、気になるネタは、アドビからiPad用開発ツール「Photoshop Touch」登場

ネットで見かけた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%表示のウィンドウで行うようにする方法が紹介されていました。

図1 Photoshopでピクセル単位できっちり回転/ペースト/移動させる方法
図1 Photoshopでピクセル単位できっちり回転/ペースト/移動させる方法

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サイト
  • グループワークのためのサイト
  • オンラインマガジン
  • ニュースポータル
  • 商品レビューサイト

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

図2 ブログ以外の用途にWordPressを使った例
図2 ブログ以外の用途にWordPressを使った例

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アプリ、ヒントやチュートリアルへのリンクなど便利な情報がたくさん掲載されています。

図3 Facebookページのデザイン例と情報源
図3 Facebookページのデザイン例と情報源

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

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

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

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

図4 CSS3で作ったパターン画像いろいろ
図4 CSS3で作ったパターン画像いろいろ

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

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

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

図5 大きな写真画像を使ったWebデザインのギャラリー
図5 大きな写真画像を使ったWebデザインのギャラリー

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

先週の気になる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を書き出すことができます。

図6 24bitの透過PNGを8bitの透過PNGにする変換ツール
図6 24bitの透過PNGを8bitの透過PNGにする変換ツール

おすすめ記事

記事・ニュース一覧