Uložili ste puno vremena u postavljanje dizajna svog bloga, ali zašto se slike ne prikazuju pravilno na pametnom telefonu? Obavezno ste upotrijebili slike visoke kvalitete, ali loše stanje slike ne ispravlja prikaz.
Mnogi ljudi ne shvaćaju da novi uređaji (posebno one iz Applea) koristiti naprednu tehnologiju prikaza koja utječe na način prikazivanja slika kako bi se osiguralo pravilno prikazivanje i na računalima i na pametnom telefonu.
U ovom ćemo udžbeniku pokušati uvesti dio pojma " mrežnica spreman I pokazati vam kako stvoriti Retina sliku.
Ali prije nego što započnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Koliko dodaci bih trebao instalirati na WordPress.
Onda krenimo na posao.
Objašnjenja slika spremnih na retinu
Zasloni uređaja nastavili su se poboljšavati u kvaliteti tijekom posljednjih nekoliko godina, a posebno su Appleovi zasloni odradili puno posla kako bi bili izuzetno jasni i vidljivi. Tehnologija "Retina DisplayJe li naziv marke Apple koji se koristi za opisivanje određene vrste zaslona s 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 da se zaslon razlikuje 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, koja se naziva i ppp za točkice po inču). " Visoka 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 (Iz Applea) 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 ili raditi na originalnoj rezoluciji i izvoziti potrebne formate (pomoću akcije poput "retiniziranja").
Izazov ovim dvjema metodama je što ne možete vidjeti više slika istovremeno. Ako želite vidjeti razlike u slikama u potrebnim veličinama, potrebno je prebaciti se s njih ili ih izvoziti.
Srećom za nas ljubitelje Photoshopa, Adobe je dodao značajku koja olakšava stvaranje više slika. Sada možete stvoriti više platna jedno uz drugo koristeći karakterističnu ploču umjetničkih djela i stvoriti više veličina slika pomoću generatora. Pogledajmo kako to funkcionira.
1 - Stvorite svoj prvi Artboard
Novi alat Artboard, uveden u 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 "A" artboard '
Da biste stvorili radnu ravninu, kliknite i povucite područje. Nova će se ploča prikazati na ploči slojeva sa zadanim nazivom "Artboard 1".
Pročitajte također: Zašto freelanceri trebaju dnevni raspored
2 - Konfigurirajte svoju Artboard
Možete dodati slojeve koji su vam potrebni u ploču s umetcima i oni će se ugniježditi kao slojevi (omogućujući vam da stvorite odgovarajuću strukturu sloja). Predlažemo da dodate razne datoteke, poput oblika, tako da budu postavljene kako želite, prije nego što prijeđete na sljedeći korak.
3 - Duplicirajte svoju umjetničku ploču
Nakon što postavite svoju prvu umjetničku ploču kako bi zadovoljila vaše potrebe, možete je duplicirati pomoću kontekstnog izbornika. Desnom tipkom miša kliknite "Artboard 1" u području slojeva i odaberite "Duplicate Artboard". Ovo stvara još jedan sličan "Artboard", koji sadrži istu strukturu sa svim svojim komponentama:
Da biste otkrili također: Kako udvostručiti članak ili stranicu na WordPressu
4 - Postavite radne ploče (Artboard)
Velika prednost korištenja umjetničkih ploča je mogućnost istodobnog prikazivanja svih vaših slika. Da biste to učinili, jednostavno postavite radne ploče prema svojim potrebama. To možete učiniti na nekoliko načina:
Upotrijebite ploču koja se pojavljuje kada je odabrana radna ravnina za unos koordinata X i Y u gornji lijevi kut radne ravnine.
Povucite odabranu ploču na bilo kojem mjestu u polju Photoshop. Umjetna ploča inteligentno se aktivira, tako da možete automatski poravnati više ploča tako da se njihovi položaji zaključaju u prethodni razmak.
Pomoću tipki sa strelicama na tipkovnici možete pomicati odabranu radnu ravninu.
Pogledajte i naš vodič o: Kako popraviti medijsku biblioteku koja više ne funkcionira na WordPressu
5 - Promjena veličine ploča (kada je potrebno)
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.
- Pomoću ploče s opcijama odmah ispod izbornika "Datoteka" odaberite unaprijed zadane veličine, fiksne širine ili visine ili se prebacujte između portreta i pejzaža.
- Upotrijebite ploču "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 izvorna postavka nepromijenjena, sada ćete na savršenom mjestu imati savršene slike sa svim komponentama.
Pogledajte i naš popis 26 WordPress teme s povlačenjem sustava i pad stvaranja svoje stranice
7 - Postavite alat "Generiraj"
« Generirati »Omogućuje vam izvoz umjetničkih ploča, slojeva ili grupa pomoću posebne sintakse imenovanja. Ovo je prečac za spremanje za web. Da bi se osiguralo da " Generirati Omogućeno je za vaš PSD, idite na " Datoteka> Generiraj> Slikovni elementi "(Datoteka> Generiraj> Slika Imovina):
8 - Preimenujte svoje umjetničke ploče
Stvori « Umjetnost „na spremite komponente slike radite na temelju opcija postavljenih u setu slojeva ili u vašoj umjetničkoj ploči. Možete postaviti nekoliko opcija:
- Oblik datoteke. Dodajte proširenje (.jpg, .gif ili .png ) za spremanje dotične datoteke, na primjer: header-main.png Komponente slike bit će spremljene u istu mapu kao i PSD datoteka, ali s "-assets" kao sufiksom.
- Kompresija datoteke. Nakon produžetka možete dodati broj koji označava razinu kompresije koja se koristi. Za " opt.jpg »Možete koristiti postotke, a za png odgovarajuće bitove: 8, 24 ili 32.
- Izlazna skala. Izlaznu ljestvicu možete postaviti dodavanjem postotka ili piksela (širina iznad visine) prije naziva slike (na primjer 100% header-main.png8 ).
- Nekoliko slika. Možete izvesti više slika na istoj ploči (artboard) pomoću zareza ili znaka plus za odvajanje imena slika. Svaka slika tako može imati vlastite mogućnosti sve dok je svako ime slike jedinstveno.
Kombinacija ovih opcija omogućuje vam stalno stvaranje složenih komponenata slike za vaše umjetničke ploče:
Ako su za sve vaše radne ploče potrebne standardne slike, " Generirati Omogućuje vam stvaranje parametra koji se prema zadanim postavkama primjenjuje na svakog. Da biste stvorili ovaj parametar, dodajte prazan sloj na vrh vašeg dokumenta sa sljedećim opcijama:
- Zadana ključna riječ: Ime mora početi s ovim da biste napustili alat " Generirati »Sloboda upotrebe kao zadane postavke.
- Izlazna skala: Omogućuje podešavanje izlazne skale s postotkom ili pikselima (širina iznad visine).
- Mapa / sufiks: Odredite naziv mape u koju bi slike trebale biti spremljenei sufiks za dodavanje imenima datoteka.
Sažetak
To je sve što imaš, probaj zumirajte sliku vidjeti kako se ponaša potonji. Ako je potrebno, možete testirati sliku na svom WordPress blogu tako što ćete je učitati u svoju medijsku knjižnicu.
Slobodno nam postavljajte pitanja po potrebi.
Otkrijte i neke premium WordPress dodatke
Možete koristiti druge WordPress plugins dati moderan izgled i optimizirati rukovanje vašim blogom ili web stranicom.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. WP Ultimate Social
Ovo je krajnji paket svih značajki društvenih mreža koje bi vam mogle zatrebati na vašem WordPress blogu.
Pročitajte i naše 8 WordPress čep za integraciju sustava za smanjenje
Njegove glavne značajke su: više ikona društvene mreže, društvena razmjena koja svima omogućuje dijelite sadržaj vaše web stranice (članci, stranice, slike, mediji) na popularnim društvenim mrežama (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Međuspremnik, Reddit, Tumblr, Nabasati na, Xing, Weibo, VK, Delicious), povezivanje web stranice s vašim vjerodajnicama za društvene mreže, brojač za prikaz brojeva vaših sljedbenika i udjela vaše web stranice i drugih.
Preuzmite | demo | Web hosting
2. WP Slick Slider Slika vrtuljka 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 mogućnost koju treba ozbiljno shvatiti, posebno za korisnike usluga Visual Skladatelj. Njegove su značajke između ostalog: potpuno reagirajući izgled s podrškom za povlačenje i ispuštanje, a kratke kodove, RTL i višejezična podrška, lijep dizajn i još mnogo toga
Preuzmite | demo | Web hosting
3. WordPress Social Sidebar
Ime ovoga WordPress plugin trebao bi vam otprilike reći čemu ovo drugo služi. Ali reći ćemo da je WordPress plugin Društvena bočna traka pomoći će vam da izradite bočnu traku na svojoj 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 s vašim WordPress tema, mogućnost konfiguriranja od vrha do dna, kompatibilnost s nekoliko novijih i modernih preglednika, mogućnost postavljanja bočnih traka s lijeva na desno, iznad ili na dnu vaših stranica, 4 seta boja nude se nativno, prilagodljiv izgled i još mnogo toga.
Preuzmite | demo | Web hosting
Ostali preporučeni resursi
Saznajte više o drugim preporučenim resursima koji će vam pomoći u izgradnji i upravljanju web mjesta.
- 7 WordPress čep za izradu dizajna za svoje proizvode
- 4 WordPress dodataka za spremanje na DropBox
- Kako dodati beskonačno pomicanje na WordPress blog
- 10 WordPress dodaci za primanje donacija na vašem blogu
Zaključak
Ovdje! To je sve za ovaj vodič, nadam se da će vam omogućiti stvaranje slika "Retina" za vaš WordPress blog.
Međutim, možete se konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na 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.
...
