Prije nego što pređemo na suštinu, jedna kontekstualna napomena: tokom pregledavanja možete naići na obavještenja o privatnosti i kolačićima na nekim web stranicama (na primjer, popularni forumi prikazuju poruke o pristanku). Ovo nije relevantno za tehnički proces koji ćete slijediti, ali vrijedi znati da ove stranice često prikupljaju savjete više korisnika. Međutim, ovdje ćete pronaći sveobuhvatan i koherentan vodič s provjerenim smjernicama za izbjegavanje uobičajenih grešaka i postizanje uspjeha. Oštri, lagani PNG-ovi spremni za web ili aplikaciju.
Izvoz kvalitetnih PNG datoteka predstavlja ravnotežu između planiranja (veličina piksela, mreža i boja), odabira metode izlaza i brzih provjera. Ako primijenite gore navedene smjernice, vaši će resursi biti oštri, sa savršenom transparentnošću i spremni za bilo koje okruženje, od odredišne stranice do mobilne aplikacije, uz održavanje... vizualna vjernost i razumna težina.
Šta pripremiti u Illustratoru prije izvoza
Kvalitet PNG datoteke se ne određuje samo u trenutku izvoza: ona počinje u samom dokumentu. Što bolje postavite osnovnu liniju, manje ćete iznenađenja imati kasnije. Cilj je da vaša vektorska grafika bude rasterizirana u ispravnoj veličini i bez pomjeranja koja stvaraju ghosting ili halo efekte. Da biste to učinili, prvi korak je kvadriranje platna. Kreirajte ili prilagodite dokument pomoću... radna površina u pikselima tačno do konačne veličine koja vam je potrebna (npr. 1200 × 628 px).
Aktivirajte odgovarajući prikaz: Idite na Prikaz > Pregled piksela. Ovaj prikaz vam omogućava da provjerite kako će izgledati vaš rasterski dizajn, što je vrlo korisno za otkrivanje mutnih ivica na ikonama i tankim linijama. Ako vidite čudno zamućenje, vjerovatno je da je element pozicioniran pomoću decimalnih koordinata ili s mjerama koje se ne zaokružuju na cijele piksele. U tim slučajevima koristite Poravnaj na mrežu piksela da Konture padaju na cijele piksele i izbjegnite tipično zamućenje od 1 px.
Provjerite boju: Za PNG-ove namijenjene za ekrane, radite u RGB-u. Korištenje Dokument > Način boje > RGB osigurava da se boje ispravno prikazuju na webu i uređajima. Ako ste radili s CMYK-om, možete primijetiti promjenu zasićenosti; iskoristite to za podešavanje tonova dok ste još u vektoru. U izvezenoj datoteci aktivirajte konverziju u sRGB kada je opcija dostupna, jer sRGB je standardni prostor boja za web i smanjuje razlike između preglednika i sistema.
Provjerite rezoluciju efekata: Ako koristite sjene, zamućenja ili sjaj, idite na Efekt > Postavke efekata rastera dokumenta. Vrijednost koju ovdje postavite utjecat će na način na koji se ti efekti prikazuju kada se konvertuju u bitmapu. Za web dijelove, 72–150 dpi je obično dovoljno; za materijal koji će se također štampati ili ako tražite maksimalnu oštrinu detalja, idite do 300 dpi. Što je veći dpi, to je efekat jači, stoga birajte mudro; važno je da efekti se izračunavaju s dovoljnom gustoćom kako se ne bi "lomili" prilikom izvoza. Ako radite s intenzivnom rasterizacijom, korisno je konsultovati vodiče o tome kako kreirati optimizirane PNG-ove u rasterizatorima poput Photoshopa kako biste uporedili rezultate i procese.
Pazite na poteze i skaliranje: Ako transformirate svoj umjetnički rad, uključite Scale Strokes and Effects u Postavkama ili prilikom korištenja alata za transformaciju. Ovo će spriječiti da obrisi postanu djelomične širine poput 0,5 px, što može uzrokovati nazubljeno anti-aliasing. Kada ciljate na maksimalnu preciznost, razmislite o proširivanju poteza prije izvoza (Objekt > Proširi) tako da linije postaju čvrsti oblici i gube zavisnost od širine poteza koja može uzrokovati meke rubove.
Izrežite višak: Ako želite da PNG bude potpuno iste veličine kao i tabela, omogućite izrezivanje radne površine tokom izvoza. Ovo osigurava da nema dodatnih piksela ili neočekivanih praznina. Ovo je posebno važno za ikone ili logotipe, gdje neželjena margina može biti vrlo uočljiva; korištenje opcije "Koristi radne površine" ili njenog ekvivalenta će je učiniti... PNG nasljeđuje ograničenja radne površine bez ikakve dodatne umjetnosti.
Napravite provjeru kako biste izbjegli uobičajene greške: provjerite da li su važni elementi poluprozirni ako vam nisu potrebni, da li je pozadina prozirna ako očekujete alfa kanal i da li je tekst pravilno rasteriziran na željenu veličinu. Za interfejse ili banere, provjerite da tekst tijela ne ispadne premalen; ako se veličina kasnije promijeni, izvezite više verzija (1x, 2x, 3x) umjesto skaliranja prethodno generiranog PNG-a. Uvećavanje rastera uvijek smanjuje oštrinu.Ako trebate biti sigurni da vaša tipografija neće propasti, razmislite o konverziji ili pretvoriti tekst u objekt prije izvoza.
Kako izvesti PNG bez gubitka kvalitete: metode i postavke
Illustrator nudi nekoliko putanja za izvoz u PNG. Nisu sve jednake i dobra je ideja odabrati onu koja najbolje odgovara vašem radnom procesu. Općenito govoreći, Export for Screen (Izvoz za ekran) i panel Asset Export (Izvoz resursa) su najpogodniji za više veličina; Export As (Izvoz kao) vam daje detaljnu kontrolu u jednoj datoteci; a Save for Web (zastarjela verzija) je i dalje korisna za opcije boja i pregleda. Važno je primijeniti dosljedne postavke na svaku od njih. održava oštrinu, boju i transparentnost.
Izvoz kao: direktna kontrola za PNG
Idite na Datoteka > Izvoz > Izvoz kao… i odaberite PNG. Označite "Koristi radnu površinu" ako želite da izrezivanje poštuje radnu površinu. U okviru s opcijama odaberite ove vrijednosti: rezolucija željene veličine (možete postaviti prilagođenu rezoluciju za skaliranje), prozirna pozadina i anti-aliasing. Anti-aliasing je ovdje ključan: odaberite "Optimizirano za umjetnost (supersampling)" za ilustracije i oblike ili "Optimizirano za tekst (s nagovještajem)" ako dajete prioritet malom tekstu. Ovo će osigurati da rubovi se glatko stapaju bez oreola na svijetlim ili tamnim pozadinama.
Ako vam je potreban PNG sa tačnom veličinom piksela (npr. 1024 × 1024), idealno je ako vaša tabela već mjeri tu veličinu. Međutim, iz opcije Izvoz kao (Export as) možete pomnožiti sa skalom (50%, 100%, 200%, itd.). Izbjegavajte skaliranje na vrijednosti koje nisu okrugle, jer to dovodi do neravnomjernog ponovnog uzorkovanja. Ako vidite zamućenje u pregledu piksela, vratite se i prilagodite dimenzije radne površine ili mjere vaših elemenata. zaokružite na cijele brojeve i izbjegavajte interpolacije.
Izvoz za ekrane: Više veličina u hodu
Pristupite mu putem Datoteka > Izvoz > Izvoz za ekrane. Ovo je savršeno za pripremu 1x, 2x i 3x varijanti za web ili mobilne uređaje. Dodajte skale (npr. 1x, 2x) i odaberite PNG kao format. Možete izvesti po radnoj površini ili po resursu (ako definirate resurse iz panela). Provjerite je li opcija pozadine postavljena na prozirno i jesu li sufiksi (poput @2x) ispravno generirani. Ova metoda vam štedi vrijeme i osigurava konzistentnost u svim veličinama, tako da Svaka gustoća dobija svoj izvorni raster i ne ovisite o kasnijim proširenjima. Ako vam je potrebna dokumentacija o radnim procesima izvoza, pogledajte vodiče o tome kako spremiti datoteke i formate za referencu najboljih praksi.
Koristan savjet: Ako vaš dizajn izgleda čudno pri 2x uvećanju jer ste ga prvobitno postavili na "nedjeljivu" veličinu, postavite osnovnu radnu površinu na dimenzije skaliranja (npr. 48, 96, 144 px, itd.). Na ovaj način, kada izlazite pri 2x/3x uvećanju, pikseli će se uklopiti u mrežu i oštrina će se održati. Ova predviđanja su dar s neba za... ikonografija i savršeni pikselni interfejsi.
Panel za izvoz imovine: Automatizirajte bezbolno
Prevucite elemente u panel Izvoz resursa i definirajte skaliranje i formate za svaki resurs. To je vrlo moćan način za održavanje sistema tokena vizualnog dizajna. Možete mu reći da izveze logo u PNG 1x, 2x i SVG, a ikonu u PNG 24 s transparentnošću i WebP-om (gdje je primjenjivo). Kada timovi zatraže promjene, samo kliknete na izvoz i to je to, uvijek s istim postavkama. Zahvaljujući tome, Eliminišete nedosljednosti i štedite mnogo ponavljanja.
Sačuvaj za web (zastarjelo): još uvijek korisno
Iako je zastarjela verzija, Datoteka > Izvoz > Sačuvaj za Web (zastarjela verzija) nudi vrlo koristan pregled. Odaberite PNG-24 za potpunu transparentnost (PNG-8 smanjuje paletu i često uvodi bending). Označite Prozirnost i postavite Mat na Nema kako biste izbjegli oreole oko rubova. Ako vidite opcije za pretvaranje u sRGB, omogućite ih da odgovaraju boji u preglednicima. Ovaj prozor vam također omogućava da prilagodite veličinu piksela s dobrim pregledom, ako je potrebno. Pogledajte tačan rezultat prije potvrde.
Boja i konzistencija: izbjegavajte iznenađenja u boji
Za web, provjerite da li vaš dokument radi u RGB-u i da li se konvertuje u sRGB prilikom izvoza. Onemogućite neobične profile i izbjegavajte miješanje CMYK i RGB dijelova unutar istog PNG-a. Ako primite ilustraciju s drugačijim profilom, postavite i reinterpretirajte boju prije izvoza. Cilj je da rezultirajući PNG izgleda isto u Chromeu, Safariju ili Firefoxu, a to znači koristite sRGB kao zajednički nazivnik.
Prozirnost i ivice: nula oreola
Prilikom izvoza s prozirnošću, izbjegavajte privremene bijele ili crne pozadine u dokumentu, jer mogu kontaminirati anti-aliasing. U opciji Spremi za web, postavite Matte na None; u opciji Izvezi kao, ostavite pozadinu kao Transparent. Ako primijetite svijetli ili tamni veo na rubu, provjerite da nema objekata s nepotrebnom djelomičnom neprozirnošću i da li je anti-aliasing adekvatan. Za male fontove, pokušajte s "Optimizirano za tekst", a za ikone s ravnim linijama odaberite "None" ako tražite fontove savršene po pikselima, iako ćete izgubiti anti-aliasing. Dakle, Čistite konturu bez artefakata.
Još jedan trik za ikone: koristite jednake širine poteza i pokušajte da oblici budu poravnati centrirani na pikselima. Linija od 1px centrirana na pikselu izgleda oštro; linija od 1px koja se proteže preko dva piksela je anti-aliasing i mutna. Prikaz piksela i opcija Poravnaj prema mreži obavljaju pola posla za vas, tako da svaka ivica pada tamo gdje treba.
Veličine i gustoće: 1x, 2x, 3x
Za moderne interfejse, isporučite barem 1x i 2x. Ako dizajnirate na 1x, generirajte 2x i 3x iz Export for Screens. Ako dizajnirate na 2x (vrlo često), izvezite 1x dijeljenjem sa 2 i 3x množenjem sa 1,5. Nikada ne povećavajte veličinu u vanjskom editoru iz konačnog PNG-a; uvijek se vratite na vektor i izvozite izvorno u novoj skali. Ova disciplina održava oštrina i težina pod kontrolom u cijelom vašem sistemu resursa.
Kratka kontrolna lista prije pritiska dugmeta
Dobra je ideja proći kroz jednostavnu listu za provjeru. Provjerite: tabelu sa tačnom veličinom, položajem i dimenzijama elemenata u cijelim pikselima, RGB mod boja, rasterske efekte u odgovarajućoj rezoluciji, ispravan anti-aliasing, čistu transparentnost i, ako je primjenjivo, konverziju u sRGB. Kada se ovo pokrije, 90% problema "mutno je", jer Osiguravate da vektor i rasterski elementi govore istim jezikom..
- Radna površina i zaokružene mjere u pikselima kako bi se izbjegli razlomci.
- Omogućen je prikaz piksela za provjeru stvarne oštrine.
- RGB + sRGB pri izvozu za konzistentnost na svim ekranima.
- Antialiasing i transparentnost konfigurirani prema vrsti umjetničkog djela.
Rješavanje uobičajenih problema
Zamućen tekst? Povećajte malo veličinu fonta, koristite "Optimizirano za tekst" u antialiasingu, provjerite da tekst nije u decimalnim mjestima i izbjegavajte skaliranje konačnog PNG-a. Ponekad se isplati rasterizirati taj tekst kao zasebnu sliku pri 2x uvećanju kako bi... povećanje gustoće piksela i čitljivosti bez utjecaja na ostalo. Ako radite s Photoshopom kao sigurnosnom kopijom, primijetit ćete da kopiranje i rasteriziranje između aplikacija ubrzava ove slučajeve; pogledajte tehnike za rasterizirajte i prenesite elemente između Photoshopa i Illustratora.
Ikone s neurednim rubovima? Poravnajte ih s mrežom piksela, koristite parne (2 px, 4 px) ili neparne širine u skladu s mrežom i razmislite o onemogućavanju antialiasinga ako je stil strogo piksel art. Ako ikona ima dijagonale, ostavite antialiasing na "Optimizirano za umjetnost" kako biste izgladili nazubljene rubove, ali izbjegavajte matiranje koje... uvedite oreole u promjenjive pozadine.
Isprane boje u preglednicima? Obavezno konvertujte u sRGB prilikom izvoza i izbjegavajte egzotične ugrađene profile. Na monitorima sa širokim rasponom boja, nekonvertovana slika može izgledati zasićeno u desktop aplikacijama i nezasićeno u preglednicima. Konvertovanje u sRGB je vaša sigurnosna mreža. konzistentnost na više platformi.
Težak? PNG je bez gubitaka i transparentan, ali nije uvijek najlakši. Smanjite dimenzije ako je moguće, uklonite nevidljive slojeve prije izvoza, komprimirajte pomoću vanjskih alata za komprimiranje bez gubitaka (npr. optipng, pngquant pažljivo), a kada transparentnost nije potrebna, razmislite o JPEG-u ili WebP-u. Ipak, ako se morate držati PNG-a, održavajte čiste palete i izbjegavajte nepotrebne alfa kanale uštedite kilobajte.
Crno/bijeli aureoli na promjenjivim pozadinama? To je nepravilno primijenjena matte podloga. U odjeljku Spremi za web, koristite Matte = None; u suprotnom, koristite prozirnu pozadinu i ispravite antialiasing. Ako nasljeđujete umjetničko djelo sa sjenom na bijeloj, ponovno stvorite sjenu na stvarnim prozirnostima, jer će u suprotnom interpolacija povući bijelu i pojavljuje se obris duha.
Dobre prakse radnog procesa
Radite s glavnom vektorskom datotekom, s jasnim slojevima i konzistentnim stilovima. Definirajte osnovne veličine kompatibilne s 1x/2x/3x gustoćama od samog početka i koristite Izvoz za ekrane za skaliranje. Konzistentno imenovanje (icon‑home@1x.png, icon‑home@2x.png, itd.) i mape po platformi ubrzavaju isporuku. Ako ste u timu, dokumentirajte postavke izvoza u internom readme dokumentu kako bi... svi generiraju iste binarne datoteke bez odstupanja.
Integrirajte vizualne validacije: Otvorite PNG datoteke u stvarnim okruženjima u kojima će se nalaziti (preglednik, mobilni uređaj, aplikacija). Nemojte se oslanjati isključivo na pregled u Illustratoru. Na webu postavite PNG datoteke na različite pozadine kako biste testirali oreole; na mobilnom uređaju ih prenesite na prototip i provjerite visoke gustoće. Ovaj korak validacije predviđa probleme i omogućava vam da... ispravite prije objavljivanja.
Imajte na umu da Illustrator rasterizira u hodu; ako se vaša umjetnost uveliko oslanja na efekte, pokušajte proširiti ili pretvoriti neke dijelove u međubitne slike visoke rezolucije prije konačnog izvoza. Ovo nije norma, ali u složenim kompozicijama to je ponekad pravi put. Motor ne ponavlja nekonzistentne proračune između izvoza.
