GIMP – návody 1: jak na oblé stínované obrázky pro web

logo-gimp Na některých webových stránkách (i zde :-)) se vyskytují obrázky či jejich náhledy se zaoblenými rohy a stínem. Jak na to v GIMPu? Velmi snadno – podívejte se spolu se mnou na krátký návod.

Spusťte GIMP (nebo GIMP s KDE dialogy :-)) a načtěte obrázek (rychleji klepněte na obrázek pravým tlačítkem myši a zvolte Otevřít pomocí > GIMP (nebo GIMP s KDE dialogy :-))).

Načtení obrázku

Načtení obrázku

Můžete obrázek zmenšit (Obrázek -> Velikost obrázku). Počítejte s tím, že díky stínování výsledný obrázek trochu naroste. Když tvořím náhledy já, nastavuji šířku 350 pixelů, výsledek pak má 380 px.

Zmenšený obrázek

Zmenšený obrázek

Z menu pracovního okna zvolte Filtry -> Dekorace -> Oblé rohy. Může se stát, že tato položka je neaktivní. Bývá tomu tak, pokud je například vstupní obrázek typu PNG. V tomto případě je nutno nejprve zploštit obrázek (Obrázek -> Zploštit obrázek).

Tolik malá odbočka, nyní tedy z menu pracovního okna zvolte Filtry -> Dekorace -> Oblé rohy. Já (u 380 px zmenšenin) nastavuji Poloměr hran na hodnotu 8. Zrušte zatržení u Pracovat s kopií a Přidat pozadí, následně klepněte na tlačítko Budiž.

Nastavení oblých rohů

Nastavení oblých rohů

Oblé rohy

Oblé rohy

Oblé rohy (zvetšeno)

Oblé rohy (zvetšeno)

Obrázek uložte v některém z formátů podporujícím průhlednost (aby bylo vidět pozadí stránky (elementu)), který prohlížeče dokáží zobrazit. Doporučuji PNG, GIF nezobrazí měkký, ale tvrdý stín, což nepůsobí pěkně. Na obrázcích je rozdíl mezi GIFem a PNG:

Obrázek v GIF

Obrázek v GIF

Obrázek v PNG

Obrázek v PNG

11 komentářů

  1. petos | 29.06.2008 | 22:55 | Odpovědět

    Dekuji. Vašich (nejen tohoto) návodů si velice cením a moc za ně děkuji. Jsou to drobnosti, ktere potesi a/nebo pomůžou a ulehčí spoustu hledání a trápení 🙂
    Mám napsaný článek pro použití GIMPu pro úpravu a zvýraznění astro-fotografií. Je to možné nějak vložit? Byl by zájem?

    1. Miroslav Cyroň | 30.06.2008 | 00:06 | Odpovědět

      Určitě. Můj mejl je miroslav.cyron@divido.cz . A nechcete psát víc? Potřebujeme hlavně články o programech. Zrovna na GIMP se mně nedávno Ivan Bíbr ptal. Bohužel neumím… Zkuste jej kontaktovat na bibri@bibri.net .

  2. Martin_P | 01.07.2008 | 09:44 | Odpovědět

    Oblé rohy se těžko dělají v indexovaných barvách, proto filtr nelze použít na PNG, ale jen na ty v indexované. Stačí obrázek převést na RGB (Obrázek>Režim>RGB) nebo jiného “plnohodnotného” barevného prostoru – kéž by už byl CMYK 😉 a je to. Počítejte s tím, že pokud obrázek teď uložíte i do PNG, je uložen v RGB a jeho velikost bude pravděpodobně výrazně odlišná od předchozí. Po operaci můžete obrázek převést zpět do indexů, ale, pokud je mi známo, GIMP umí maximálně 255 hodnot (přestože .png by neměl mít počet indexů omezen tak jako .gif), takže bude pravděpodobně viditelné odstupňování přechodů zaoblených rohů.
    Mimochodem, prosím o radu – v Corelu je možno transformovat – otáčet, kosit, lichoběžníkovat a měnit velikost objektu/vrstvy v jednom jediném kroku, takže s každou transformací zvlášť – jinak to v GIMP na první pohled nejde, se ztrácí kvalita. Existuje nějaká požnost, jak udělat tyto transformace najednou – v jednom kroku?

    1. Miroslav Cyroň | 01.07.2008 | 15:46 | Odpovědět

      Bohužel, ty zdrojové obrázky již v RGB jsou…

      1. Martin_P | 08.07.2008 | 09:50 | Odpovědět

        Tak to je divné, mě PNG v RGB jde dobře. Můžete je zkusit poslat na mpfg@centrum.cz?

  3. kvas | 01.07.2008 | 12:42 | Odpovědět

    velmi pekny a jasny tutorial. dakujem
    zaujem by urcite bol napr. ako urobit prelinanie obrazkov (logo + obrazok)

    1. Miroslav Cyroň | 01.07.2008 | 16:24 | Odpovědět

      Ano, to umím. Už píši.Díky za tip.

  4. […] GIMP – návody 1: jak na oblé stínované obrázky pro web […]

  5. […] GIMP – návody 1: jak na oblé stínované obrázky pro web […]

  6. […] GIMP – návody 1: jak na oblé stínované obrázky pro web […]

  7. […] GIMP – návody 1: jak na oblé stínované obrázky pro web […]

Leave a comment

Sorry, you must be logged in to post a comment. Login