category:
Design
Back to Blog Index
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