テンプレートの作成

最終更新日: 2024-01-18
  • 作成対象:
  • Experienced
    User

テンプレートを作成するには、に移動します。 ビルド > 基本テンプレート. 「デザイナー」または「開発者」を選択します。このページで、画像とテキストレイヤーを追加できます。また、レイヤーの順序を変更したり、レイヤーのサイズや位置を変更したり、画像やテキストにシャドウ効果と光彩効果を適用することもできます。

関連トピック 基本テンプレート トレーニングビデオ。

メモ

以前のバージョンのAdobe Dynamic Media Classicで作成したテンプレートを編集する場合、「キャンバスレイヤーを追加しますか?」を保存するときにプロンプトが表示されます。 選択 いいえ を使用して、ベースレイヤを追加しないでください。 誤ってを選択した場合 はい、を削除します。 &allowCanvasPrompt および &layer=0 URL 内の修飾子を指定し、 入力 または 戻る.

最初のテンプレートの作成

テンプレートセットを作成する際には、「保存後に公開」オプションがセットおよびセットメンバーに対して次のように影響します。

保存後に公開 保存する前に選択したオプション? 保存後のセットの状態 保存後のセットメンバーの状態
はい 公開 公開
いいえ 非公開 セットメンバーの公開または非公開の状態が維持される。

手動でのアセットの公開手動でのアセットの非公開も参照してください。

既存のテンプレートからテンプレートを作成できます。テンプレートを開き、「 」を選択します。 名前を付けて保存​をクリックし、[ 名前を付けて保存 ] ダイアログボックスに新しい名前を入力します。

最初のテンプレートを作成するには:

  1. 最初のテンプレートを作成するには、次のいずれかの方法を使用します。

    • 最初に 1 つまたは複数のPSDを選択 — 参照パネルで、テンプレートに使用するPSDファイルまたは画像を選択し、に移動します。 ビルド > 基本テンプレート.

    • テンプレート画面から開始する — に移動します。 ビルド > 基本テンプレート. 「デザイナー」または「開発者」を選択します。

  2. [ キャンバスサイズを入力 ] ダイアログボックスで、テンプレートの幅と高さの値を入力します。

  3. アセットライブラリでフォルダを選択して、テンプレートにする PSD ファイルまたは画像をテンプレート画面にドラッグします。

  4. 操作が完了したら、ページ右下付近にある「保存後に公開」が選択済み(初期設定)であることを確認します。

  5. 選択 保存.

  6. テンプレートを保存するフォルダーを選択し、テンプレートの名前を入力して、「 」を選択します。 送信.

    Adobe Dynamic Media Classicは、必要に応じて画像を縮小し、キャンバス(テンプレートを定義する「テンプレート」画面の領域)に合わせます。

テンプレートセットの編集

公開済みセットと非公開のテンプレートセットのどちらを編集する場合でも、 保存後に公開 このオプションは、次の方法でセットおよびセットメンバーに影響を与えます。

セットが既に公開されているか? 保存後に公開 オプションを選択して編集を保存しますか? 保存後のセットの状態 保存後のセットメンバーの状態
はい はい 公開 公開
はい いいえ 公開 既存のセットメンバは、公開済みの状態を保持します。 編集中に追加した新しいセットメンバーの公開または非公開の状態が維持される。
いいえ はい 公開 公開
いいえ いいえ 非公開 既存のセットメンバーおよび編集中に追加した新しいセットメンバーの公開または非公開の状態が維持される。

手動でのアセットの公開手動でのアセットの非公開も参照してください。

テンプレートセットを編集するには:

  1. グリッドビューで、テンプレートセットを参照し、画像の下でを選択します。 編集.
  2. 必要に応じてテンプレートを変更します。
  3. 編集が完了したら、ページ右下付近にある「保存後に公開」が選択済み(初期設定)であることを確認します。
  4. 選択 保存、ストレージフォルダーを選択し、セットの名前を入力して、「 」を選択します。 保存.

テンプレートの削除

テンプレートセットを削除すると、そのセット自体はごみ箱に移されます。ただし、そのセット内のメンバー(「子」)は影響を受けません。代わりに、それぞれの既存の公開済みまたは非公開の状態が保持されます。

手動でのアセットの公開手動でのアセットの非公開も参照してください。

テンプレートを削除するには:

  1. グリッドビュー、リストビューまたは詳細ビューで、1 つ以上のテンプレートを選択します。
  2. グローバルナビゲーションバーで、に移動します。 ファイル > 削除 > 削除.

テンプレート画面について

テンプレート画面には、レイヤーを操作したり、パラメータ化するためのツールがあります。

テンプレート画面の次のツールを使用して、テンプレートを作成できます。

  • パン — レイヤーを選択したり、カンバス上でレイヤーを移動したり、サイズを変更したり、回転したりできます。

  • テキスト — テキストレイヤーを作成します。 カンバス上をドラッグしてテキストレイヤーを作成し、レイヤーにテキストを入力します。詳しくは、 テキストレイヤーの作成.

  • プレビュー — プレビュー画面を開き、テンプレートをズームビューアに表示します。 Web サイトまたはアプリケーション上で、テンプレートがどのように表示されるかを確認できます。

  • パラメータの概要 [ パラメータの概要 ] 画面を開きます。 テンプレート内の各レイヤーの名前と、各レイヤー上のアクティブにしたパラメータの名前が表示されます。

  • テキストエディタ v4.3 およびテキストエディタ v4.2 — 最新で最も機能が充実したテキストエディタ、テキストエディタ v4.3、または以前のテキストエディタ v4.2 を使用することができます。テンプレートを作成する場合、テキストエディタ v4.3 がデフォルトで選択されます。 以前のテンプレートを編集する場合は、テキストエディタ v4.2 が初期設定で選択されます。テキストエディタ v4.3 では、現在、ワードラップをサポートしていません。そのため、ワードラップを使用する古いテンプレートを編集する場合は、テキストエディタ v4.2 を使用して、テンプレートの完全な忠実性を維持します。 古いテンプレートでワードラップが使用されていない場合は、「テキストエディタ v4.3」を選択して、多くの新機能を利用できます。 たとえば、[ 余白を増やす ]、[ 余白を減らす ]、[ すべての大文字でテキストを設定 ]、[ 文字に合わせてコピー ] などです。

    メモ

    Adobe Dynamic Media Classicでは、テキストエディター v4.2 がオプションとして削除される予定なので、可能な限りテキストエディター 4.3 を使用することをお勧めします。 The ワードラップ オプションは、今後のリリースのテキストエディターに組み込まれます。

  • デザイナーと開発者 — 自分の役割に最も適したオプションを選択します。

  • カンバス — テンプレートを定義するための合計使用可能領域をピクセル単位で定義します。 デフォルトのサイズは 300 × 300 ピクセルです。 レイヤーは、カンバス上に配置されます。

  • レイヤーリスト — テンプレート内の画層の名前を表示します。 レイヤーを選択するには、「レイヤー」リストで名前を選択します。「レイヤー」リストには、レイヤーに効果を追加したり、レイヤーを削除したり、レイヤーの順序を変更したり、レイヤーをパラメータ化するためのツールがあります。詳しくは、 レイヤーの操作.

  • 「レイヤーのプロパティ」領域 — レイヤーの背景色、不透明度、サイズ、位置、および背景色、不透明度、カンバスサイズを変更するためのツールを提供します。 また、シャドウ効果と光彩効果を調整することもできます。詳しくは、 レイヤーの操作.

画像レイヤーの作成

  1. アセットライブラリからカンバスに画像をドラッグします。

    画像の ID 名が「レイヤー」リストに表示されます。

    メモ

    必要に応じて、Adobe Dynamic Media Classicでは、画像レイヤーを作成する際に、画像がキャンバスに収まるように画像を縮小します。

