P°φprava obrßzk∙

Datov² formßt - Grafick² program - Datov² objem - JPG - GIF - Proklßdßnφ - Dal╣φ formßty - Pr∙hlednΘ obrßzky - AnimovanΘ gify - Sejmutφ obrazovky

Datov² formßt

Obrßzek je soubor. Na internetu se b∞╛n∞ pou╛φvajφ dva grafickΘ formßty -- *.jpg a *.gif. StruΦn∞ °eΦeno jpg je lep╣φ na fotografie, gif na v╣echno ostatnφ.

Jak ud∞lat obrßzek (pro zaΦßteΦnφky)

Jak se t°eba dß zφskat obrßzkov² soubor:

• Stßhnout z webu pomocφ p°φkazu ulo╛it obrßzek jako (save image as) a ulo╛it na disk.
• Najφt n∞kde na disku nebo pou╛φt sbφrky obrßzk∙, kterΘ se dodßvajφ s n∞kter²mi programy.
• Nakreslit si obrßzek my╣φ v grafickΘm programu a ulo╛it to jako gif nebo jpg.
• Naskenovat a ulo╛it, takΘ v grafickΘm programu.
• Sejmout obrazovku z n∞jakΘho programu a upravit v grafickΘm programu.

Jin²mi slovy, mo╛nostφ je vφce, ale cφlem musφ b²t soubor ve formßtu .gif nebo .jpg Ten se pak vlo╛φ do strßnky.

Grafick² program

Existujφ jich tisφce. 

• Na Linuxu kraluje v grafick²ch programech Gimp (kter² je zdarma i pro Windows, ale tam n∞kdy padß).
• Jß pou╛φvßm program Paint Shop 5. Pro souΦasnΘ pot°eby webovΘ grafiky je tΘm∞° dokonal² a neznßm nikoho, kdo by v n∞m rozum∞l v╣em funkcφm. 
• Adobe Photoshop se dß takΘ pou╛φt, ale je dra╛╣φ, jde o profesionßlnφ nßstroj. Je zam∞°en² na obecnou bitmapovou grafiku a nßstroje pro web mß skoro jenom jako dopln∞k.
• Microsoft PaintBrush (windowsovskΘ Malovßnφ) od verze 2000 umφ takΘ uklßdat do jpg a gif, ale pracuje se s nimi jen v nouzi. 
• LidΘ si stra╣n∞ chvßlφ program Macromedia Fireworks, jß jej neznßm. 
• Dßle existuje spousta polo-editor∙, kterΘ um∞jφ t°eba jenom o°ezßvat a optimalizovat, nap°. Ulead transformer. 
• atd.

Hlavnφm kritΘriem pou╛itelnosti editoru je, zda umφ uklßdat do jpg a gif. Tak╛e t°eba Malovßnφ z Windows∙ 98 je na nic.

Datov² objem

Hlavnφ p°ikßzßnφ webovΘho grafika znφ: obrßzky se nesm∞jφ dlouho stahovat, musejφ b²t co nejmen╣φ. Proto jsou gif i jpg formßty kompresnφ.

Dßvat na web obrßzek v∞t╣φ ne╛ takov²ch 60 kB je vcelku nesmysl, proto╛e se na jednΘ obrazovce stejn∞ nem∙╛e pat°iΦn∞ zobrazit.

JPG

Formßt JPG (tΘ╛ JPEG) je vhodn² pro uklßdßnφ fotografiφ a obrßzk∙ s velkou barevnou hloubkou. Jpeg neumo╛≥uje d∞lat pr∙hlednΘ nebo animovanΘ obrßzky.

Pou╛φvß ztrßtovou kompresi, to znamenß, ╛e Φßst informace vypou╣tφ. D∞lß to tak, aby to lidskΘ oko pokud mo╛no nepoznalo. Mφra tΘto komprese se dß nastavit v grafickΘm programu. Ale pozor, po ka╛dΘm znovuotev°enφ a ulo╛enφ se op∞t provßdφ komprese, tak╛e se tφm obrßzek stßle znehodnocuje. Je proto dobrΘ mφt p°edlohu ulo╛enou v n∞Φem neztrßtovΘm a po ka╛dΘ ·prav∞ importovat do jpg. 

