Yleistä

Ei ole helppoa päättää miten viet kuvasi käytettäväksi Edge Animate -ohjelmistoon, kun ottaa huomioon erilaisten grafiikkaformaatien määrän. Edge Animate tukee PNG-, GIF-, JPG- ja SVG-kuvia. Tämä ohje selittää eri kuvaformaattityypit ja milloin mitäkin käytetään.

Esimerkkejä eri formaateista

JPEG

JPEG-(tai JPG)-kuvilla on usein tehokkaampi pakkaus kuin PNG-kuvilla, mistä seuraa pienempi tiedoston koko. Käytä JPEG-kuvia aina kun et tarvitse läpinäkyvyyttä (esimerkiksi taustakuvat). Noin 90% tapauksista antaa JPEGillä pienemmän tiedoston, mikä lyhentää sommitelmiesi latausaikaa. Useimmat suunnittelutyökalut tarjoavat JPEGin viennin yhteyteen laadukkaan vaihtoehdon, mikä on hyödyllinen asia kun yritetään saavuttaa optimaalinen tasapaino kuvan koon ja laadun välillä. Mitä huonompi laatu, sitä pienempi tiedoston koko, ja päinvastoin. JPEG-tiedostot ovat rasteroituja ja ne pikselöityvät suurennettaessa.

PNG

PNG-tiedostot ovat hyvä vaihtoehto kun tarvitsee käyttää läpinäkyviä kuvia. PNG tukee myös alfaläpinäkyvyyttä, mikä tekee PNG:stä ihanteellista kun luodaan grafiikkaa, jossa on läpikuultavia värejä. PNG-tiedostot ovat rasteroituja ja ne pikselöityvät suurennettaessa.

PNG:llä on kolme pääformaattia.
(On olemassa myös animoitua PNG:tä, joka on suuri GIF:in haastaja, muttta valitettavasti sille ei ole kovin laajaa selaintukea.)

PNG-8

Photoshopista tai Illustratorista viety PNG-8 ei tue alfaläpinäkyvyyttä, mikä tarkoittaa, että jokainen pikseli on joko läpinäkyvä tai läpinäkymätön, joten kaarissa tai vinoissa reunoissa näkyy jonkinverran sahalaitaa (katso grafiikka yllä). Jos kuitenkin grafiikkasi sisältää suoria viivoja ja tarvitset läpinäkyvyyttä (esimerkiksi sininen neliö läpinäkyvällä taustalla), PNG-8 antaa optimaalisen tiedostokoon.

PNG-24

PNG-24 tukee alfaläpinäkyvyyttä, mikä tarkoittaa, että sillä saa aikaan hienoja läpikuultavuuden porrastuksia. Tämä on suosituin formaatti Edge Animatessa, koska läpinäkyvät PNG:t antavat terävän grafiikan ja tuetun läpinäkyvyyden, jolloin voit kerrostaa alkiosi.

PNG-32

PNG-32 on samanlainen kuin PNG-24 sillä erolla, että se tarjoaa 8 bitin läpinäkyvyyden.

SVG

SVG säilyttää vektorisisällön viennissä, joten se skaalautuu selaimessa pikselöitymättä. Tämänhetkinen Edge Animate käsittelee SVG-tiedostoja litistettyinä kuvina, joten kun sisältösi tuodaan Edge Animateen, sitä ei voi jatkoeditoida (vaikka voit aina päivittää ja uudelleentallentaa grafiikkasi lennossa piirustusohjelmassasi.) SVG:tä tulisi suuren tiedostokoon takia käyttää vain silloin kun grafiikkaa tarvitsee skaalata. Toistaiseksi on turvallisempi käyttää webissä PNG:tä, koska selainten välisessä tuessa on vielä ongelmia.

Käytettäessä Illustratoria SVG:n viemiseen on syytä pitää mielessä, että se mitä näet, ei ole mitä saat; AI vie myös piilotetut tiedostot ja kerrokset, mikä voi dramaattisesti kasvattaa tiedostokokoja. SVG:n koko tulee olemaan myös piirtoalueesi koko, joten muista leikata piirtoalueen koko grafiikkaasi sopivaksi ennen tallennusta.

SVG:stä on useita formaatteja, joilla on omat rajoituksensa. SVG 1.1 on W3C:n suosittelema formaatti.

GIF

GIF-tiedostot ovat hyödyllisiä, kun haluat grafiikkasi sisälle animaation (esimerkiksi odotusnäyttö). GIF tukee myös läpinäkyvyttä, sillä on kuitenkin samat rajoitukset kuin PNG-8:lla. PNG:ssä on yleensä parempi pakkaus, joka on laadukkaampi kuin GIF:in pakkaus, joten on suositeltavaa käyttää vain GIF:iä kun tarvitset grafiikan sisälle animaatiota.

Kuvan dimensiot

Internetin luonteesta johtuen grafiikan käsittelyssä tulee olemaan ongelmia tietyissä tilanteissa riippumatta käyttämästäsi tiedostoformaatista.

iOS-grafiikat

Tällä hetkellä iOS:n kuvat vääristyvät ja skaalautuvat jos niiden koko ylittää 1024 x 1024 pikseliä. Jos tarvitset tuota kokoa suurempia kuvia iOS:ssä käytettäväksi, pilko kuva kahteen tai useampaan pienempään kuvaan ja liitä ne yhteen käyttäen symbolia tai ryhmää Edge Animatessa.

Tunnetut ongelmat kuvan animaatiossa

Tämän kirjoittamisen hetkellä esiintyy muutamia tiettyihin animaatiotyyleihin liittyviä ongelmia, johtuen selaimen rajoituksista.

  • Alkion animoiminen pitkän aikajakson yli hyvin pieninä siirtyminä saattaa tehdä animaatiosta nykivää. Esimerkkinä kuvan animointi 100%:sta 103%:iin 2 sekunnin kuluessa. Ratkaisuna tähän voi lisätä siirtymän kestoa tai lisätä siirtymän määrää.
  • Joissain selaimissa voi aiheutua ongelmia, kun animoidaan hyvin suuria kuvia tai luodaan sellaisia siirtymiä, jotka aiheuttavat kuvaan suuren skaalauksen.

Lisätietoja

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ö