Photoshopを使ってWebデザインをしたいけれど、どのような手順で、何から始めたら良いのかわからないという人は多いと思います。闇雲にデザインをするのではなく、しっかりと数値を決めながらデザインを進めていくと、後でコーディングしやすくなるなどの利点も多くあります。
PhotoshopでWebデザインをしていく際の手順について、しっかり確認していきましょう。
１. Webサイト内のコンテンツを決定し書き出す
まずは、Webサイトのコンテンツを決定し、何が必要になるかを書き出します。例えば、ポートフォリオサイトであれば、自分の作品が一覧で見れるギャラリーページと、プロフィールページ、コンタクトが取れるページなどが必要です。webサイトの目的から、どんなページが必要になるかを書き出してみましょう。
２. ワイヤーフレームを作成する
ワイヤーフレームは、デザインの骨組みとなるものです。どのような形のWebサイトにするのか、先ほど書き出したコンテンツに沿って骨組みを作っていきます。メニューの場所や、トップの画像の位置などを決定します。
この時に、サイトや画像の大きさや配置の数値などを決めてしまうとデザイン制作が楽になります。
３. デザインを作成する
あとは、ワイヤーフレームと、最初に書き出したコンテンツを参考にPhotoshopを使ってデザインを始めます。デザインを始める前に以下の点に注意して、設定をしておきましょう。
単位をpxにする
Photoshopには、表示の単位がmmやcmなど複数あります。しかし、Webサイトで使用する単位はpxが一般的です。単位が変わると、サイズも大きく変わってしまうので、Webデザインを制作するときは、pxで統一しておきましょう。
メニューバーから「環境設定」→「単位」を開くと、単位を変更できるパネルが表示されます。ここから、ガイドや文字サイズの単位をpixelに変更してください。
変更後はグリッドやガイドを使って、正しい数値の位置に素材を配置したり、素材を作成しましょう。
４. 素材を書き出してコーディングする
スライスツールなどを使って、画像などの素材を書き出したら、あとはhtmlやcssを使って、Webデザインを組み立てていきます。ブラウザ上での表示が、きちんとデザインした通りになっているか確認して制作を進めるようにしましょう。
まとめ
Photoshopでデザインした素材などの大きさが異なっていると、コーディングの際に非常に不便です。上記で記載した注意点などに留意して、デザインを作成するようにすると良いでしょう。
