[AEM Assets]{class="badge positive" title="適用於AEM Assets)。"}
Dynamic Media歷程:基礎知識,第二部分 dm-journey-part2
-
您是 Dynamic Media 的新手嗎? 如需 Dynamic Media 的快速、高階概觀,請參閱使用 Dynamic Media。
-
請遵循 Dynamic Media 最佳實務以實現最大價值。
-
使用快照工具試用 Dynamic Media 影像功能。
-
透過調適型影片確保影片播放順暢。
-
使用「智慧裁切」來自動裁切影像。
-
使用「智慧裁切」來自動裁切影片。
-
提供支援互動式 3D 的體驗。
歡迎使用Dynamic Media歷程:基礎知識第II部分,您將在該部分中學習下列內容:
- Dynamic Media URL剖析,以及Dynamic Media如何傳遞內容。
- 建立影像預設集以轉譯資產的基礎知識。
- 影像集、迴轉集及混合媒體集。
另請參閱Dynamic Media歷程:基礎知識,第I部分。
Dynamic Media URL剖析,以及Dynamic Media如何傳遞內容 dm-journey-d
上傳和發佈Dynamic Media資產後,您可以複製資產產生的URL,並將其貼到瀏覽器中,以檢視向客戶顯示的資產外觀。 以下手錶影像的複製URL會依顏色劃分,以便更易於閱讀和理解。
動態媒體URL的結構。
URL紅色的第一部分是參照伺服器網域本身。 在此案例中,Dynamic Media是在一般伺服器網域https://s7d1.scene7.com/is/image/上執行。 您可以透過檢查伺服器網域,輕鬆識別Dynamic Media是否提供一組影像。 URL結構一致。 不過,有些Dynamic Media客戶已切換至其為name-of-your-company.scene7.com的專用伺服器網域。 智慧型影像需要專用的伺服器網域。
帳戶名稱是紫色的部分。 在此案例中,該帳戶稱為jpearldemo。
資產ID或名稱AdobeStock_28563982為綠色。 請注意,該資產的副檔名為no,例如.png或.jpg。 將資產內嵌至Dynamic Media時,會移除副檔名並建立其他型別的檔案:金字塔TIFF檔案。 金字塔TIFF可讓Dynamic Media快速即時建立轉譯。
最後,還有些影像處理引數?wid=1000&fmt=jpeg&qlt=85,在結尾以黃色顯示。
整個URL路徑都是即時的。 試用。
當瀏覽器視窗仍開啟至Dynamic Media URL和觀看影像時,請檢視如何變更URL以建立影像的轉譯。
透過URL呈現監視影像
首先,請僅手動刪除URL路徑中的影像處理規則;保留伺服器名稱、帳戶名稱,以及資產ID或影像名稱。 試用。
現在將影像處理引數新增至URL結尾。 在URL欄位中,在影像名稱右側,輸入?wid=500,然後按Enter。 試用。
請注意,已產生新的手錶轉譯。 這項變更影像寬度的簡單練習中,要瞭解的關鍵點在於,看到的影像會以100%動態方式產生。
現在將500畫素的寬度值變更為1000畫素,然後按Enter。 試用。
當您按下 Enter 時,瀏覽器會回到Dynamic Media影像伺服器。 它會根據您輸入的新寬度值產生手錶轉譯,然後將影像傳送給瀏覽器並加以快取。
Dynamic Media有許多影像處理引數,可用來微調網頁上的影像資產。 您可以在這裡檢視他們的清單。
現在嘗試將旋轉引數新增到觀看影像。 在URL路徑的結尾,緊接在wid=1000之後,輸入&rotate=90,然後按Enter。 試用。
手錶還是稍微向左偏斜。 將90的旋轉值變更為92,然後按Enter。 試用。
同樣地,當您按下 Enter 時,會立即產生新的手錶轉譯。 您可以檢視效能等級,瞭解為什麼Dynamic Media在高流量期間每秒可以傳送超過800,000個影像要求__。
以逐張影像為基礎,變更URL中的影像處理引數會變得效率低下,尤其是針對包含數千張影像的網站。 更好的方式是使用影像預設集。
建立影像預設集以轉譯資產的基礎知識 dm-journey-e
建立影像的方法有很多種。 您想要有可用的影像。 傳統上,創意專業人士會進入Adobe Photoshop,並將每個轉譯儲存為靜態影像。
良好:靜態影像,每個影像都是手動建立的。
現在想像一下,創意總監看著影像說,
「我真的很想要這個鏡頭,好讓大手指向四個,而小手指向1,好讓手錶撥盤更容易看見。」
創意會重新拍攝所有新的靜態影像。
但有了Dynamic Media,如果您有不同的影像預設集,您就可以隨處使用這些影像。 影像預設集會強制實施標準。
最佳:一個檔案使用影像預設集即時建立多個轉譯,例如Search_Grid和Thumbnail。
您需要有特定影像型別的每個地方,例如:
- 產品詳細資料頁面,
- 搜尋格線,
- 縮圖,
- 購物車,或
- 主圖影像
您想要在任何使用影像的地方,以相同的引數傳送影像。
讓我們暫時瞭解一下如何在Dynamic Media中建立影像預設集。
從[基本]索引標籤開始建立影像預設集。
在上述範例中,您可以看到已建立名稱為 Medium 的新影像預設集。 Dynamic Media使用現成可用的影像(揹包)範例,協助您在建立影像預設集時檢視其特性。
Medium影像預設集具有500畫素的寬度和800畫素的高度。 在此歷程的第一部分中,您已閱讀有關以不同格式傳送資產的資訊。 從 格式 下拉式功能表中,您可以選擇以JPEG、PNG、TIFF或數種其他格式傳送資產。 您可以靈活處理。
選取 進階 索引標籤,可為您提供資產色域的選項。 根據 基本 標籤中選取的格式,您可以在RGB、灰階或CMYK中傳遞資產。 使用 色彩設定檔 下拉式功能表,選取如何傳送CMYK影像資產以供列印。 也請注意,您可以套用其他引數來銳利化影像。 在此情況下,已套用不銳利化遮色片。
從[進階]索引標籤選取選項,以建立影像預設集。
您記得先前在Dynamic Media URL的結構中,您曾閱讀過有關Dynamic Media URL及其建置方式的資訊。 影像修飾元文字方塊可讓您輸入您想要的任何其他影像處理引數。 使用預設集傳送影像時,引數會包含在URL的預設集名稱中。 在上面的熒幕擷圖中,已新增引數bgc=451B15。 也就是說,已新增深棕色背景顏色。
您可以將影像預設集視為影像的設定。 每次都會以一致的方式提供使用預設集的任何影像;都一樣。 引數&op_brightness=+10也加入以稍微增加亮度。
完成後,您儲存了預設集,現在它可用於您擁有的所有影像。 在此案例中,您想要將 Medium 影像預設集套用至一碗液態巧克力的影像。
若要產生影像的轉譯,請套用影像預設集Medium。
若要檢查影像的外觀,請複製URL並將其貼到您的瀏覽器中。 試用。
在您的瀏覽器中,注意完整URL路徑中的影像預設集 Medium 的名稱。
您可以看到影像中顯示的清晰度。 這種品質部分是由於這碗巧克力的拍攝方式。 此外,部分原因是因為使用Dynamic Media,您可以儲存比傳送至數位頻道更大的影像。
如果您的巧克力碗看起來一切正常,您就會將URL貼到您想讓影像出現在網站上的網頁。
如果您再次檢視下方的手錶影像,您可以看到有Cart影像預設集、Grid預設集、Large預設集、PDP-page (產品詳細資料頁面)預設集,以及其他數個預設集。
靜態和動態影像預設集。 已使用PDP-page影像預設集演算監視影像。
但如果您必須變更網站上的影像,該怎麼做? 例如,假設您已進行一些測試,但發現系統並未如您預期般感知120 x 120的影像(Cart影像預設集)。 將寬度增加到175畫素並將高度增加到175畫素以增加影像大小。 傳統上,您會進入Adobe Photoshop並重新建立所有這些購物車影像。 但使用Dynamic Media時,您可以將「寬度」和「高度」值更新為175,以編輯影像預設集並儲存預設集,如下列範例所示。
正在編輯Cart影像預設集的寬度和高度。
在您變更影像預設集並清除快取後,所有影像都會更新,且與該預設集搭配使用的所有URL都不會在任何地方變更。 這表示不需要中斷連結和網頁重新導向。
影像集、迴轉集及混合媒體集 dm-journey-f
Dynamic Media一些較常用的用途是讓您建立影像集、迴轉集和混合媒體集。
影像集通常由一系列以單一實體呈現的影像資產組成。 這些型別的設定可為使用者提供整合式檢視體驗,使用者可按一下縮圖影像來檢視專案的不同檢視。 影像集可讓您呈現某些專案的替代檢視,而檢視器則提供縮放工具,讓您更密切地檢查影像。 檢視名為「執行中」且使用彈出式檢視器的影像集。
在Dynamic Media中,您可以看到幾張跑步鞋的影像。 這是銷售和行銷希望客戶檢視為單一簡報的產品線系列:影像集。
開始建立影像集。
若要建立影像集,請從 建立 下拉式功能表選擇影像集。 請注意,功能表上也有建立混合媒體集、迴轉集和 轉盤集 的選項。 您建立這些集合的方式與影像集大致相同。
混合媒體集可包含影像、色票集、迴轉集、視訊和自我調整視訊集。 試用。 迴轉集可讓使用者旋轉物件以進行檢查。 迴轉集可讓您從任何角度檢視重要的視覺細節。 試用。
直接建立影像集。 您新增要納入該集的影像資產。
影像集編輯器可讓您新增影像資產,以及重新排序影像資產在集中的外觀。
您必須為集命名。 請謹慎選擇名稱,因為您稍後無法編輯! 在上述範例中,集合稱為Running。 完成後,您會儲存集合。
這是Experience Manager Assets中的Running影像集。
Experience Manager Assets卡片檢視中的Running影像集。
建立影像集、混合媒體集、迴轉集或其他互動媒體後,可預覽其外觀和為客戶執行的動作。 Dynamic Media有許多內建的檢視器可讓您這麼做。
首先,請選取影像集以在預覽中開啟它,如下列範例所示。
已選取檢視器選項,預覽中設定的Running影像。
請注意,在預覽中,您可以選取跑步鞋色票,並放大和縮小鞋子。 若要將檢視器套用至集合,請從下拉式功能表中選取檢視器。
套用彈出式檢視器的Running影像集。
在此案例中,已選取Flyout檢視器。 此時,您可以預覽檢視器中設定的影像。 但是,最好在瀏覽器中看到客戶的視覺。 您選取左下方的URL,然後複製URL並貼至瀏覽器。 試用。
單一URL可讓您在網站上所需的位置使用影像集和檢視器。 您在上一個範例中注意到 Embed 位於URL按鈕的右側。 選取內嵌,即可複製此影像集/檢視器的程式碼,並將其新增至網頁或Experience Manager Sites元件。
彈出式檢視器是預設的標準檢視器,您可以編輯其屬性。 或者,就像建立影像預設集一樣,您可以建立自己的自訂檢視器。
現在,假設您的銷售和行銷團隊不偏好彈出式檢視器。 他們喜歡縮放功能,但他們希望客戶能在鞋子上直接看到縮放效果。 在這種情況下,您可以將InlineZoom檢視器套用至影像集,然後將其URL複製並貼到瀏覽器中,以檢視其行為。 試用。
當您將滑鼠指標移到鞋上時,影像會放大,當您移動指標時,您可以看到更多細節。 此縮放效果取決於最初上傳至Dynamic Media的影像大小。
當您認為您的角色是消費者,或您在專業角色中工作時,以及當您造訪不同的網站時,您會看到這些功能的範例。 請思考這如何完成,以及如何在您自己的工作和您公司的網站上使用Dynamic Media的功能。
您可以閱讀影像集和檢視器的相關資訊。 讓我們看看其他幾個檢視器,並在單一資產上試用。 若要重設檢視器,請按一下左下角的 重新整理 按鈕。
選擇性 — 瞭解更多
若要進一步瞭解您所閱讀的內容,請使用以下資料更詳細地探索概念。 否則,您的Dynamic Media歷程已完成!
動態媒體教學課程
- 搭配Experience Manager Assets使用Dynamic Media
- Adobe Experience Manager內容庫 (在 Dynamic Media 上搜尋)
Dynamic Media檢視器
- 每個檢視者的即時示範