Uložte obrázky Photoshopu jako GIF pro web a mobilní zařízení

Uložením souborů pro web nebo mobilní zařízení v aplikaci Photoshop Creative Suite 5 se vytvoří menší verze obrázku, takže se rychle načte. Záměrem je udělat obrázek co nejmenší a zároveň zachovat vizuálně příjemný vzhled.

Pokud máte velké plochy plné barvy, použijte formát GIF.

Uložte obrázky Photoshopu jako GIF pro web a mobilní zařízení

Obrázek se spoustou plných barev dělá dobrý GIF.

Formát GIF není ztrátový ( neztrácí data, když je soubor komprimován v tomto formátu), ale snižuje velikost souboru použitím omezeného počtu barev v tabulce barev. Čím nižší je počet barev, tím menší je velikost souboru. Pokud jste někdy pracovali v barevném režimu Index, tento proces znáte.

Průhlednost je podporována formátem souboru GIF. Obecně platí, že soubory GIF nedělají dobrou práci na čemkoli, co vyžaduje hladké přechody z jedné barvy do druhé, protože formát špatně podporuje vyhlazování , což je metoda, kterou Photoshop používá k vyhlazení zubatých okrajů. Když obraz přechází z jedné barvy do druhé, Photoshop vytvoří více barev obrazových bodů, aby vytvořil rovnoměrné prolnutí mezi těmito dvěma barvami.

Protože vyhlazování potřebuje pro tento efekt vytvořit více barev, soubory GIF se obecně nedoporučují. Ve skutečnosti, když zmenšíte velikost GIF, budete lépe vidět pruhování (artefakt, který se na obrázku objeví jako pruhy), protože anti-aliasing nemůže probíhat s omezeným počtem barev dostupných v formát GIF.

Můžete samozřejmě dramaticky zvýšit počet barev, abyste vytvořili plynulejší přechod, ale pak riskujete, že vytvoříte monstrózní soubory, jejichž stahování trvá věčnost.

Uložit jako GIF

Když vyberete Soubor→Uložit pro web a zařízení, nejprve uvidíte dostupné možnosti formátu GIF. Mohou vám být jasnější, pokud máte otevřený obrázek (se spoustou plných barev).

Chcete-li uložit soubor pro web jako GIF, postupujte takto:

Vyberte Soubor → Uložit pro web a zařízení.

Zobrazí se dialogové okno Uložit pro web a zařízení.

V horní části klikněte na kartu 2 najednou.

Původní obrázek vidíte vlevo a optimalizovaný obrázek vpravo (nebo nahoře a dole, v závislosti na proporcích obrázku).

Ve spodní části displeje vidíte původní velikost souboru v porovnání s optimalizovanou velikostí souboru a také přibližnou dobu stahování. Důležitá je doba stahování. Většina lidí nečeká déle než deset sekund, než se webová stránka objeví, takže dobu stahování každého obrázku udržujte na pěti sekundách nebo méně.

Změňte rychlost stahování výběrem z nabídky Náhled (hledejte šipku v pravé horní části dialogového okna Uložit pro web a zařízení).

Z rozevíracího seznamu Přednastavení vyberte GIF 32 No Dither.

Už můžete vidět změnu. Photoshop vám dodává předvolby, ze kterých si můžete vybrat, nebo si můžete upravit a uložit své vlastní.

Vyberte, zda chcete na obraz použít rozklad, výběrem možnosti z rozevíracího seznamu Zadat algoritmus rozkladu.

Tato volba je čistě osobní. Protože můžete omezovat barvy, Photoshop může použít rozklad k smíchání obrazových bodů dostupných barev a simulovat chybějící barvy. Mnoho návrhářů volí možnost Bez rozkladu, protože rozklad může na obrázku vytvořit nepřirozené barevné skvrny.

Uložte obrázky Photoshopu jako GIF pro web a mobilní zařízení

Vyberte si z předvoleb nebo si vytvořte vlastní vlastní nastavení.

Pokud je váš obrázek na průhledné vrstvě a chcete tuto průhlednost na webové stránce zachovat, zaškrtněte políčko Průhlednost.

Tabulka barev v dialogovém okně Uložit pro web a zařízení

Když uložíte obrázek ve formátu GIF pomocí dialogového okna Uložit pro web a zařízení, na pravé straně dialogového okna se zobrazí tabulka barev obrázku. Tabulka barev je důležitá, protože nejenže umožňuje vidět barvy použité na obrázku, ale také umožňuje přizpůsobit tabulku barev pomocí možností ve spodní části.

Možná budete chtít přizpůsobit svou tabulku barev výběrem některých barev, aby byly bezpečné pro web, a uzamknutím barev, aby se při snížení počtu použitých barev neodrazily.

Chcete-li přizpůsobit tabulku barev, postupujte takto:

Pokud má váš obrázek jen několik barev, které chcete převést na barvy bezpečné pro web, vyberte nástroj Kapátko nalevo od dialogového okna Uložit pro web a zařízení a klikněte na barvu v optimalizovaném zobrazení.

Vzorkovaná barva je zvýrazněna v tabulce barev.

Klepněte na tlačítko Web Safe ve spodní části tabulky barev.

Když přejdete přes toto tlačítko, zobrazí se nápověda Posune/zruší posun vybraných barev na webový panel.

