Vie SVG ja läpinäkyvä PNG Gradientlystä

Kun haluat viedä SVG:n Gradientlystä, avaa suunnitelma Studiossa, valitse Vie ja sitten SVG. Sanat pysyvät tekstinä omissa tiedostoon pakatuissa fonteissaan. Muodot, kuvakkeet, kaaviot ja taulukot säilyvät vektoreina, Mark ja valokuvat ovat kuvia tiedoston sisällä. Läpinäkyvää PNG:tä varten valitse PNG ja ota Läpinäkyvä tausta käyttöön: saat vain omat elementtisi ilman Markia. Molemmat kuuluvat Prohon.

SVG, PNG vai läpinäkyvä PNG

Muotojen yleisiä eroja käsittelee SVG ja PNG. Tämä opas kertoo, mitä Gradiently tallentaa kumpaankin tiedostoon.

Mikä säilyy vektorina SVG-viennissä

SVG sopii siis otsikkoon, jonka pitää pysyä terävänä 4K-näytöllä, tai asetteluun, jonka kehittäjä toteuttaa sivulle. Se sopii huonommin taustan suurentamiseen mainostauluksi. Mark piirretään kuvaksi suunnitelman omassa koossa. Jos tarvitset suuremman taustan, vie PNG suuremmassa koossa. Mark on elävä renderöinti, ei kiinteä joukko vektorimuotoja, joten sitä ei voi muuttaa poluksi.

SVG:n vienti

1. 1

   Valitse sivu

   SVG sisältää yhden sivun. Valitse karusellin tai esityksen sivu viennissä ja toista muille.

2. 2

   Valitse SVG

   Avaa Vie ja valitse SVG, jonka kuvaus on skaalautuva, teksti pysyy tekstinä. Esikatselu näyttää sivun koon.

3. 3

   Lataa

   Valitse Lataa SVG. Tiedosto tallentuu selaimesi latauskansioon.

4. 4

   Käytä verkossa

   Sijoita kiinteä grafiikka img-tagilla tai lisää SVG suoraan HTML:ään, jos haluat tyylitellä tekstiä CSS:llä.

<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">

<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
  <!-- paste the contents of summer-launch.svg here -->
</div>

SVG avautuu myös Figman ja Illustratorin kaltaisissa suunnittelutyökaluissa, jotka lukevat tekstin ja vektorimuodot muokattaviksi tasoiksi. Se sopii luovutettavaksi henkilölle, joka sovittaa asettelun Gradientlyn ulkopuoliseen muotoon, kuten painetun kyltin omaan pohjaan, tai kehittäjälle, joka toteuttaa suunnitelmastasi sivun osan. Lähetä rinnalle PNG visuaaliseksi vertailuksi, jotta Markin oikea ilme on selvä.

Läpinäkyvän PNG:n vienti

Valitse viennissä PNG ja ota Läpinäkyvä tausta käyttöön. Kaikki sijoittamasi elementit, teksti, logo, muodot ja valokuvat, säilyvät. Mark jää pois, ja elementtien ympäristö on läpinäkyvä. Valitse koko enintään 4K. Näin viety teksti, logo ja tunnuslause voidaan sijoittaa tuotekuvan, toisessa editorissa tehdyn videon tai värillisen dian päälle.

• Tarkista tekstiväri kohdetta vasten. Tummalle Markille viety vaalea teksti katoaa valkoisella sivulla. Vaihda tummaan musteeseen ennen vientiä, jos kohde on vaalea.
• Rajaa sivu sisällön lähelle. Läpinäkyvä PNG säilyttää koko sivukoon. Pienennä sivua lähemmäs elementtejä ennen vientiä, jos haluat tiiviin tiedoston.
• Säilytä molemmat logoversiot. Vie yksi tummalle ja toinen vaalealle pohjalle, kuten brändipaketissa. Logo liukuväritaustalla kertoo miksi.
• Käytä PNG:tä, älä JPEG:iä. JPEG ei tue läpinäkyvyyttä, joten läpinäkyvä suunnitelma saa siinä tasaisen taustan.

Läpinäkyvän PNG:n sijoittaminen verkkosivulle

Läpinäkyvä PNG asettuu siististi minkä tahansa CSS-taustan päälle. Se on kätevää, kun teksti pysyy samana mutta tausta vaihtuu osion tai teeman mukaan. Aseta liukuväri alle ja grafiikka sen päälle.

.launch-banner {
  aspect-ratio: 1200 / 600;
  background:
    url("/images/launch-words.png") center / contain no-repeat,
    linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}

Päinvastaisen tapauksen, läpinäkyvyyteen häipyvän CSS-liukuvärin, esittelee läpinäkyvä CSS-liukuväri. Kaikki tiedostomuodot kokoaa suunnitelmien vienti: PNG, JPEG, PDF, video ja GIF.