Příručka uživatele Zrušit

Osvědčené postupy pro vytváření webových grafik

  1. Příručka uživatele aplikace Illustrator
  2. Seznamte se s aplikací Illustrator
    1. Úvod do aplikace Illustrator
      1. Co je nové v aplikaci Illustrator
      2. Časté dotazy
      3. Systémové požadavky aplikace Illustrator
      4. Illustrator pro zařízení s procesory Apple Silicon
    2. Pracovní plocha
      1. Základy práce s pracovní plochou
      2. Vytváření dokumentů
      3. Nástroje
      4. Výchozí klávesové zkratky
      5. Přizpůsobení klávesových zkratek
      6. Úvod ke kreslicím plátnům
      7. Správa kreslicích pláten
      8. Přizpůsobení pracovní plochy
      9. Panel Vlastnosti
      10. Nastavení předvoleb
      11. Dotyková pracovní plocha
      12. Podpora zařízení Microsoft Surface Dial v aplikaci Illustrator
      13. Obnovení, vrácení zpět a automatizace
      14. Otočení zobrazení
      15. Pravítka, mřížky a vodítka
      16. Usnadnění v aplikaci Illustrator
      17. Bezpečný režim
      18. Zobrazení kresby
      19. Používání panelu Touch Bar s aplikací Illustrator
      20. Soubory a předlohy
      21. Synchronizace nastavení pomocí služby Adobe Creative Cloud
    3. Nástroje v aplikaci Illustrator
      1. Výběr
        1. Přehled
        2. Výběr
        3. Přímý výběr
        4. Laso
        5. Kreslicí plátno
      2. Navigace
        1. Přehled
        2. Lupa
        3. Otočení zobrazení
      3. Malovat
        1. Přehled
        2. Přechod
        3. Vytváření tvaru
      4. Text
        1. Přehled
        2. Text
        3. Text na cestě
  3. Illustrator na iPadu
    1. Úvod do aplikace Illustrator na iPadu
      1. Přehled aplikace Illustrator pro iPad
      2. Časté dotazy k aplikaci Illustrator pro iPad
      3. Systémové požadavky | Illustrator pro iPad
      4. Co můžete dělat v aplikaci Illustrator na iPadu a co ne
    2. Pracovní plocha
      1. Illustrator na pracovní ploše iPad
      2. Dotykové zkratky a gesta
      3. Klávesové zkratky aplikace Illustrator pro iPad
      4. Správa nastavení aplikace
    3. Dokumenty
      1. Práce s dokumenty v aplikaci Illustrator pro iPad
      2. Import dokumentů aplikace Photoshop a Fresco
    4. Výběr a uspořádání objektů
      1. Vytvoření opakujících se objektů
      2. Prolnutí objektů
    5. Kreslení
      1. Kreslení a úpravy cest
      2. Kreslení a úpravy tvarů
    6. Text
      1. Práce s textem a písmy
      2. Vytvoření textových návrhů podél cesty
      3. Přidejte si vlastní písma
    7. Práce s obrázky
      1. Vektorizujte rastrové obrázky
    8. Barvy
      1. Použití barev a přechodů
  4. Dokumenty v cloudu
    1. Základní informace
      1. Práce s dokumenty v cloudu aplikace Illustrator
      2. Sdílejte a spolupracujte na dokumentech v cloudu Illustrator
      3. Rozšiřte své cloudové úložiště pro aplikaci Adobe Illustrator
      4. Dokumenty v cloudu aplikace Illustrator | Časté dotazy
    2. Řešení problémů
      1. Odstraňování problémů s vytvářením nebo ukládáním dokumentů aplikace Illustrator v cloudu
      2. Odstraňování problémů s dokumenty aplikace Illustrator v cloudu
  5. Přidání a úpravy obsahu
    1. Kreslení
      1. Základy kreslení
      2. Úpravy cest
      3. Nakreslení pixelově dokonalé kresby
      4. Kreslení pomocí nástroje pero, zakřivení nebo tužka
      5. Kreslení jednoduchých čar a tvarů
      6. Vektorizace obrazu
      7. Zjednodušení cesty
      8. Definování perspektivních mřížek
      9. Nástroje pro práci se symboly a sady symbolů
      10. Úpravy segmentů cest
      11. Návrh květiny v 5 snadných krocích
      12. Perspektivní kreslení
      13. Symboly
      14. Kreslení cest zarovnaných podle obrazových bodů v pracovních postupech určených pro web
    2. 3D efekty a materiály Adobe Substance
      1. Informace o 3D efektech v aplikaci Illustrator
      2. Vytvoření 3D grafiky
      3. Mapování kresby na 3D objekty
      4. Vytváření 3D objektů
      5. Vytváření 3D textu
    3. Barvy
      1. O barvách
      2. Vybírání barev
      3. Používání a vytváření vzorků barev
      4. Přizpůsobení barev
      5. Používání panelu Motivy Adobe Color
      6. Barevné skupiny (harmonie)
      7. Panel Barevné motivy
      8. Přebarvení kresby
    4. Malování
      1. O malování
      2. Malba s výplněmi a tahy
      3. Skupiny živé malby
      4. Přechody
      5. Stopy štětce
      6. Průhlednost a režimy prolnutí
      7. Aplikace tahu na objekt
      8. Vytváření a úpravy vzorků
      9. Mřížky
      10. Vzorky
    5. Výběr a uspořádání objektů
      1. Vybírání objektů
      2. Vrstvy
      3. Seskupení a rozdělení objektů
      4. Přemístění, zarovnání a rozmístění objektů
      5. Překrývání objektů    
      6. Zamknutí, skrytí a odstranění objektů
      7. Duplikování objektů
      8. Otočení a zrcadlení objektů
    6. Změna tvaru objektů
      1. Oříznutí obrazů
      2. Transformace objektů
      3. Kombinování objektů
      4. Vyjímání, rozdělování a ořezávání objektů
      5. Pokřivení loutky
      6. Změna velikosti, zkosení a deformování objektů
      7. Prolnutí objektů
      8. Změna tvaru s použitím obálek
      9. Změna tvaru objektů pomocí efektů
      10. Vytvářejte nové tvary pomocí nástroje Shaper a nástroje pro vytváření tvaru
      11. Práce s živými rohy
      12. Vylepšené pracovní postupy změny tvarů s podporou dotykového ovládání
      13. Úpravy ořezových masek
      14. Živé tvary
      15. Vytváření tvarů pomocí nástroje pro vytváření tvaru
      16. Globální úpravy
    7. Text
      1. Přidání textu a práce s textovými objekty
      2. Správa textové oblasti
      3. Písma a typografie
      4. Formátování textu
      5. Import a export textu
      6. Formátování odstavců
      7. Speciální znaky
      8. Vytvoření textu na cestě
      9. Znakové a odstavcové styly
      10. Záložky
      11. Text
      12. Nalezení chybějících písem (pracovní postup pro Typekit)
      13. Aktualizace textu z aplikace Illustrator 10
      14. Písma pro arabštinu a hebrejštinu
      15. Písma | Nejčastější dotazy a tipy pro řešení potíží
      16. Vytvoření efektu 3D textu
      17. Návrhy pro tvůrčí typografii
      18. Změna velikosti a natočení textu
      19. Mezery mezi řádky a znaky
      20. Dělení slov a zalamování řádků
      21. Vylepšení textu
      22. Slovníky pro kontrolu pravopisu
      23. Formátování asijských znaků
      24. Sazby pro asijská písma
      25. Vytváření textových návrhů s prolnutím objektů
      26. Vytvoření textového plakátu pomocí vektorizace obrazu
    8. Vytváření zvláštních efektů
      1. Práce s efekty
      2. Grafické styly
      3. Vytvoření vrženého stínu
      4. Atributy vzhledu
      5. Vytvoření skici nebo mozaiky
      6. Vržené stíny, záře a prolnutí okrajů
      7. Přehled efektů
    9. Webové grafiky
      1. Osvědčené postupy pro vytváření webových grafik
      2. Grafy
      3. SVG
      4. Vytváření animací
      5. Řezy a obrazové mapy
  6. Import, export a ukládání
    1. Importovat
      1. Importování souborů kresby
      2. Import bitmapových obrazů
      3. Importování kreseb z aplikace Photoshop
      4. Umístění více souborů | Illustrator CC
      5. Zrušení vložení obrazů
      6. Import souborů Adobe PDF
      7. Import souborů EPS, DCS a AutoCAD
      8. Informace o vazbách
    2. Creative Cloud knihovny v aplikaci Illustrator 
      1. Creative Cloud knihovny v aplikaci Illustrator
    3. Uložit
      1. Ukládání kresby
    4. Export
      1. Používání kresby Illustrator v aplikaci Photoshop
      2. Export kresby
      3. Shromažďování zdrojů a hromadný export
      4. Sbalení souborů
      5. Vytváření souborů Adobe PDF
      6. Extrahování CSS | Illustrator CC
      7. Volby Adobe PDF
      8. Informace o souboru a metadata
  7. Tisk
    1. Příprava k tisku
      1. Nastavení dokumentů pro tisk
      2. Změna velikosti a orientace stránky
      3. Určení ořezových značek pro oříznutí nebo zarovnání
      4. Začínáme s velkým plátnem
    2. Tisk
      1. Přetisk tahu
      2. Tisk s použitím správy barev
      3. PostScriptový tisk
      4. Přednastavení tisku
      5. Tiskové značky a spadávky
      6. Tisk a ukládání průhledných kreseb
      7. Přesahy
      8. Tisk barevných výtažků
      9. Tisk přechodů, mřížek a barevných prolnutí
      10. Bílý přetisk
  8. Automatizace úloh
    1. Slučování dat pomocí panelu Proměnné
    2. Automatizace pomocí skriptů
    3. Automatizace pomocí akcí
  9. Řešení problémů 
    1. Chyby aplikace
    2. Obnovení souborů po zhroucení
    3. Problémy se soubory
    4. Problémy s ovladačem grafického zařízení
    5. Problémy se zařízením Wacom
    6. Problémy se soubory DLL
    7. Problémy s pamětí
    8. Problémy se souborem předvoleb
    9. Problémy s písmy
    10. Problémy s tiskárnou
    11. Sdílení hlášení o zhroucení se společností Adobe

