テンプレートの作成

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

メモ

以前のバージョンのDynamic Media Classicで作成したテンプレートを編集する場合、保存時に「カンバスレイヤーを追加しますか?」というメッセージが表示される場合があります。 その場合は、「いいえ」を選択し、新しいベースレイヤーを追加しないようにします。誤って「はい」を選択してしまった場合は、URL 内の「&allowCanvasPrompt」および「&layer=0」修飾子を削除し、Enter キーまたは Return キーを押します。

テンプレートの作成

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

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

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

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

初期テンプレートセットを作成するには

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

    最初にPSDまたは画像を選択します 。参照パネルで、テンプレートにするPSDファイルまたは画像を選択し、ビルド/基本テンプレートをクリックします。

    テンプレート画面で 、ビルド/基本テンプレートをクリックします。 「デザイナー」または「開発者」を選択します。

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

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

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

  5. 保存」をクリックします。

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

    必要に応じて、画像がカンバス(テンプレートを定義するためのテンプレート画面の領域)に収まるように画像が縮小されます。

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

編集するテンプレートセットが公開済みか非公開かに応じて、「保存後に公開」オプションがセットおよびセットメンバーに対して次のように影響します。

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

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

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

  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 を選択して、マージンを大きく、マージンを小さく、オールキャップス、テキストをコピーフィットなど多くの新機能を利用できます。

注意​:テキストエディタv4.2は、最終的にはDynamic Media Classicのオプションから削除されるので、可能であればテキストエディタ4.3を使用することをお勧めします。 「ワードラップ」オプションは、今後リリースされるテキストエディタに組み込まれる予定です。

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

[キャンバス ]テンプレートを定義するために使用できる領域の合計をピクセル単位で定義します。 初期設定のサイズは、300 x 300 pixel です。レイヤーは、カンバス上に配置されます。

「レイヤー」リスト (Layers)は、テンプレート内のレイヤーの名前をリストします。 レイヤーを選択するには、「レイヤー」リストで名前を選択します。「レイヤー」リストには、レイヤーに効果を追加したり、レイヤーを削除したり、レイヤーの順序を変更したり、レイヤーをパラメータ化するためのツールがあります。詳しくは、 レイヤーを使った作業を参照してください。

「レイヤーのプロパティ」領域 オファーツールを使用して、レイヤーの背景色、不透明度、サイズ、位置、およびカンバスの背景色、不透明度、サイズを変更できます。 また、シャドウ効果と光彩効果を調整することもできます。詳しくは、 レイヤーを使った作業を参照してください。

画像レイヤーの作成

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

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

メモ

必要に応じて、画像レイヤーを作成するときに、画像がカンバスに収まるように画像が縮小されます。

テキストレイヤーの作成

  1. テキストツールをクリックします。

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

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

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

テキストの書式設定

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

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

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

  3. 必要に応じて、次の書式オプションを指定し、「適用」をクリックします。

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

    フォントサイズ :メニューからフォントサイズを選択し、ボックスに特定のサイズを入力するか、上向きまたは下向き矢印をクリックして2ポイントずつフォントサイズを増減します。

    [色 ]クリックして、テキストの色を選択します。

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

    [すべて大文字]、[上付き文字]、または[下付き文字 ]テキストを選択し、テキストに適用する書式の種類のアイコンをクリックします。

    行揃え テキストレイヤー内のテキストを左揃え、中央揃えまたは右揃えするには、行揃えボタンを選択します。

    追跡 :単語間のスペースの量を調整する数値を入力または選択します。

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

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

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

メモ

最後に実行した操作を取り消すには、「取り消し」をクリックします。「取り消し」をクリックした後で、取り消した操作を再度実行するには、「やり直し」をクリックします。

