Gyakorlati tanácsok webgrafikák készítéséhez

Az Illustrator megannyi eszközt biztosít weblapelrendezések létrehozásához, illetve webgrafika létrehozásához és optimalizálásához. Használhat például webes színeket, megkeresheti az egyensúlyt a képminőség és a fájlméret között, valamint kiválaszthatja a grafikának leginkább megfelelő fájlformátumot. A webgrafikáknál szeleteket és képzónákat is felhasználhat és számos optimalizálási beállítás közül választhat, hogy meggyőződjön arról, hogy jól mutatnak majd a fájlok a weben.

Amikor a webre készít grafikát, más szempontokat kell figyelembe vennie, mint amikor nyomtatásba szánt grafikát készít. 

Annak érdekében, hogy a kellő információk alapján hozhasson döntéseket a webgrafikákkal kapcsolatban, tartsa szem előtt a következő három irányelvet:

Használjon webre ajánlott színeket.

A szín sokszor a rajzelem kulcsfontosságú összetevője. Nem biztos azonban, hogy valaki más rendszerén a webböngészőben ugyanazon színek fognak megjelenni, amelyeket rajztábláján lát. Az árnyalás (a nem elérhető színek szimulációjának módszere) és egyéb színproblémák is megelőzhetők, ha két elővigyázatossági lépést követ a webgrafikák létrehozásakor. Először is mindig RGB színmódban dolgozzon. Másrészt webes színeket használjon.

Keresse meg az egyensúlyt a képminőség és a fájlméret között.

A grafikafájlok kis mérete alapvető a weben való terjesztésben. Kisebb fájlméretek esetén a webkiszolgálók hatékonyabban tudják tárolni és továbbítani a képeket, az olvasók pedig gyorsabban le tudják tölteni azokat. A webgrafikák méretét és becsült letöltési idejét a Mentés webre és eszközökhöz párbeszédpanelen lehet megtekinteni.

Válassza az adott grafikához legjobban illő fájlformátumot.

A különböző típusú grafikákat különböző fájlformátumokban kell menteni ahhoz, hogy megjelenésük a legjobb legyen, és fájlméretük alkalmas legyen a webes használatra. Az egyes formátumokról további információt a Webgrafikák optimalizálási beállításai című témakörben talál.

Pixeles előkép mód ismertetése

Az Illustrator már lehetővé teszi a képpontra igazított munkát, amellyel a weblaptervezők képpontra pontosan tervezhetnek. Amikor egy objektum képpontra igazított beállítású, akkor minden vízszintes és függőleges vonalszakasza a képpontrácshoz fog igazodni, ami penge éles megjelenésű vonalakat eredményez. A beállítás bekapcsolt állapotában az objektum minden átalakítása után, az új koordinátáján is igazodni fog a képpontrácshoz. Ez a tulajdonság az Átalakítás panel Képpontrácshoz igazítás beállításával kapcsolható be. Az Illustrator lehetővé teszi az „Új objektumok képpontrácshoz igazítása” tulajdonság dokumentumszintű beállítását is, amely webes dokumentumok esetén alapértelmezett. Ha ez a beállítás be van kapcsolva, akkor minden megrajzolt új objektum alapértelmezés szerint képpontra igazított beállítású lesz.

További tudnivalók: Képpontra igazított görbék rajzolása internetes munkákhoz.

Ha bittérképes formátumban (például JPEG, GIF vagy PNG) menti a rajzelemet, az Illustrator 72 képpont/hüvelyk felbontással raszterezi azt. A raszterezett objektumok előnézetét a Nézet > Pixeles előkép paranccsal tekintheti meg. Ez különösen akkor hasznos, ha az objektumok pontos elhelyezését, méretét és élsimítását is szabályozni kívánja a raszterezett grafikán .

