+ 381 64 17 39 157 office@cyclopdesign.com

Uložili ste mnogo vremena i truda da bi vaš sajt radio savršeno? Jako je bitno da taj sajt bude vidljiv na što više uređaja, a iPhone je uređaj koji koristi veliki procenat korisnika pametnih uređaja. Budite sigurni da su slike lepe i visoko kvalitetne i da se lepo prikazuju na iPhone uređajima.

Mnogi ne shvataju da moderni pametni uređaji, posebno oni koje proizvodi Apple, koriste naprednu tehnologiju ekrana da bi svojim korisnicima obezbedili što bolji prikaz slike. Srećom, postoje trikovi koje možete koristiti prilikom optimizacije slika, pa da samim tim slike na vašem sajtu izgledaju lepo i na Apple uređajima.

U nastavku teksta ćemo vam predstaviti Retina ekrane i objasniti kako oni mogu uticati na izgled slika na vašem sajtu.

 

Objašnjenje Retina ekrana

Ekrani pametnih uređaja su nastavili da konstantno unapređuju kvalitet, poslednjih nekoliko godina, a Apple je po tom pitanju napravio korak napred, vrednim radom na tome da prikaz na njihovim ekranima bude izuzetno jasan i čitljiv. Retina displej je tip ekrana koje koriste Apple uređaji.

Retina ekrani su projektovani sa ciljem da prikazuju tekst i slike, što je oštrije moguće, bez golim okom vidljivih piksela. Izazov za dizajnere predstavlja činjenica da Retina ekrani nisu standardni, tj da prikaz na njima varira od veličine ekrana uređaja.

Kaad već govorimo o Retina ekranima, moramo misliti na gustinu piksela, gde se broj piksela uklapa u fiksnom rastojanju. Ovo nije isto kao rezolucija, pošto je broj piksela raspoređen preko cele visine i širine uređaja. Manji ekrani kao što je iPhone sa istom rezolucijom kao veći (na iPadu), će imati veću gustinu piksela.

Podela fizičke širine ekrana od broja piksela horizontalno, daje nam broj piksela po inču ekrana (dpi – dots per inch). Visoka rezolucija se koristi za sve uređaje koji imaju više od 200DPI. Ovde su uključeni svi Apple-ovi Retina ekrani, kao i neki ekrani drugih proizvođača.

Tradicionalno, web grafika je optimizovana na 72 dpi. Slika sa tom gustinom će se prikazivati na bilo kom ekranu velike rezolucije, dok će na Retina ekranu biti prikazana na jedan od dva načina:

  • Kao frakcija, veličine koja zavisi od rezolucije uređaja.
  • Prikazana u originalnim dimenzijama, sa dodatnim pikselima, koji utiču na sam kvalitet slike.

 

 

Retina-Ekrani

 

 

To znači da je za najbolji prikaz slike na Retina ekranima neophodno optimizovati slike na većoj rezoluciji. Ovo omogućava da slika bude prikazana sa gustinom piksela, odgovarajućom za modernije ekrane. U nastavku teksta ćemo vam pokazati kako da to uradite u Fotošopu.

Kako kreirati slike za Retina ekrane u Fotošopu?

Rad sa slikama dvostruke ili četvorostruke rezolucije znači da je neophodno da uveličate sliku da bi ste videli fini detalji i da, pošto te slike zauzimaju više prostora, mogu stvoriti problem sa učitavanjem slika i zauzimanjem mesta na serveru.

Rešenje za većinu dizajnera bi moglo biti kreiranje više layera i grupa i isključivanje njih po potrebi, korišćenjem comps funkcije u Fotošopu ili eksportovanje u originalnoj rezoluciji u veličini koja je potrebna, upotrebom funkcije “Retinize it”.

Izazov koji nose ove dve metode, znači da ne možete da vidite više slika u isto vreme. Ukoliko vam je potrebno da vidite razliku u prikazu slika na svim veličinama, neophofno je zameniti slike, sačuvati ih u odgovarajućoj veličini i onda proveriti opet.

Srećom, za sve ljubitelje Fotošopa, Adobe je dodao funcionalnost koja olakšava kreiranje slika. Sada se mogu napraviti više paleta uz pomoć funkcije Artboard i kreirati više veličina uz pomoć funkcije Generate. U nastavku teksta ćemo vam detaljnije objasniti.

 

Kreiranje Artboarda

 

Retina-Ekrani1

 

 

 

Alat Artboard je dodat u Fotošop 2015 i nalazi se skriveno iznad Move Tool-a. Možete kliknuti u meniju, ili koristiti prečicu Shift + V. Da bi se prikazao Artboard, kliknite i prevucite na područje. Novi Artboard će biti prikazan kao podrazumevano ime Artboard 1.

 

Podešavanje Artboarda

Možete dodati layere na artboaru i oni će biti smešteni slično kao i ostale grupe layera, sa mogućnošću da vi menjate njihovu strukturu. Predlažemo vam da dodajete raznorazne dodatke, kao što su figure i tekst.

 

Kopiranje Artboarda

Prvi Artboard je podešen da odgovara vašim potrebama. Uz pomoć menija, ga možete i duplirati. Kada kliknete desnim klikom miša na ArtBoard 1. odaberite na panelu Layers i tu odaberite opciju Duplicate Artboard. Ovako ćete kreirati novi ArtBoard iste veličine i pozicije, sa potpuno istom strukturom layera.

 

 

Retina-Ekrani2

 

 

Pozicioniranje Artboarda

