Creative Cloud Mobile Apps Tutorials

モバイルでカンプを作成

印刷、Web、モバイル用のレイアウトがひらめいたら、iPadやiPhoneでAdobe Comp CCを開き、その場でカタチにしましょう。Compがあれば外出先でデザインカンプを作成し、デスクトップで仕上げることができます。

ひらめきがその場でレイアウトになるComp CC

1. 形式を選択する

Comp CCを開き、「+」をタップして新規プロジェクトを作成し、Web、モバイルまたは印刷プロジェクトに応じた形式を選択します。このチュートリアルでは、「iPad(縦)」を選択します。

このチュートリアルに従ってレイアウトを実際に作成する場合は、Pigeon Scooter Libraryのアセットをご利用ください。「Creative Cloudへ保存」をクリックして、ご自分のアカウントにライブラリをコピーすれば、Comp CCから直接アセットにアクセスできます。

注意:アセットをコピーするには、自分のAdobe IDでCreative Cloudアカウントにログインする必要があります。アカウントをお持ちでない場合は、Adobe IDを取得してください。

2. ガイドとマージンを設定する

設定/グリッドとガイド/追加の順にタップします。

画面右下にあるグリッドレイヤーの「+」アイコンをタップして、レイアウトに列を追加します。

ガイド(T定規)アイコンをタップし、「水平ガイドを追加」を選択します。画面上部に新しいガイドが表示されます。新しいガイドをページの上または下にドラッグして配置します。このガイドは「x」をタップすれば消去できます。

「完了」をタップして、レイアウトに戻ります。

3. レイアウトを描画する

四角形を描き、1つの角に円を描いて、角丸の長方形を作成します。画像を挿入する箇所にXを描きます。描画ジェスチャーに従って、描画内容がオブジェクトに変換されます。

テキスト行を作成するには、線とドット(.)を描きます。テキスト行を増やすには、+を描きます。テキストブロックを作成するには、複数の線を引いて、ドット(.)を描きます。

ヒント:設定アイコン/描画ジェスチャーのヘルプをタップすると、描画オブジェクトについて参照できます。

4. 複数のオブジェクトを選択し、揃える  

画像のプレースホルダーをタップし、画面下部の詳細アイコンをタップして、複数を選択をタップします。残りの2つの画像プレースホルダーをタップして、選択に加え、「完了」をクリックします。

画面下部の整列アイコンをタップして、サイズを合わせる/幅と高さを一致アイコンの順にタップします。

5. テキストを編集する

ページ上部のテキストボックスをダブルタップして、「INTRODUCING PIGEON」と入力します。キーボードを閉じます。テキストオブジェクトは選択されたままのはずですが、画面をタップしてキーボードを終了した場合には、テキストボックスをタップして再度選択します。

画面下部のテキスト形式アイコンをタップして、文字を中央揃えにします。「フォント」をタップして、Typekitのフォント一覧から選択します。

カラーアイコンをタップし、文字色を白に変更します。レイアウトの一番上にある長方形を選択して、色をオレンジに変更します。

ヒント:フォントメニューの「追加」をタップすれば、1000種類以上のTypekitフォントが利用できます。Creative Cloudメンバーシップに含まれるサービスです。デスクトップでCreative Cloudにログインすると、フォントがデスクトップに同期され、どちらでも利用できます。

6. テキストスタイルをコピーする

設定したテキストスタイルは、レイアウト上の別のテキストブロックにコピーできます。ページの一番下にあるテキストブロックを選択します。

スタイルを適用するテキスト上をなぞります。選択したすべてのテキストにテキストスタイルが適用されます。

ヒント:指2本でスワイプすると取り消すことができ、指3本で左または右にドラッグすると、そのドキュメントでの操作履歴をさかのぼる、または先に進めることができます。

7. Creative Cloudライブラリからグラフィックを追加する

画像プレースホルダーをタップし、画面下部のグラフィックアイコンをタップします。

Creative Cloudライブラリにあるフル解像度の画像を使用するには、「マイライブラリ」から「Pigeon Assets」ライブラリを選択します。スクーターに乗った男性の画像をタップし、プレースホルダーのフレームに入れます。この操作を繰り返して、画像を追加します。

ベクターグラフィックも追加できます。画面の上部にあるグラフィックアイコンをタップします。Pigeon Assetsライブラリから、Pigeonロゴ、Playボタン、白いベクターアイコンなどを追加します。

8. Photoshop Fixで画像を編集する 

Adobe CreativeSyncにより、Comp CCはPhotoshop MixPhotoshop Fixなど、他のモバイルアプリとシームレスに連携しているため、レタッチや合成した画像は、Compのレイアウトでも即座に更新されます。

キックスケーターに乗った人の写真をタップします。次に、「アプリ間で編集」アイコンをタップします。「リンク解除」を選択して、ライブラリの元のグラフィックを置き換えずにグラフィックを編集します。「Photoshop Fix で修復」を選択します。

スポット修復ツールを使用して、写真の上部から小さなキズを取り除きます。最後に、画面の一番上にある「タッチして保存し Adobe Comp に戻る」をタップします。

9. オブジェクトをグループ化する

レイアウトの下部にある複数のテキストブロック上で、らせん形(渦巻き形)を描き、大きな範囲を選択します。

すべてのテキストブロックが選択されたら、グループアイコンをタップします。複数のテキストブロックを囲む1つの選択範囲が、グループを示します。グループ化されたすべてのテキストを移動し、ページの中央に配置します。

オブジェクトのグループ化を解除するには、グループ解除アイコンをタップします。

10. デスクトップに送る

レイアウトはその種類に応じて様々なデスクトップアプリケーションに送信できます。

  • Illustratorに送る
  • Photoshopに送信する
  • InDesignに送る
  • Museに送る

Behanceで制作中のレイアウトを共有することもできます。

 

これですべての作業が終わりました。 チュートリアルをさらに役立つものにするために、アンケートにご協力ください。

 

01/14/2017

Contributor: Ryan Bubnis

このページは役に立ちましたか。
はい
いいえ