Opi tuomaan SVG-grafiikkaa Adobe Muse CC:hen. Voit sijoittaa, kopioida ja tuoda SVG-grafiikkaa Adobe Museen.

Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

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-tiedostojen käsitteleminen Adobe Musessa asettamista varten

Huomautus:

Seuraavat ohjeet pätevät vain, jos käytät Adobe Muse 2015.1 -versiota tai aiempaa versiota.  

Jos olet luonut SVG-tiedoston Adobe Illustratorilla, toimi seuraavasti:

  1. Valitse Adobe Illustratorissa grafiikan suunnittelun jälkeen Tiedosto > Tallenna nimellä.

  2. Valitse avattavasta Tallenna tyypillä -valikosta SVG. Siirry sijaintiin, johon haluat tallentaa tiedoston, ja valitse Tallenna.

  3. 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)
    Määritä SVG-asetukset Adobe Illustratorissa ja ennen SVG-tiedoston tuontia Adobe Muse CC:hen.
  4. Tallenna tiedosto valitsemalla OK.

SVG-tiedoston tuominen

Jos käytät Adobe Muse 2015.1 -versiota tai aiempaa versiota, varmista, että olet seurannut kohdassa SVG-tiedostojen valmistelu Adobe Musessa asettamista varten annettuja ohjeita, ennen kuin tuot ja sijoitat SVG-tiedoston Adobe Museen.

  1. Valitse Adobe Musessa Tiedosto > Sijoita (Ctrl+D Windowsissa ja komento+D Macilla).

  2. Siirry SVG-tiedoston sijaintiin, valitse tiedosto ja valitse Avaa.

  3. 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.

    Kohteet-paneeli

Kun SVG-tiedosto on asetettu, voit jatkaa sivuston suunnittelua. Voit rajata SVG-tiedoston rajaustyökalulla ja muuttaa sen kokoa suunnittelutarpeiden mukaan.

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.

  1. 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.
    Ryhmän tai polun valitseminen
  2. Kopioi valittu ryhmä tai polku näppäinyhdistelmällä Ctrl+C (Windows) tai komento+C (Mac).

  3. Liitä Adobe Musessa valittu ryhmä tai polku verkkosivuston suunnittelualueelle Muoto-näkymässä näppäinyhdistelmällä Ctrl+V tai komento+V.

    Verkkosivun suunnittelualue

    Liitetty SVG-tiedosto näkyy Kohteet-paneelissa.

    Kohteet-paneeli

SVG-tiedostojen tuonti taustan ja selaimen täyttöihin

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

  2. Valitse Lisää kuva. Siirry SVG-tiedoston sijaintiin, valitse tiedosto ja valitse Avaa.

    Valitse Lisää kuva
  3. Määritä haluamasi Sovitus- ja Sijainti-asetukset.

    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.

SVG-kuvien lisääminen diaesityksiin

Adobe Musen versiossa 2015.1 ja uudemmissa versioissa voit lisätä SVG-kuvia diaesityksiin. Vedä ja pudota ensin Miniatyyri-widget widgetkirjastosta. Valitse sitten vektorikuvat Creative Cloud Librariesista ja sijoita ne diaesitykseen.

Video-opas

Video-opas
Danielle Beaumont

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö