東京都府中市、九段下のWEB制作会社Maromaroのブログです

2017.05.01

miura

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

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

さて本題です。
Fireworksが開発終了を宣言した際(2013年の5月なのでもう4年も前ですか…)に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ファイルを開いてそのファイル間を行ったり来たりする必要がなくなるので作業がかなり楽になります。
アートボード機能の操作はアートボードツールから行います。

アートボードを複製する

出来上がったページを基に次のページを作成する際に便利です。
アートボードツールの状態にして複製したいアートボードの四隅をクリック
+マークが四方に表示されるので作成したい方向の+マークをクリックするとアートボードが複製できます

アートボードのサイズを変更する

「カンバスサイズの変更」ではアートボードのサイズ変更はできません。
アートボードツールの状態にしてサイズを変更したいアートボードの四隅をクリック
その四隅をドラッグすることでアートボードのサイズを伸縮することができます。

入力したテキストの範囲を拡大縮小したい

クリックではなく、ドラッグでフォントを入力するとテキストの範囲の拡大縮小ができます。
(そうでない場合は文字自体に拡大縮小がかかってしまいます)
Fireworksだとオブジェクトの四隅を伸ばすだけでテキストの範囲は変更できますが、それと同じような使い勝手になります。

選択している図形の縦横サイズを調べる

オブジェクトを選択。拡大縮小がかかる四隅の部分をクリックオブジェクトを選択状態にする。
情報パネルに縦横のサイズが表示されます。

選択しているオブジェクトをピクセルや%でサイズ変更

オブジェクトを選択した状態で上部のパネルから数値を変更する。
%以外(たとえばpx)にしたい場合は数値が入っているボックスの上で右クリックすると表記を変えられます。

以上の操作でPhotoshopでのWebデザインはかなり楽になりました。
CS6の頃の不自由さに比べるとかなり良くなっていると思います。
まだまだこれから使い勝手はよくなっていくと思うので今Fireworksを使用している人も徐々にPhotoshopに移行してもいい時期なのかもしれませんね。