切り抜き、調整した画像、ズームターゲット

Dynamic Media Classicのマスター画像概念の主な強みの1つは、多くの用途で画像アセットを再利用できる点です。 従来は、詳細を表示したりスウォッチを表示するには、切り抜く個々のバージョンを画像に作成する必要がありました。 Dynamic Media Classicを使用する場合は、1つのマスターに対して同じタスクを実行し、切り抜いたバージョンを新しい物理ファイルとして保存するか、ストレージ領域を必要としない仮想派生ファイルとして保存できます。

このチュートリアルの最後までに、次の方法を理解できます。

  • Dynamic Media Classicで画像を切り抜き、新しいマスターファイルまたは仮想画像として保存します。 詳細情報を参照してください。
  • 仮想調整された画像を保存し、マスターアセットの代わりに使用します。 詳細情報を参照してください。
  • 画像にズームターゲットを作成して、ハイライトを表示します。 詳細情報を参照してください。

切り抜き

Dynamic Media Classicには、切り抜きツールなど、UIで便利に使用できる画像編集ツールがいくつか用意されています。 様々な理由で、Dynamic Media Classic内でマスター画像を切り抜くことができます。 次に例を示します。

  • 元のファイルへのアクセス権がありません。 切り抜きや縦横比が異なる画像を表示したいが、元のファイルがコンピューターにないか、自宅で作業している。 この場合は、Dynamic Media Classicを開き、画像を探し、切り抜いて保存するか、新しいバージョンとして保存します。
  • 余分な空白を取り除く。 白いスペースで撮影し過ぎたため、商品が小さく見えます。 サムネール画像をできるだけキャンバスいっぱいにしたい場合。
  • 調整された画像を作成するには、ディスク領域を必要としない画像の仮想コピーを作成します。 同じイメージのコピーを別々に保存する必要があるが、名前が異なるビジネスルールを持つ企業もあります。 または、同じ画像の切り抜きと切り抜きを解除する必要がある場合もあります。
  • ソース画像から新たな画像を作成する。 例えば、カラースウォッチやメイン画像の詳細を作成する場合があります。 これをAdobe Photoshopでおこない、別々にアップロードするか、Dynamic Media Classicの切り抜きツールを使用できます。
メモ

切り抜きに関する以下のディスカッションのURLは、すべて例示用です。これらはライブリンクではありません。

切り抜きツールの使用

Dynamic Media Classicの切り抜きツールには、アセットの詳細ページから、または​編集​ボタンをクリックしてアクセスできます。 このツールを使用して、次の2つの方法で切り抜くことができます。

  • 切り抜きウィンドウのハンドルをドラッグするデフォルトの切り抜きモード、または「サイズ」ボックスに値を入力します。 手動で切り抜く方法を説明します。
  • トリミング 画像と一致しないピクセル数を計算して、画像の周囲の余分な空白を削除する場合に使用します。 トリミングによる切り抜きの方法を説明します。

手動切り抜き

手動で切り抜いたバージョンを保存すると、画像は完全に切り抜かれたように見えます。Dynamic Media Classicは、内部URL修飾子を追加して画像を切り抜くことで、実際にピクセルを非表示にします。 公開すると、画像が切り抜かれたことがすべてのユーザーに表示されますが、後で切り抜きエディターに戻り、切り抜きを削除することもできます。

次に、新しいマスター画像として保存するか、マスターの追加ビューとして保存するかを選択できます。 新しいマスターは、ストレージ領域を占有する新しい物理ファイル(TIFFやJPEGなど)です。 追加のビューとは、サーバー領域を使用しない仮想イメージです。 「オリジナルを置き換え」は選択しないことをお勧めします。これは、マスターが上書きされ、切り抜きが永続的になるからです。 新しいマスターまたは追加のビューとして保存する場合は、新しいアセットIDを選択する必要があります。 他のアセットIDと同様に、Dynamic Media Classicでは一意の名前にする必要があります。

トリミング切り抜き

画像のメインサブジェクトの周囲に空白(余分なキャンバス)が多すぎる画像をアップロードすると、サイズ変更時にWeb上ではるかに小さく見えます。 これは、特に150ピクセル以下のサムネール画像に当てはまります。写真の対象は、周囲の余分なスペースで失われる可能性があります。

同じ画像のこれら2つのバージョンを比較する。

画像

右側の画像は、製品の周りの余分なスペースを取り除くことで、より目立つようになっています。 トリミングは、切り抜きツールを使用して一度に1つの画像に対して実行することも、アップロード時にバッチ処理として実行することもできます。 すべての画像をメインの件名の境界に合わせて一貫して切り抜く場合は、バッチ処理としてを実行することをお勧めします。 境界ボックスをトリミング — 画像を囲む長方形。

メモ

トリミングでは、画像の周りに透明度は作成されません。 そのためには、画像にクリッピングパスを埋め込み、「クリップパスからマスクを作成 」アップロードオプションを使用する必要があります。

また、「保存」オプションを使用して切り抜いた後に画像を元の状態に戻すには、切り抜きエディター画面で画像を表示し、「リセット」ボタンを選択します。