Aplikace Illustrator poskytuje řadu nástrojů k vytváření rozvržení pro webové stránky nebo k vytváření a optimalizaci webové grafiky. Používáte například bezpečné webové barvy, upravujete vyvážení kvality obrazu pomocí velikosti souboru a pro svou grafiku vybíráte nejlepší formát souboru. Webové grafiky mohou využívat řezy a obrazové mapy a lze použít i různé možnosti optimalizace, díky kterým se vaše soubory správně zobrazí na webu.

O webových grafikách

Když navrhujete grafiky pro web, musíte zvážit jiné otázky, než když navrhujete grafiky pro tisk. 

Chcete-li informovaně rozhodovat o webových grafikách, zapamatujte si následující tři pravidla:

Používejte bezpečné webové barvy.

Barva je často klíčovou stránkou kresby. Ale barvy, které vidíte na své kreslicí ploše, nemusí být nutně stejné jako barvy, které se objeví v prohlížeči webu na počítači někoho jiného. Můžete zabránit rozkladu barev (to je metoda simulace nedostupných barev) a dalším problémům s barvami, když při vytváření webových grafik dodržíte dvě preventivní zásady. Za prvé vždy pracujte v barevném režimu RGB. Za druhé používejte bezpečné webové barvy.

Nastavte vyvážení kvality obrazu a velikosti souboru.

