Webデザインに関する、Photoshop CS6とFireworks CS6の比較表

「Webデザインに最適なソフトウェアは？」とWebデザイナーに尋ねれば、多くの方々が「Fireworks」と答えるのではないかと思います。

ですが、「職場環境の事情でFireworksが導入できない(私も最初の職場がそうでした……)」、「使い慣れたPhotoshopでWebデザインもこなしたい」などといった理由などで、主にPhotoshopを用いてWebデザインしているという方々も多いのではないかと感じています。

この連載では、理由はどうあれ「PhotoshopでのWebデザイン」をしたいと考えているみなさんに、「Photoshop CS6で快適にWebデザインするためのテクニック」を、具体的な利用シーン別にご紹介していきます。

Photoshopで快適にWebデザインするための設定変更

Photoshopは本来、写真やイラスト等の画像編集を前提に開発されたソフトウェア。そのため、Webデザインを前提に開発されたFireworksとは、初期設定で重視している部分が異なり、そのまま使い始めるとやや不便が生じることも。

まず作業に入る前に、PhotoshopをWebデザインに最適化するための設定変更のポイントをご紹介したいと思います。やや項目は多いですが、やるとやらないとでは作業効率が段違いなので、ひとつずつチェックしていきましょう。

■カラーモードをRGBに変更

カラーモードとは、色情報の管理方法のことです。商業印刷の際はCMYK(シアン・マゼンダ・イエロー・ブラック)。モニター上に表示する際はRGB(レッド・グリーン・ブルー)。Webデザインする場合は、後者の"RGB"モードで作業します。

画面上部のメニューから、イメージ＞モード＞RGBカラー を選択しましょう。

■数字の単位を"pixel"に

Webデザイン時に用いる数字の単位は"pixel"です。画面上部のメニューから、Photoshop>環境設定>単位・定規>単位を選択し、定規と文字をpixelに変更しておきましょう。

■おまけ「CS6のUIカラーテーマを変更したい！」

Photoshop CS6から、UIのデフォルトカラーテーマが、"黒"になりました。こちらはもちろん設定で変更可能です。

環境設定＞インターフェイス＞アピアランス＞カラーテーマと選択していくと、4色のカラーテーマからお好みのものを選ぶことができます。

この連載のスクリーンショットでは、著者の好みから、CS5までの見慣れた灰色基調のカラーテーマでお送りしたいと思います。

次のページでは、作業中に悩まされがちな複数のレイヤー管理のための便利な設定をお見せしていきます。