Photoshopでモックアップを作るためのTips10選

Photoshopでサイトのモックアップが作りたい。

そんなときにおすすめなのが、『10 Tips For Creating Website Mockups In Photoshop』。Photoshopでモックアップを作るためのTips10選だ。

以下にいくつかご紹介。

• フォントはアンチエイリアスをオフにする
  Windowsはアンチエイリアスがかからないので、オフで作成。
• フォントには鮮明のアンチエイリアスをかける
  このアンチエイリアスが一番ブラウザのレンダリングに近い。11pxか12px以下の場合、ほとんどのブラウザではスムースフォントに対応していないため、アンチエイリアスはオフにした方がいいだろう。
  
  （＊追記（08.09.13）コメントをいただいて気付いたんですが、完全に記事を読み間違えていましたm(_ _)m修正、及び追記します ）
• テキストはWebセーフフォントを使う
  MSゴシックあたりを使いましょう。
• モックアップが完成したらJPEG100%で書き出す
  80%にもできるところだが、クライアントに見せるなら一番綺麗なものを。
• widthを最適化する
  ターゲットとなる解像度が800pxの場合、モックアップは760px以内にした方がいいだろう。1024pxがターゲットの場合、960pxを超えるべきではない。 Nathan Smith's 960 Grid Systemは手始めにいいテンプレート。
• フォームのモックアップを作る場合、一から作るようなことをしない
  The Designer's Toolbox (huge collection of form elements)は、異なったブラウザ、OSのフォームテンプレートを無料で使える。これを使わない手はない。
• 素材サイトを利用する
  以下のようなサイトを使ってみては？
  » ColourLovers: Colors, Palettes and Patterns
  » Smashing Magazine's Freebie Icons, Buttons and Templates
  » Deziner Folio: 131 Beautiful Photoshop Styles
  » Deziner Folio: 130 Beautiful Photoshop Gradients
  » Stylegala's Bullet Madness
  » Vitaly Friedman's 25 Best Free Quality Fonts
  » Silk Icons
  » Feed Icons

その他のリストは以下から。

» 10 Tips For Creating Website Mockups In Photoshop

モックアップのサンプルがPSDでダウンロードできる。

Photoshopでモックアップを作るためのTips、チェックしてぜひ参考にしてみてはいかがだろうか。