Blog o vývoji softvéru na mieru

Najrýchlejšia tvorba prvotriednych webových stránok.

Príťažlivý vzhľad, jednoduché ovládanie, dodržaný rozpočet a časový harmonogram.

25. mája 2017 22:23
od DUFEKSOFT, s.r.o.
0 Komentáre

Ako upraviť obrázky pre webové stránky

25. mája 2017 22:23 od DUFEKSOFT, s.r.o. | 0 Komentáre

Prečítajte si praktický návod ako jednoducho upraviť obrázky skôr ako ich umiestnite na webové stránky.

Obrázky pre webové stránky

Ako upraviť rozmery obrázkov

V predchádzajúcom článku Ako správne používať obrázky na webových stránkach sme si povedali základné pravidlá pre použitie obrázkov na webových stránkach.

Teraz vám prinášame praktický návod.

Povedzme, že vytvárate katalóg produktov a chcete mať všetky obrázky s rovnakými rozmermi, aby katalóg na webových stránkach vyzeral celistvo.

Zvoľme povedzme rozmer 800 x 600 px. Označenie px predstavuje jednotku s názvom pixel. S týmto označením sa stretnete najčastejšie pri príprave obrázkov pre web.

V každej inštalácii Windows máte program s názvom Skicár, ktorý vám bude stačiť na základné úpravy obrázkov. Takže vyhľadajte program Skicár a spustite ho.

Zmena rozmerov obrázka v programe Skicár

Prostredie programu Skicár je zobrazené na nasledovnom obrázku.

Zmena rozmerov obrázka v programe Skicár

Kliknite na voľbu Súbor a zobrazí sa vám menu, v ktorom potom vyberte voľbu Otvoriť.

Zmena rozmerov obrázka v programe Skicár

Následne si nájdite vo vašom počítači obrázok, ktorý chcete upraviť a otvorte ho.

Zmena rozmerov obrázka v programe Skicár

Obrázok v našom príklade má rozmery 1920 x 1279 px, čo nám Skicár ukáže vo svojej spodnej časti  ako to znázorňuje nasledovný obrázok.

Zmena rozmerov obrázka v programe Skicár

Pre zmenu veľkosti kliknite na voľbu Zmeniť veľkosť v hornej časti programu ako vidieť na obrázku vyššie.  

Zmena rozmerov obrázka v programe Skicár

Vyberte si, že chcete zmeniť veľkosť pre Pixely. Povedali sme si, že chceme výsledný obrázok s rozmermi 800 x 600 px. Ako vidieť, ak zadáme šírku 800 px, tak výslednú  výšku nám program ukazuje, že bude 532 px, ale my chceme výšku 600 px.

Preto zadáme výšku 600 px a výsledná šírka bude 900 px. To nám však nevadí, pretože to vyriešime v ďalšom kroku orezaním obrázka.

Zmena rozmerov obrázka v programe Skicár

Potvrdíme teda zmenu rozmerov obrázka 900 x 600 px. Týmto spôsobom môžeme obrázky nielen zmenšovať, ale aj zväčšovať.

Ako orezať obrázok

Ako vidíte obrázok už má nové rozmery 900 x 600 px. Teraz ho orežeme na šírku 800 px. 

Orezanie obrázka v programe Skicár

Kliknite ľavým tlačidlom myši na pravý okraj obrázka na značku, ktorú vidieť na obrázku vyššie. Stále držte ľavé tlačidlo stlačené a posúvajte sa s myšou doľava.

V dolnej časti obrazovky uvidíte ako sa šírka obrázka zmenšuje. Pokračujte až kým nedosiahnete požadovanú šírku, v našom prípade 800 px.

Niekedy sa môže stať, že myš je príliš citlivá a obrázok orežete príliš. Môžete sa vrátiť o krok späť kliknutím na šípku vľavo hore ako sme vám naznačili na nasledovnom obrázku a skúste potom obrázok orezať znovu.

Orezanie obrázka v programe Skicár

Podobne ako šírku, môžete meniť aj výšku obrázka. Značku na uchopenie myšou nájdete na spodnom okraji obrázka. Stačí keď sa posuniete úplne dole.

Orezanie obrázka v programe Skicár

Upravený obrázok uložíte späť do počítača kliknutím na ikonu diskety vľavo hore alebo kliknutím na voľbu Súbor a následne výberom voľby Uložiť.

Orezanie obrázka v programe Skicár

Formát a veľkosť obrázka

Súbory obrázkov môžu byť rôzneho typu. Najčastejšie sa môžete stretnúť s obrázkami typu BMP, PNG, JPG, prípadne animovanými obrázkami GIF.

Obrázky BMP pre web vôbec nepoužívajte, pretože ich veľkosť pri rovnakom obsahu obrázku je najväčšia, takže pre rýchle načítanie webových stránok je to ten najhorší formát.

Obrázky typu PNG majú tú výhodu, že môžu byť čiastočne aj priesvitné, takže môžu byť na webe cez ne viditeľné aj prvky, ktoré sú na webe pod nimi.

Obrázky typu JPG sú výhodné v tom, že pre rovnaký obsah obrázka majú z formátov BMP, PNG a JPG najmenšiu veľkosť. Ak teda nepotrebujete priehľadný obrázok, snažte sa používať typ obrázka JPG.

Ak je váš obrázok iného typu ako JPG, vôbec to nevadí. Pokojne môžete vychádzať aj z obrázka PNG, či BMP. Program Skicár vám umožní pôvodný typ obrázka zmeniť.

Pri ukladaní obrázka vyberte voľbu Uložiť ako

Zmena typu obrázka v programe Skicár

Pri ukladaní vyberte typ obrázka JPEG a váš nový obrázok je na svete.

Voľbu Uložiť ako môžete použiť taktiež aj na zmenu mena obrázka a zachovať si tak pôvodný neupravený obrázok a s novým menom uložiť upravený obrázok.

Tak s chuťou do toho, nech máte krásny web!

 

Zaujal vás tento článok? Dajte vedieť aj vašim známym.

 

Sledujte naše sociálne siete.

 Facebook Twitter Google Plus You Tube