テキストレイヤーの作成

  1. を選択します。 テキスト ツールを使用します。

  2. ドラッグして、カンバスまたは画像にテキストボックスを作成します。

  3. 表示されたテキスト画面の「プレビュー」タブで、次のいずれかの操作を行ってテキストを追加します。

    • テキストボックスにテキストを入力します。「テキストフィールドにフィット」を選択してテキストボックスにテキストを合わせます。
    • クリップボードからテキストボックスにテキストをペーストします。
  4. 選択 適用​をクリックし、テキスト画面を閉じます。

テキストの書式設定

テキストレイヤー内のテキストの書式を設定するには、次の手順を実行します。

  1. 「レイヤー」リストで、編集するテキストのテキストボックス名をダブルクリックします。テキストエディタが表示されます。

  2. テキストエディターのテキストボックスで、書式を設定するテキストを選択します。 すべてのテキスト、テキストの一部、または個々の文字を選択できます。

  3. 次のいずれかの書式設定オプションを指定し、「 」を選択します。 適用.

    • フォント - 「フォント」メニューでフォントを選択します。 目的のフォントがメニューに表示されない場合は、Adobe Dynamic Media Classicにアップロードできます。 フォントを参照してください。

    • フォントサイズ — メニューからフォントサイズを選択するか、ボックスに特定のサイズを入力するか、 または 矢印を使用して、サイズを 2 ポイントずつ増減させます。

    • カラー — テキストの色を選択します。

    • 太字, 斜体​または 下線 — テキストを選択し、テキストに適用する書式の種類のアイコンを選択します。

    • オールキャップス, 上付き文字​または 下付き — テキストを選択し、テキストに適用する書式の種類のアイコンを選択します。

    • 整列 — テキストレイヤー内のテキストを左揃え、中央揃え、右揃えにする「整列」ボタンを選択します。

    • トラッキング — 単語間のスペースを調整する数値を入力または選択します。

    • カーニング — 文字間のスペースを調整する数値を入力または選択します。

    • 行間 — 行間のスペースを調整する数値を入力または選択します。

    • ベースラインシフト — 選択した文字を周囲のテキストのベースラインを基準に上下に移動する数値を入力または選択します。 このオプションは、分数を手動で設定したり、インライングラフィックの位置を調整したりする場合に特に便利です。

メモ

選択 取り消し 最後のアクションを元に戻す場合。 選択 やり直し を選択した後で、アクションの取り消しについて考えを変えた場合 取り消し.

段落の書式設定

  1. 「レイヤー」リストで、編集するテキストのテキストボックス名をダブルクリックします。テキストエディタが表示されます。

  2. 書式を設定する段落を選択します。

  3. 次のいずれかの書式設定オプションを指定し、「 」を選択します。 適用.

    • 整列 — 整列の種類(左揃え、中央揃え、右揃え、両端揃え)を指定する場合に選択します。

    • 段落の終わりの位置揃え — 段落の最後の行の位置合わせの種類を指定する場合に選択します。最後の行は左揃え、最後の行は中央揃え、最後の行は右揃えです。

    • 行間 — 段落内のすべての行の間隔を調整する数値を入力または選択します。

    • すべてインデント — テキストのインデント量を増やす場合に選択します。

    • インデントを削除 — テキストのインデント量を減らす場合に選択します。

    • 1 行目をインデント — テキストの最初の行をインデントする量を指定します。

    • 段落前の空白 — 段落の最初のテキスト行の上に表示するスペースの量を指定します。

    • 段落後の空白 — 段落の最後のテキスト行の下に表示するスペースの量を指定します。

    • 垂直方向の位置揃え — テキストボックス内でテキストを垂直に表示する場所(上、中央、下)を選択します。

    • テキストの方向 — テキストを表示する方向(右から左、左から右)を選択します。

テキストレイヤーのプロパティの調整

  1. 基本テンプレート画面で、調整するテキストボックスを選択します。

  2. レイヤーのプロパティパネルで、必要に応じて、次のオプションを選択します。

    • テキストを縮小(テキストエディタ v4.2 のみ) — テキストボックス内に収めるには、「 」を選択してテキストを縮小します。

    • 折り返し(テキストエディター v4.2 のみ) — テキストを折り返すかどうかを指定するには、折り返しオプションを選択します。

    • 折り返し — テキストを折り返して、横に小さすぎるテキストボックスに収めます。

    • ラップなし — テキストボックスが横に小さすぎる場合はテキストを折り返さず、代わりにテキストの一部を切り捨てます。

    • 改行なしラップ — テキストボックスに収まるようにテキストを折り返し、単語を区切りません。

    • 位置 — キャンバス上のテキストボックスの位置を指定します。

    • パディング — 余白を追加するか、レイヤーの長方形を切り抜きます。 「左」、「上」、「下」、「右」に対して、追加または削除するピクセル数を指定します。 切り抜く余白または負の数を追加する場合は、正の数を入力します。

テキストソースコードの表示と編集

テキストエディタの「ソース」タブに表示される情報は、参照用です。ソースコードの編集に精通している場合にのみ、テキストを編集してください。

  1. 「レイヤー」リストで、編集するテキストのテキストボックス名をダブルクリックします。テキストエディタが表示されます。

  2. テキストエディターで、テキストのソースコードを表示するには、 ソース 」タブをクリックします。

  3. 必要に応じて、テキストを確認または編集します。

    プレビュー表示とソース表示を切り替えても、変更は反映されないままです。

  4. 選択 適用 をクリックして編集内容をレンダリングします。

レイヤーの操作

「レイヤー」リストと「レイヤーのプロパティ」領域を使用して、レイヤーを操作します。レイヤー重なり順を変更したり、サイズと位置を変更したり、レイヤーを回転させたり、レイヤーの背景色、前景色、不透明度および描画モードを指定することができます。

また、カンバスのサイズを変更したり、背景色を選択したり、不透明度設定を変更することもできます。

レイヤーの並べ替え

レイヤーの順序を変更すると、特に透明度やオーバープリントが関与している場合に、外観に影響を与える可能性があります。 変更を確定する前に、必ず結果をプレビューしてください。

  1. テンプレート内のレイヤーの順序を変更するには、次の手順のいずれかに従います。

    • 「レイヤー」リストで、レイヤーを選択します。次に、 または リスト内の正しい位置に配置する必要がある回数だけ繰り返します。
    • 「レイヤー」リストで、レイヤーを上または下にドラッグします。

レイヤーとキャンバスのサイズと位置の変更

レイヤーは、カンバスに収まるサイズでなければなりません。レイヤーまたはカンバスのサイズは、手動またはサイズ値を入力して変更することができます。レイヤーの位置は、手動またはオフセット値を入力して変更することができます。また、レイヤーを回転させることもできます。

メモ

Adobe Dynamic Media Classicは、テンプレートと同じサイズの画像プリセットを作成することをお勧めします。 画像プリセットのサイズをテンプレートのサイズと同じにすることで、テンプレートの最終出力サイズとシャープオプションが正しく設定されます。この画像プリセットを作成した後、テンプレートプレビュー画面のプリセットを適用メニューから選択できます。 画面には、画像がサーバから配信されたときにどのように表示されるかが示されます。詳しくは、 画像プリセットの設定.

  • レイヤーのサイズの変更 — レイヤーまたはキャンバスのサイズを変更するには、「レイヤー」リストでレイヤーまたはキャンバスを選択し、次のいずれかの方法を使用します。

  • 手動でサイズを変更する — レイヤーまたはキャンバスの隅を選択してドラッグします。 テキストレイヤーでは、レイヤーの辺をドラッグすることもできます。縦横比(形状)を維持しながらサイズを変更するには、Shift キーを押しながらドラッグします。

  • レイヤーサイズの測定値の入力 - 「レイヤーのプロパティ」領域の「W」(幅)および「H」(高さ)テキストボックスに、ピクセル値を入力します。