GIF

GIF takΘ pou╛φvß kompresi, ale neztrßtovou, tak╛e jsou ty soubory relativn∞ v∞t╣φ ne╛ JPG, ale zato jsou p°esnΘ (zachovßvajφ barvy a kontury). M∙╛e se v n∞m vyskytovat maximßln∞ 256 barev. Jedna z barev se m∙╛e oznaΦit jako pr∙hlednß (tu prohlφ╛eΦ potom nezobrazφ), gify tΘ╛ podporujφ animace.

Barevnß hloubka GIFu

Na Internetu zßle╛φ na ka╛dΘm bitu, a proto Φφm jsou obrßzkovΘ soubory men╣φ, tφm lΘpe. Je zbyteΦnΘ k≤dovat v gifu 256 barev, kdy╛ pou╛φvß t°eba jenom dv∞ nebo Φty°i. Pokud se v grafickΘm programu snφ╛φ barevnß hloubka (poΦet barev), podstatn∞ se u╣et°φ velikost souboru (u ΦernobφlΘho souboru a╛ osminßsobn∞). Postup p°i sni╛ovßnφ poΦtu barev se op∞t li╣φ od programu k programu. V angliΦtin∞ je to obvykle p°φkaz "decrease color depht" nebo "export - bitmap".

Prou╛kovßnφ

Z datovΘho formßtu GIFu vypl²vß zajφmavß vlastnost: pokud °ßdek bod∙ obsahuje jenom jednu barvu, velmi se ╣et°φ datov² objem. Jednoduch² gif obsahujφcφ zejmΘna barevnΘ prou╛ky (a mßlo p°echod∙) se tedy ulo╛φ velmi ·sporn∞. 

Proklßdßnφ (progresivnφ vykreslovßnφ)

P°i uklßdßnφ soubor∙ JPG i GIF se dß nastavit, zda se majφ vykreslovat proklßdan∞. KonkrΘtnφ postup nastavenφ proklßdßnφ p°i uklßdßnφ obrßzku zßvisφ na pou╛itΘm editoru. V anglick²ch editorech se to jmenuje "interlaced" nebo "progresive encoding". 

Normßln∞ se obrßzky vykreslujφ po °ßdcφch odshora, ale kdy╛ se nastavφ toto proklßdßnφ, tak se nap°ed vykreslφ zaml╛enΘ, ale celΘ. Jak postupn∞ dochßzejφ dal╣φ data, tak se zobrazenφ zp°es≥uje. Je to hezkΘ.

Dal╣φ formßty

Existuje "nov²" formßt png (Portable Network Grafics), kter² by m∞l mφt v²hody gifu i jpegu. Ale p°φli╣ se nepou╛φvß, pravd∞podobn∞ kv∙li nepodpo°e star╣φch prohlφ╛eΦ∙. Dnes (dopln∞no 2003) jej lze bez obav pou╛φvat.

Prohlφ╛eΦe verze 4 v sob∞ majφ podporu i jin²ch formßt∙; kup°φkladu IE 4 podporuje minimßln∞ bmp. Ale takov² soubor rozhodn∞ nedoporuΦuji do strßnek za°azovat, proto╛e je moc velk² a prohlφ╛eΦe krom∞ IE jej stejn∞ Φφst neum∞jφ.

P°evß╛nß v∞t╣ina netradiΦnφch grafick²ch formßt∙ pot°ebuje ke svΘmu zobrazenφ plu╛inu (plug-in), co╛ je podp∙rn² program prohlφ╛eΦe. Chcete-li umφstit na strßnky n∞co hodn∞ divokΘho, musφte si na webu najφt plu╛inu. Obrßzek pak nezadßvat jako <img>, ale jako <object> nebo <embed> s odkazem na umφst∞nφ plu╛iny.

