瞭解如何在 Adobe Muse CC 中讀入 SVG 圖形。您可以放置、拷貝,以及讀入 SVG 圖形至 Adobe Muse。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

Adobe Muse 能讓您在網站設計中使用透過創作工具 (如 Adobe Illustrator) 所製作的向量圖形。目前,Adobe Muse 可原生支援可縮放向量圖形 (SVG) 格式。您可以使用 SVG 格式來建立標誌、圖示、背景填色、瀏覽器填色等等,並直接將其置入 Adobe Muse 的網頁畫布上。

以 SVG 格式儲存的圖形尺寸相當小且不受解析度影響。因此,這類圖形可以縮放為任意尺寸而不影響頁面載入時間和網站的外觀。高 DPI 顯示器也支援 SVG 檔案。 

由於 SVG 檔案不受解析度影響,因此 Adobe Muse 能在標準和高解析度網站中以相同的方式處理 SVG 檔案。在「設計」視圖中將 SVG 檔案置入網頁畫布時,該檔案並不會縮放至原尺寸的 50%。

在 Adobe Muse 中置入 SVG 檔案前的處理程序

註解:

下列程序僅適用於 Adobe Muse 2015.1 或早期版本。 

若是使用 Adobe Illustrator 所建立的 SVG 檔案,請執行下列操作:

  1. 在您的圖形設計完成之後,於 Adobe Illustrator 中選取「檔案 > 另存新檔」。

  2. 選取「另存新檔類型」下拉式清單中的「SVG」。瀏覽至您要儲存檔案的位置,接著按一下「儲存」。

  3. 在 SVG 選項對話框上,設定下列屬性:

    • 影像位置:嵌入
    • SVG 設定檔:SVG 1.1
    • 字體 - 類型:轉換為外框
    • CSS 屬性:呈現屬性
    • 小數位數:3
    • 編碼:Unicode (UTF-8)
    在 Adobe Muse CC 中讀入 SVG 之前,在 Adobe Illustrator 中指定 SVG 設定。
  4. 按一下「確定」儲存檔案。

讀入 SVG

若使用的是 Adobe Muse version 2015.1 或舊版,請先確定您已遵循此文章中的步驟操作:準備要在 Adobe Muse 中置入的 SVG 檔案。然後,再將 SVG 檔案匯入及置入 Adobe Muse。

  1. 在 Adobe Muse 中,選取「檔案 > 置入 」(在 Windows 上按 Ctrl + D,在 Mac 上按 Cmd + D)。

  2. 瀏覽至 SVG 檔案的位置,選取該檔案並按一下「開啟」。

  3. 在 Adobe Muse 中,滑鼠游標旁會顯示此 SVG 的縮圖預視。在網頁畫布上合適的位置按一下,以置入此 SVG 檔案。「資源」面板會列出您置入的檔案。

    「資源」面板

SVG 檔案置入之後,您就可以繼續設計您的網站。您可使用裁切工具裁切 SVG 影像,並視設計需求,調整 SVG 影像大小。

從 Adobe Illustrator 拷貝 SVG

Adobe Muse 允許您從 Adobe Illustrator 拷貝內容到網頁畫布上。當您不想在網站設計中儲存並使用圖稿的完整內容時,拷貝內容就變得相當有用。

當您拷貝部分圖稿時,Illustrator 會將所選部分轉換為 SVG,並將其放置在剪貼簿中供 Adobe Muse 使用。Adobe Muse 會將拷貝的內容視為嵌入的 SVG,您可以根據設計需求重新調整圖形的尺寸大小。

  1. 在 Adobe Illustrator 中,請執行下列任一項作業:

    • 分離群組或選取的路徑:在您要拷貝的群組或路徑上按下滑鼠右鍵,並從環境選單中選取「分離群組/選取的路徑」。
    • 手動選取群組或路徑:選取您要拷貝的群組或路徑。
    選取群組或路徑
  2. 使用 Ctrl + C (Windows) 或 Cmd + C (Mac) 命令來拷貝選取的群組或路徑。

  3. 在 Adobe Muse 中,使用 Ctrl + V 或 Cmd +V 命令,將選取的群組或路徑貼到「設計」視圖中的網頁畫布上。

    網頁畫布

    「資源」面板現在會列出已貼上的 SVG 檔案。

    「資源」面板

讀入 SVG 作為背景填色或瀏覽器填色

  1. 視您是要新增背景填色或瀏覽器填色而定,分別選取「填色」或「瀏覽器填色」。如需詳細資訊,請參閱使用填色與瀏覽器填色選項

  2. 按一下「新增影像」。瀏覽至 SVG 檔案的位置,選取該檔案並按一下「開啟」。

    按一下「新增影像」
  3. 適當地設定「符合」與「位置」屬性。

    適當地設定「符合」與「位置」屬性

註解:

當您將 SVG 檔案新增至背景或瀏覽器填色,且「符合」屬性設為「縮放以符合」或「縮放以填滿」時,「設計」視圖中的影像看起來會像是點陣化的影像。不過,在 Adobe Muse 內或瀏覽器上預覽時,影像會以預期的效果呈現。

將 SVG 新增至幻燈片展示

若是 Adobe Muse 2015.1 版或更新版本,就可將 SVG 影像新增至幻燈片展示。首先,從Widget 資料庫拖放縮圖。然後,從 Creative Cloud Libraries 選取向量影像,將影像置入幻燈片展示。

視訊教學課程

視訊教學課程
Danielle Beaumont

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策