レイヤーのサイズを変更できるとともに、パディングすることもできます。パディングするには、「レイヤーのプロパティ」領域の「左」、「右」、「上」、「下」ボックスにパディング値を入力します。パディングにより、ベースレイヤーの周囲からオフセットさせるためのマージンが現在のレイヤーに追加されます。パディングは、ドロップシャドウや光彩(外側)効果を追加し、これらの効果を目立たせたい場合に便利です。パディングにより、レイヤーのサイズが増加し、拡張されたパディング領域に背景色が表示されます。ベースレイヤーは、レイヤーの新しいサイズを基準に自動的に再配置されます。例えば、現在のレイヤーがベースレイヤーの中央にある場合、レイヤーの左側を広げると、レイヤーはベースレイヤーの右方向へ移動します。

  • 画層の位置の変更 — キャンバス上のレイヤーの位置を変更するには、「レイヤー」リストでレイヤーの名前を選択し、次のいずれかの方法を使用します。

  • 手動で位置を変更 — レイヤ境界の上ではなく、近くにポインタを移動し、4 方向の矢印カーソルが表示されたら、を選択してドラッグを開始します。

  • 位置オフセットの測定値を入力しています - 「X」および「Y」テキストボックスに、X および Y のオフセット値を入力します。 これらの値は、アンカーポイントの x および y オフセット(ピクセル単位)を表します。

  • レイヤーの回転 - 「回転」(Rotate) ボックスには、画層が回転した角度が表示されます。 レイヤーを回転させるには、「レイヤー」リストでレイヤーの名前を選択して、次のいずれかの手順に従います。

  • 手動での回転 — 画層のコーナーの上ではなく、近くにカーソルを移動します。 カーソルが回転カーソルに変わったら、レイヤーの隅をドラッグします。15°単位で回転させるには、Shift キーを押しながらドラッグします。

  • 度数測定の入力 — 画層を回転する角度を入力します。 正の角度値を指定すると時計回りに回転します。反時計回りに回転させるには、負の値を指定します。

レイヤーまたはレイヤー効果を非表示にする:

レイヤー名またはレイヤー効果名の横にある目のアイコンを選択して、レイヤーまたはレイヤー効果を非表示にすることができます。 非表示になったレイヤーは、プレビューまたは出力で表示されません。レイヤー情報は URL から削除されません。代わりに、 hide=1 が URL に追加され、このレイヤーは表示から非表示になっていることに注意してください。 以下に例を挙げます。

layer=5&src=is{PortalCo/title}&pos=274,192&effect=-1&.effect=Drop Shadow&blendmode

layer=5&src=is{PortalCo/title}&pos=274,192&hide=1&effect=-1&.effect=Drop Shadow&blendmode

背景色、不透明度、描画モードを指定します。

レイヤーまたはカンバスの背景色、不透明度、および描画モードを選択するには、レイヤーまたはカンバスを選択して、次のいずれかの手順に従います。

  • 前景色 — 選択 前景色 カラースウォッチを選択して、影や光彩のカラーを変更します。 また、ボックスにカラー値パラメータを入力することもできます。背景色は、透明化の設定が有効なレイヤーにのみ適用されます。例えば、値札の部分的に透明なレイヤーや、テキストフィールドの背景に適用されます。透明化の設定がオンになっている PSD、TIFF または PNG 画像で構成されるレイヤーは、背景を透明にすることができます。

  • 背景色 — 選択 背景色 をクリックし、カラースウォッチを選択して、パディングされた領域のカラーを変更します。

  • 不透明度 — 不透明度スライダをドラッグして、レイヤーを半透明にし、基になる画像の一部が透けて見えるようにします。 100 %の設定は不透明で、0 は透明です。

  • 描画モード - Photoshopで使用可能なブレンドモードの 1 つをシミュレートするには、オプションを選択します。 標準、ディザ合成、明るく、暗く、乗算、スクリーンのいずれかのオプションを選択します。これらのオプションは、カンバスではなく、レイヤーで利用できます。