Vytváření grafických souborů s malou velikostí je klíčové při distribuci obrazů na webu. Menší soubory mohou webové servery ukládat a přenášet efektivněji a prohlížeče mohou načítat obrazy rychleji. Velikost souboru a odhadovaný čas stahování webové grafiky si můžete zobrazit v dialogovém okně Uložit pro web a zařízení.

Zvolte nejlepší formát souboru pro svou grafiku.

Různé typy grafik vyžadují uložení v různých formátech souboru, aby se zobrazovaly co nejlépe a jejich velikost byla vhodná pro web. Další informace o specifických formátech viz Volby optimalizace webových grafik.

Poznámka:

V aplikaci Illustrator je mnoho předloh vytvořených speciálně pro web, včetně webových stránek a proužků. Zvolte Soubor > Nový z předlohy a zvolte předlohu.

O režimu náhledu obrazových bodů

Do aplikace Illustrator byla přidána vlastnost zarovnání podle obrazových bodů, aby weboví designéři mohli vytvářet správné pixelové návrhy. Je-li pro objekt umožněna vlastnost zarovnání podle obrazových bodů, všechny vodorovné a svislé segmenty v objektu se zarovnají k mřížce obrazových bodů, a taky tak získají čistý vzhled. Každá transformace, pokud je tato vlastnost pro objekt nastavena, je znovu zarovnána k mřížce obrazových bodů podle nových souřadnic. Tuto vlastnost lze umožnit volbou možnosti Zarovnat k mřížce obrazových bodů v panelu Transformovat. Aplikace Illustrator také zahrnuje možnost Zarovnat nové objekty k mřížce obrazových bodů na úrovni dokumentu, která je k dispozici ve výchozím nastavení pro webové dokumenty. Pokud je tato vlastnost k dispozici, každé nové nakreslené objekty mají vlastnost zarovnání k mřížce obrazových bodů ve výchozím nastavení.

Další informace viz část Kreslení cest zarovnaných podle obrazových bodů v pracovních postupech určených pro web.

Když uložíte kresbu do bitmapového formátu, například JPEG, GIF nebo PNG, Illustrator rastruje kresbu s rozlišením 72 obrazových bodů na palec (ppi). Pomocí příkazu Zobrazení > Náhled obrazových bodů můžete zobrazit, jak budou objekty vypadat po rastrování. To je užitečné, zejména když chcete nastavit přesné umístění, velikost a vyhlazení objektů v grafice.