Annak megértéséhez, hogy hogyan osztja fel az Illustrator az objektumokat képpontokra, nyisson meg egy fájlt, amely vektoros objektumokat is tartalmaz, válassza a Nézet > Pixeles előkép menüpontot, és nagyítsa fel a rajzelemet annyira, hogy az egyes képpontokat is lássa. A képpontok elhelyezkedését a képpontrács szabályozza, amely 1 pontos (1/72 hüvelykes) közökre osztja fel a rajztáblát. A képpontrács akkor válik láthatóvá, ha 600%-os nézetre nagyít. Az objektum áthelyezés, elhelyezés vagy átalakítás után is a képpontrácsra fog illeszkedni. Ennek eredményeképpen az objektum „illesztett” szegélyei mentén (ez általában a bal oldali és a felső szegély) eltűnik az élsimítás. Szüntesse meg a Nézet > Képponthoz igazítás menüpont kijelölését, és helyezze át az objektumot. Most már a rácsvonalak közé is elhelyezhető az objektum. Figyelje meg, hogyan befolyásolja ez az objektum élsimítását. Amint látja, már a nagyon apró módosítások is befolyásolhatják az objektum rasztereződését.

Tanácsok mobil eszközökre szánt Illustrator-képek készítéséhez

A mobil eszközökre szánt grafikai tartalom optimalizálásához mentse az Illustrator alkalmazásban létrehozott grafikát bármely SVG-formátumba, beleértve a speciálisan mobil eszközökhöz tervezett SVG-t formátumot is.

Kövesse az alábbi tanácsokat annak érdekében, hogy az Illustrator alkalmazásban készült képek megfelelően jelenjenek meg mobil eszközökön:

• Használja az SVG szabványt a tartalom létrehozásakor. Az SVG használata a vektorgrafikák mobil eszközökön történő közzétételére kis fájlméretet, képernyőfüggetlenséget, kiváló színvezérlést, nagyítási lehetőséget és szerkeszthető szöveget eredményez (a forráskódban). Mivel az SVG XML alapú, a képek interaktivitással (például kiemelés, eszköztippek, különleges hatások, hang és animációk) is felruházhatók.

• Ajánlott kezdettől fogva a megcélzott mobil eszköz(ök) végső dimenzióin belül dolgozni. Bár az SVG formátum méretezhető, a helyes méret használata a készítés során biztosítja, hogy a végleges képek minősége és mérete az adott eszközhöz vagy eszközökhöz legyen optimalizálva.

• Állítsa a színmódot RGB-re az Illustratorban. Az SVG-fájlok RGB-raszterképet megjelenítő eszközökön, például a monitoron jelennek meg.

• A fájlméret csökkentése érdekében próbálja csökkenteni az objektumok (és csoportok) számát, hogy kevésbé összetett legyen (kevesebb pontot tartalmazzon). Kevesebb pont használata jelentősen csökkenti az SVG fájlban a grafika leírására szükséges szöveges adatok mennyiségét. Mutasson az Objektum menü Görbe pontjára, majd válassza az Egyszerűsítés parancsot a pontok számának csökkentéséhez, majd próbáljon ki különböző kombinációkat, amíg meg nem találja az egyensúlyt a minőség és a pontok száma között.

• Ha lehetséges, használjon szimbólumokat. A szimbólumok az objektumokat leíró vektorok egyszeri definiálására szolgálnak. Ez akkor hasznos, ha a grafika ismételten felhasznált objektumokat (például gombokat) tartalmaz.

• A képek animálásakor a fájlméret csökkentése érdekében korlátozza a használt objektumok számát, és igyekezzen minél többször újra felhasználni azokat. A kód ismétlődésének elkerülése végett az animációkat ne egyedi objektumokra, hanem objektumcsoportokra alkalmazza.

• Vegye fontolóra az SVGZ formátum használatát, amely az SVG tömörített változata. A tömörítés bizonyos tartalmak esetén látványosan csökkentheti a fájlméretet. A szöveg rendszerint jól tömöríthető, a bináris kódolású tartalom – például a beágyazott raszterek (JPEG, PNG vagy GIF formátumú fájlok) viszont nem tömöríthetők jelentősen. Az SVGZ fájlokat bármely olyan alkalmazás ki tudja csomagolni, amely képes a gzip programmal tömörített fájlok kibontására. Ellenőrizze, hogy a megcélzott mobil eszköz képes-e erre.