Home

Kalendář událostí

<<  Leden 2018  >>
 Po  Út  St  Čt  Pá  So  Ne 
  1  2  3  4  5  6  7
  8  91011121314
15161718192021
22232425262728
293031    

Přihlášení


Příprava fotek pro vložení na WEB Tisk Email
Napsal uživatel Martin Hozák   
Pondělí, 23 Březen 2009 14:14

help
Help

Připravit fotku na web není zcela triviální úkol a to z několika důvodů. Jsme omezeni velikostí přiděleného prostoru a tak se vyplatí šetřit s místem a druhý závažný důvod je, že stránky jsou nějak koncipovány a aby vypadaly dobře je třeba dodržovat maximální rozměry obrázků. S tím je spojeno zmenšování obrázků, což je někdy opravdu věda.

V tomto článku se zaměřím na konečnou úpravu fotek, čímž je zmenšení, doostření, přidání rámečku a komprese. Zásadně zmenšujeme fotku až naposledy, po všech ostatních úpravách (ořezy, úpravy barev apod.) a bez rámečku (ostré a slabé linky v obraze se viditelně při zmenšování deformují). Dále platí, že veškeré úpravy by se měly provádět buď najednou anebo ukládat obrázek v nějakém bezeztrátovém formátu (tiff, png, dng, psd). Čím častěji uložíte obrázek v jpegu a znovu otevřete tím větší bude ztráta na jeho kvalitě!!! (ztráta detailů na hranách, barevné fleky, kostičky...)

Úpravy obrázku se neobejdou bez nějakého editoru a já se zaměřím na IrfanView (IV) a Adobe Photoshop(PS). V ostatních editorech a prohlížečích je postup víceméně stejný.

Máme upravený obrázek 10 Mpix o rozměrech 3872x2592 velikost 3,5 MB a potřebujeme ho zmenšit tak, aby vyhovoval podmínkám Klofu.

Pro vložení do článku je šířka obrázku maximálně 500 pixelů pro delší stranu a velikost okolo 100 kB
Pro vložení do fotogalerie je doporučené maximum 1280 pixelů na šířku a 1024 pixelů na výšku a 400kB - ideální velikost je 1024 pixelů pro delší stranu.


1. Zmenšení

Pokud hodláte do výsledné fotky přidat rámeček, musíte dopředu počítat s jeho velikostí a o to udělat obrázek menší např. pro rámeček 50px široký fotku zmenšit na 1024px - 2x50px = 924px.

Vlastní zmenšení v programu je jednoduché - vyvolejte příslušný dialog (IV: Obrázek | Změnit velikost/Převzorkovat [CTRL+R], PS:Image | Image size [Alt+CTRL+I]) a zadejte šířku obrázku v pixelech, pokud je obrázek naležato nebo výšku obrázku pokud je obrázek na výšku. Ujistěte se, že máte vybranou volbu pro zachování proporcí, aby se správně dopočítala i výška obrázku (IV: Zachovat poměr stran, PS: Constrain Proportions). Dále je důležité použít co nejkvalitnější metodu pro změnu rozměrů (IV: Filtr Lanczos, PS: Bicubic Sharper (jen pro zmenšování !!!)). V Irfanu je dobré zaškrtnout volbu Po převzorkování doostřit, čímž se v drtivé většině případů vyřeší následující krok.


2. Doostření

Každý obrázek je potřeba po zmenšení doostřit. Obrázky jsou totiž po zmenšení mírně rozmazané a ztrácejí se detaily na hranách  Čím větší je poměr mezi originálním obrázkem a zmenšeným, tím větší je míra rozostření zmenšeného obrázku.

Zatímco IV nemá v nastavení doostření žádné volby a provádí se Obrázek | Doostřit [Shift+S] a jeho použití je omezené,  v PS je možností podstatně více.
PS:
1) Od verze PS CS2 a výše je nejlepší volbou takzvané chytré ostření Filter | Sharpen | Smart Sharpen. Pro naše potřeby bude postačovat tento dialog v základním modu. Spodní posuvník Radius, značí poloměr zostření a hodnoty by se měly nacházet od 1px-2.5px, čím menší obrázek tím menší poloměr. Pro rozměr 1024px bych doporučoval hodnoty okolo 1px.
Vrchním posuvníkem Amount se pak v procentech přidává míra zaostření - tam nezbývá než hýbat postníkem a laborovat, kdy je míra zostření ideální - většinou tak 70-80%. Při zaškrtlém Preview je výsledek vidět rovnou na celém obrázku. Důležité je mít obrázek zvětšen na 100% své velikosti (Ctrl+Alt+0), abyste přesně viděli jak bude vypadat.
2) Druhá možnost je dialog Filter | Sharpen | Unsharp Mask. Dialog obsahuje tři parametry: Amount (míra ostření), Radius (poloměr), Threshold (práh). Threshold nechte na 0, Radius na zhruba 0.3 - 2.5px. Amount se většinou pohybuje kolem 70-150 %. Po chvilce experimentování s hodnotou Amount a Radius určitě naleznete vhodné zaostření pro daný

