Ați investit mult timp în configurarea designului blogului dvs., dar de ce imaginile nu sunt afișate corect pe smartphone? Te-ai asigurat că folosești imagini de înaltă calitate, dar starea slabă a imaginii nu corectează afișajul.
Mulți oameni nu realizează că dispozitivele noi (în special pe cei de la Apple) utilizați o tehnologie de afișare avansată care afectează modul în care sunt afișate imaginile, pentru a vă asigura că sunt afișate corect atât pe computere, dar și pe Smartphone.
În acest tutorial vom încerca să introducem un pic din noțiunea de „ retinei gata Și vă arată cum puteți crea o imagine Retina.
Dar înainte de a începe, acordați-vă timp să aruncați o privire Cum se instalează o temă WordPress, Cât de multe plugin-uri ar trebui să instalez pe WordPress.
Apoi să trecem la treabă.
Explicații privind imaginile cu retină
Ecranele dispozitivelor au continuat să se îmbunătățească în calitate în ultimii ani, iar ecranele Apple, în special, au făcut multă muncă pentru a fi extrem de clare și vizibile. Tehnologie "Retina displayEste un nume de marcă Apple folosit pentru a descrie un anumit tip de ecran cu anumite aptitudini.
Ecranele retinei urmăresc să afișați text și imagini cât mai clar posibil, fără pixeli vizibili cu ochiul liber. Provocarea pentru designeri este că afișajul variază în funcție de dimensiunea ecranului dispozitivului și de apropierea utilizatorului de ecran.
Împărțind lățimea fizică a ecranului la numărul de pixeli afișați orizontal, avem pixelii pe inch (ppi, numit și ppp pentru puncte pe inch). " DPI mare Se utilizează pentru a se referi la orice dispozitiv care are mai mult de 200 de pixeli pe inch. Aceasta include toate dispozitivele de afișare " retină (De la Apple) și unele dispozitive de la alți producători.
Cum să creați imagini „Retina Ready” cu Photoshop
Lucrul cu imagini la rezoluție dublă sau quad înseamnă că va trebui să puteți face zoom pentru a vedea toate micile detalii, oricum fișierele extrem de grele cauzează o problemă de performanță și o provocare de stocare a fișierelor.
Soluția pentru majoritatea proiectanților a fost fie să creeze mai multe straturi și să le grupeze, activându-le după cum este necesar. folosind funcția „comps » Photoshop fie pentru a lucra la rezoluția inițială și pentru a exporta formatele de care au nevoie (folosind o acțiune de genul "retinize").
Provocarea cu aceste două metode este că nu puteți vedea mai multe imagini în același timp. Dacă trebuie să vedeți diferențele dintre imagini la dimensiunile necesare, trebuie să comutați între ele sau să le exportați.
Norocos pentru noi entuziaștii Photoshop, Adobe a adăugat o funcție care facilitează crearea mai multor imagini. Acum puteți crea mai multe pânze unul lângă altul folosind planșa de lucru caracteristică și puteți crea mai multe dimensiuni de imagine folosind generatorul. Să vedem cum funcționează.
1 - Creați primul plan de lucru
Noul instrument Artboard, introdus în Photoshop CC 2015, este ascuns în spatele instrumentului de mișcare. Puteți face clic pe instrumentul din meniu sau puteți utiliza Shift + V pentru a comuta între „ Déplacement "Și" planșă de lucru »:
Pentru a crea un plan de lucru, faceți clic și trageți o zonă. Noua planșă va fi afișată în panoul de straturi cu numele implicit „Planșa 1”.
Citiți și: De ce independentii au nevoie de un program zilnic
2 - Configurați planșa de lucru
Puteți adăuga straturi de care aveți nevoie pe tabloul dvs. de artă, iar acestea vor fi cuibărite pe măsurăpermițându-vă să creați o structură corespunzătoare de straturi). Vă sugerăm să adăugați diferitele fișiere, cum ar fi formele, astfel încât acestea să fie poziționate așa cum doriți înainte de a trece la pasul următor.
3 - Duplicați planșa de lucru
Odată ce prima dvs. placă de artă este configurată pentru a satisface nevoile dvs., o puteți duplica folosind meniul contextual. Faceți clic dreapta pe „Artboard 1” în zona layerelor și selectați „Duplicate Artboard”. Aceasta creează o altă „placă de artă” similară, care conține aceeași structură cu toate componentele sale:
De asemenea, puteți descoperi: Cum se duplica un articol sau o pagină de pe WordPress
4 - Amplasați blaturile (planșa de lucru)
Marele avantaj al utilizării planșelor de artă este faptul că vă puteți vedea toate imaginile în același timp. Pentru a face acest lucru, pur și simplu poziționați blaturile în funcție de nevoile dvs. Există mai multe moduri de a face acest lucru:
Utilizați panoul care apare atunci când este selectat un plan de lucru pentru a introduce coordonatele X și Y în colțul din stânga sus al planului de lucru.
Trageți tabloul de artă selectat în orice poziție din Photoshop. Placa de lucru activată inteligent, astfel încât să puteți alinia automat mai multe plăci de artă, astfel încât pozițiile lor să se fixeze în spațiul anterior.
Utilizați tastele săgeată de pe tastatură pentru a muta un plan de lucru selectat.
Consultați și tutorialul nostru despre: Cum se repară biblioteca media care nu mai funcționează pe WordPress
5 - Redimensionați planșele de lucru (când este necesar)
Dacă trebuie să ajustați dimensiunea planșelor dvs., aveți din nou mai multe opțiuni:
- Redimensionați folosind mânerele care apar atunci când selectați o planșă.
- Utilizați panoul de opțiuni chiar sub meniul „Fișier” pentru a alege dimensiuni prestabilite, lățimi sau înălțimi fixe sau comutați între portret și peisaj.
- Utilizați panoul „Proprietăți” care apare atunci când este selectat un blat de lucru pentru a modifica dimensiunea și a accesa dimensiunile predefinite.
6 - Creați-vă arta
Acum puteți lucra cu blaturile dvs. de lucru, înlocui componentele și face modificări după cum este necesar. Presupunând că configurarea inițială este neschimbată, veți avea acum imagini perfecte pentru pixel, cu toate componentele la locul potrivit.
Vezi și lista noastră cu teme 26 WordPress cu sistem de glisare și plasați pentru a crea pagini
7 - Configurați instrumentul „Generați”
« Genera »Vă permite să exportați planșe de artă, straturi sau grupuri utilizând o sintaxă specială de denumire. Aceasta este o comandă rapidă de salvat pentru web. A se asigura ca " Genera Este activat pentru PSD-ul dvs., accesați „ Fișier> Generare> Imagini "(Fișier> Generare> Imagine Bunuri):
8 - Redenumiți planșele de lucru
Generați « Artă "pentru salvați componentele imaginii lucrezi pe baza opțiunilor setate în setul de straturi sau în tabloul tău de artă. Puteți seta câteva opțiuni:
- Formatul fișierului. Adăugați o extensie (.jpg, .gif sau .png ) pentru a salva fișierul în cauză, de exemplu: header-main.png Componentele imaginii vor fi salvate în același folder cu fișierul PSD, dar cu „-assets” ca sufix.
- Compresia fișierelor. După extensie, puteți adăuga un număr care să indice nivelul de compresie utilizat. Pentru " opt.jpg »Puteți utiliza procente, iar pentru png utilizați biții respectivi: 8, 24 sau 32.
- Scara de ieșire. Puteți seta scala de ieșire adăugând fie procente, fie pixeli (lățimea pe înălțime) înainte de numele imaginii (de exemplu 100% header-main.png8 ).
- Imagini multiple. Puteți exporta mai multe imagini ale aceleiași planșe de lucru (planșă de lucru) folosind o virgulă sau un semn plus pentru a separa numele imaginilor. Fiecare imagine poate avea astfel propriile opțiuni, atâta timp cât fiecare nume al imaginii este unic.
Combinația acestor opțiuni vă permite să creați în mod constant componente de imagine complexe pentru planșele dvs. de lucru:
Dacă sunt necesare imagini standard pentru toate blaturile dvs. de lucru, Genera Vă permite să creați un parametru pe care să-l aplicați în mod implicit fiecăruia. Pentru a crea acest parametru, adăugați un strat gol în partea de sus a documentului cu următoarele opțiuni:
- Cuvânt cheie implicit: Numele trebuie să înceapă cu acesta pentru a părăsi instrumentul " Genera »Libertatea de a-l folosi ca implicit.
- Scara de ieșire: Vă permite să setați scara de ieșire cu un procent sau pixeli (lățimea pe înălțime).
- Folder / sufix: Definiți numele folderului în care ar trebui salvate imaginile, și un sufix pentru a adăuga la numele fișierelor.
Rezumat
Asta e tot ce ai acolo, încearcă măriți imaginea pentru a vedea cum se comportă acesta din urmă. Dacă este necesar, puteți testa imaginea pe blogul dvs. WordPress încărcând-o în media media.
Nu ezitați să ne puneți întrebări, după cum este necesar.
Descoperiți și câteva plugin-uri premium WordPress
Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. WP Ultimate Social
Acesta este un pachet final cu toate funcțiile de rețea socială de care ați putea avea nevoie pe blogul dvs. WordPress.
Citiți și noastre Plugin-uri WordPress 8 pentru a integra un sistem de reducere
Principalele sale caracteristici sunt: mai multe pictograme de rețea socială, partajare socială care permite oricui partajați conținutul site-ului dvs. web (articole, pagini, imagini, media) pe rețelele de socializare populare (Facebook, Twitter, Linkedin, GooglePlus, pinterest, Digg, Tampon, Reddit, Tumblr, stumbleupon, Xing, Weibo, VK, Delicious), conexiune la site-ul web cu datele de rețea de socializare, un contor pentru a afișa numărul de adepți și acțiunile site-ului dvs. și ale altora.
Descarca | Demo | web hosting
2. WP Slick Slider Imagine Carusel Pro
Dacă sunteți un adept al suitei Visual Composer, utilizarea pluginului WP Slick Slider este o opțiune pe care trebuie să o luați în considerare. Cu aproape șabloane predefinite 100, veți găsi cu siguranță ceea ce căutați fără a codifica nimic.
Aceasta este o opțiune de luat în serios, în special pentru utilizatorii Compozitor Visual. Caracteristicile sale sunt, printre altele: un aspect complet receptiv cu suport pentru drag and drop, a Scurtăturile, RTL și suport multilingv, un design frumos și multe altele
Descarca | Demo | web hosting
3. WordPress Social Sidebar
Numele acesteia WordPress plug-in ar trebui să vă spună aproximativ pentru ce este acesta din urmă. Dar vom spune că WordPress plug-in Social Sidebar vă va ajuta să creați o bară laterală pe site-ul dvs., cu scopul de a vă ajuta să faceți împărtășiți rapid conținutul dvs. pe diferite rețele sociale.
Funcționalitățile sale includ: integrarea automată cu dvs WordPress temă, capacitatea de a-l configura de sus în jos, compatibilitate cu mai multe browsere recente și moderne, posibilitatea plasării barelor laterale de la stânga la dreapta, deasupra sau în partea de jos a paginilor dvs., sunt oferite 4 seturi de culori nativ, un aspect sensibil și multe altele.
Descarca | Demo | web hosting
Alte resurse recomandate
Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.
- plugin-uri 7 WordPress pentru a crea modele pentru produsele dvs.
- 4 pluginurile WordPress pentru a salva pe DropBox
- Cum să adăugați defilare infinită la un blog WordPress
- Pluginurile 10 WordPress pentru a primi donații pe blogul dvs.
Concluzie
Aici ! Gata pentru acest tutorial, sper că vă va permite să creați imagini „Retina” pentru blogul dvs. WordPress.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru pentru Creare blog WordPress.
Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate.
...
