Jak správně uložit pro web ve Photoshopu. Jak správně uložit obrázek pro web ve Photoshopu. Výhody a pohodlí používání tohoto modulu jsou tak užitečné a potřebné funkce jako

Pro mnoho webmasterů optimalizace obrázků pro WEB prostředí je zpracování obrázků a jejich ukládání různé formáty: gif (1-256 barev), png-8 (1-256 barev), png, jpeg. Po optimalizaci snímků by měla být jejich hmotnost minimální. Obvykle by webová stránka obsahující obrázky neměla mít více než 600 kB. Velikost obrázků přímo závisí na jeho kvalitě. Čím menší je váha obrazu, tím horší je jeho kvalita a naopak. Pokud obrázek obsahuje 2-3 barvy, lze jej uložit v následujících formátech: gif, png-8. Pokud web obsahuje mnoho neoptimalizovaných obrázků, pak těžký náklad na server a uživatele s pomalý internet Nemusí nikdy čekat, až se stránka načte. V takových případech uživatel přejde na jiný web s „odlehčenými“ stránkami. Jedním z hlavních cílů každého webmastera je udržet návštěvníky na svých stránkách.

Můžete upravit kvalitu obrazu a počet barev. Čím méně barev, tím menší je hmotnost obrázku. Ale nenechte se unést. Fotografie by se neměly ukládat ve formátech gif a png-8. Pro ně jsou vhodné jpeg s kompresními algoritmy a png-24 s podporou průhledných oblastí. Uložme obrázek pro webové prostředí. Na liště nabídek vyberte " Uložit pro web a zařízení“ nebo „uložit pro web“.

Z rozevíracího seznamu vyberte „jpeg“. Zaškrtneme políčko vedle režimu „Progresivní“. V poli kvality nastavte hodnotu na 80 %. Tento druh optimalizace je vhodný pro webové stránky. Algoritmy komprese jpeg zkazit kvalitu obrazu, ale právě ty umožňují snížit váhu obrazu. Při optimalizaci se pečlivě podívejte, jak bude váš obrázek vypadat s kompresními algoritmy. Chcete-li to provést, vyhledejte v okně kartu „2 možnosti“. Pokud obrázek neobsahuje fotografie, lze jej uložit v různých formátech a výsledné možnosti mezi sebou porovnávat z hlediska kvality a hmotnosti.


Zde budete muset hledat zlatá střední cesta mezi kvalitou a hmotností obrazu. Formáty GIF, png-8, png-24 umožňují používat průhlednost. Formát jpeg nepodporuje průhlednost. Pokud se pokoušíte uložit obrázek s průhledností formátu jpeg, pak Photoshop automaticky uloží obrázek s bílým pozadím. V místě, kde jste naplánovali průhlednou oblast, se objeví bílé pole. Všechny obrázky, které plánujete nahrát na web, musí mít rozlišení 72 dpi. Přesně takové rozlišení by obrázky měly mít.

Uložit pro web Uložit pro web JPG, GIF, PNG. Pohodlí použití tohoto modulu spočívá v možnosti současného zobrazení několika možností (od 1 do 3) výsledného obrázku.

Pro web design ve Photoshopu existují speciální funkce, implementovaný jako spořicí modul Uložit pro web. Jedná se o velmi výkonný modul pro řízení procesu ukládání dokumentů, který umožňuje výběr optimální nastavení uložený obrázek (optimalizovat obrázek). Modul Uložit pro web podporuje nejběžnější formáty pro internet - JPG, GIF, PNG. Pohodlí použití tohoto modulu spočívá v možnosti současného zobrazení několika možností (od 1 do 3) výsledného obrázku. Pro podrobnější pohled na tento modul doporučuji jeho použití. Chcete-li to provést, musíte mít otevřený nějaký dokument. Tento program můžete spustit pomocí příkazu Uložit pro web z nabídky Soubor. Na obrazovce se objeví následující okno:



