Diskuze: Rozmaznané ikony

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

Marek Mozola

Člen

Marek Mozola:21.5.2018 21:34

Zdravím, riešim problém už niekoľký krát, no nikdy som ho nejak nevyriešil. Ide o to, že mám dajme tomu logo (musí byť png, nieje jednofarebné) nahrám ho na web v rozlíšení takom, akom ho zobrazujem,a ono je proste rozmazané. Okraje nie sú úplne také ostré, aké by som chcel. Prikladám ako to vyzerá:
Dá sa nejak vyriešiť, aby ten obrázok bol ostrý? Inak keď si ho zobrazím v programe na fotky tak nieje rozmazané a vyzerá normálne

Odpovědět

21.5.2018 21:34

Marek Mozola

Člen

Marek Mozola:21.5.2018 21:48

vyriešil som to tak, že som dal logo vo veľkom formáte a ručne som mu nastavil veľkosť cez css.. koľko násobná by mala byť maximálne veľkosť toho obrázka?

Nahoru Odpovědět

21.5.2018 21:48

Lukáš Hornych

Tvůrce

Lukáš Hornych:21.5.2018 21:53

Proč neudělat to logo vektorové? Vektorový obrázek přece může být i barevný. Jinak načítat velký obrázek, a pak ho přes CSS změnšovat není vůbec dobrý nápad, zbytečně zpomaluješ načítání webu.

Nahoru Odpovědět

21.5.2018 21:53

Marek Mozola

Člen

Marek Mozola:21.5.2018 22:24

V tom prípade hľadám niekoho kto by mi pomohol v illustratore spraviť taký gradient, ako je na obrázku vyššie. Pre niekoho je to možno na 5 minút, ale vždycky som robil len s photoshopom..

Nahoru Odpovědět

21.5.2018 22:24

Peter Mlich

Člen

Peter Mlich:22.5.2018 12:32

Ten link, co jsi dal, pri ulozeni vypise priponu jpeg. Coz by odpovidalo, jpeg se rozostruje. Takze to uloz jako png. Nebo gif.
(Original jsi nedal, dal jsi to pres forum, to si to mohlo zkonvertovat.)
https://www.itnetwork.cz/…1998_image_0

Mrkni, jak jsem si pohral s logem FPF. Zmensoval jsem to z pdf, kde to vektorove nevylo ani nahodou. I pismenka jsou citelna, celkem To jsem uz teda doostroval a nejake dalsi operace.
http://www.slu.cz/fpf/cz/
https://www.slu.cz/…w-220x84.png
Pak mrkni na kolegu, orlici.
http://www.slu.cz/opf/cz/

Pri zmensovani se da zvolit, jake ma pouzit vypocty. Pro zmensovani je obcas lepsi pouzit pixelovani do dvojnasobne veliskosti a pote to zmensit pomoci jine metody s rozmazanim.

Nahoru Odpovědět

22.5.2018 12:32

Marek Mozola

Člen

Marek Mozola:22.5.2018 15:06

Ten moj link je iba screen.. Robil si to v ilustratore alebo photoshope? Dá sa to tak spraviť aj v PSku?

Nahoru Odpovědět

22.5.2018 15:06

Peter Mlich

Člen

Peter Mlich:22.5.2018 15:36

Pouzivam Gimp.
Zmensovani je v menu: Obrazek > skalovat obrazek > metoda : zadna / linearni / kubicka / sinc

Vetsinou zkousim vic metod zmensovani. A obcas si hraji s ruznymi metodami doostrovani. Gimp tam ma klasicke ostreni. Ale je mozne doostrovat i pomoci rozmazavani. Duplikujes vrstvy. jednu orzmazes. Udelas jejich rozdil. A ten rozdil pridas k puvodnimu obrazku. On ti to trochu zasumi, ale zvyrazni barvy. Velmi efektni je to na rozmazane fotky. Na ostrych fotkach to zas skodi.
Proste si s programem musis hrat a zkouset a obcas narazis na velmi prekvapujici efekt. Kdo by cekal, ze pomoci rozmazavani lze fotku doostrit, ze?

Editováno 22.5.2018 15:36

Nahoru Odpovědět

22.5.2018 15:36

Marek Mozola

Člen

Marek Mozola:22.5.2018 16:41

podľa mňa je tá fotka fajn, ale na webe sa mi to proste zobrazuje rozmazane..

Nahoru Odpovědět

22.5.2018 16:41

Vít Kološ

Člen

Vít Kološ:22.5.2018 22:16

Nevím, kde (na jakém zařízení) se ti ten obrázek ukazuje rozmazaně. Já jsem měl podobný problém na mobilu, který jeden pixel zobrazuje jako dva a tři čtvrtě – problém s rastrem byl na světě.
Pro tebe by asi bylo řešení převést obrázek do SVG nebo použít srcset.
Další informace: Vzhůru dolů.

Nahoru Odpovědět

22.5.2018 22:16

Neopravuj, co není rozbité.

Marek Mozola

Člen

Marek Mozola:22.5.2018 22:26

robí mi to aj na pc, ale aj na mobile.. skúsim použiť teda dvakrát väčší obrázok, pretože fakt sa necítim na to, aby som to spravil vo vektore

Nahoru Odpovědět

22.5.2018 22:26

Peter Mlich

Člen

Peter Mlich:23.5.2018 8:23

Tak to budes muset upresnit. Jaky system, jaky prohlizec, jaka verze.

Mas mobil s fotakem a dela ti to na pc? Vyfot to. A udelej na pc screenshoot. Pak to porovnej. Pripadne obrazky dej zas sem.
Obcas, nekteri lide maji nastavene nespravne rozliseni obrazovky. Vysledkem je, ze predevsim text maji rozmazany. Pc se snazi prepocitavat pul-pixely na pixely. Neco malo dokaze aliasingem vyhladit, ze si toho mozna nevsimnes.Kdyz udelas screen, tak by melo byt vse ostrejsi, treba pri prohlizeni na jinem pc. Pak by to byl tento problem.

A jeste maji prohlizece zabudovane ruzne zmensovaci efekty a vyhlazovani. Pro rychlejsi vykresleni pocitani mene presne. Muzes je k tomu donutit. Vyberu par moznosti z googlu, treba neco z toho bude fungovat...

-ms-interpolation-mode: bicubic;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: grayscale;

  image-rendering: auto; /* https://css-tricks.com/almanac/properties/i/image-rendering/ */
  image-rendering: crisp-edges;
  image-rendering: pixelated;

mix-blend-mode: luminosity;
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);

https://stackoverflow.com/…-and-60-only
Tady kombinuji prekryti obrazku pixelovany s tim rozmazanym.

Nahoru Odpovědět

23.5.2018 8:23

Vít Kološ

Člen

Vít Kološ:23.5.2018 18:48

V tom případě bych na rozdíl od nějakých hacků použil standardní atributy srcset a sizes. Na webu Martina Michálka je o nich zajímavý článek.

Jsem si skoro jistý, že je problém způsoben právě vysokou hodnotou <code>device-pixel-ratio</code> u tvých zařízení. Nejčistším řešením problému je právě použití výše zmíněných atributů.

Samozřejmě, že je jednodušší tam dát dvojnásobný obrázek, myslím ale, že to ale uživatel (zvláště na mobilním zařízení) negativně pocítí.

Nahoru Odpovědět

23.5.2018 18:48

Neopravuj, co není rozbité.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.

Nejčastěji vyhledáváné

Diskuze: Rozmaznané ikony