Předvánoční Black Friday Předvánoční Black Friday
Až 80% zdarma! Předvánoční BLACK FRIDAY akce. Více informací

Diskuze: Rozmaznané ikony

HTML a CSS Webdesign Rozmaznané ikony American English version English version

Aktivity (1)
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:21. května 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. května 21:34
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:21. května 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. května 21:48
Avatar
Lukáš Hornych
Redaktor
Avatar
Odpovídá na Marek Mozola
Lukáš Hornych:21. května 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. května 21:53
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:21. května 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. května 22:24
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22. května 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. května 12:32
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:22. května 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. května 15:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22. května 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. května 15:36
 
Nahoru Odpovědět 22. května 15:36
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:22. května 16:41

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

 
Nahoru Odpovědět 22. května 16:41
Avatar
Vít Kološ
Člen
Avatar
Vít Kološ:22. května 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. května 22:16
Neopravuj, co není rozbité.
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:22. května 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. května 22:26
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23. května 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  -1 23. května 8:23
Avatar
Vít Kološ
Člen
Avatar
Odpovídá na Marek Mozola
Vít Kološ:23. května 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 device-pixel-ratio 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. května 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.