Obecný princip práce s tímto modulem je následující. Photoshop vám nabízí na výběr několik možností optimalizace (různé poměry nastavení formátu), které jsou demonstrovány ve speciálních oknech. Pod obrázkem jsou komentáře následujícího druhu - velikost souboru po optimalizaci, doba načítání při dané rychlosti modemu a vlastnosti formátu (jako je kompresní faktor JPG nebo počet barev pro GIF). Pokud se vám některá z možností optimalizace líbí, můžete ji vybrat kliknutím levým tlačítkem myši. Dále klikněte na OK a váš optimalizovaný soubor se uloží. Pokud však s navrhovanými možnostmi nejste spokojeni, otočte svůj pohled na pravou stranu okna, protože tam jsou soustředěna všechna hlavní nastavení optimalizace. Než je však zvážíme, prostudujme si předběžnou konfiguraci modulu.


Nastavení modulu je soustředěno do malého kulatého tlačítka umístěného v horní části okna. Zde můžete vybrat následující režimy:

  • Rozostření prohlížeče- vyhlazování prohlížeče (interpolace) vám dá možnost vyhodnotit váš obrázek v paletě Safe prohlížeče.
  • Nekompenzovaná barva- zobrazení bez omezení.
  • Standardní barva Windows- standardní barvy Windows (256 barev)
  • Standardní barva Macintosh- standardní barvy Mac (Mac).
  • Použít barevný profil dokumentu- zobrazení s přihlédnutím barevný profil zařízení.

Karty v horní části okna umožňují přepínat mezi nimi různé režimy prohlížení. Existují následující režimy:

  • Originál- originál vašeho obrázku se zobrazí v jediném okně.
  • Optimalizováno- v jediném okně je demonstrován „nejlepší“ výsledek optimalizace podle Photoshopu. Podotýkám, že někdy je to velmi úspěšné.
  • 2-Up- objeví se dvě okna: jedno bude obsahovat originál vašeho výkresu, druhé bude obsahovat výsledek optimalizace.
  • 4-nahoru- Můžete si vybrat ze tří možností optimalizace a typu předlohy.

Ale vybrat si libovolnou možnost ze tří navrhovaných je v každém případě hodně amatérů. V této fázi zvážíme možnosti optimalizace „ručně“, tzn. Všechny parametry optimalizace si nakonfigurujeme sami. Nejprve si musíte být vědomi závislosti na velikosti konečný soubor(obsazené místo na HD) na velikost vašeho obrázku (kolik pixelů). Jak další obrázek, tím významnější ( více prostoru zabírá HD) finální soubor. Pro kontrolu velikosti obrázku ve správě optimalizace slouží celá karta tzv Velikost obrázku.


Změněné rozměry se aplikují pomocí tlačítka Použít na všechny optimalizované obrázky a nevztahuje se na originál. Ohledně parametru Kvalitní, pak to bylo probráno v předchozí kapitole této lekce. Zkuste otevřít libovolný obrázek a pohrát si s jeho velikostí. Jako radu řeknu následující: velká velikost obrázky (v pixelech) se neřídí vztahem „větší, tím lepší“. Zde je potřeba hledat kompromis v podobě zlaté střední cesty. Nejprve se musíte rozhodnout, kam chcete tento obrázek umístit. Vezměte prosím na vědomí, že ne každý na tomto světě má dobré monitory, které si zachovávají rozlišení 1280X960. Většina lidí má 15palcové monitory s rozlišením 800x600 pixelů. Vzhledem ke všemu výše uvedenému můžete odhadnout, že rozměry vašeho obrázku by neměly přesáhnout 800 x 600 pixelů, s výjimkou zvláštní příležitosti. Pokud připravujete obrázky pro design svých webových stránek, pak musíte vzít v úvahu, že okno poskytované prohlížečem je malé, naše připojení je chatrné, internet se sotva plazí a jen ten nejtrpělivější uživatel bude čekat, až bude váš obrázek načteno úplně, a to vše proto, abyste obdivovali svou práci, která se mu nevejde na obrazovku. Tato situace kohokoli odradí od další návštěvy vašeho webu.


Otevřete soubor Květina.psd(soubor se nachází ve složce \\Program Files\\Adobe\\Photoshop\\Samples). Pokračujme v optimalizaci na základě konkrétního formátu souboru obrázku:



Správnost provedeného nastavení lze snadno zkontrolovat načtením hotového obrázku do prohlížeče. K tomu nemusíte ani opouštět okno exportního modulu. Klepněte na tlačítko Náhled v(Zobrazit v) \"Váš prohlížeč\" a modul otevře prohlížeč s načteným obrázkem. Pod obrázkem uvidíte HTML kód, který byl vygenerován exportérem, aby demonstroval tuto stránku. Barvu pozadí stránky lze přednastavit pomocí seznamu Matný(Pohraniční). Nastavení ohraničení je jednoduché. Pokud jste vybrali možnost Žádný(ne), pak nebude žádná hranice, parametry Bílý(bílá) a Černý(černá) vám dá černou a bílý a podle toho. Parametr Ostatní(ostatní) umožňuje vybrat libovolnou barvu. Odstavec Barva kapátka umožňuje vybrat barvu kapátkem přímo z obrázku. Pokud se zabýváte webovým designem, pak s největší pravděpodobností budete mít na svém počítači nainstalované alespoň dva prohlížeče: Internet Explorer a Netscape Communicator. Otevření seznamu vedle tlačítka Náhled v(Zobrazit v), můžete si vybrat zobrazení libovolného prohlížeče nainstalovaného v počítači.


In-line zpracování velké množství grafických souborů, nastavení všech uvedených parametrů pro každý obrázek zvlášť zabere příliš mnoho času. Mnohem racionálnější je uložit provedená nastavení pro opětovné použití.

  1. Otevřít nabídku Nabídka Optimalizace(menu Optimalizace) kliknutím na tlačítko s trojúhelníkovou šipkou v oblasti Nastavení(Možnosti).
  2. Vyberte tým Uložit nastavení(Uložit nastavení). Otevře se dialogové okno Uložit jako(Uložit jako) umožňuje uložit nastavení do souboru. Zadejte do pole Název souboru(Název souboru) nějaký název, například \"JPEG 18\", a klikněte na tlačítko Uložit(Uložit).

Nyní na seznamu Nastavení(Možnosti) Zobrazí se zadaný název. Během zpracování další soubor Toto jméno bude stačit vybrat ze seznamu. Upozorňujeme, že seznam již obsahuje několik nejtypičtějších možností nastavení předdefinovaných vývojáři. Nepotřebné sady nastavení, které prodlužují seznam Nastavení, lze pomocí příkazu snadno odstranit Smazat nastavení(Odstranit nastavení). Nabídka Optimalizace(Nabídka optimalizace). Tento příkaz odstraní aktuální sadu nastavení. Klepněte na tlačítko OK(Ano). Otevře se standardní dialogové okno pro uložení souboru. Ve výchozím nastavení je navržen původní název dokumentu Photoshopu. Vyberte si ten svůj pracovní složka a stiskněte tlačítko Uložit(Uložit). Okno exportního modulu se zavře a ve vybrané složce se objeví optimalizovaný soubor JPEG, připravený k umístění na webovou stránku.


