2017.05.01

Fireworks使いもそろそろPhotoshopでのWebデザインに手を出してみよう！

皆さんこんにちは。三浦です。
昨日立ち寄ったご飯屋さんで「鳥取砂丘で作られた赤ワイン」なるものを頂きました。
「鳥取砂丘でぶどうが育つんですか！？」とお店の人に尋ねるとどうやら砂丘の真ん中という訳ではなく、限りなく砂丘に近い場所で作られたぶどう、ということだそうです。とはいえ土壌としても砂地になっていて少し特殊な環境らしく、それがワイン作りに適している。ということでした。
肝心の味はというと、深みがあってお肉との相性が良いように感じられました。（月並みな感想）

さて本題です。
Fireworksが開発終了を宣言した際（2013年の５月なのでもう４年も前ですか…）にPhotoshopに乗り換える計画を立てていたのですが、CS6当時のPhotoshopだとWeb制作で使うには何かと不便だったり様々な操作が遠回りに感じる工程が多く断念していました。
そんな中で先日Photoshop CC 2017になって改めてPhotoshopでのWebデザインを試してみたところ、使い勝手がかなり向上していて感心してしまいました。
ということで普段Fireworksを使用している筆者がPhotoshopでもWebデザインができるなと感じたポイントについて実際の操作の仕方を絡めてお話していきたいと思います。

まずPhotoshopの良い部分

パターンやブラシをはじめとしてFireworksよりも機能が豊富なので自由度が高い
写真補正に関してはやはりPhotoshopが強い
現在も開発が続いているので日々使い勝手が向上している
業界のスタンダード（どこかの統計で見ましたがやはりPhotoshopを使っている人が多いようですね）

FireworksからPhotoshopに乗り換えるなら設定が大事！

選択関連

Fireworksはオブジェクトの選択が直感的で使いやすくて気に入っていたのですが、Photoshopでも設定次第でかなり使いやすくなります。
まず「選択ツール」を有効にしましよう。
画面上部のパネルに設定項目が表示されます。

自動選択

こちらをチェックすると、クリックした要素のレイヤーを自動で判断して選択できるようになります。
少し使い勝手にクセがあるのでこちらは好みによってon、off切り替えましょう。

バウンディングボックスを表示

個人的には必須です。選択したレイヤーの四隅にマークが表示されて、今自分が何を選択しているのかがすぐに分かります。

レイヤーの境界線を表示

パネル「表示」→「表示・非表示」→「レイヤーの境界線」で変更できます。
これを有効にするとレイヤーを選択した際にそのレイヤーの境目が表示されるので今選択しているレイヤーの範囲が直感的に判断できます。

FireworksでできるアレってPhotoshopでできないの？

ページ機能を使いたい

アートボード機能

Fireworksでいうところのページ機能はないのですが代わりにCCから追加されたアートボード機能を使いましょう。
アートボードはひとつのファイルの中で並列的にデザインを作成できる機能です。
これを使うことで別々のpsdファイルを開いてそのファイル間を行ったり来たりする必要がなくなるので作業がかなり楽になります。
アートボード機能の操作はアートボードツールから行います。