PhotoshopとIllustratorとSketchが最近のウェブデザインツールとして上がってますね。
お客様のニーズに合わせて、いつもはデザインしないアプリをベースアプリとして
デザインを要求されることもあるかとおもいます。
今回は、「だいたい同じことができる、でも得意不得意はあるかも」といったことをアプリをまたいで考えてみました。

マスクしたいレイヤーの上に置くか、下に置くかだけ気をつければOKです。
PsとAiでは他のマスク方法もありますが、「クリッピングマスク」が全部に共通する形に近いかなと思います。



写真やイラストなどのビットマップの画像の扱いです。
Aiは最近高解像度に対して万能なイメージがありますが、画像の解像度が小さければボケますし万能ではないです。
元画像がピクセルベースなので、しょうがないですねー。
基本大きな画像をそのまま保持して置いていくイメージでやると、すべてのアプリでうまくいくとおもいます。（ファイルサイズ以外は。）



コテコテなpixcelなのがPs。
コテコテにベクターなのがAi。
Sketchはその間。みたいな感覚でいるといいかもしれません。



すべてのアプリでできるだけ「パス」を扱うオブジェクトで配置していくことで、同じように高解像度な画像を書き出すことができるように思います。
スムーズツールがあったり、パスに関して一番高機能なのはAiですね。



一番ラクなのはSketch。
Psは命名規則を覚えてしまえばSketchより楽になる。
イラレは最初の設定をうまくやっておけばなんとか書き出せるイメージ。



無理やりページをすべて入れ込むこともできるのですが
Sketch以外は各ページ別ファイルでやったほうが管理が楽です。
Sketchも10P以上になると落ちやすくなったりするみたいなので、臨機応変にやりましょう。



Photoshop CC 2015ではアートボード機能も入りましたし
すべてのアプリでアートボードが使えますので各デバイスサイズのデータを１つのファイルにしておくことができるとおもいます。



すべてのアプリで普通のサイトは作れるのですが
あえて向いている方向を示してみました。


たとえば、イラレで作るとのびのび、クリエイティブなものをつくりやすかったり、「線」に特徴を出したいときにはとてもよかったりします。
Sketchでやると、往年のFwのようにファイル管理ができたり
レスポンシブのページのバージョンを作るときにすごく楽だったり
フォトショップでやると、きちんと、きちんと、デザインパーツを作りこめたりと
各アプリの使い勝手によって私はデザイン方法を変えていたり
もちろんフォトショップベースでやって、ロゴやアイコンはイラレで作って持ってきたりクロスして使うこともあって。
あ、Fwのデータがのこっていてそのまま更新しているパーツもあります。

今の需要的にはPs納品を求められることが多いです。

クライアントさんに要求されたときに、どのアプリでも使えるようにしておけば、ビジネスの幅も広がるかもですね。
ぜひ、「これ」と決めつけず、いろいろやってみてはいかがでしょうか。

関連記事

• PhotoshopとIllustratorとSketchを上手に使っていこう
• ウェブデザインの文章レイアウト組みパターンを展開してみる
• 愛され♡「メリハリ」ウェブデザインを作る！注目を集めたいときのデザインテクニック
• photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。
• レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう