Valitse Adobe Illustratorissa grafiikan suunnittelun jälkeen Tiedosto > Tallenna nimellä.
Päivitetty viimeksi
6. toukokuuta 2021
Opi sijoittamaan, kopioimaan ja tuomaan SVG-grafiikkaa Adobe Musessa.
Adobe Musessa voit käyttää sivustossasi vektorigrafiikkaa, joka on luotu esimerkiksi Adobe Illustratorissa. Adobe Muse tukee nyt natiivitasolla SVG-tiedostomuotoa (Scalable Vector Graphics, skaalattava vektorigrafiikka). Voit käyttää SVG-tiedostoja esimerkiksi logoissa, kuvakkeissa, taustoissa ja selaimen täytössä ja sijoittaa niitä suoraan verkkosivun suunnittelualueelle Adobe Musessa.
SVG-muodossa tallennetut grafiikat ovat kevyitä ja tarkkuudesta riippumattomia. Näin ollen grafiikka voidaan skaalata mihin kokoon tahansa ilman, että sillä olisi vaikutusta sivun latausaikaan ja ulkoasun laatuun. Myös HiDPI-näytöt tukevat SVG-tiedostoja.
Koska tiedostot ovat tarkkuudesta riippumattomia, Adobe Muse käsittelee SVG-tiedostoja samalla tavoin sekä vakiosivustoissa että suuren tarkkuuden sivustoissa. SVG-tiedostoja ei skaalata 50-prosenttiseen kokoon, kun ne sijoitetaan verkkosivuston suunnittelualueelle Muoto-näkymässä.
SVG-asetukset Adobe Illustratorissa
Jos olet luonut SVG-tiedoston Adobe Illustratorilla, toimi seuraavasti:
-
-
Valitse avattavasta Tallenna tyypillä -valikosta SVG . Siirry sijaintiin, johon haluat tallentaa tiedoston, ja napsauta Tallenna.
-
Määritä SVG-asetusten valintaikkunassa seuraavat valinnat:
- Kuvan sijainti: Upotus
- SVG-profiili: SVG 1.1
- Kirjasimet - Tyyppi: Muunna ääriviivoiksi
- CSS-ominaisuudet: Esitysmääritykset
- Desimaalit: 3
- Koodaus: Unicode (UTF-8)
- Kuvan sijainti: Upotus
-
Tallenna tiedosto valitsemalla OK.
SVG-tiedoston tuominen
Ennen kuin tuot ja sijoitat SVG-tiedoston Adobe Musessa, varmista, että olet noudattanut kohdassa SVG-tiedostojen valmistelu Adobe Musessa asettamista varten kuvattuja vaiheita.
-
Valitse Adobe Musessa Tiedosto > Sijoita (Ctrl+D Windowsissa ja Komento+D Macilla).
-
Siirry SVG-tiedoston sijaintiin, valitse tiedosto ja napsauta Avaa.
-
Adobe Musessa näkyy osoittimen lisäksi esikatseluminiatyyri SVG-tiedostosta. Napsauta verkkosivuston suunnittelualueella sitä kohtaa, johon haluat sijoittaa SVG-tiedoston. Sijoittamasi tiedosto näkyy Kohteet-paneelissa.
Kun SVG-tiedosto on asetettu, voit jatkaa sivuston suunnittelua. Et voi rajata SVG-tiedostoa rajaustyökalulla. Voit kuitenkin muuttaa sen kokoa suunnittelutarpeidesi mukaan.
Voit linkittää tuodun SVG-tiedoston rasterikuvaan. Voit myös linkittää tuodut kuvat uudelleen SVG-tiedostoihin.
SVG-tiedostojen kopiointi Adobe Illustratorista
Adobe Muse mahdollistaa sisällön kopioinnin Adobe Illustratorista verkkosivun suunnittelualueelle. Sisällön kopiointi on kätevää, jos et halua käyttää -projektin koko sisältöä sivustosuunnittelussasi.
Kun kopioit osia projektista, Illustrator muuntaa valinnan SVG-muotoon ja sijoittaa sen leikepöydälle Adobe Musen käyttöön. Adobe Muse käsittelee kopioitua sisältöä upotettuna SVG:nä. Voit muuttaa grafiikan kokoa suunnittelutarpeidesi mukaan.
-
Tee jompikumpi seuraavista toimista Adobe Illustratorissa:
- Eristä ryhmä tai valittu polku: Napsauta hiiren kakkospainikkeella ryhmää tai polkua, jonka haluat kopioida, ja valitse sitten pikavalikosta Eristä ryhmä/valittu polku.
- Valitse ryhmä tai polku manuaalisesti: Valitse ryhmä tai polku, jonka haluat kopioida.
-
Kopioi valittu ryhmä tai polku painamalla Ctrl+C (Windows) tai Komento+C (Mac).
-
Liitä Adobe Musessa valittu ryhmä tai polku verkkosivuston suunnittelualueelle painamalla Muoto-näkymässä Ctrl+V tai Komento+V.
Kohteet-paneelissa on listattuna liitetty SVG-tiedosto.
SVG-tiedostojen tuonti taustan ja selaimen täyttöihin
-
Valitse joko Täyttö tai Selaimen täyttö sen mukaisesti, haluatko lisätä taustan täytön vai selaimen täytön. Lisätietoja on kohdassa Täyttö- ja Selaimen täyttö -valintojen käyttö.
-
Valitse Lisää kuva. Siirry SVG-tiedoston sijaintiin, valitse tiedosto ja napsauta Avaa.
-
Määritä haluamasi Sovitus- ja Sijainti-asetukset.
Huomautus:
Jos SVG-tiedostoja lisätään taustan tai selaimen täytöksi, kuva näkyy Muoto-näkymässä rasteroituna, kun Sovitus-asetuksena on Skaalaa sopivaksi tai Sovita täyttöön. Kuva muodostetaan kuitenkin normaaliin tapaan, kun sitä esikatsellaan Adobe Musessa tai selaimessa.
