Blog2017.05.01miuraFireworks使いもそろそろPhotoshopでのWebデザインに手を出してみよう!Web制作デザインPhotoshopFireworksAdobeシェアTweet皆さんこんにちは。昨日立ち寄ったご飯屋さんで「鳥取砂丘で作られた赤ワイン」なるものを頂きました。「鳥取砂丘でぶどうが育つんですか!?」とお店の人に尋ねるとどうやら砂丘の真ん中という訳ではなく、限りなく砂丘に近い場所で作られたぶどう、ということだそうです。いえ土壌としても砂地になっていて少し特殊な環境らしく、それがワイン作りに適している。肝心の味はというと、深みがあってお肉との相性が良いように感じられました。(月並みな感想)さて本題です。Fireworksが開発終了を宣言した際(2013年の5月なのでもう4年も前ですか...)にPhotoshopに乗り換える計画を立てていたのですが、CS6当時のPhotoshopだとWeb制作で使うには何かと不便だったり様々な操作が遠回りに感じる工程が多く断念していました。2017になって改めてPhotoshopでのWebデザインを試してみたところ、使い勝手がかなり向上していて感心してしまいました。いうことで普段Fireworksを使用している筆者がPhotoshopでもWebデザインができるなと感じたポイントについて実際の操作の仕方を絡めてお話していきたいと思います。目次まずPhotoshopの良い部分FireworksからPhotoshopに乗り換えるなら設定が大事!選択関連FireworksでできるアレってPhotoshopでできないの?ページ機能を使いたい入力したテキストの範囲を拡大縮小したい選択している図形の縦横サイズを調べる選択しているオブジェクトをピクセルや%でサイズ変更まずPhotoshopの良い部分パターンやブラシをはじめとしてFireworksよりも機能が豊富なので自由度が高い写真補正に関してはやはりPhotoshopが強い現在も開発が続いているので日々使い勝手が向上している業界のスタンダード(どこかの統計で見ましたがやはりPhotoshopを使っている人が多いようですね)FireworksからPhotoshopに乗り換えるなら設定が大事!選択関連Fireworksはオブジェクトの選択が直感的で使いやすくて気に入っていたのですが、Photoshopでも設定次第でかなり使いやすくなります。「選択ツール」を有効にしましよう。画面上部のパネルに設定項目が表示されます。自動選択こちらをチェックすると、クリックした要素のレイヤーを自動で判断して選択できるようになります。使い勝手にクセがあるのでこちらは好みによってon、off切り替えましょう。選択したレイヤーの四隅にマークが表示されて、今自分が何を選択しているのかがすぐに分かります。レイヤーの境界線」で変更できます。これを有効にするとレイヤーを選択した際にそのレイヤーの境目が表示されるので今選択しているレイヤーの範囲が直感的に判断できます。FireworksでできるアレってPhotoshopでできないの?ページ機能を使いたいアートボード機能Fireworksでいうところのページ機能はないのですが代わりにCCから追加されたアートボード機能を使いましょう。アートボードはひとつのファイルの中で並列的にデザインを作成できる機能です。これを使うことで別々のpsdファイルを開いてそのファイル間を行ったり来たりする必要がなくなるので作業がかなり楽になります。アートボード機能の操作はアートボードツールから行います。アートボードを複製する出来上がったページを基に次のページを作成する際に便利です。アートボードツールの状態にして複製したいアートボードの四隅をクリック。+マークが四方に表示されるので作成したい方向の+マークをクリックするとアートボードが複製できますアートボードのサイズを変更する「カンバスサイズの変更」ではアートボードのサイズ変更はできません。アートボードツールの状態にしてサイズを変更したいアートボードの四隅をクリック。その四隅をドラッグすることでアートボードのサイズを伸縮することができます。入力したテキストの範囲を拡大縮小したいクリックではなく、ドラッグでフォントを入力するとテキストの範囲の拡大縮小ができます。(そうでない場合は文字自体に拡大縮小がかかってしまいます)Fireworksだとオブジェクトの四隅を伸ばすだけでテキストの範囲は変更できますが、それと同じような使い勝手になります。選択している図形の縦横サイズを調べるオブジェクトを選択。拡大縮小がかかる四隅の部分をクリックでオブジェクトを選択状態にする。情報パネルに縦横のサイズが表示されます。選択しているオブジェクトをピクセルや%でサイズ変更オブジェクトを選択した状態で上部のパネルから数値を変更する。%以外(たとえばpx)にしたい場合は数値が入っているボックスの上で右クリックすると表記を変えられます。以上の操作でPhotoshopでのWebデザインはかなり楽になりました。CS6の頃の不自由さに比べるとかなり良くなっていると思います。これから使い勝手はよくなっていくと思うので今Fireworksを使用している人も徐々にPhotoshopに移行してもいい時期なのかもしれませんね。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。