プラカンブログSTAFF BLOG

2017.01.30

WEBデザインをIllustratorからPhotoshopに切り替えた時、気になったポイント

Photoshop

初めまして、10月からプラカンの一員になりました、デザイナーのKIKUCHIです!
文章を書くのは苦手ですが精一杯頑張ります!

 

世の中のWEBデザイナーさんの制作環境が気になる今日このごろ。
前職でもWEBデザイナーとして勤めており、その時は「Mac + Illustrator」で制作していました。しかし、プラカンでは「Windows + Photoshop」となり(郷に入っては郷に従え、ですね…)初めは凄く戸惑いました。

そこで、WEBデザインをPhotoshopで制作する上で気になった点や便利だなぁと思った点を備忘録として記事にしたいと思います。

Illustratorのように直感的に操作したい

まずPhotoshopを使用する上で一番使いにくいなぁと思っていた点が、レイヤーパネルから対象のオブジェクトを探してレイヤーを選択してからでないと、通常では移動が出来ないこと。
Illustratorのようにクリックして移動して拡大して~といった操作が瞬時に出来ないことが耐えられない!どうすればいいんだ!

解決法~~

移動ツールを選択した状態でツールバーにある「自動選択」にチェックを入れ、選択したいオブジェクトをクリック!移動!キャー動いた!
Photoshop

右側にあるプルダウンでは「レイヤー」か「グループ」を選択でき、
レイヤーを選択した場合は、一つ一つのレイヤーを選択でき、
グループを選択した場合は、グループ化されたフォルダを選択できます。

バウンディングボックスに表示」にチェックを入れると、どのオブジェクトが選択されたのかが分かりやすくていいですね!
Photoshop

その他の方法

「自動選択」にチェックが入ってない場合でも、Ctlr + 左クリックで対象のオブジェクトを選択することも出来ます。とてもスマート。

Illustratorのようにアートボードを活用したい

Photoshop

レスポンシブデザインを制作する上でPhotoshopにはアートボードがないな~と落ち込んでいたら、Photoshop CC 2015から使えるようになっていたのですね!

アートボードとは

アートボードは、さまざまなデバイスやスクリーン用にデザインをレイアウトできる無限のキャンバスが用意され、デザインプロセスを効率的に実行できます。

出典:https://helpx.adobe.com/jp/photoshop/using/artboards.html

パソコン用の画面、タブレット用の画面、スマホ用の画面…様々なデバイス向けのレイアウトをより効率的に制作するためにアートボードを活用しましょう!ということですね。ふんふん。

たくさんあるレイヤーフォルダを一気に閉じたい

Illustratorで制作していた時は気にならなかったことですが、Photoshopではレイヤーが増えていく過程でグループ化していると、グループ内のオブジェクトを選択した時にフォルダが開いた状態になります。フォルダが開いた状態でレイヤーパネルが見にくい!これを一つずつ閉じるの面倒くさい!なんてことが多々あると思います。私はあります。

解決法~~

最上位の階層のフォルダの「>」を、「Ctrl + Alt」を押しながらクリック!
これだけで全てのフォルダを閉じることが出来ます(逆パターンで全てを開くことも出来る)。
中のフォルダもあら不思議!閉じてます。
デザインをPSDデータごと納品したり、コーディング担当の方にパスする時は、レイヤーが整理整頓されてる方が気分がいいと思うタイプなのでこれは凄く便利です。

レスポンシブデザインを実機で確認したい

Illustratorで作成していた時は、スマホ用のレイアウトを作成したら画像として書き出して、メールで画像を送って、スマホでメール(画像)を確認して、という流れで実機での見栄えを確認していました。面倒くさいですね。

そんな面倒くさい思いはPhotoshop CC 2015から搭載されたデバイスプレビュー機能で解決出来ます!現時点でこれはIllustratorにない機能なのでとても感動しました。

使い方については、下記参考ページがとても分かりやすく書いてあるのでそちらをご確認ください。THE 丸投げ!
スマホデザインが捗る!Photoshop CC 2015では今開いているPSDがリアルタイムにiPhoneで確認できるぞ!

最後に

WEBデザインを作成する際にIllustratorから入った自分としては、Photoshopは使いにくいと思う存在でしたが、Adobe様が少しずつ便利機能を増やしてくださるおかげで使いやすいかも…!と思い始めています。
ただ、まだここはIllustratorの方が使いやすいわ~と思う部分もあるので、少しずつ慣れていくしかないようです。。目指せPhotoshopマスター!

+dc(菊)

この記事は、KIKUCHI が書きました。