Jak uložit obrázky pro web ve Photoshopu

Jednou z nejdůležitějších funkcí, které aplikace Photoshop nabízí, je funkce Uložit pro Web / Zařízení .

Proč ji používat? Zatímco byste mohli soubor uložit pouze standardním způsobem, jako je například soubor File / Save As , funkce Save for Web / Devices učiní zásadní tři věci.

Tento nástroj funguje skvěle pro vytváření ikon Twitter, profilů profilů Facebook, produktových souborů, blogových obrázků a zdrojových souborů pro favicony.

  • 01 - Otevřete zdrojový soubor

    Soubor / Otevřít Photoshop. Screenshoty od Bryan Haines

    Chcete-li začít, musíte otevřít soubor a otevřít soubor Soubor / Otevřít . Může být v libovolném formátu - jpg, gif, psd, png nebo jiným. Dokud Photoshop dokáže otevřít, můžete ji vygenerovat pro web.

  • 02 - Uložení souboru pro web

    Soubor Uložit Photoshop CS5. Screenshoty od Bryan Haines

    Chystáme se přeskočit k ukládání na webu, za předpokladu, že jste provedli veškeré úpravy, které požadujete. Je zřejmé, že pokud potřebujete upravit obrázek, postupujte nejprve a pokračujte tímto krokem později.

    Přejděte na Soubor / Uložit pro Web / Zařízení a klepněte na tlačítko. Je to asi půl cesty dolů rozbalovací menu.

    Tento proces vůbec nezmění původní soubor. Vytváříte nový soubor. Jakmile dokončíte tento tutoriál a vrátíte se k původnímu obrázku ve Photoshopu, budete muset soubor uložit, pokud jste provedli nějaké změny. Je důležité, aby nový obrázek byl jiný než původní. Často jednoduše přidáním _web k názvu souboru bude fungovat dobře. (příklad: filename_web.jpg)

  • 03 - Upravte porovnávací pohled na 2-Up

    Side by Side Porovnání Photoshopu CS5. Screenshoty od Bryan Haines

    V závislosti na vašich nastaveních možná budete muset upravit zobrazení zde. Co chcete, je levé a pravé srovnání vašeho obrazu. Na levé straně se zobrazí originál, vpravo se zobrazí kvalita obrazu v aktuálním nastavení.

    Pokud se podíváte do horní části okna, uvidíte následující možnosti: Původní, Optimalizované, 2-Up, 4-Up. Pro většinu účelů je to 2-Up, co budete chtít.

  • 04 - Nastavte velikost prohlížení na 100%

    Úprava zobrazení na 100% v aplikaci Photoshop CS5. Screenshoty od Bryan Haines

    Chcete-li zajistit, že prohlížíte 100%, zaškrtněte volbu v levém dolním rohu obrazovky.

    Je důležité si uvědomit, že pokud zobrazíte váš obrázek o více než 100%, bude vypadat zrnitý nebo možná i nedetekovatelný. Vždy pracujte s obrazem ve výši 100%.

  • 05 - Vyberte rozměry souborů

    Výběr rozměrů souborů v aplikaci Photoshop CS5. Screenshoty od Bryan Haines

    Rozměry webu jsou téměř vždy v pixelech (px). Je důležité udržovat proporce správné. Vedle obrazového pole je malý obrázek řetězového článku. Co to dělá, je měřítko šířky při úpravě výšky. Například obrázek 600px x 400px. Pokud zmenšíte šířku na 300 pixelů, soubor automaticky změří na výšku 200 pixelů. Pokud není zaškrtnuto, bude obraz zkreslený.

    Máte také možnost měnit obraz podle procent.

  • 06 - Vyberte typ souboru pro export

    Výběr typu souboru pro export ve Photoshopu CS5. Screenshoty od Bryan Haines

    V této možnosti nezáleží na typu původního souboru. Můžete vybrat libovolný soubor, který potřebujete.

    Poznámka: Chcete-li zahájit proces, musíte kliknout na obrázek vpravo. Obraz musí být vybrán pro zpracování.

    Nejběžnější je jpg pro web - je to nejmenší souborový formát, což znamená, že se stáhne rychleji pro vaše návštěvníky stránek. Pokud máte průhlednost, vyberte png-24. Pokud nevíte, jaká průhlednost znamená, že byste měli zvolit jpg.

  • 07 - Zvolte kvalitu obrazu

    Zvolte kvalitu obrazu v aplikaci Photoshop CS5. Screenshoty od Bryan Haines

    Každá ze tří možností jpg (Vysoká, Střední, Nízká) má přednastavená nastavení kvality, která může být nastavena ručně. Pokud se díváte na 100%, můžete se rozhodnout, jakou kvalitu potřebujete. Nastavení úrovně přiblížení viz část Krok 5. Obraz vypadá stejně jako v okně náhledu.

    Pokud zvolíte něco jiného než jpg, můžete tento krok vynechat.

  • 08 - Uložte soubor

    Uložte soubor ve Photoshop CS5. Screenshoty od Bryan Haines

    Jakmile provedete potřebné úpravy, můžete soubor uložit. Klikněte na tlačítko "Uložit" a pro tento nový obrázek vyberte požadovanou složku a soubor.

    Gratulace! Váš nový soubor je připraven k použití online.