レイヤーに対するシャドウ効果と光彩効果の使用

レイヤーにシャドウまたは光彩を適用することができます。シャドウまたは光彩は、レイヤーの周囲に適用され、内側または外側に広がります。どちらに広がるかは、選択したシャドウまたは光彩オプションによって異なります。テンプレートがシャドウ効果と光彩効果を持つPSDファイルで作成された場合、Adobe Dynamic Media Classicでこれらの効果を調整できます。

シャドウ効果または光彩効果を適用した後に、テンプレート画面の「レイヤーのプロパティ」領域でサイズ、色、不透明度および位置を調整できます。

レイヤーに影や光彩効果を適用する

  1. 「レイヤー」リストで、レイヤーを選択します。

  2. 効果を追加メニューを選択して、オプションを選択します。

    • ドロップシャドウ — レイヤーの右下にシャドウを適用します。

    • シャドウ(内側) — レイヤーのすべてのエッジの内側にシャドウ効果を適用します。

    • 光彩(外側) — レイヤーのすべてのエッジの周りにグロー効果を適用します。

    • 光彩(内側) — レイヤーのすべてのエッジの内側にグロー効果を適用します。

効果を適用すると、効果名が「レイヤー」リストに表示されます。効果を削除するには、[ 画層 ] リストで名前を選択し、 削除.

メモ

基になるレイヤが表示するのに十分な大きさでない場合、ドロップシャドウや外側の光彩の効果が見えないことがあります。 シャドウや光彩が見えない場合は、レイヤーにパディング値を追加するか、レイヤーの順序を変更することを検討してください。 詳しくは、レイヤーとカンバスのサイズと位置の変更およびレイヤーの順序の変更を参照してください。

影や光彩効果の調整

シャドウ効果と光彩効果を調整するには、まず「レイヤー」リストで名前を選択します。そして、テンプレート画面の「レイヤーのプロパティ」領域で設定を変更します。

  • カラー - 「カラー」ボタンを選択し、カラースウォッチを選択して、シャドウまたは光彩のカラーを変更します。 また、ボックスにカラー値パラメータを入力することもできます。

  • 不透明度 — スライダーをドラッグして、効果の強さを指定します。 不透明度の低い効果のほうが透明度が高くなります。

  • 描画モード - Photoshopで使用可能なブレンドモードの 1 つをシミュレートするには、オプションを選択します。 標準、ディザ合成、明るく、暗く、乗算、スクリーンのいずれかのオプションを選択します。

  • サイズ - [X] と [Y] ボックスに測定値を入力して、影の効果を拡大または縮小します。 サイズオプションは、内側のシャドウとドロップシャドウでのみ利用できます。

  • 拡大 — スライダーをドラッグして、効果を内側または外側に広げます。

  • ぼかし — スライダーをドラッグして、効果の端のぼかしを制御します。 ぼかしが強い効果のほうが、ぼかし量が多くなります。

レイヤーをマスク

「レイヤー」リストには、レイヤーのマスクまたはアルファチャンネルの使用方法を指定するマスクボタンがあります。マスクボタンを使用して、背景レイヤーの効果を、テンプレート内の特定のレイヤーまたは親レイヤー全体に適用することができます。[ 画層 ] リストで画層を選択し、を選択します。 マスク 次の状態を切り替えるには:

  • レイヤーの背景を不透明にする。
  • レイヤーの内容を反転して、レイヤーの背景を黒一色で塗りつぶす。
  • レイヤーの背景を黒一色で塗りつぶす。

このページ