Pr∙hlednΘ obrßzky

V grafickΘm editoru m∙╛ete ud∞lat gif, kter² bude mφt n∞kterΘ Φßsti pr∙hlednΘ. V²hody jsou tyto:

• pod obrßzkem se m∙╛e vykreslovat pozadφ
• pokud zm∞nφte barvu pozadφ strßnky, nemusφte se o obrßzek starat
• p°i pou╛itφ animacφ, pozicovßnφ a r∙zn²ch obtΘkßnφ p∙sobφ barevnΘ okraje obrßzku ru╣iv∞.

Zpr∙hledn∞nφ se v ka╛dΘm grafickΘm editoru d∞lß jinak, idea je takovß, ╛e se vybere jedna barva a ta se nastavφ jako pr∙hlednß. Jak na to:

1. Sni╛te barevnou hloubku nejv²╣e na 256 barev, rad∞ji mΘn∞.
2. V╣echny oblasti, kterΘ majφ b²t pr∙hlednΘ, vypl≥te n∞jakou barvou (doporuΦuji n∞co kontrastnφho, stejn∞ pak zmizφ).
3. Tuto barvu pak nastavte jako pr∙hlednou. V∞t╣inou na to existuje p°φkaz, kter² dovoluje ╗uknout na tu barvu. Pokud mßte anglick² grafick² editor, hledejte p°φkaz, ve kterΘm se vyskytuje slovo "transparent" (angl. pr∙hledn²).
4. Ulo╛te jako gif.

Opravdov²m problΘmem pr∙hledn²ch gif∙ jsou r∙znΘ p°echody a okraje ploch, kterΘ obsahujφ mnoho p°echodov²ch odstφn∙. Na jinΘ barv∞ pozadφ potom budou po okrajφch teΦkovanΘ. TakovΘ obrßzky doporuΦuji rad∞ji dßvat do jpg a zpr∙hledn∞nφ o╛elet.

Jin²m problΘmem m∙╛e b²t to, ╛e je pot°eba zpr∙hlednit vφce ne╛ jednu barvu. To nejde. Je pot°eba v╣echny takovΘ odstφny p°evΘst na jeden a ten zpr∙hlednit.

Kdy╛ se pr∙hlednΘ obrßzky tisknou, mφsto pr∙hlednΘ barvy se netiskne nic. Kdyby byl pod obrßzkem jin² objekt (nap°. pozicovan²), nevytiskne se.

AnimovanΘ gify

Formßt gif dovoluje posklßdat v sob∞ n∞kolik obrßzk∙ a sestavit z nich animaci. Musφte na to mφt n∞jak² specißlnφ program, v∞t╣inou se to jmenuje "bla bla Animator". V normßlnφm editoru si p°ipravφte grafickΘ sekvence, kterΘ v animßtoru posklßdßte, nastavφte Φasovßnφ a ulo╛φte do gifu. AnimovanΘ gify se ve strßnkßch pou╛φvajφ ·pln∞ stejn∞ jako normßlnφ gify, co╛ je fantastickß v²hoda.

Nev²hodou animovan²ch gif∙ je znaΦnß ru╣ivost pro Φtenß°e (tak╛e se pou╛φvß prakticky pouze v reklamßch) a n∞kdy i dost velk² datov² objem.

Sejmutφ obrazovky

Kdy╛ chci ud∞lat obrßzek z toho, co mßm na obrazovce, pou╛iju klßvesu Print Screen (naho°e nad insertem). V tu chvφli se do schrßnky vlo╛φ obrßzek aktußlnφ obrazovky (bez ukazatele my╣i). Ten se dß pak vlo╛it do n∞jakΘho grafickΘho programu p°φkazem Vlo╛it (Ctrl + V) a upravit.

Zkratka Alt + Print Screen sejme pouze aktivnφ okno. To je Φasto dost pohodlnΘ, proto╛e se to pak nemusφ o°ezßvat.

Dal╣φ: Obrßzky v HTML
Vizte tΘ╛: prßce se soubory, v╣e o pozadφ