Nejlepší webové stránky s vektorovými ilustrace

Se vÅ¡emi možnostmi obrazu a form¡tů souborů, může to b½t trochu ohromuj­c­, když si vyberete, jak½ typ souboru použ­t (a odeslat klientům). Kompatibilita je vždy znepokojen­, když pracujete s různ½mi typy souborů, ale pokud jde o grafiku a obr¡zky typu poč­tačovho grafickho form¡tu, kter½ použ­v¡te, je nezbytn½ pro to, jak vykresluje obrazu. / p >.

Existuj­ dva typy digit¡ln­ch grafick½ch souborů - vektor a rastr. Vektorov obr¡zky jsou vyrobeny ze stovek tis­c drobn½ch lini­ a kÅ™ivek (nebo cest) k vytvoÅ™en­ obrazu. Rastrov obrazy se skl¡daj­ z pixelů. Ale jak v­te, jak½ form¡t je nejlepÅ¡­ pro v¡Å¡ dalÅ¡­ projekt?

Ultimate Designer Toolkit: Million + aktiva

Tato webov¡ str¡nka použ­v¡ bezpečnostn­ službu pro ochranu pÅ™ed online ºtoky. Akce, kterou jste pr¡vÄ› provedli spuÅ¡tÄ›n bezpečnostn­ Å™eÅ¡en­. Existuje nÄ›kolik akc­, kter by mohly vyvolat tento blok, včetnÄ› odesl¡n­ určitho slova nebo fr¡ze, pÅ™­kazu SQL nebo chybnÄ› form¡tovan¡ data. / p >.

Co mohu udělat, abych to vyřešil?

To je ide¡ln­ pro použit­ pro web i tiskov½ design. Ve skutečnosti m¡me spoustu kompilac­, kter maj­ vektorov obr¡zky (můžete zač­t s naÅ¡imi v­ceºÄelov vektorov sady ikon), ale v pÅ™­padÄ›, že chcete udÄ›lat sv vlastn­ vyhled¡v¡n­, m¡me dalÅ¡­ nejlepÅ¡­ vÄ›c. / p >.

Obr¡zek může mluvit 1000 slov. Obr¡zky jsou důležitÄ›jÅ¡­ než kdy jindy v dopravÄ› zpr¡vy. Sn­mky Nespr¡vnÄ› exportov¡ny vÅ¡ak mohou vypadat n­zkou kvalitu, způsob­, že vaÅ¡e str¡nky se pomalu zat­Å¾it a ztratit angažovanost od uživatele. Zde jsou nÄ›kter tipy, kter můžete použ­t, abyste se ujistili, že každ¡ grafika je kr¡sn¡ a ostr¡. / p >.

Uložen­ sn­mků ve spr¡vnm barevnm prostoru

Existuj­ dvÄ› barevn prostory poč­tače použ­vaj­ k zobrazen­ sn­mků: RGB a CMYK. RGB (červen¡, zelen¡, modr¡) je standardn­ barevn½ prostor pro digit¡ln­ zaÅ™­zen­. Ve v½choz­m nastaven­ je v tomto barevnm profilu uložen jak½koliv sn­mek vytvoÅ™en½ fotoapar¡tem nebo poč­tačem. Můžete vÅ¡ak m­t obr¡zky, kter jsou CMYK, barevn½ profil použ­van½ tisk¡rnami. PÅ™ed použit­m tÄ›chto obr¡zků na webu může program, jako napÅ™­klad Adobe Photoshop pÅ™evst barvy na RGB, takže vaÅ¡e obr¡zky jsou živ a jasn. / p >.

pÅ™evst obraz CMYK na RGB, otevÅ™ete obr¡zek v aplikaci Adobe Photoshop. PÅ™ejdÄ›te na obr¡zek v panelu nab­dek a v rozev­rac­m se pÅ™esuňte režim a vyberte barvu RGB. To bude pÅ™evst obraz do barevnho prostoru RGB a můžete si vÅ¡imnout nÄ›kter barvy jsou živÄ›jÅ¡­. D¡le pÅ™ejdÄ›te do souboru a uložte soubor a uložte soubor. Nezapomeňte zmÄ›nit n¡zev souboru, takže vy nebo nÄ›kdo jin½ v­, že je soubor pro digit¡ln­ aplikace. / p >.

Obsah

Vektorov¡ grafika je velmi užitečn¡ v mnoha pÅ™­padech - maj­ mal velikosti souborů a jsou vysoce Å¡k¡lovateln, takže nepouž­vaj­ pixelate, když pÅ™ibl­Å¾­ nebo foukan do velk velikosti. V tomto čl¡nku v¡m uk¡Å¾eme, jak zahrnout jeden na webovou str¡nku. / p >.

Co jsou vektorov¡ grafika?

v¡m d¡ pÅ™edstavu o rozd­lu mezi nimi, pod­vejme se pÅ™­klad. Najdete zde tento pÅ™­klad ž­t na naÅ¡em GitHub repo jako vector-versus-rastr. TML - ukazuje dvÄ› zd¡nlivÄ› identick obrazy vedle sebe, červenou hvÄ›zdou s čern½m st­nem. Rozd­l je v tom, že lev½ je PNG a ten spr¡vn½ je obraz SVG. / p >.

Rozd­l se st¡v¡ zÅ™ejm½m pÅ™i pÅ™ibl­Å¾en­ str¡nky - obraz PNG se st¡v¡ pixelated pÅ™i pÅ™ibl­Å¾en­, protože obsahuje informace o tom, kde každ½ pixel by mÄ›l b½t (a jakou barvu). Když je pÅ™ibl­Å¾en, každ½ pixel je zv½Å¡en velikost pro vyplnÄ›n­ v­ce pixelů na obrazovce, takže obraz začne vypadat blokovat. Vektorov½ obr¡zek vÅ¡ak i nad¡le vypadat pÄ›knÄ› a ostr, protože bez ohledu na to, jakou velikost je, algoritmy se použ­vaj­ k vypracov¡n­ tvarů v obraze, s hodnotami, kter jsou zmenÅ¡eny, jak se dostane z vÄ›tÅ¡­ch. / p >.

Pozn¡mka: v½Å¡e uveden obr¡zky jsou vlastnÄ› vÅ¡echny pngs - s levou hvÄ›zdou v každm pÅ™­padÄ› pÅ™edstavuj­c­ rastrov½ obraz a prav¡ hvÄ›zda pÅ™edstavuj­c­ vektorov½ obr¡zek. OpÄ›t pÅ™ejdÄ›te do vektoru-versus-rastr. TML Demo pro skutečn½ pÅ™­klad!

KromÄ› toho, vektorov soubory obrazu jsou mnohem lehč­ než jejich rastrov ekvivalenty, protože oni potÅ™ebuj­ jen držet nÄ›kolik algoritmů, sp­Å¡e než informace o každm pixelu v obraze individu¡lnÄ›.

Používáme cookies.
Cookies používáme, abychom zajistili, že vám poskytneme nejlepší zkušenosti na našich webových stránkách. Pomocí webových stránek souhlasíte s naším využitím cookies.
Povolit cookies.