アップロード時の切り抜き

前述のように、アップロード時に画像の切り抜きも選択できます。 アップロード時にトリミング切り抜きを使用するには、ジョブオプション​ボタンをクリックし、「切り抜きオプション」で「トリミング」を選択します。

Dynamic Media Classicは、次回のアップロード時にこのオプションを記憶します。 このアップロード用に画像を切り抜きたい場合でも、アップロードごとに切り抜かれたくない場合があります。 別のオプションとして、特別なスケジュール済みFTPアップロードジョブを設定し、切り抜きオプションをそこに配置する方法があります。 これにより、画像を切り抜く必要がある場合にのみジョブを実行できます。

重要

アップロードの切り抜きを設定した場合、Dynamic Media Classicは次回その設定を記憶するためのCookieを設定します。 ベストプラクティスとして、次回アップロードする前に「会社のデフォルトにリセット」ボタンをクリックして、最後のアップロードから残った切り抜きオプションを消去します。そうしないと、誤って次の画像のバッチを切り抜く可能性があります。

URLによる切り抜き

Dynamic Media Classicでは明らかではありませんが、URL全体で純粋に切り抜く(または画像プリセットに切り抜きを追加する)こともできます。

切り抜きツールを使用する場合は常に、下部のフィールドにURL値が表示されます。 これらの値を取得し、URL修飾子として画像に直接適用できます。


切り抜きエディタの下部にあるimageCropコマンド修飾子

画像

トリミングによる切り抜きを使用する場合は、画像単位でサイズを計算する必要があるので、URLを使用して自動化することはできません。 トリミング切り抜きは、アップロード時または一度に1つの画像を適用した場合にのみ実行できます。

画像プリセットでの切り抜き

画像プリセットには、画像サービングコマンドを追加できるフィールドがあります。 上記と同じ切り抜きを画像プリセットに追加するには、プリセットを編集し、「URL修飾子」フィールドに値を貼り付けるか入力して、保存して公開します。


image画像プリセットのURL修飾子に切り抜きコマンド(または任意のコマンド)を追加します。

切り抜きは、その画像プリセットの一部になり、使用されるたびに自動的に適用されます。 もちろん、この方法は、同じ切り抜き量を必要とするすべての画像に依存します。 画像がすべて同じ方法で撮影されない場合、この方法は機能しません。

調整後の画像

切り抜きツールを使用する場合、マスターの追加ビューとして保存​するオプションがあります。​保存すると、新しい種類のDynamic Media Classicアセット(調整済みの画像)が作成されます。 調整済み画像は、派生画像とも呼ばれ、仮想画像です。 実は画像ではありません。物理マスターイメージへのデータベース参照(エイリアスやショートカットなど)です。

本物のイメージは立ち上がるか?

どちらがマスターで、どちらが調整された画像かわかりますか。

画像

Dynamic Media Classicを見て、SBR_MAIN2の「調整された画像」のアセットタイプを確認しないと、見分けられないはずです。

調整済みイメージは、データベース内の行項目としてのみ存在するので、ディスク領域を使用しません。 また、元のアセットにも永続的に結び付けられます。元の画像を削除すると、調整された画像も削除されます。 切り抜かれていない画像全体または画像の一部(切り抜き)で構成することができます。

画像

調整した画像は通常、切り抜きツールを使用して作成します。ただし、他の画像エディター(調整ツールとシャープツール)を使用して作成することもできます。

調整した画像には、一意のアセットIDが必要です。 公開すると(他のアセットと同様に公開する必要があります)、他の画像として機能し、アセットIDによってURLに対して呼び出されます。 詳細ページの「ビルド&派生」タブで、マスター画像に関連付けられた調整済み画像を表示できます。


imageAdjustedマスター画像のビューASIAN_BR_MAIN

ズームターゲット

ズームターゲットは、画像の​編集​メニューおよび​詳細​ページにも表示されます。 これらを使用すると、「ホットスポット」を設定して、ズーム画像の特定のマーチャンダイジング機能を強調表示できます。 大きなマスターを切り抜いて個別の画像を作成する代わりに、ズームビューアでは、画像の上に短いラベルを付けて詳細を表示できます。

画像

ズームターゲットは基本的にマーチャンダイジング機能で、製品の販売ポイントに関する知識が必要なので、通常は会社のマーチャンダイジングまたは製品チームの担当者が作成します。

この処理は非常に簡単です。機能をクリックし、わかりやすい名前を付けて保存します。 ターゲットは、似ている場合に、別の画像にコピーできますが、手動でコピーできます。 Dynamic Media Classicでは、各画像が異なり機能も異なるので、ズームターゲットの作成を自動化する方法はありません。

ズームターゲットを使用するかどうかを決定するもう1つの要因は、ビューアの選択です。 一部のビューアタイプでズームターゲットを表示できるわけではありません(例えば、フライアウトビューアではサポートされていません)。

ズームターゲットを作成する方法を説明します。

画像

ズームターゲットツールの使用