Jak jsme již uvedli, pro umístění obrázků s průhlednými oblastmi na webovou stránku se používá formát GIF, který podporuje pouze indexované barvy. Export modul Uložit pro web(Save for Web) umožňuje ukládat obrázky v tomto oblíbeném formátu.


  1. Otevřete dokument Ducky.psd.
  2. Převeďte vrstvu pozadí obrázku na běžnou vrstvu.
  3. Zvýrazněte bílé pozadí a smazat jej.
  4. Vyberte tým Uložit pro web(Uložit pro web) z nabídky Soubor(Soubor).
  5. Na seznamu Optimalizovaný formát souboru(Optimalizovaný formát souboru) vyberte formát GIF.
  6. Nejvýznamnějším parametrem indexovaného obrázku je počet barev v jeho paletě. Je zasazen do terénu Barvy(Barvy) a měl by vytvářet kompromis mezi kvalitou a kompaktností. Obrázek káčátka obsahuje velmi málo barev a 32 barevná paleta mu bude zcela stačit.
  7. Seznam Algoritmus redukce barev(Color Reduction Algorithm) obsahuje seznam algoritmů pro generování indexované palety obrázků. Všechny již byly probrány v lekci č. 7. Poznamenejme pouze, že standardně je tato možnost nabízena Selektivní(Selektivní), dávání nejlepší výsledky pro obrázky obsahující významný prostor vyplněný podobnými barvami. Do této kategorie spadá obrázek káčátka. Dominují jí odstíny žluť.
  8. Chybějící barvy v paletě obrázků jsou omezeny kombinací několika sousedních pixelů podobných barev. Simulační algoritmus je vybrán ze seznamu Ditheringový algoritmus(Algoritmus vyhlazování). Ve většině případů se používají možnosti Hluk(Hluk) a Difúze(Diffusion), které nedávají tak pravidelný vzor jako Pattern. Volba Difúze(Diffusion) se nejlépe používá pro fotografické obrazy, a Hluk(Noise) - pro textury pozadí a přechody. Vyberte algoritmus ze seznamu Difúze(Difuze).
  9. Stupeň vyhlazení se nastavuje posuvníkem Váhat(Vyhlazení) umístěné vpravo. Nastavte jej tak, aby byly odstíny uspokojivě reprodukovány. Pamatujte, že čím vyšší je vyhlazení, tím větší velikost výsledný soubor.
  10. Modul Uložit pro web(Uložit pro web) navrhuje unikátní algoritmus předúprava obrázky, což zvyšuje účinnost komprese. Ovládá se posuvníkem Ztrátový(Ztráta kvality). Velké hodnoty Tento parametr výrazně snižuje kvalitu obrazu. Pokud jej nastavíte v rozsahu od 5 do 15 %, pokles kvality bude téměř nepozorovatelný a velikost souboru lze snížit o 5-40 %. Nastavte posuvník Ztrátový(ztráta kvality) kolem 30 %.
  11. Zaškrtávací políčko Průhlednost(Transparency) převede průhledné oblasti vrstvy Photoshopu na průhlednost GIF. Nastavte ji, jinak budou průhledné oblasti vyplněny pevnou výplní.
  12. Seznam Matný(Border) poskytuje plynulý přechod mezi okrajem obrázku a barvou pozadí stránky. Okrajové pixely vybraného objektu jsou obvykle poloprůhledné, což formát GIF nepodporuje. Výsledkem je, že při exportu obrázku do formátu GIF se kolem objektů na průhledném pozadí objeví charakteristický šum. Chcete-li se vyhnout jeho vzhledu, nastavte jej v seznamu Rohože(Ošetření okrajů) Barva pozadí webové stránky. Průsvitné pixely budou obarveny programem touto barvou. Když je zaškrtávací políčko zrušeno Průhlednost(Průhlednost) barva zadaná v seznamu Rohože(Edge Processing), je považován za pozadí a vyplňuje všechny průhledné oblasti obrazu.

Úprava palety obrázků.