Občas při ostření vzniká na hranách tmavších obrázků světlejší linka o šířce 1 až 2 pixely. Je to v podstatě vlastnost algoritmu, který bere při ostření bodů i okolí a na krajích obrázku neví, co si má vymyslet. Normálně si toho nevšimnete, ale po přidání tmavého ramečku tato linka občas vystoupí. V tomto případě je dobré před přidáním rámečku obrázek o 1 až 2 pixely z každé strany oříznout.


3. Přidání rámečku

Rámeček kolem fotky se hodí pro optické oddělení obrázku od pozadí stránky. Někdy stačí tenký černý rámeček, k některým se hodí silnější rámeček, většinou jde o otázku vkusu. Rámeček celkovému dojmu z fotky většinou pomůže, naopak nevhodně zvolený rámeček může dojem z fotky úplně zkazit. Častou chybou bývá, že jednobarevný rámeček splývá s částí fotky. V tomto případě je vhodné přidat ještě další linku v kontrastní barvě.
Rámeček je vhodné přidat až po zmenšení obrázku těsně před kompresí. Po dalším zmenšení by např. jednopixelová linka v rámečku mohla skoro zmizet a tím podstatně změnit vzhled rámečku. Rámeček se přidává kolem fotky, takže výslednou fotku zvětší.

IV: Menu Obrázek | Velikost plátna... V jednoduchém dialogu se nastaví počet pixelů na každou stranu a vybere se barva. Nic víc nic míň. V případě, že chcete mít rámeček vícevrstvý, postup opakuje.

PS: Rámeček lze přidat pomoci funkce Image | Canvas Size. Pomocí této funkce zvětšíme obrázek o volné místo, aniž by původní obrázek změnil velikost. Barva přidaného místa se použije právě nastavená barva pozadí nebo lze zvolit černou nebo bílou. V dialogu zadejte nové rozměry fotky. Pokud zaškrtnete volbu Relative, zadáváte hodnoty, o kolik chcete fotku zvětšit v každém směru. Pokud zadáte např. šířku a výšku 20 pixelů, obrázek se na každé straně zvětší o 10 pixelů. V případě vícebarevného rámečku stačí tento postup opakovat a měnit barvu pozadí a požadované rozměry.


4. Komprese

Při publikování obrázků na web, bývá často omezena i maximální velikost souboru - v našem případě je to 400kB.

IV:  Menu Soubor | Uložit pro web otevře se jednoduchý dialog kde je možno vybrat si typ souboru, v našem případě to bude JPG. Po té posuvníkem určujete velikost komprese a výsledek je možno sledovat na obrázku vpravo. Čím větší komprese (menší číslo) tím větší je pravděpodobnost vzniku artefaktů a chyb v obraze. Doporučeno okolo 75-85%. Vyšší hodnoty nemají smysl, protože změny nejsou většinou okem pozorovatelné. Zároveň je vidět velikost výsledného souboru. Takže pokud se vejdete do 400kB máte vyhráno. Po té se klikne na Save as, zadat jméno souboru a někam ho umístit a je to hotovo.

PS: K uložení obrázku zvolte funkci File | Save as (Ctrl+Shift+S). Vyberte formát JPEG a zadejte jméno souboru a cestu. Po odkliknutí Save se objeví dialog . Nastavte hodnotu Quality (9-11 doporučeno). Vlevo je vidět výsledná velikost souboru, takže se jen vejít do 400kB. Zapnutím volby Progressive ušetříte pár set bajtů až několik kilobajtů. Můžete táke použít volbu v menu Při zapnutém Preview je výsledný obrázek opět vidět v náhledu.

Pokud obrázek jeví i při velikosti 400 kB (což se nestane) znaky přílišné JPEG komprese (barevné fleky a kostičky, kontury kolem ostrých hran), nezbývá než zmenšit pixelovou velikost obrázku a zkusit zkomprimovat znovu. Obecně platí, že nejhůře (je potřeba použít vysokou kompresi - tj. hodnoty např. 20 - 30 %) se komprimují obrázky s hodně detaily - např. větve stromů, tráva atd. Jeden z takových "detailů" může být i šum, který nejenom většinou kazí dojem z obrázku, ale i zhoršuje kompresi. Naopak nejlépe se komprimují velké barevné plochy bez detailů, jako jsou třeba oblíbené mraky, západy slunce a podobně.


Závěr

Tento návod by měl být jen rychlým pomocníkem pro úplné začátečníky pro publikování fotografií na webu. Jestliže potřebujete pomoci výše zmíněný postup napasovat na váš používaný software, dejte vědět, něco vymyslíme.
Pro tento návod jsem z lenosti použil jako výchozí návod z www.dfklub.cz a tedy doufám, že jsem tím neporušil nějaká práva. Původnímu autorovi tímto tisíceré díky.

Aktualizováno Pátek, 13 Listopad 2009 00:27
 
© Copyright Klof • Všechna práva vyhrazena. Bez souhlasu autora je jakékoli užití fotografií či textů zakázáno.