Objeví se kosočtverec označující, že barva je nyní bezpečná pro web.

Zamkněte barvy, které nechcete odstranit, když snížíte počet barev v tabulce barev.

Vyberte barvu pomocí nástroje kapátko nebo ji vyberte v tabulce barev a poté klikněte na tlačítko Zamknout barvu. V pravém dolním rohu se objeví bílý čtverec, který značí, že barva je uzamčena.

Pokud uzamknete 32 barev a poté zmenšíte tabulku barev na 24, některé ze zamčených barev budou odstraněny. Pokud se rozhodnete přidat barvy, tyto uzamčené barvy se vrátí jako první.

Uložte obrázky Photoshopu jako GIF pro web a mobilní zařízení

Přizpůsobte barvy pomocí tabulky barev v okně Uložit pro web a zařízení.

Jak se vytváří tabulka barev? Na základě zvolené metody algoritmu redukce barev funkce Uložit pro web a zařízení vzorkuje počet barev, které zadáte. Pokud je důležité, aby byly barvy na webu bezpečné, vyberte pro metodu možnost Omezující (Web); pokud chcete, aby váš obrázek vypadal lépe na většině monitorů, ale ne nutně bezpečný pro web, vyberte možnost Adaptive.

Chcete-li přidat nebo odstranit barvy z tabulky barev, použijte rozevírací nabídku Barvy nebo zadejte číslo.

Pokud váš obrázek používá průhlednost, zaškrtněte políčko Průhlednost v horní části dialogového okna Uložit pro web a zařízení.

Pamatujte, že průhlednost se počítá jako jedna z vašich barev v tabulce barev.

Zaškrtněte políčko Prokládané pouze v případě, že je váš obrázek GIF velký (25 kB nebo větší).

Výběr této možnosti způsobí, že se obrázek na webové stránce vytvoří v několika skenech – obrázek s nízkým rozlišením, který se rychle zobrazí a po dokončení stahování se obnoví obrázkem s vyšším rozlišením. Prokládání vytváří iluzi rychlejšího stahování, ale zvětšuje velikost souboru, takže jej používejte pouze v případě potřeby.

Klikněte na Uložit.

Nyní je obrázek připraven k připojení k e-mailové zprávě nebo použití na webové stránce.


Manipulace s textem a grafikou v rozvržení InDesign CC

Manipulace s textem a grafikou v rozvržení InDesign CC

InDesign nabízí mnoho nástrojů pro efektivní manipulaci s textem a grafikou v rozvržení. Optimalizujte své návrhy s nejnovějšími technikami.

Pochopení ořezových cest v aplikaci InDesign CC

Pochopení ořezových cest v aplikaci InDesign CC

Ořezové cesty jsou silným nástrojem pro práci s obrazovými součástmi v aplikaci InDesign. Tento článek popisuje, jak efektivně vytvářet a používat ořezové cesty pro odstranění pozadí a úpravu obrázků.

Vytvářejte ořezové cesty v InDesign Creative Suite 5

Vytvářejte ořezové cesty v InDesign Creative Suite 5

Vytváření a používání ořezových cest v Adobe InDesign CS5 je užitečné pro blokování obrazových oblastí a obtékání textu. Naučte se užitečné tipy a triky, jak efektivně využít ořezové cesty.

Jak exportovat soubory JPEG a PNG Adobe InDesign CS6 pro tisk

Jak exportovat soubory JPEG a PNG Adobe InDesign CS6 pro tisk

Naučte se, jak efektivně exportovat JPEG a PNG soubory z Adobe InDesign CS6 pro tisk. Ideální pro online publikování a sdílení obrázků.

Jak formátovat odstavce ve Photoshopu CS6

Jak formátovat odstavce ve Photoshopu CS6

Naučte se, jak efektivně formátovat odstavce v Adobe Photoshopu CS6 pomocí funkce Panel Odstavec.

Jak používat novou perspektivní mřížku v Adobe Illustrator CS6

Jak používat novou perspektivní mřížku v Adobe Illustrator CS6

Objevte, jak efektivně používat perspektivní mřížku v Adobe Illustrator CS6 pro úspěšné ilustrace. Naučte se klíčové kroky a tipy pro tvorbu a úpravy.

Jak upravit příběhy InDesign CC

Jak upravit příběhy InDesign CC

Naučte se, jak efektivně upravit textové příběhy v Adobe InDesign CC pomocí vestavěného editoru příběhů a pokročilých funkcí.

Práce s obrázky v Adobe XD

Práce s obrázky v Adobe XD

Efektivní techniky pro práci s obrázky v Adobe XD, včetně úpravy velikosti, maskování, oříznutí, rotace a pokročilých úprav ve Photoshopu.

Jak přidat průhlednost do přechodu ve Photoshopu CS6

Jak přidat průhlednost do přechodu ve Photoshopu CS6

Naučte se, jak přidat <strong>průhlednost</strong> do přechodu ve Photoshopu CS6 a dosáhnout tak efektivního vzhledu pro své projekty.

Kreslení tvarů v publikaci InDesign CS5

Kreslení tvarů v publikaci InDesign CS5

Vytvářejte tvary, jako jsou obdélníky a elipsy, v dokumentu InDesign CS5 pomocí nástrojů tvarů. Získejte užitečné tipy pro optimalizaci vašeho designu.