Na začátku této kapitoly jsme již zmínili, že stejná barevná reprodukce obrázků na různé platformy počítače lze poskytnout pomocí standardní webové palety. Photoshop umožňuje doladit tento aspekt vytváření obrázků s omezenou paletou. Na webovou paletu můžete přenést všechny barvy v obrázku nebo jen některé z nejdůležitějších.

  1. V poloautomatickém režimu se barvy upravují podle webové palety pomocí posuvníku Web Snap(Paleta Cast to Web). Určuje procento daných barev v paletě obrázků. Zkuste posunout tento posuvník a sledujte, jak se mění barvy obrázku. Aktuální paleta obrázků je zobrazena na kartě Tabulka barev(Tabulka barev) umístěná v pravém dolním rohu okna Uložit pro web(Uložit pro web). Při změně hodnoty parametru Web Snap Změny (Casting to the Web palete) se také zobrazí v paletě obrázků. Pozorujete změnu některých barev palety a výskyt bílých kruhů na jejich vzorcích. Poslední označují barvy přiřazené k webové paletě. Tab Tabulka barev(Color Chart) je užitečná nejen pro pozorování. Umožňuje ovládat jednotlivé barvy v obrázku. Je to mnohem obtížnější, ale flexibilní způsobřízení.
  2. Vraťte posuvník zpět Web Snap(Paleta Cast to Web) na nulu, aby bylo možné ručně upravovat barvy.
  3. Pokud se chcete vyhnout výrazným barevným posunům v libovolném prohlížeči, ale nechcete všechny barvy přiřadit k webové paletě, pak má smysl to dělat selektivně. Zvláště důležité je zachovat barvy, které obrazu dominují. Chcete-li určit, o jaké barvy se jedná, nastavte režim třídění Seřadit podle oblíbenosti(Seřadit podle frekvence) pomocí stejného příkazu z nabídky panelu. Nejběžnější barvy jsou umístěny vlevo.
  4. Klikněte na pátý vzorek zleva v paletě. Vzorek bude přijat bílý rám, což znamená, že je vybráno. Ve stavovém řádku umístěném ve spodní části okna si poznamenejte hodnotu složek vybrané barvy. Je zřejmé, že se blíží bílé, která je samozřejmě součástí palety Web.
  5. Aby nedošlo k posunu barev, přenesme barvu na bílou. Photoshop může vybrat barvu, která je nejblíže výběru z webové palety. Chcete-li to provést, klikněte na ikonu kostky ve spodní části panelu nebo vyberte příkaz Posunout/zrušit posunutí vybraných barev do/z webové palety(Shift/Unshift vybrané barvy do webové palety) z její nabídky. Vzorník zbělá a objeví se na něm bílý kruh, který označuje, že barva je součástí webové palety. Bílý čtverec v levém dolním rohu vzorníku označuje, že barva je uzamčena. Blokované barvy zůstanou nedotčené při zmenšení barev v paletě obrázků a při zobrazení v prohlížeči. Chcete-li zámek odstranit, klikněte na ikonu visacího zámku ve spodní části panelu.
  6. Přenesení barev na webovou paletu lze provést zcela ručně pomocí okna Výběr barvy (Paleta barev). Vyberte všechny barvy v paletě pomocí příkazu Vyberte Všechny barvy(Vyberte všechny barvy) z nabídky panelu a klikněte na ikonu shody barev. Všechny barvy obrázku budou upraveny podle webové palety.
  7. Přenesení celého obrázku na webovou paletu se povedlo hladký přechod Obraz monitoru je příliš ostrý. Tuto závadu ručně opravíme. Vytvořte nejtmavší z oranžových políček v paletě dvojitým kliknutím s myší. Před vámi se objeví známé okno Výběr barvy(Paleta barev). Zkontrolujte zaškrtávací políčko Pouze Webové barvy(Pouze Webové barvy) je v něm nainstalován. Vyberte barvu nejbližší aktuální barvě světlý odstín a zavřete okno stisknutím tlačítka OK(Ano). Barva bude upravena. Pokud se vám to také nezdaří, otevřete okno znovu Výběr barvy(Paleta barev) a vyberte jinou.
  8. Upravit všechny odstíny oranžová barva v paletě barev tak, aby se jejich barvy přiblížily k sobě. Tím se odstraní ostrý barevný přechod na obrázku.

Četné příkazy nabídky panelu Tabulka barev(Tabulka barev) vám umožní rychle zvýraznit dané ( Vyberte Všechny webové bezpečné barvy(Vyberte všechny barvy Web Safe)), neuvedené ( Vyberte Všechny barvy, které nejsou bezpečné pro web(Vyberte všechny barvy, které nejsou bezpečné pro web)) a obecně všechny barvy ( Vyberte Všechny barvy(Vyberte všechny barvy)). Uzamknout příkazy Zamknout/Odemknout vybrané barvy(Zamknout/Odemknout vybrané barvy) a Odemknout všechny barvy(Odemknout všechny barvy) odemkne vybrané nebo všechny barvy v paletě. Podobně jako u příkazů Web Shift/Unshift vybrané barvy(Shift/Unshift vybrané barvy do webové palety) a Zrušit řazení všech barev(Zrušit posun všech barev) vrátit vybrané nebo všechny redukované barvy původní hodnoty. Režimy třídění barev v paletě nejsou omezeny na kritérium prevalence ( Seřadit podle oblíbenosti(Seřadit podle prevalence)). Mohou být ponechány neroztříděné ( Neřazeno(Netřídit)) a také seřadit podle barvy ( Seřadit podle odstínu(Seřadit podle odstínu)) nebo jasu ( Seřadit podle svítivosti(Seřadit podle jasu)).

Optimalizace formátu PNG.

Posledním diskutovaným formátem je PNG. To je dost nový formát, ale je již podporován většinou moderních prohlížečů. Umožňuje ukládat indexované i plnobarevné obrázky. Použitý kompresní algoritmus nevede ke ztrátám grafické informace, takže hustota komprese plnobarevných obrázků je výrazně nižší než u JPEG. Modul Uložit pro web(Save for Web) implementuje export do formátů PNG-8 pro indexované obrázky a PNG-24 pro plnou barvu. Možnosti exportu PNG-8 naprosto podobný GIF a nebude pro vás těžké na ně přijít sami. PNG-24 Obecně nabízí pouze přepínání režimů průhlednosti ( Průhlednost(Transparentnost)), Prokládané ( Prokládané) a parametry Rohože(Zpracování hran).