Dynamic Media Classicでターゲットを作成するワークフローを次に示します。

  1. 画像を参照し、​を編集」ボタンをクリックして、「ズームターゲット」を選択します。

  2. ズームターゲットエディタが読み込まれます。 中央に画像、上部にボタン、右側に空のターゲットパネルが表示されます。 左下に、ビューアプリセットが選択されています。 初期設定は「Zoom1-Guided」です。

  3. マウスで赤いボックスを移動し、クリックして新しいターゲットを作成します。

    • 赤いボックスはターゲット領域です。 ユーザーがそのターゲットをクリックすると、ボックス内の領域にズームインします。
    • ターゲットサイズは、ビューアプリセット内のビューサイズによって決まります。 これにより、メインのズーム画像のサイズが決まります。 下の​ビューサイズの設定​を参照してください。
  4. 作成したターゲットが青に変わり、右側にそのターゲットのサムネールバージョンとデフォルト名「target-0」が表示されます。

  5. ターゲットの名前を変更するには、そのサムネールをクリックし、新しい​名前​を入力し、Enter​または​タブ​をクリックします。

  6. ターゲットが選択されている間、ボックスは緑色の破線で囲まれ、サイズ変更や移動が可能です。 コーナーをドラッグしてサイズを変更するか、ターゲットボックスをドラッグして移動します。

    • これにより、画像が初期設定のカスタムズームビューアに読み込まれます。 ビューアプリセットでズームターゲットがサポートされていることを確認します。一般に、「 —Guided」という単語を含むすべての標準プリセットは、ズームターゲットで使用するように設計されています。 ターゲットを使用するには、ターゲットのサムネール(またはホットスポットアイコン)にマウスポインターを置いてラベルを表示し、そのサムネールをクリックして、ビューアがその機能にズームインするのを確認します。

    • Dynamic Media Classicでの他の作業と同様に、ズームターゲットをWeb上で公開するには、を公開する必要があります。 ターゲットをサポートするビューアを既に使用している場合は、(キャッシュがクリアされると)すぐに表示されます。 ただし、ズームターゲット対応ビューアを使用していない場合、非表示のままになります。

      画像

  7. また、ターゲットを削除する必要がある場合は、そのサムネールをクリックしてターゲットを選択し、「Delete Target」ボタンを押すか、キーボードのDELETEキーを押します。

  8. を続けてクリックし、新しいターゲットを追加し、名前を変更したり、追加後にサイズを変更したりします。

  9. 完了したら、「保存」ボタンをクリックし、「プレビュー」をクリックします。

ズームビューアプリセットでのビューサイズの設定

ここで、ズームターゲットのサイズの元となる場所について説明します。 ズームビューアのビューアプリセット内に、ビューサイズと呼ばれる設定があります。 ビューサイズは、ビューア内のズーム画像のサイズです。 UIコンポーネントやアートワークを含むビューアの合計サイズであるステージサイズとは異なります。

新しいターゲットを作成する場合、サイズと縦横比はビューサイズから派生します。 例えば、ビューサイズが200 x 200の場合、最大ズーム領域が200ピクセルの正方形のターゲットのみ作成できます。 ターゲットは200ピクセルを超えても、常に正方形にすることができます。 ただし、ズームビューア内の画像は200ピクセルに過ぎません。ズームターゲットのサイズは、ビューアのサイズと直接関係します。 ターゲットを設定する前に、まずビューアデザインを決定します。

ただし、デフォルトではビューサイズは空白(0 x 0に設定)になっています。これは、メインビュー画像のサイズが動的で、ステージのサイズに応じて自動的に導き出されるからです。 問題は、プリセットでビューサイズを明示的に設定しない場合、ズームターゲットツールはターゲットにするサイズを把握できなくなります。

ズームターゲットツールを読み込むと、プリセット名の横にビューサイズが表示されます。 組み込みのZoom1-GuidedプリセットとカスタムのZT_AUTHORINGプリセットのビューサイズを比較します。

画像

組み込みプリセットのサイズは900 x 550で、ターゲットが大きいサイズより小さくなることは決してありません。 これはおそらく大きすぎます — 2000ピクセルの画像がある場合、全体で900ピクセル以上の機能しか呼び出せません。 ユーザーは手動でさらにズームできますが、近づくことはできません。 ビューサイズを350 x 350に設定すると、ターゲットをかなり近くにズームインしたり、大きくサイズ変更したりできます。 ただし、ビューアで大きなズーム画像が必要な場合は、350ピクセルでロックされているので、新しいプリセットを作成する必要があります。

ズームターゲットをサポートするビューアプリセットの作成または編集

ビューサイズを設定するには、ズームターゲットをサポートするビューアプリセットを作成または編集します。

  1. ビューアプリセットで、「ズーム設定」オプションに移動します。
  2. 「幅」と「高さ」を設定します。
  3. プリセットを保存し、閉じます。 ライブサイトでそのプリセットを使用する場合は、後でも公開する必要があります。
  4. ズームターゲットツールに移動し、左下で編集したプリセットを選択します。 新しいビューサイズがターゲットに反映されます。

このページ