photoshopのアートボード機能を使えば、
sketchみたいにカンプを複数並べてデザインができます。
レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。

※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。

[ファイル]→[新規...]で新規ファイル作成画面を開き
「ドキュメントの種類」から、「アートボード」を選択します。
さらに、「アートボードの設定」から、最初に作るアートボードのサイズを設定します。

あとでアートボードのサイズを自由に変更できるので、欲しいサイズがない場合は近いものを選んでおいても大丈夫です。


アートボードツールは、[移動ツール]の中にあります。長押しして、[アートボードツール]を表示し、選択します。


もしくは、アートボードレイヤーを変更することでも、自動でアートボードツールに変わります。


既にあるアートボードのサイズを変えたいときは、アートボードレイヤーを選択して、
幅や、高さを設定します。数値でやりたいときは、パネルで。

＊マウスで高さをぐぐーっと広げたいときは、アートボードレイヤーを選択すると、自由変形ツールのような表示になっているので、下の真ん中の四角を下に下げるだけでOK。

アートボードを選択した状態なら 矢印キー での移動や、shift+矢印キー での移動も可能なので、好きな位置へ移動させることができます。
あまり近くに置き過ぎると、レイヤーが被って選択が面倒になりそうなので、すこし離し気味にしたほうが良い気がします。

新しいアートボードを作りたいときは、[アートボードツール]になっている状態で、アートボードの外のグレーの部分で好きなサイズにドラッグすれば作れます。



アートボードのレイヤーは、グループのような動作をします。
レイヤーパネルで上下を入れ替えることもできます。
アートボード外は表示しないようにしてくれます。

アートボードの中に、ロックがかかっているレイヤーがあると、アートボード移動はできないみたいなので、最初に設定を決めておくほうが効率がよさそうです。
アートボードのレイヤーも、「◯◯.png」等、画像アセットの自動書き出しに対応しています。

また、[ファイル]→[書き出し]→[書き出し形式..]で書き出す際、アートボードごとに書きだしてくれます。その際、アートボード名（アートボードレイヤーに設定している文字列）を、そのまま使うことができるので、提出ルールに合わせて設定しておくこともできます。

もちろん、アートボード内のレイヤーに画像アセット名を指定すれば、パーツ別に書き出せます。


photoshopの新しい書き出し設定と相性が良いので、
私がよく使うのは、バナーのバリエーションを作成するとき、サイズ違いのものを作るとき、faviconを作るとき、レスポンシブなデザインをするときと様々です。
Alt+ドラッグ＆ドロップ で別のアートボードへオブジェクトを移動させることもできるので、複数パターンのカンプ作成〜書き出しが一気にできるのが便利です。


最近ウェブデザインをする際に基準にしている960gsベース、PC（Retinaなので2倍サイズ）+iphone6のテンプレートをシェアしてみます。スマホサイトを分ける際にも使えるし、レスポンシブでもタブレットなどの中間を成り行きにするときにも使えます。
アートボードの動作確認にもどうぞご自由に。
（自作なので、利用する際は自己責任でお願いします。）

960_grid_12_col_retina_artboard.psd のダウンロード

こんな感じで、よく使うファイルサイズはテンプレート化しておくと、さらに作業スピードアップかもです。

ご参考にどうぞ。

関連記事

• PhotoshopとIllustratorとSketchを上手に使っていこう 2015/12/03
• ウェブデザインの文章レイアウト組みパターンを展開してみる 2015/11/15
• 愛され♡「メリハリ」ウェブデザインを作る！注目を集めたいときのデザインテクニック 2015/10/30
• photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。 2015/10/10
• レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう 2015/09/10
• 要素をタイル状に並べる軽量プラグイン「Freetile.js」 2015/08/10
• 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント 2015/08/07