Ještě jednou upozorňuji na důležitost těchto informací. Bez znalosti možností formátů souborů a Možnosti Photoshopu Při práci s nimi nebudete moci pracovat profesionálně.

Naučili jsme se načítat fonty do Photoshopu Doporučuji všem, kteří tento článek ještě nečetli, podívat se na něj.

Dnes budeme pokračovat v učení se základům Photoshopu, což je téma dnešní lekce Jak připravit fotografie na internet. Možná vás hned napadají otázky, proč a proč byste měli připravovat fotografie na internet? Stačí si to stáhnout a je to.

Ano, skutečně, v některých případech si to můžete jen stáhnout a je to, ale to s sebou nese spoustu problémů a nepříjemností. Níže jsem uvedl 5 důvodů proč potřebujete připravit fotografie pro internet:

5 důvodů, proč připravit obrázky pro WEB

Velká hmotnost obrazu. Pokud například na svůj web umístíte fotografii, která váží několik megabajtů, za prvé přetížíte a narušíte práci svého serveru a za druhé se stránka, na kterou jste umístili svůj obrázek, bude načítat velmi dlouho. A to výrazně ovlivňuje návštěvnost stránek. Pamatujte, že lidé neradi navštěvují stránky, které jsou pomalé a jejich načítání trvá dlouho.

Při návrhu webového designu musí být všechny prvky vzhledu budoucího webu (obrázky ve formátu .png a .jpg) připraveny pro internet, bez tohoto rozložení není možné.

Nesprávné proporce fotografie, které vedou ke zkreslení. Myslím, že tento bod nepotřebuje objasnění.

Vysoká ztráta kvality obrazu. Když nahrajete své nové fotografie například na sociální sítě nebo online aukce, pravděpodobně jste si všimli, že nejsou tak jasné, barevné nebo kontrastní jako původně. Jde o to, že když nahrajete své obrázky do
jakékoli internetové zdroje, automaticky komprimují a zhoršují kvalitu vašich obrázků.

V některých situacích může být nutné nahrát obrázek určitou velikost a formát. Například potřebujete nahrát ikonu 16x16 pixelů ve formátu .png pro váš web. To vše lze snadno a jednoduše provést ve Photoshopu.

Náš oblíbený program se se všemi těmito úkoly dokonale vyrovná. Adobe Photoshop CC. Vývojáři Photoshopu přišli s velmi užitečným a požadovaný modul s funkcí ukládání obrázků pro internet ( Uložit pro web ) .Jedná se o výkonný modul pro řízení procesů optimalizace a ukládání dokumentů, který automaticky vybírá optimální nastavení pro ukládaný soubor. Tento modul podporuje a pracuje s nejběžnějšími formáty souborů pro Internet .jpg, .gif, .png.

Výhody a pohodlí používání tohoto modulu jsou takové užitečné a nezbytné funkce, jako jsou:

Vyberte více režimů zobrazení a zároveň optimalizujte obrázky pro web

Výběr formátu, ve kterém bude obrázek uložen

Výběr kvality a velikosti uloženého obrázku

výběr metody optimalizace, komprese a zobrazení hmotnosti optimalizovaného obrazu.

Tím celá teorie končí, přejděme k praxi. Nejprve si otevřeme obrázek nebo fotografii, kterou si uložíme na internet. Budu pracovat s tímto obrázkem:

Chcete-li pokračovat v ukládání pro web, přejděte na horní menu Soubor/Uložit pro web nebo použijte klávesové zkratky Ctrl+Alt+Shift+S.

Před námi by se mělo otevřít okno s nastavením, jak je znázorněno na obrázku níže. Není třeba se bát velkého množství tlačítek a nastavení použijeme jen některá z nich a podrobně nížePojďme se podívat, k čemu slouží a jak je používat.

Popis možností:

1. Čtyři možnosti náhledu karet.

- Originál - to je, když vidíte svůj proud původní obrázek

- Optimalizace - to je, když vidíte dovnitř náhled pouze optimalizovaný obrázek

