Uložili ste puno vremena u postavljanje dizajna svog bloga, ali zašto se slike ne prikazuju pravilno na pametnom telefonu? Obavezno ste koristili slike visokog kvaliteta, ali loše stanje slike ne ispravlja prikaz.
Mnogi ljudi ne shvataju da novi uređaji (posebno one iz Applea) koristite naprednu tehnologiju prikazivanja koja utječe na način prikazivanja slika kako bi se osiguralo njihovo pravilno prikazivanje na računarima, ali i na pametnom telefonu.
U ovom ćemo tutorialu pokušati predstaviti malo pojma " retina spreman I pokazati vam kako stvoriti Retina sliku.
Ali prije nego što počnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Kako plugin treba instalirati na WordPress.
Onda krenimo na posao.
Objašnjenje slika Retina Ready
Ekrani uređaja nastavili su poboljšavati kvalitetu tokom posljednjih nekoliko godina, a posebno su Appleovi ekrani odradili puno posla kako bi bili izuzetno jasni i vidljivi. Tehnologija "Retina DisplayDa li se Apple ime koristi za opisivanje određene vrste zaslona sa određenim sklonostima.
Zaslon mrežnice ima za cilj tekst i slike prikazujte što jasnije, bez piksela vidljivih golim okom. Izazov za dizajnere je taj što zaslon varira ovisno o veličini zaslona uređaja i blizini korisnika.
Podjelom fizičke širine zaslona s brojem vodoravno prikazanih piksela imamo piksele po inču (ppi, koji se naziva i ppp za tačke po inču). " visoke DPI Koristi se za označavanje bilo kojeg uređaja koji ima više od 200 piksela po inču. To uključuje sve uređaje za prikaz " retina (Od Apple-a) i neke uređaje drugih proizvođača.
Kako stvoriti slike "spremne za mrežnicu" pomoću Photoshopa
Rad sa slikama u dvostrukoj ili četverostrukoj rezoluciji znači da ćete morati moći zumirati da biste vidjeli sve sitne detalje, međutim izuzetno teške datoteke uzrokuju problem s performansama i izazov za pohranu datoteka.
Rješenje većine dizajnera bilo je kreiranje više slojeva i njihovo grupiranje, aktivirajući ih po potrebi. pomoću funkcije "comps » Photoshop bilo da rade na originalnoj rezoluciji i izvoze potrebne formate (pomoću akcije poput "retiniziranja").
Izazov ovim dvjema metodama je taj što ne možete vidjeti više slika istovremeno. Ako trebate vidjeti razlike u slikama u potrebnim veličinama, potrebno je prebaciti se s njih ili ih izvoziti.
Srećom po naše ljubitelje Photoshopa, Adobe je dodao funkciju koja olakšava stvaranje više slika. Sada možete stvoriti više platna jedno pored drugog pomoću karakteristične umjetničke ploče i stvoriti više veličina slika pomoću generatora. Pogledajmo kako to funkcionira.
1 - Kreirajte svoju prvu Artboard
Novi Artboard alat, uveden Photoshop CC 2015, skriven je iza alata za kretanje. Možete kliknuti alat u izborniku ili koristiti Shift + V za prebacivanje između " Déplacement »Et« artboard "
Da biste stvorili radnu ravninu, kliknite i povucite područje. Nova umjetnička ploča prikazat će se na ploči slojeva sa zadanim imenom "Artboard 1".
Pročitajte takođe: Zašto freelanceri trebaju dnevni raspored
2 - Konfigurirajte svoju Artboard
Možete dodati slojeve koji su vam potrebni u vašu umetničku ploču, a oni će se ugniježditi kao slojevi (omogućujući vam da kreirate odgovarajuću strukturu slojeva). Predlažemo da dodate razne datoteke, poput oblika, tako da se postave onako kako vi želite prije nego što prijeđete na sljedeći korak.
3 - Duplicirajte svoju Artboard
Jednom kada je vaša prva umjetnička ploča postavljena da zadovolji vaše potrebe, možete je duplicirati pomoću kontekstnog izbornika. Desnim klikom na "Artboard 1" u području slojeva odaberite "Duplicate Artboard". Ovo stvara još jedan sličan "Artboard", koji sadrži istu strukturu sa svim svojim komponentama:
Otkriti takođe: Kako kopirati članak ili stranice na WordPress
4 - Postavite radne ploče (Artboard)
Velika prednost upotrebe umjetničkih ploča je mogućnost istodobnog prikazivanja svih vaših slika. Da biste to učinili, jednostavno postavite svoje radne ploče prema vašim potrebama. Postoji nekoliko načina za to:
Upotrijebite ploču koja se pojavljuje kada je odabrana radna ravnina za unošenje X i Y koordinata u gornji lijevi ugao radne ravnine.
Povucite odabranu ploču na bilo koji položaj na photoshop. Umjetna ploča se inteligentno aktivira, tako da možete automatski poravnati više umjetničkih ploča tako da se njihovi položaji zaključaju u prethodni razmak.
Upotrijebite tipke sa strelicama na tipkovnici za pomicanje odabrane radne ravnine.
Pogledajte i naš vodič o: Kako popraviti medijsku biblioteku koja više ne radi na WordPressu
5 - Promijenite veličinu slika (po potrebi)
Ako trebate prilagoditi veličinu svojih umjetničkih ploča, opet imate nekoliko mogućnosti:
- Promijenite veličinu pomoću ručki koje se pojavljuju kada odaberete umjetničku ploču.
- Koristite ploču s opcijama odmah ispod izbornika "Datoteka" za odabir unaprijed zadanih veličina, fiksnih širina ili visina ili prebacivanje između portreta i pejzaža.
- Koristite tablu "Svojstva" koja se pojavljuje kada je odabrana radna ploča za promjenu veličine i pristup unaprijed definiranim veličinama.
6 - Stvorite svoju umjetnost
Sada možete raditi sa svojim radnim pločama, zamijeniti komponente i unositi promjene po potrebi. Pod pretpostavkom da je vaša originalna postavka nepromijenjena, sada ćete na savršenom mjestu imati savršene slike sa svim komponentama.
Pogledajte i naš popis 26 WordPress teme sa sistemom povlačenja i ispuštanja da biste kreirali svoje stranice
7 - Postavite alat "Generiraj"
« proizvesti »Omogućava vam izvoz ploča, slojeva ili grupa koristeći posebnu sintaksu imenovanja. Ovo je prečica za spremanje za web. Da bi se osiguralo da " proizvesti Omogućen je za vaš PSD, idite na " Datoteka> Generiraj> Sredstva slike "(Datoteka> Generiraj> Slika imovina):
8 - Preimenujte svoje artboards
Generiraj « umjetnost Za spremite komponente slike radite na osnovu opcija postavljenih u setu slojeva ili u vašoj umjetničkoj ploči. Možete postaviti nekoliko opcija:
- Format datoteke. Dodajte proširenje (.jpg, .gif ili .png ) za spremanje dotične datoteke, na primjer: header-main.png Komponente slike bit će spremljene u isti folder kao i PSD datoteka, ali s "-assets" kao sufiksom.
- Kompresija datoteke. Nakon produžetka možete dodati broj koji označava nivo kompresije koji se koristi. Za " opt.jpg »Možete koristiti procente, a za png odgovarajuće bitove: 8, 24 ili 32.
- Izlazna skala. Izlaznu skalu možete postaviti dodavanjem postotka ili piksela (širine i visine) prije naziva slike (na primjer 100% header-main.png8 ).
- više slika. Možete izvesti više slika iste slike (artboard) pomoću zareza ili znaka plus za odvajanje imena slika. Svaka slika na taj način može imati vlastite mogućnosti sve dok je svako ime slike jedinstveno.
Kombinacija ovih opcija omogućava vam stalno stvaranje složenih komponenata slike za vaše umjetničke ploče:
Ako su za sve vaše radne površine potrebne standardne slike, " proizvesti Omogućuje vam kreiranje parametra koji će se primjenjivati na svaku zadanu. Da biste stvorili ovaj parametar, dodajte prazan sloj na vrh vašeg dokumenta sa sljedećim opcijama:
- Podrazumevana ključna reč: Ime mora početi s ovim da biste napustili alat " proizvesti »Sloboda upotrebe kao zadane postavke.
- Izlazna skala: Omogućava vam podešavanje izlazne skale s procentom ili pikselima (širine i visine).
- Folder / sufiks: Definirajte ime mape u koju bi slike trebale biti spremljenei sufiks za dodavanje imenima datoteka.
rezime
To je sve što imaš, probaj zumirajte sliku da vidimo kako se ponaša potonji. Ako je potrebno, možete testirati sliku na vašem WordPress blogu tako što ćete je učitati u svoju medijsku biblioteku.
Slobodno nam postavljajte pitanja po potrebi.
Otkrijte i neke premium WordPress dodatke
Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. WP Ultimate Social
Ovo je krajnji paket svih funkcija društvenih mreža koje bi vam mogle zatrebati na vašem WordPress blogu.
Pročitajte i našu 8 WordPress plugin za integraciju sistema za smanjenje
Njegove glavne karakteristike su: više ikona društvene mreže, društvena razmjena koja omogućava svima dijelite sadržaj vaše web stranice (članci, stranice, slike, mediji) na popularnim društvenim mrežama (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Pufer, Reddit, Tumblr, StumbleUpon, Xing, Weibo, VK, Delicious), povezivanje s web stranicom s vjerodajnicama za društvene mreže, brojač za prikaz brojeva vaših sljedbenika i dijeljenja vaše web stranice i drugi.
download | Demo | web hosting
2. WP Slick Slider Image Carousel Pro
Ako ste entuzijastični sljedbenik paketa Visual Composer, korištenje WP Slick Slider dodatka je opcija koju ćete trebati razmotriti. S gotovo 100 unaprijed definiranim predlošcima, sigurno ćete pronaći ono što tražite bez ikakvog kodiranja.
To je opcija koju treba ozbiljno shvatiti, posebno za korisnike usluga Visual Kompozitor. Njegove su karakteristike između ostalog: potpuno odgovarajući izgled s podrškom za povlačenje i ispuštanje, a Shortcodes, RTL i višejezična podrška, prelep dizajn i još mnogo toga
download | Demo | web hosting
3. WordPress Social Sidebar
Ime ovoga WordPress dodatak trebao bi vam otprilike reći čemu služi ovo drugo. Ali mi ćemo reći da je WordPress dodatak Social Sidebar će vam pomoći da napravite bočnu traku na vašoj web stranici s ciljem da vam pomogne u tome brzo dijelite svoj sadržaj na različitim društvenim mrežama.
Njegove funkcionalnosti uključuju: automatsku integraciju sa vašim WordPress tema, mogućnost konfigurisanja od vrha do dna, kompatibilnost sa nekoliko novijih i modernih pretraživača, mogućnost postavljanja bočnih traka slijeva udesno, iznad ili na dnu vaših stranica, 4 seta boja nude se nativno, prilagodljiv izgled i još mnogo toga.
download | Demo | web hosting
Ostali preporučeni resursi
Saznajte više o drugim preporučenim resursima koji će vam pomoći da izgradite i upravljate svojom web stranicom.
- 7 WordPress plugin za stvaranje dizajna za svoje proizvode
- 4 WordPress plugins za spremanje na DropBox
- Kako dodati beskonačno skrolovanje na WordPress blog
- 10 WordPress plugins za primanje donacija na vašem blogu
zaključak
Evo! To je sve za ovaj vodič, nadam se da će vam omogućiti da kreirate "Retina" slike za svoj WordPress blog.
Međutim, možete se posavjetovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress.
Ako imate prijedloge ili primjedbe, ostavite ih u našem odjeljku komentari. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama.
...