Velika prednost ArtBoarda je mogućnost da se vide sve slike u isto vreme. Postoji nekoliko načina za pomeranje ArtBoarda.

  • Klikom na Properties panel, koji prikazuje koji artboard je odabran i podešavanjem X i Y koordinata za levi ugao Artboarda.
  • Prevucite selektovan artboard na bilo koju poziciju u Fotošopu. Možete postavljati više Artboardova.
  • Uz pomoć strelica na tastaturi, možete šetati Artboard po ekranu. Klikom na Shift i srelicu ćete pomerati vaše Artboardove za 10 piksela.

 

 

Promenite veličinu Artboarda

Ukoliko je potrebno menjati veličine Artboarda, imate više opcija.

  • Promenite veličinu koristeći ručke koje se pojavljuju kada odaberete ArtBoarda
  • Kliknite na Options, ispod File menij, odaberite veličinu, posavite veličine koje želite i odaberite portret ili landscare orjentaciju.
  • Upotrebom Properties panela, možete menjati veličinu.

 

 

Retina-Ekrani3

 

 

Kreiranje svog Arta

Možete raditi sa svojim Artboardovima, menjati slike i menjati ih ukoliko je neophodno. Ukoliko ste sve lepo podesili, kada se sve završi imaćete pixel perfect slike za svoj sajt.

 

Generate tool

Generate opcija omogućava da exportujete artboardove, layere ili grupe layera, koristeći specijalnu sintaksu. Da bi ste uključili Generate alat na svom PSD fajlu, idite na File > Generate > Image Assets. 

 

Retina-Ekrani4

 

 

Promenite ime svojim Artboardovima

Generate alat radi tako što sačuva sve elemente slika, u skladu sa podešavanjima koje ste vi postavili na Artboardu. Postoji nekoliko opcija koje možete da postavite:

  • File Format – Dodati ekstenziju (jpg, png, giff) kada budete čuvali fajlove u odgovarajućem formatu. Na primer header-main.png. Fajlovi će biti sačuvani na istoj lokaciji na kojoj je PSD fajl.
  • Kompresija fajlova  – Posle ekstenzije, možete podesiti i osgovarajući nivo kompresije. Za jpg možete koristiti procente, za png možete koristiti 8, 24 ili 32. Na primer – header-main.png8
  • Skaliranje –  Možete podesiti slakiranje, dodavanjem procenata ili veličine u pikselima pre imena. Primer 100% header-main-png8.
  • Više slika – Možete eksportovati više slika sa istog artboarda, korišćenjem zareza ili plusa. Primer – 100% header-main.png8, 200% header-main.png8.

 

Kombinovanje ovih opcija vam omogućava da konstantno kreirate kompleksne slike sa vaših artboardova.

 

 

Retina-Ekrani5

 

 

Ukoliko su standardne slike potrebne za Artboardove, Generate alat će omogućiti da kreirate podrazumevane setove podešavanja za svaki od njih. Da bi ste kreirali ova podešavanja dodajte prazan layer na vrh dokumenta sa sledećim opcijama:

  • Default keyword: Ime mora počinjati ovako da bi Generate generisao kao podrazumevani
  • Output scale: Podesiti dimenzije u procentima ili pikselima (width, height).
  • Folder/suffix: Podesiti ime foldera gde će slike biti sačuvane.

Dodavanjem više mogućnosti možete automatski kreirati slike koje su vam potrebne za Retina ekrane. Na primer – default 100% end/@1x, 200% end/@2x, 300% end/@3x. Onda možete dodati proširenja za svaki board koji želite da eksportujete korišćenjem podrazumevanih opcija.

Ukoliko koristite druge dizajnerske alate kao što su Sketch, one imaju svoje načine eksportovanja. Ukoliko ste ljubitelj Fotošopa, ovaj način će vam drastično smanjiti vreme koje potrebno da se stvori više slika za Retina ekrane.

 

Kako optimizovati slike za Retina ekrane?

Veličina je bitan, ako ne i najbitniji faktor prilikom kreiranja slika na sajtu. Slike se prilikom posete očitavaju u pretraživač vaših korisnika tako da će za veće fajlove biti potrebno više vremena da se učitaju. Lepi sajtovi, kojima je potrebna večnost da se učitaju će frustrirati korisnike i oni će odlaziti sa njih.

Možete početi sa optimizacijom slika, tako što ćete koristiti adekvatne opcije prilikom čuvanja fajla. Kao što smo objasnili, format za čuvanje fajlova je jpg ili png. Jpg format je pogodan za fotografije koje imaju mnogo boja, radi redukcije veličine fajla. PNG je pogodan za dugmiće i ikonice jer je kvalitet veći i samim tim im je veća i veličina.

WordPress nudi mogućnost optimizacije, tako što daje mogućnost odabira više veličina slika, prilikom postavljanja na sajt.

 

Zaključak

Kreiranje i odabir neverovatnih, lepih slika, visoke rezolucije za vaš sajt ne deluje kao težak, ali ukoliko nisu korektno optimizovane pre objavljivanja na sajt, mogu se prikazivati drugačije od onoga kako ste vi očekivali, pogotovo na Retina ekranima.

Dakle – da ponovimo korake:

  • Kreirajte Artboardove, podesite ih, kopirajte i pozicionirajte kako treba
  • Promenite veličinu po potrebi.
  • Uključite i podesite Generate alat
  • Promenite ime svojim Artboardovima u okviru Generate alata i postavite podrazumevane opcije ukoliko je neophodno.

Gorenavedeni saveti će vam pomoći da razumete proces kreiranja slika za modernije ekrane, koje će na njima biti vidljive na najbolji mogući način.

 

Share this:

Pin It on Pinterest

Share This