- 2 možnosti - to je, když vidíte svůj původní obrázek nahoře a optimalizovaný dole. Tato možnost je nejpohodlnější a líbí se mi nejvíce, proto jsem si ji vybral.

- 4 možnosti - to je, když v náhledu vidíte původní obrázek, obrázek, který jste vybrali, obrázek v kvalitě 22 a obrázek v kvalitě 11.

2. Formát uloženého souboru. V našem případě zvolíme JPEG.

- PNG — formát souboru pro ukládání webové grafiky. Existují dva typy, 8bitové – indexované obrázky, 24bitové – „všechny“ barvy. V tomto formátu se obvykle ukládají kliparty a loga na průhledném pozadí.

- GIF - zastaralý formát souborů pro ukládání webové grafiky. Nejčastěji se v tomto formátu ukládají soubory s omezeným počtem barev, tabulek, diagramů, log, formát podporuje i animaci a průhledné pozadí. Tento formát se používá stále méně, protože více nejlepší formát PNG.

- JPEG — Nejoblíbenější formát. Ideální pro ukládání fotografií a obrázků s mnoha barvami, odstíny, efekty.

3. Význam kvality. Líbí se mi "Vysoká".

Průměrný

Vysoký

Velmi vysoká

Nejlepší

4. Zde zaškrtneme hodnotu „ Optimalizace « . Zvažte a zaměřte se na možnosti “ Progresivní "A" Vestavěný profil “, nebudeme, protože většina webových prohlížečů je nepodporuje.

5. Zaškrtnutím políčka povolíte možnost „ Převést na sRGB «. To je nezbytné, aby se náš obrázek na webu správně zobrazil a uložil v barevném prostoru sRGB.

6. Nastavte požadovanou velikost obrázku. V mém případě je to šířka 500 pixelů, výška 281 pixelů.

7. Velikost původního obrázku.

8. Optimalizovaná velikost obrázku pro web.

Myslím, že teď už rozumíte tématu Jak připravit fotografie pro internet ve Photoshopu a teď to zvládneš sám. Pamatujte, že nejlepší vděčnost pro autora je lajky, reposty sociální sítě a komentáře na webu Uvidíme se v dalších lekcích!

Společnost Adobe provedla několik drobných změn v oblíbené a oblíbené funkci. Uložit pro web ve Photoshopu CC 2015. Tato funkce se používá pro mnoho úkolů – od přípravy podkladů pro zveřejnění na webu až po optimalizaci fotografií vysoké rozlišení vytvářet animované GIFy. Protože příkaz Uložit pro web je založen na dříve vydaném produktu ImageReady (konec životnosti), jeho kód je technicky příliš zastaralý pro pokračující údržbu a vývoj nových prvků.

Byl z aplikace Photoshop CC 2015 odstraněn příkaz Uložit pro web?

Příkaz Uložit pro web používám každý den. Zpomalí můj pracovní postup změny v systému nabídek?

Lze úplně přeskočit toto menu pomocí existující klávesové zkratky:

(Windows) Ctrl + Alt + Shift + S
(Mac) Cmd + Opt + Shift + S

V případě potřeby si můžete přizpůsobit klávesové zkratky. Chcete-li to provést, vyberte Upravit > Klávesové zkratky.

Byly odebrány některé funkce příkazu Uložit pro web?

Znamená značka "Zastaralé" to, že příkaz Uložit pro web bude v budoucnu odstraněn?

Možná. Ujišťujeme vás však, že společnost Adobe neodstraní příkaz Uložit pro web, aniž by poskytla odpovídající funkce v novém a vylepšeném formátu pracovního postupu. Víme například, že mnoho uživatelů vyžaduje funkce, jako je zobrazení 2up, velikost cílového souboru, převod sRGB, možnosti metadat a animované soubory GIF. Příkaz Uložit pro web nebude odebrán bez poskytnutí příslušných funkcí v novém, vylepšeném formátu pracovního postupu.

Většina začínajících uživatelů neumí připravit fotografii pro zveřejnění na internetu. Snaží se „vklouznout“ fotografii obrovská velikost na jejich web a pak se diví, proč se stránka webu načítá tak dlouho nebo proč jsou proporce fotografie zkreslené.

