Photoshop Mix/Photoshop FixとAdobe Compを組み合わせてレイアウトカンプを作成する

デスクトップで作業する前のアイデアスケッチ、デザインカンプをモバイルアプリのAdobe Compを使って作成する方法を説明します。

今回はPhotoshop Mix/Photoshop Fixも合わせて使用します。

まず、レイアウトのベースになる新規プロジェクトをAdobe Compで用意します。
PC用ウェブサイトと仮定して、web1280*800を使用します。

ここで使用する素材を公開されているAdobeライブラリー下記URLから自分のAdoobe IDにコピーします。

設定 > グリッドとガイド > 追加の順にタップしてグリッドを追加して、左上のグリッド設定で12列に設定し、余白を20px、上下左右のパディングを40pxとします。

背景に使用する壁をカメラで撮影しておきます。

メインカットとなる写真用にオブジェを手に持ち、カメラで撮影します。

Photoshop Fix（Photoshop Expressなどでも）で読み込んで、手の部分だけモノクロに彩度を低くしておきます。

Photoshop Mixで壁の写真、手の写真を読み込み、手とオブジェだけ切り取ります。

壁のレイヤーの上にカラーレイヤーを追加して色を設定します。

SNSのアイコンを使用するには各社それぞれに利用規約がありますので、必ず確認しておくようにしましょう。

ダウンロード後zip解凍する必要がありますので、解凍アプリがない場合はこちらを使ってください。

それぞれのアイコンのデータでは色にばらつきがある場合、サイトのデザインに合わせて変更したいところです。
SNSアイコンには上のブランドページなどにもあるように使用規約があり、無制限に変更することはできませんが、規約の範囲内であれば調整することができます。

今回はtwitterのアイコンは透明（背景地が透ける状態）、周囲が白色であることを活かして、背景色に黒色を用いて鳥のマークが黒い状態のアイコンを作成して使用することでInstagramに合わせます。

モバイルで作業する場合は、Photoshop Mixを使うのが便利です。

検索アイコンはデザイン上グレーですが、これはAdobe Comp上で不透明度の調整で行いますので、Photoshop Mixでの調整は不要です。

用意した素材をAdobe Compに読み込みます。

先ほど用意したガイドに沿って組んでいくことできれいなグリッドレイアウトを組むことができます。

タイトル、ナビゲーションメニュー、フッターのテキストも配置したら完成です。

投稿者: bunkamedia