Dowiedz się, w jaki sposób umieszczać, kopiować lub importować grafiki SVG w programie Adobe Muse.

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.

Ustawienia SVG w programie Adobe Illustrator

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)
    SVGOptions
  4. Kliknij przycisk OK, aby zapisać plik.

Importowanie plików SVG

Przed zaimportowaniem i umieszczeniem pliku SVG w programie Adobe Muse należy wykonać kroki opisane w sekcji Przygotowywanie plików SVG do umieszczenia 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.

    Splash

Po umieszczeniu pliku SVG można kontynuować projektowanie witryny. Nie można wykadrować obrazu SVG za pomocą narzędzia Kadrowanie. Można jednak zmieniać jego rozmiar, dostosowując go do potrzeb projektu.

Możesz połączyć zaimportowany plik SVG do obrazu rastrowego. Możesz także ponownie połączyć zaimportowane obrazy do plików SVG.

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.
    IsolatedGroup-1
  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.

    PasteIsolatedGroup

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

    AssetsPanelWithPastedSVG

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.

    BrowserFill
  3. Ustaw odpowiednio atrybuty Dopasowanie i Pozycja.

    BrowserFillWithFittingAndPosition

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.

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