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, számos optimalizálási beállítás közül választhat, a Device Central szoftverrel pedig meggyőződhet arról, hogy jól mutatnak majd a fájlok a weben.

Webgrafikák ismertetése

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.

Megjegyzés:

Számos Illustrator-sablon készült kimondottan a webhez, többek között weboldalak és szalagcímek. Válassza a Fájl > Új létrehozása sablonból menüpontot, majd válasszon egy sablont.

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 raszterezettgrafiká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á,ha600%-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 anagyonapsó módosítások is befolyásolhatják az objektum rasztereződését.

A Pixeles előkép kikapcsolva (fent), illetve bekapcsolva (lent)
A Pixeles előkép kikapcsolva (fent), illetve bekapcsolva (lent)

Megjegyzés:

A képpontrács érzékeny a vonalzó origójára (0,0). A vonalzó origójának mozgatásakor az Illustrator más módon raszterezi a rajzelemet.

Az Adobe Device Central használata az Illustrator programmal

A Device Central segítségével az Illustrator programban megtekinthető, hogyan jelennek meg az Illustrator fájlok különböző mobil eszközökön.

A grafikusok például az Illustrator program segítségével tapétát tervezhetnek mobiltelefonokhoz, majd a fájl létrehozását követően könnyedén tesztelhetik azt számos különböző telefonon. A grafikus ezután módosításokat végezhet, például oly módon, hogy a fájl több készüléken is jól nézzen ki, vagy létrehozhat két külön fájlt, amelyek felölelik a népszerű telefonkijelző-méretek széles körét.

Az Illustrator megnyitása az Adobe Device Central programban

  1. Indítsa el a Device Central alkalmazást.
  2. Válassza a File (Fájl) menü New Document In (Új dokumentum megnyitása ebben) elemének Illustrator parancsát.

    A Device Central ablakában megjelenik a New Document (Új dokumentum) lap az új mobil dokumentum a választott alkalmazásban történő létrehozásához szükséges beállításokkal.

  3. Végezze el a szükséges módosításokat, például válassza ki a Player verzióját, a megjelenítési méretet, a Flash verzióját vagy a tartalom típusát.
  4. Tegye az alábbiak egyikét:
    • Jelölje be a Custom Size for All Selected Devices (Egyedi méret az összes eszközhöz) jelölőnégyzetet, majd adja meg a szélességet és a magasságot (képpontban).

    • A Device Sets (Eszközkészletek) vagy az Available Devices (Elérhető eszközök) listában jelöljön ki egy vagy több eszközt.

  5. Több eszköz kijelölése esetén a Device Central választja ki a méretet. Amennyiben más méretet szeretne megadni, kattintson egy másik eszközre vagy eszközkészletre.
  6. Kattintson a Create (Létrehozás) gombra.

    A választott alkalmazásban ekkor megnyílik a szerkesztésre kész új mobil dokumentum.

Mobil tartalom létrehozása az Adobe Device Central és az Illustrator használatával

  1. Az Illustrator alkalmazásban válassza a Fájl menü Új parancsát.
  2. Az Új dokumentumprofil listából válassza a Mobil és eszközök elemet.
  3. Kattintson a Device Central gombra az Illustrator párbeszédpaneljének bezárásához és a Device Central program megnyitásához.
  4. Válasszon tartalomtípust.

    A bal oldali Available Devices lista a kiválasztott tartalomtípusnak megfelelően frissül, és az adott tartalomtípust támogató eszközöket jeleníti meg.

  5. A Device Central programban jelöljön ki több eszközt, vagy egy eszközkészletet.

    A kijelölt eszközöktől és a tartalomtípustól függően a Device Central egy vagy több rajztáblaméret létrehozását javasolja. A dokumentumok egyenkénti létrehozásához válasszon egy javasolt dokumentumméretet (vagy jelölje be a Custom Size for All Selected Devices (Egyedi méret az összes eszközhöz) jelölőnégyzetet, majd adjon meg egyéni szélességet és a magasságot).

  6. Kattintson a Create (Létrehozás) gombra.

    Az Illustrator programban ekkor megnyílik egy üres, megadott méretű AI fájl. Az új fájl alapértelmezés szerint az alábbi paraméterekkel rendelkezik:

    • Színmód: RGB

    • Raszterezés felbontása: 72 ppi

  7. Töltse ki tartalommal az üres AI fájlt az Illustrator programban.
  8. Amikor elkészült, válassza a Fájl > Mentés webre és eszközökhöz parancsot.
  9. A Mentés webre és eszközökhöz párbeszédpanelen adja meg a kívánt formátumot és módosítsa az egyéb exportálási beállításokat szükség szerint.
  10. Kattintson a Device Central gombra.

    A Device Central Emulator lapján ekkor megjelenik egy, a megadott exportálási beállításokkal rendelkező ideiglenes fájl. A tesztelés folytatásához kattintson duplán egy másik eszköz nevére a Device Sets vagy az Available Devices listában.

  11. Amennyiben a fájl a Device Central programban való előzetes megtekintése után módosítani kívánja azt, térjen vissza az Illustrator programhoz.
  12. Az Illustrator Mentés webre és eszközökhöz párbeszédpanelén végezze el a kívánt módosításokat, például adjon meg más formátumot vagy minőséget az exportáláshoz.
  13. A fájl az új exportálási beállításokkal való ismételt teszteléséhez kattintson a Device Central elemre.
  14. Ha meg van elégedve az eredménnyel, kattintson a Mentés gombra az Illustrator Mentés webre és eszközökhöz párbeszédpanelén.

    Megjegyzés:

    Amennyiben csak meg kívánja nyitni a Device Central programot az Illustratorból (fájl létrehozása és tesztelése nélkül), kattintson a Fájl menü Device Central parancsára.

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.

Ez a munka a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 3.0 Unported licenc alatt lett közzétéve.  A Twitter™ és Facebook közzétételeket a Creative Commons jogi feltételei nem szabályozzák.

Jogi közlemények   |   Online adatvédelmi nyilatkozat