FireworksからPhotoshopへ。私的移行マニュアル

PhotoshopをFireworksの代わりに使うときの設定・操作方法メモ

※当記事でのPhotoshopのバージョンはCS5を元に記載しています。CS6、CC（Creative Cloud）では設定項目の移動や名称変更、機能の改善が行われていることがあります。

　ブログに掲載する画像の編集に、以前はFireworksを使っていたのだが、Fireworksの開発が終了してかなり時間が経った。最後のバージョンもいつまで新しいOSで動かせるかはわからない（もう動かないかも）。最近になってやっとPhotoshopの使い方に慣れてきて、置き換えることができた。FireworksでサッとできていたことがPhotoshopでは機能によっては1、2ステップ増えることもある。しかし、CS6以降のPhotoshopはよりWeb向けの画像編集に便利なソフトになっている。Photoshopの作法を身につけておいて損はない。

　FireworksからPhotoshopに移行するにあたっての「FireworksでできていたアレはPhotoshopでどうするの？」を備忘録としてメモしておく。

PhotoshopをWeb向け画像編集に対応した環境に変更する

　Photoshopは初期状態では印刷向けの画像編集を想定した設定になっているため、デフォルトの単位が「mm」など紙ベースのものになっている。PhotoshopをWeb向けの画像編集に使うならこれらの単位を「ピクセル」に指定しておく。

ファイル新規作成時のカンバスサイズのデフォルト単位をピクセルに指定する

　「編集」メニュー＞「環境設定」＞「単位・定規」を選択、単位の「定規」と「文字」を「pixel」にする

グリッドの単位をピクセルに指定する

　「編集」メニュー＞「環境設定」＞「ガイド・グリッド・スライス」を選択、グリッドの「グリッド線」の単位を「pixel」にする。

また、グリッドにそってシェイプ（図形）を作成したときに、図形のサイズに小数点以下のピクセルを使わないようにグリッドの「グリッド線」と「分割数」をそれぞれ100にしておく（小数点以下のピクセルが使われると図形のエッジがぼけてしまうため）。

画像の作成・編集

　まずはじめにPhotoshopの操作画面のパーツの名称を覚えておこう。画面左上に縦に並んでいるのが「ツールバー」、メニューの下に並んでいるのが「オプションバー」でオプションバーはツールバーで選択された機能に合わせ内容が切り替わる。操作中にこれらのバーが消えてしまったり、表示されなくなった際はメニューの「ウィンドウ」から復帰させられる（「オプション」と「ツール」）。

オブジェクトをクリックするとレイヤーが自動で選択されるようにする

　ツールパネル内の「移動」をクリック、オプションバーに表示される「自動選択」にチェック、拡大縮小などをメニューを選択することなく行えるようにする場合は「バウンディングボックスを表示」にチェックする。（個人的にこの設定でFireworksからの違和感はかなり解消された。）

画像の整列

　移動したい画像のレイヤーを選択（「移動」オプションバーの「自動選択」がオンになった状態であればオブジェクトをクリック）、Ctrl+Aでレイヤー内の全てを選択、ツールパネル内の「移動」をクリック。オプションバーに表示される「揃え」ボタンをクリックする。配置が決まったらCtrl+Dで選択を範囲選択を解除する。

複数の画像の均等配置

　均等配置したい画像のレイヤーをCtrlを押しながら3つ以上クリックし（「移動」オプションバーの「自動選択」がオンになった状態であればShiftを押しながらオブジェクトをクリック）、「移動」オプションバーの「分布」ボタンをクリックする。

この際、分布の範囲は外側のオブジェクトの位置によって決まるため、カンバスサイズの端と端に合わせて分布させたい場合は、左右の端にある画像をカンバスの端に合わせておく必要がある。

画像の拡大縮小を数値入力で行う

　サイズを変更したいオブジェクトを選択、Ctrl+Tでオプションバーに位置情報と縦横比が表示される。W（幅）またはH（高さ）の値を右クリックすると単位をピクセルに変更できる。縦横比を保ったままサイズを変更する場合は、WとHの間にある鎖のアイコンを押した状態にする。小数点以下のピクセルを使うと画像のエッジがぼけるので必ず整数を使うこと！

縦横の大きさを数値指定して長方形や円を作成する

　ツールバーのシェイプツールを選択し、オプションバーのカスタムシェイプツールの隣にある▼をクリック、「固定」の空欄に数値を入力する。長方形ツールで行う際は「ピクセルにスナップ」のチェックをオンにする。

ラインツールで描いた線の太さを後から変更する

　シェイプを選択し、Ctrl+Tで幅、高さを数値入力で変更する。

シェイプツールで描いた図形の枠のみを描画する

　シェイプを選択し、レイヤーの「塗り」を0%にし、レイヤーをダブルクリック、「レイヤースタイル」の「境界線」にチェックをし、「境界線」メニューをクリックする。「塗りつぶしタイプ」を「カラー」にし、「カラー」で枠線の色を指定、「構造」の「サイズ」で枠線の太さを指定する。

最新版のPhotoshopも「フォトプラン」なら月額約1,000円から

　今頃Photoshop CS5の使い方に慣れたわけだけど、CS6以降のPhotoshopは「Fireworksの分も！」というわけか、ピクセルスナップなど、Web用の画像編集により便利な改良が進んでいる。買い切りで使える最後のバージョンにアップグレードしておくべきだった…。

CS6の後はCreative Cloudとなり、月額制のサブスクリプションになったPhotoshop。プロフェッショナルが業務に使うのならそれほどでもないのかもしれないが、個人用途で考えると「高い」イメージがあったが、Lightroomとセットになった「フォトプラン」なら月額約1,000円程度で最新のPhotoshopが使える。CS5がWindows10で動かなくなったらフォトプランを利用しようか。