Při přípravě fotografie na internet je potřeba co nejvíce zmenšit velikost souboru, aby návštěvníci neopouštěli stránky před konečným stažením fotografie a zároveň, aby se nezhoršila kvalita obrázku při kompresi velmi trpí.

Nejprve se tedy rozhodneme, jakou velikost bude naše fotografie mít.

Podívejme se původní velikost. Tedy v nabídce Obraz, vyberte položku Velikost obrázku.

Otevře se okno Velikost obrázku


Jak vidíte, velikost ukázkové fotografie, kterou jsem uvedl, je příliš velká - velikost souboru také nebude malá. Vzhledem k tomu, že nejčastější momentálně Rozlišení obrazovky je 1024 x 768 pixelů, takže byste neměli pořizovat fotografii větší než tato velikost.

Místo 2048 (pravděpodobně tam máte jiná čísla) zadejte do pole „šířka“ 1024 a v poli „Výška“ se automaticky zobrazí číslo 768 (protože před frází Zachovat proporce je zaškrtnutí).

Klikněte na tlačítko "OK" - nyní má vaše fotografie požadovanou velikost!
Mimochodem, pokud jste v první lekci ořízli fotografii správnou velikost, pak můžete tento odstavec přeskočit.

Poznámka: Pokud je velikost původního obrázku menší než 1024x768, neměli byste jej zvětšovat. Ta se samozřejmě natáhne na požadovanou velikost, ale zhorší se kvalita obrazu. Pokud tedy fotografie nepokryje celý displej, pak ať potěší oko krásou a ne velikostí. Koneckonců, Lenin o tom také řekl: "Méně je lépe!"

Rozhodli jsme se pro rozměry, přejdeme přímo k ukládání.

Uložení fotografie pro internet

V nabídce Soubor vyberte Uložit pro web.

Otevře se dialogové okno Uložit pro web


Jak vidíte, zobrazují se 2 obrázky pro porovnání kvality obrazu: originál a obrázek, který bude získán s parametry, které nastavíte.

Můžete se zeptat: jaké parametry nastavit?

Nejprve v poli 2 vyberte formát GIF nebo JPEG.

Formát GIF nepodporuje více než 256 barev a je vhodný pouze pro ukládání obrázků a kreseb (obrázky 6-8 na této stránce jsou uloženy ve formátu GIF s podporou 64 barev, takže váží 7-11 kb - malá věc, ale pěkný!)

Jistě, krásná fotka V tomto formátu jej nelze uložit, proto volíme formát JPEG.

V okně 3 vyberte kvalitu fotografie: nízká, střední, vysoká, maximální. Říkáte si: samozřejmě maximum?

Ano, pokud bychom se bavili o ukládání na pevný disk, pak by tomu tak bylo. Ale ty tyto fotografie zveřejníš na internetu, aby si je mohli stáhnout obdivovatelé tvého talentu! A kdo rád dlouho čeká na otevření stránky? Přesně tak, nikdo!

Prezentovaná fotografie je uložena ve střední kvalitě a váží 36 kb. Při vysoké kvalitě by vážil asi 100 kb a maximálně - 200! Obecně nevidím velký rozdíl mezi průměrem a vysoká kvalita Nevidím, ale vidím velký rozdíl ve svazku výsledného souboru.

A můžete experimentovat. Změnou hodnot uvidíte, jak se vám před očima mění kvalita toho správného snímku. Pod pravým obrázkem navíc uvidíte, jak se v závislosti na kvalitě mění velikost K (v kilobajtech) obrázku.

Konečně, když je volba velikost obrázky, formát A kvalitní hotovo, stiskněte tlačítko Uložit(Uložit). Jako obvykle budete muset soubor pojmenovat (protože soubor připravujete pro internet, okamžitě zapište latinkou) a určete složku, kterou chcete uložit. Až to uděláte, stiskněte tlačítko znovu Uložit.

Pokud vám velmi kompetentní Photoshop dá varování, že "některé názvy souborů jsou nekompatibilní s některými webovými prohlížeči", řekněte, že bez něj víte všechno a klikněte na OK.

To je vše, fotografie je připravena!

Pozor! Dokud nedokončíte práci na fotografii, uložte ji ve svém „nativním“ Photoshopu formát PSD. Protože opakovaná rekomprese v formáty GIF a výsledkem je JPEG nenahraditelná ztráta kvalitní.




Nahoru