これからPhotoshopに乗り換えるFireworksユーザーへ。tipsBeartipsBearwebデザイン等のweb制作メモRSSContactAboutこれからPhotoshopに乗り換えるFireworksユーザーへ。2016.7.5DesignFireworks,Photoshop2013年5月、Fireworks開発終了ニュースを受け、多くのFireworksユーザーたちがAdobe許すまじと誓ったあの事件から早いものでもうすぐ1年経とうとしています。私は今でもFireworksが大好きですし未だによく使っていますが、最近ではPhotoshopでデザインすることが多くなってきました。PhotoshopはCCになってからだいぶ使いやすくなり、いい感じです。Fireworksユーザーからすると、Photoshopでデザインする上で不便だなーと思った点がいくつかあったので、今更ですがまとめてみました。ものすごーく地味なことばっかりですが、FireworksからPhotoshopに移行する方ならば一度は困るんじゃないかと思うことなので、参考になれば幸いです。追記CSSHatで表示して見るを今更追記しました。他のPSD等からコピペして持ってきた要素がカンバス外の時にうまく移動できない環境設定の定規でピクセル指定してるのに小数点が出るの2項目を追加しました。身内Ps勉強会で出た話もろもろです。多くの方から情報を頂きましたので、ところどころで追記しました。地味すぎて探しづらい情報だったので大変助かりました。地味にここが好きだったよFireworks地味にここが困るよFireworksまずは初期設定からFireworksはショートカットから環境までなにもしなくてもWeb用に最適化してくれていますが、Photoshopはそういうわけにもいきません。諸々初期設定をしてから取り組む必要があります。面倒くさがり屋さんはこの時点で既に面倒くさいと思って放り投げたくなりますが、1回設定すればなんとかなるので我慢しましょう。設定周りのことはたくさんの方が記事にしてくれていますので、ここでは割合します。下記の記事がとても参考になりますのでこちらを一読してみてください。矩形ツール・スマートオブジェクト等がコピーできない同じpsd内であればAlt+ドラッグでオブジェクトの複製が出来ますが、別ファイルにコピーさせたい場合、⌘command+Cではコピー出来ません。いうことかというと、No1.psdの矩形ツール等をNo2.psdに移したい状態の時、通常の方法ではコピーが出来ないのです。いう時は以下の手順を踏みます。面倒ですが、1→2→3の手順で別のpsdにもコピーすることが出来ます。⌘+Cでは出来ませんのであしからず他のPSD等からコピペして持ってきた要素がカンバス外の時、要素を移動できない他所のデータ(PSDとかAiとか)コピペして持ってきた時、カンバスの外に配置されてしまうことってよくあると思います。カンバス外の要素は、移動ツールで移動しようと思っても要素を移動できません。今までショートカットの⌘command+Shift+↑でちまちま移動するか、属性パネルの座標で調整するかの2択で地味に面倒で嫌だったのですが、もっと良いやり方を教わったのでご紹介。カンバス外の要素(移動したいもの)を移動ツールで選択しておきます。その後、選択ツールを選択し、要素を呼びたい位置を適当に囲みます。選択ツールから移動ツールに切り替え、整列のいずれか(水平方向中央揃え等)を押すと、一瞬で目的の位置まで飛んでくれます。文章で見るとなんだかややこしいですが、実際やってみるとすっごく簡単です環境設定の定規でピクセル指定してるのに小数点が出る環境設定で全部ピクセル指定したにも関わらず、定規を引くと小数点が出てしまいますこれはPhotoshopの仕様なので.xが表示されてしまうのは諦めて、1pixel以下を計測しないように設定します。[表示]→スナップにチェックを入れ、定規を引く時にShiftを押しながらドラッグすると、定規のメモリどおりピクセル単位で引いてくれるようになります。テキストボックスのサイズを変えたいのに、縦横の比率が変わってしまうFireworksだとデフォルトで自由自在になりますが、Photoshopはワンクッション必要になります一度普通にテキストを打ってしまうと、もう二度とテキストボックスの長さを変更できませんので、最初が肝心です。途中から変更する方法を追記しました。ちなみにこの、普通に入力するテキストモードのことを「ポイントテキスト」、下記のクリック&ドラッグして作るテキストボックスのことを「段落テキスト」と呼びます。ボックスサイズを変更する必要がありそうな場合(段落テキスト)は、テキストツールを選択した状態で、クリック&ドラッグして四角の枠を作っておきます。テキストツールを選択→ドラッグしてボックスを作ります。サイズは後からでも自由に変えられるので適当でOKまた、テキストモードを途中からポイントテキスト⇔段落テキストに変更したい場合は、以下の手順で変更します。変換したい文字のレイヤーを選択したあと、カンバス上で右クリックで「ポイント/段落テキストに変換」テキストを打ち終わったら⌘command+returnもしくはescでテキストモードを終わらせる癖を付けておくと楽になります。Fireworksの癖でエリア外をクリックしても、Photoshopはずーっとテキスト入力モードのままなので注意。テキスト入力とはズットモだよ。要素の変形サイズをpx単位で指定したい要素の拡大縮小をする際の自由変形モードのショートカットはFireworksと同じで、要素を選択した状態で⌘command+Tを押します。手動ではなく数字を打ち込んでサイズを変更したいなと思った場合(10pxぐらい変えたいなーと思った時とか)、パネル上で操作しますが、よく見ると縦横のサイズのところが%になっていますので、ここを変更します。「%」表記になっている入力ボックスを右クリックし、「pixel」を選択するとピクセル指定ができるようになりますまた、わざわざ右クリックして単位変更しなくても、ボックスの中に単位つきで入力する(100pxにしたかったら「px」つきで入力する)と、その単位に変更されつつサイズ変更されます。W:Hのボックス内に単位つきで入力してreturnするときちんと反映されるそもそもこの要素、サイズの横幅いくつだったっけ?Fireworksだと、要素をクリックすればプロパティ画面が勝手に出てありとあらゆる情報を親切に教えてくれますが、Photoshopは自分で指示しろや派なので自分で指示を出す必要があります。[ウィンドウ]→[情報]で情報パネルをあらかじめ出しておき、知りたい要素をクリックして横幅を見てみましょう。Fireworksはプロパティ画面に、Photoshopは情報パネルにクリックした要素の縦横値が出ますなお、Photoshopの場合、シェイプや矩形だとクリックしても情報サイズは分かりません...。そのため、特に伸縮するつもりがなくても⌘command+Tで自由変形モードにして縦横サイズを調べていますが、何か効率がいい方法があったら教えてください...。他の方法も教えて頂きましたので、下記にまとめました。ありますね...!パスコンポーネント選択ツールもしくはパス選択ツールで調べるスタンダートなやり方かつ一番よくやるやつです。黒い矢印のツールにし、オブジェクトをクリックして[属性]パネルで確認。黒矢印は、ショートカットキーAで切り替わるので覚えておくとすごく幸せになれます。範囲選択で調べる調べたいオブジェクトのレイヤーを⌘command+クリックで選択範囲状態にして、[情報]パネルで確認。CSSHatで表示して見るCSSHatとは、PhotoshopのレイヤースタイルをCSS出力してくれるプラグインのことです。有料プラグインになってしまいますが、一気に情報が見れるのでこのプラグインがあるのならばこれで見るのが一番お手軽な気がします。CSSHatで要素を触ると、縦幅も横幅もワンクリックで一目瞭然ですねJSXを使ってレイヤーに表示させるこのJSXを導入すると、レイヤーを見ただけでサイズが分かります。一回編集してしまうと正確な値にならないで注意。導入方法と詳細は下記の記事にて。Stocker.jp「属性をペースト」がしたいんだけど...Photoshopには属性をペーストはありませんので諦めましょう。あれ超絶便利なのに...!代わりといってはなんですが、レイヤーにかけたフィルタのコピーをすることは出来ます。レイヤー効果をコピーしたいレイヤーを右クリック→[レイヤースタイルのコピー]で、あとはペーストしたいレイヤーを選択し、右クリックで[レイヤースタイルのペースト]で完了です。該当レイヤーでも該当フィルタの項目でもOK、右クリックでレイヤースタイルのコピーをしますレイヤーフィルターのコピーはなにかと多用する機能ですので、下記の記事のように何かしらショートカットを設定しておくとぐっと便利になります。地味にここが好きだったよFireworksFireworksは、ツールパレット周りや初期のショートカットなど、何もしなくても使いやすいところ(特に⌘1、2の拡大のわかりやすさとか。細かいですが)が好きでした。ショートカットなんて自分で設定しろよって話ですが、面倒くさがりはそれさえ面倒くさいので、直感的に操作できるようにしてくれているFireworksは素敵です。あと、Fireworksはツールを使う際に結構空気を読んでくれるところがあって、たとえば下記のイメージのように選択ツールを選んでいても、テキストボックスをダブルクリックすると、自動的にテキスト入力モードに切り替えてくれます。FireworksやIllustratorはダブルクリックで自動的にテキスト入力モードに変えてくれるでもPhotoshopはショートカットキーを使わないと自動では切り変わってくれない...といった、慣れてしまえばどうということはないことではありますが、もうちょっと融通きいたらなぁと(というか、Illustratorも自然にやってくれていることなのに、何故にPhotoshopはやってくれないのか...何か深い理由があるのだろうか...)Photoshopはテキストをダブルクリックするのではなく、レイヤーパネルの[T]のアイコンをクリックしてテキスト入力モードに切り替わります。ショートカット以外だとこのやり方がスタンダートなようです。テキストが一括で選択された状態になるので、テキストをまるっと変更する時などに使うと便利こんな風に書いているものの、使い続けて2年もすればすっかり慣れて、今やFireworksの方が扱いづらくなってしまいました。使い勝手の良し悪しはあるものの、結局はツールなんて慣れの問題なんだとしみじみ思いました...。地味にここが困るよFireworksCCになってから、Illustrator⇔Fireworksのパスの行き来ができなくなってすさまじく不便になりました。Illustratorで描いたパスをコピーしFireworksに貼り付けようとするとエラーになります。CCになる前は出来たのに...。改善方法は、Illustratorのデータを保存する時にバージョンをCS6等のCC以前のVerに設定して保存し、そのデータをFireworksで直接開けばOKです。いちいち保存してから再度開くとかいちいち面倒なため、これが嫌すぎてCCになってからFireworksの使用頻度が激変しました...なお、この問題は幾度のバージョンアップでも改善されず、おそらくこれからも解決されなそうな雰囲気です。AdobeからすればFireworksは完全に終わったツールですね。Capitan‎からはFireworksが起動できなくなるという報告が多数あり、やっぱりAdobeからすればFireworksは以下略。Thanks!twitter・ブコメでコメントくださった方々。買ってよかったtipsBearHomeDesignこれからPhotoshopに乗り換えるFireworksユーザーへ。