FireworksからPhotoshopに乗り換えると戸惑う基本操作をいくつかまとめます。

2014年07月03日
follow us in feedly

ホームページのデザイン制作ソフトをFireworksからPhotoshopに完全移行し、Fireworksを起動することも無くなりましたが、未だに直感的な操作ができずに戸惑うことがあります。

今回はFireworksの操作が染み付いていると「どうすればいいんだ?」と止まってしまう基本操作について、いくつかまとめてみます。

正方形のシェイプなど配置した要素のサイズを変更する。

Fireworksの場合は要素をクリックすればプロパティインスペクタにサイズが表示されるので、数字を変更して簡単にサイズを変えることができますが、Photoshopの場合は要素をクリックしてもサイズが表示されません。表示させるためにWindowsの場合は「Ctrl + T」、Macの場合は「command + T」で自由変形モードにする必要があります。

photoshop1

自由変形モードにしてオプションバーを見ると幅(w)と高さ(h)が表示されています。しかし、数値がデフォルトでは%なんですね。やっぱりpixelじゃないと扱いにくいです。pixelに変更するには%表示の数値上で右クリックするとpixelを含んだ好きな単位に変更できます。

photoshop2

テキストボックスのサイズを後から変えても中の文字が変形しないようにする

Fireworksではテキストエリアのサイズを後から伸ばしたり縮めたり変更しても、中の文字は自動で折り返しなど最適化されます。しかし、Photoshopではテキストエリアのサイズを広げると中の文字が伸びます。

photoshop3

これを回避するには、文字を入力する際はクリック&ドラッグで適当な大きさのテキストボックスを作ってから行ってください。クリックして文字入力を行った場合でも、後から変更できます。

対象のテキストレイヤーを選択して右クリックすると「段落テキストに変換」とあります。これを選択するとクリック&ドラッグでテキストボックスを作った状態になります。

photoshop4

テキストボックスのサイズを変える場合はテキストレイヤーの「T」をダブルクリックするか、文字ツールで任意の文字をクリックした状態で行ってください。

別ファイルのレイヤーをコピーして使う

Photoshopは別ファイルのレイヤーをコピー&ペーストできません。別ファイルのレイヤーをコピーして使いたいときは、コピー元のレイヤー(グループでもOK!)を選択して、「レイヤー」→「レイヤーを複製(グループを複製)」で保存先のドキュメントでコピー先のファイルを選択すればOKです。

photoshop5
photoshop6

カンバスやキーオブジェクトに整列させる

illustratorの「アートボードに整列」と同じようにカンバスサイズを基準に整列させたい場合には、移動ツールを選択した状態で整列させたいレイヤーをクリックします。その後、Windowsの場合は「Ctrl + A」、Macの場合は「command + A」でカンバス全体を選択状態にするとオプションバーの整列ボタンが使えるようになります。

photoshop7

整列後にはカンバス全体が選択範囲状態になっていますので、Windowsの場合は「Ctrl+D」、Macの場合は「command+D」で解除するのを忘れないようにしてください。

キーオブジェクトに整列させるのも、カンバスに整列させる方法の応用で可能です。

レイヤーのレイヤーサムネイルをWindowsの場合はCtrl、Macの場合はcommandを押しながらクリックすると、そのレイヤーが選択範囲になります。この選択範囲状態のレイヤーをキーオブジェクトにして、整列させたいレイヤーを選択すると、オプションバーの整列ボタンが使えるようになります。

photoshop8

いくつか知らないと戸惑うPhotoshopの基本操作をまとめました。他にも戸惑う点はありますが、都度クリアしていけばPhotoshopの方が便利な点が多々あります。

どうしても不便だということがあった場合は便利なJSXファイルを使用してみてください。JSXファイルについては下記の記事がとても分かりやすくまとまっています。

PhotoshopでのWeb制作効率を向上させる「JSX」とは

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