Abyste porozuměli způsobu, jakým Illustrator rozděluje objekty na obrazové body, otevřete soubor obsahující vektorové objekty, zvolte Zobrazení > Náhled obrazových bodů, a zvětšete kresbu tak, abyste viděli jednotlivé obrazové body. Umístění obrazových bodů určuje mřížka obrazových bodů, která dělí kreslicí plochu na dílky po 1 bodu (1/72 palce). Pokud zvýšíte zvětšení na 600 %, můžete zobrazit mřížku obrazových bodů.in toPokud objekt přemístíte, přidáte nebo transformujete, přitáhne se na mřížku obrazových bodů. Výsledkem je, že podél „zarovnaných“ okrajů objektu (obvykle levý a horní okraj) zmizí jakékoliv vyhlazení. Nyní odznačte příkaz Zobrazení > Přitahovat na obrazové body a přemístěte objekt. Tentokrát budete moci umístit objekt mezi linky mřížky. Všimněte si, jak to ovlivní vyhlazení objektu. Jak vidíte, velmi malé změny mohou ovlivnit způsob, jakým je objekt rastrovaný.

Náhled obrazových bodů vypnutý (nahoře) a zapnutý (dole)
Náhled obrazových bodů vypnutý (nahoře) a zapnutý (dole)

Poznámka:

Mřížka obrazových bodů závisí na počátku pravítek (0,0). Když posunete počátek pravítek, změní se způsob rastrování kreseb v aplikaci Illustrator.

Tipy pro vytváření obrazů aplikace Illustrator pro mobilní zařízení

Chcete-li optimalizovat grafický obsah pro mobilní zařízení, ukládejte kresby vytvořené v aplikaci Illustrator v libovolném formátu SVG, včetně SVG-t, který je speciálně navržen pro mobilní zařízení.

Abyste zajistili, že se obrazy vytvořené v aplikaci Illustrator zobrazí na mobilních zařízeních správně, postupujte podle následujících tipů:

  • K vytvoření obsahu použijte standard SVG. Použití SVG k publikování vektorových grafik na mobilních zařízeních umožňuje dosáhnout malé velikosti souborů, nezávislosti zobrazení, vynikající kontroly barev, možnosti změny velikosti a upravitelnosti textu (v rámci zdrojového kódu). Protože je formát SVG založený na XML, můžete do obrazů také doplnit interaktivitu, jako je zvýraznění, tipy nástrojů, speciální efekty, zvuk a animace.

  • Pracujte již od začátku v rámci konečných rozměrů cílového mobilního zařízení. Přestože SVG lze zvětšovat nebo zmenšovat, práce se správnou velikostí zajistí, aby výsledné grafiky měly optimalizovanou kvalitu a velikost pro cílové zařízení.

  • Nastavte barevný režim aplikace Illustrator na RGB. SVG se bude zobrazovat na zařízeních s rastrovými RGB displeji, například na monitoru.

  • Chcete-li zmenšit velikost souboru, zkuste zmenšit počet objektů (včetně skupin) nebo je zjednodušte (méně bodů). Použití menšího počtu bodů výrazně zmenší objem textových informací, které jsou potřebné k popisu kresby v souboru SVG. Chcete-li zmenšit počet bodů, vyberte Objekt > Cesta > Zjednodušit, vyzkoušejte různé kombinace a najděte vyvážení mezi kvalitou a počtem bodů.

  • Pokud to je možné, používejte symboly. Symboly definují vektory, které popisují objekt pouze jednou, ne vícekrát. To je užitečné v případě, že kresba obsahuje objekty, jako jsou pozadí tlačítek, které se používají opakovaně.

  • Při animování grafiky omezte počet použitých objektů a pokuste se objekty používat opakovaně kdykoliv to je možné, abyste zmenšili velikost souboru. Aplikujte animace na skupiny objektů, ne na jednotlivé objekty, abyste předešli opakování kódu.

  • Zvažte použití SVGZ, což je verze SVG komprimovaná algoritmem gzip. Komprese dokáže velmi výrazně zmenšit velikost souboru, v závislosti na jeho obsahu. Text může být obvykle silně komprimovaná, ale binárně kódovaný obsah, například vložené rastry (soubory JPEG, PNG nebo GIF), nelze významně komprimovat. Soubory SVGZ lze dekomprimovat v libovolné aplikaci, která rozbaluje soubory komprimované algoritmem gzip. Chcete-li úspěšně používat soubory SGVZ, zkontrolujte, zda cílové zařízení dokáže dekomprimovat soubory gzip.

Logo Adobe

Přihlaste se ke svému účtu.