[リニューアル] Photoshopで素案作成

大体のレイアウトが決まったところで、サイトのデザイン作成に入ります。私の場合、Photoshopで素案を作った後、各パーツをばらしながら保存していくという手法を取ってます。これだと、全体のバランスを見ながら一気に素材を作っていけるので、後で行うHTMLコーディングに集中して取り組めます。

Photoshopで全体のデザインを作る

ま、新しい記事を追加しても読みづらくならないようになればよかったんですが、せっかくだから全体的に手を加えてしまおう！と、無駄に意気込みつつ始めた新デザインの素案作成。大したテクニックも持ち合わせていないので、できる範囲内でちゃかちゃかーっと作ったのが右の図。

やぼったいなーなんて感じていた部分をちょいとシャープに作り直し、無駄にWEB2.0的デザインなんぞを入れてみました（笑）

サイドバーがガラガラ、全体的に詰まって見えたりもするんですが、ま、素案ですからね。細かい調整はコーディングの際にやっていこうと思います。とりあえずはパーツができればOKっす。

スライスツールを活用

Photoshopでサイトのデザインを作る際に最も重要になってくるのが「スライスツール」。

これ、1枚のカンバスを任意の大きさに切り分けられるツールなんですが、ここでしっかりサイズを決めながら画像を配置していくと、コーディングの際、スタイルシートで縦やら横やらの幅を指定するときにすんなりスムースに事が進みます。

また、スライスツールで切り分けると、その枠にそってピタッとシェイプがくっつくので、しっかりスライスできていれば、あっちとこっちでパーツの大きさが違う…なんてこともありません。

パーツを単独でつくっていくよりも、サイト全体を作っていった方が全体的にバランスのとれたものが作れるような気がします。

＋＋＋＋＋

わださんはFireworksをご利用のようですが、私がPhotoshopを使ってやってるのと似たような方法でデザインしてます。こちらもご参考にｗ

■ ［1日更新］HTMLコーディングの準備作業

ちなみにわださん、単に絵としてサイトを作ってしまうだけではなく、それをPowerPointに貼り付けてスタイルシートを使う際のセレクタ名も事前に決めちゃってます。私はある程度頭の中だけでスタイルシートを組み立てられたりするのでここまではしませんが、リファレンスブックを片手に…という方は、あらかじめセレクタ名を決めておくことでその後の作業を効率よく進めらるんじゃないかなって思います＾＾

Tweet