段落の書式設定

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

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

  3. 必要に応じて、次の書式オプションを指定し、「適用」をクリックします。

    [線形 ]クリックして、線形の種類を指定します。左揃え、中央揃え、右揃えまたは両端揃え

    段落の終わりの行揃え :をクリックして、段落の最後の行の行揃えの種類を指定します。最後の行を左揃えにします。最後の行を中央揃えにします。最後の行を右揃えにします。

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

    すべてインデント :テキストのインデント幅を大きくします。

    インデントを削除 :をクリックして、テキストのインデント幅を小さくします。

    1行目をインデント :テキストの1行目のインデント幅を指定します。

    段落前の間隔 段落の最初の行のテキストの上に空けるスペースを指定します。

    段落後の間隔 段落の最後の行のテキストの下に表示するスペースを指定します。

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

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

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

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

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

    テキストを縮小(テキストエディタv4.2のみ) :テキストボックスに収まるようにテキストを縮小します。

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

    [折り返し ]横幅が小さすぎるテキストボックスに収まるようにテキストを折り返します。

    [折り返しなし ]テキストボックスの横幅が小さすぎる場合にテキストを折り返さず、代わりにテキストの一部を省略します。

    NB折り返し (改行なしラップ)テキストボックスに収まるようにテキストを折り返し、単語は改行しません。

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

    [パディング ]マージンを追加するか、レイヤーの長方形をトリミングします。 左、上、下、右に対して、追加または削除するピクセル数を指定します。マージンを追加するには正の数を入力し、小さくするには負の数を入力します。

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

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

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

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

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

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

  4. 「適用」をクリックして、編集内容を表示します。

レイヤーの操作

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

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

レイヤーの重なり順を変更

レイヤーの重なり順を変更すると、特に透明度や刷り重ねが関係している場合に、外観が影響を受ける場合があります。変更を確定する前に、必ず結果をプレビューしてください。

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

    • 「レイヤー」リストで、レイヤーを選択します。レイヤーがリスト内で正しい位置になるまで、上向きボタンまたは下向きボタンを必要な回数だけクリックします。
    • 「レイヤー」リストで、レイヤーを上または下にドラッグします。

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

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

メモ

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

レイヤーのサイズの変更

レイヤーまたはカンバスのサイズを変更するには、「レイヤー」リストでレイヤーまたはカンバスを選択し、次のいずれかの手順に従います。

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

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

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

レイヤーの位置の変更

カンバス上でのレイヤーの位置を変更するには、「レイヤー」リストでレイヤーを選択して、次のいずれかの手順に従います。

手動での位置の変更 レイヤーの境界線に重ならない程度に近い位置にポインタを移動し、4方向の矢印カーソルが表示されたら、クリックして開始ドラッグします。

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

レイヤーの回転

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

手動回転 レイヤーの隅に重ならない程度に近い位置にカーソルを移動します。 カーソルが回転カーソルに変わったら、レイヤーの隅をドラッグします。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 画像で構成されるレイヤーは、背景を透明にすることができます。

背景色 (Background color) [背景色]ボタンをクリックし、カラースウォッチを選択して、パディング領域の色を変更します。

[不透明度 ]不透明度スライダをドラッグして、レイヤーを半透明にし、下にあるイメージの一部が透けて見えるようにします。 100 %にすると完全に不透明になり、0 %にすると透明になります。

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

レイヤー上でのシャドウ効果と光彩効果の使用

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

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

レイヤーへのシャドウ効果と光彩効果の適用

シャドウ効果または光彩効果を適用するには、次の手順に従います。

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

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

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

    [シャドウ(内側) ]レイヤーのすべての辺の内側にシャドウ効果を適用します。

    [光彩(外側) ]レイヤーのすべての辺の周りに光彩効果を適用します。

    [光彩(内側) ]レイヤーのすべての辺の内側に光彩効果を適用します。

効果を適用すると、効果名が「レイヤー」リストに表示されます。効果を削除するには、「レイヤー」リストで名前を選択して、「削除」ボタンを選択します。

メモ

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

シャドウ効果と光彩効果の調整

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

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

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

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

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

[拡大 ]スライダをドラッグして、効果を内側または外側に拡大します。

[ぼかし ]スライダをドラッグして、効果の境界のぼかしを制御します。 ぼかしが強い効果のほうが、ぼかし量が多くなります。

レイヤーのマスク

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

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

このページ