Dowiedz się, w jaki sposób importować grafiki SVG w programie Adobe Muse CC. Program Adobe Muse obsługuje umieszczanie, kopiowanie i importowanie plików graficznych w formacie SVG.

Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Program Adobe Muse umożliwia wykorzystanie w projekcie witryny grafiki wektorowej utworzonej na przykład w programie Adobe Illustrator. Obecnie program Adobe Illustrator natywnie obsługuje format SVG (Scalable Vector Graphics). Format ten umożliwia tworzenie logotypów, ikon, teł i wypełnień przeglądarki oraz wielu innych elementów, a za pomocą programu Adobe Muse umieszczać je bezpośrednio na kanwie witryny internetowej.

Grafiki zapisane w formacie SVG mają niewielki rozmiar i są niezależne od rozdzielczości. Dlatego przeskalowanie ich do dowolnego rozmiaru nie ma wpływu na czas wczytywania strony ani jakość obrazu. Pliki SVG są również obsługiwane przez wyświetlacze HiDPi. 

Z uwagi na to, że pliki SVG są niezależne od rozdzielczości, program Adobe Muse traktuje je w ten sam sposób niezależnie od tego, czy witryna działa w trybie standardowej czy wysokiej rozdzielczości. Pliki SVG nie są skalowane w dół o 50% po umieszczeniu ich na kanwie witryny internetowej w widoku Projektowanie.

Przetwarzanie plików SVG przed umieszczeniem ich w programie Adobe Muse

Uwaga:

Poniższa procedura obowiązuje tylko w przypadku korzystania z programu Adobe Muse 2015.1 i starszych wersji programu.  

W przypadku plików utworzonych w programie Adobe Illustrator należy wykonać następujące czynności:

  1. W programie Adobe Illustrator po zaprojektowaniu grafiki wybierz polecenie Plik > Zapisz jako.

  2. W menu rozwijanym Zapisz jako wybierz SVG. Wybierz miejsce zapisu pliku, po czym kliknij przycisk Zapisz.

  3. W oknie dialogowym Opcje SVG wprowadź następujące ustawienia:

    • Położenie obrazu: Osadź
    • Profile SVG: SVG 1.1
    • Typ: Konwertuj na kontury
    • Właściwości CSS: Atrybuty prezentacji
    • Miejsc po przecinku: 3
    • Kodowanie: Unicode (UTF-8)
    Określ ustawienia SVF w programie Adobe Illustrator przed zaimportowaniem pliku SVG do programu Adobe Muse CC.
  4. Kliknij przycisk OK, aby zapisać plik.

Importowanie plików SVG

Jeśli korzystasz z programu Adobe Muse w wersji 2015.1 (lub starszej), upewnij się, że wykonano kroki podane w temacie Przygotowywanie plików SVG do umieszczenia w programie Adobe Muse, zanim zaimportujesz i umieścisz plik SVG w programie Adobe Muse.

  1. W programie Adobe Muse wybierz polecenie Plik > Umieść (Ctrl + D w systemie Windows oraz Cmd + D w systemie Macintosh).

  2. Odszukaj plik SVG i zaznacz go, a następnie kliknij polecenie Otwórz.

  3. W programie Adobe Muse podgląd miniatur plików SVG przemieszcza się wraz ze wskaźnikiem. Aby umieścić plik SVG, kliknij odpowiednie miejsce na kanwie witryny internetowej. Lista umieszczonych elementów znajduje się w panelu Zasoby.

    Panel Zasoby

Po umieszczeniu pliku SVG można kontynuować projektowanie witryny. Możesz wykadrować obraz SVG za pomocą narzędzia Kadrowanie i zmienić rozmiar obrazu SVG, aby dopasować go do danego projektu.

Kopiowanie plików SVG z programu Adobe Illustrator

Program Adobe Muse umożliwia kopiowanie zawartości z programu Adobe Illustrator na przestrzeń roboczą witryny internetowej. Kopiowanie zawartości jest bardzo pomocne, gdy nie ma potrzeby zapisywania i wykorzystywania w projekcie witryny całej zawartości kompozycji programu.

Po skopiowaniu fragmentu kompozycji program Illustrator konwertuje zaznaczony obszar na format SVG i umieszcza go w schowku dostępnym z poziomu programu Adobe Muse. Program Adobe Muse traktuje skopiowaną zawartość jako osadzony plik SVG, można więc dostosowywać rozmiar grafiki do potrzeb projektu.

  1. W programie Adobe Illustrator wykonaj jedną z następujących czynności:

    • Izolowanie grupy lub wybranej ścieżki: kliknij prawym przyciskiem myszy grupę lub ścieżkę, która ma zostać skopiowana i w menu kontekstowym wybierz opcję Izoluj grupę/wybraną ścieżkę.
    • Ręczne wybieranie grupy lub ścieżki: wybierz grupę lub ścieżkę, która ma zostać skopiowana.
    Wybierz grupę lub ścieżkę
  2. Za pomocą skrótu klawiaturowego Ctrl + C (Windows) or Cmd + C (Macintosh) skopiuj zaznaczoną grupę lub ścieżkę.

  3. W programie Adobe Muse za pomocą kombinacji klawiszy Ctrl + V lub Cmd + V wklej zaznaczoną grupę lub ścieżkę na kanwę witryny internetowe w widoku Projektowanie.

    Obszar roboczy witryny

    W panelu Zasoby znajduje się lista wklejonych plików SVG.

    Panel Zasoby

Importowanie wypełnienia tła lub wypełnienia przeglądarki za pomocą elementów SVG

  1. W zależności od tego, czy chcesz dodać wypełnienie tła czy przeglądarki, zaznacz odpowiednio opcję Wypełnienie lub Wypełnienie przeglądarki. Aby uzyskać więcej informacji, zobacz sekcję Używanie opcji Wypełnienie i Wypełnienie przeglądarki.

  2. Kliknij polecenie Dodaj obraz. Odszukaj plik SVG i zaznacz go, a następnie kliknij polecenie Otwórz.

    Kliknij polecenie Dodaj obraz
  3. Ustaw odpowiednio atrybuty Dopasowanie i Pozycja.

    Ustaw odpowiednio atrybuty Dopasowanie i Pozycja

Uwaga:

Jeśli atrybut Dopasowanie jest ustawiony w pozycji Skaluj, aby zmieścić lub Skaluj, aby wypełnić, po dodaniu plików SVG do wypełnienia tła lub przeglądarki obraz w widoku Projektowanie wygląda, jakby został rasteryzowany. Jednak po włączeniu podglądu w programie Adobe Muse lub w przeglądarce obraz renderuje się w oczekiwany sposób.

Dodawanie obrazów SVG do pokazów slajdów

W programie Adobe Muse w wersji 2015.1 i nowszych można dodawać obrazy SVG do pokazów slajdów. Najpierw przeciągnij i upuść widżet Miniatury z biblioteki widżetów. Następnie wybierz obrazy wektorowe z Bibliotek Creative Cloud i umieść je w pokazie slajdów.

Samouczek wideo

Samouczek wideo
Danielle Beaumont

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online