Investovali ste veľa času do prípravy dizajnu svojho blogu, ale prečo sa obrázky na smartphonoch nezobrazujú správne? Uistite sa, že ste používali obrázky vysokej kvality, ale zlý stav obrazu neopravuje zobrazenie.
Mnoho ľudí si neuvedomuje, že nové zariadenia (najmä tie od spoločnosti Apple) používajte pokročilú technológiu zobrazovania, ktorá ovplyvňuje spôsob, akým sa obrázky zobrazujú, aby ste sa uistili, že sa obrázky zobrazujú správne na počítačoch, ale aj na smartfónoch.
V tomto tutoriále sa pokúsime predstaviť trochu pojmu „ sietnice ready A ukážeme vám, ako vytvoriť obraz sietnice.
Ale skôr, ako začnete, urobte si čas na to pozrieť Ako nainštalovať motív WordPress, Koľko pluginy mám nainštalovať na WordPress.
Potom poďme do práce.
Vysvetlivky k obrázkom Ready Ready
Kvalita obrazoviek zariadení sa za posledných pár rokov neustále zlepšovala a najmä obrazovky Apple vykonali veľa práce, aby boli mimoriadne jasné a viditeľné. Technológia “Retina displejJe obchodná značka spoločnosti Apple používaná na opis určitého typu obrazovky so zvláštnymi vlohami.
Sietnice sietnice majú za cieľ zobrazovať text a obrázky čo najjasnejšie, bez viditeľných pixelov voľným okom. Výzvou pre dizajnérov je, že displej sa líši v závislosti od veľkosti obrazovky zariadenia a blízkosti používateľa k obrazovke.
Vydelením fyzickej šírky obrazovky počtom pixelov zobrazených vodorovne máme pixely na palec (ppi, tiež nazývaný ppp pre bodky na palec). " Vysoká miera DPI Používa sa na označenie každého zariadenia, ktoré má viac ako 200 pixelov na palec. Patria sem všetky zobrazovacie zariadenia “ sietnice (Od spoločnosti Apple) a niektoré zariadenia od iných výrobcov.
Ako vytvárať obrázky "Retina Ready" pomocou Photoshopu
Práca s obrázkami s dvojitým alebo štvornásobným rozlíšením znamená, že budete musieť priblížiť, aby ste videli všetky malé detaily, avšak extrémne ťažké súbory spôsobujú problém s výkonom a výzvu na ukladanie súborov.
Riešením pre väčšinu dizajnérov bolo vytvorenie viacerých vrstiev a ich zoskupenie a aktivácia podľa potreby. pomocou funkcie "comps » photoshop buď pracovať v pôvodnom rozlíšení a exportovať potrebné formáty (pomocou akcie ako „retinize“).
Výzva pri týchto dvoch metódach spočíva v tom, že nemôžete naraz vidieť viac obrázkov. Ak potrebujete vidieť rozdiely v obrázkoch v potrebných veľkostiach, musíte medzi nimi prepínať alebo ich exportovať.
Našťastie pre nás nadšencov Photoshopu, spoločnosť Adobe pridala funkciu, ktorá uľahčuje vytváranie viacerých obrázkov. Teraz môžete pomocou charakteristického kresliaceho plátna vytvoriť viac pláten vedľa seba a pomocou generátora vytvoriť viac veľkostí obrázkov. Pozrime sa, ako to funguje.
1 - Vytvorte svoj prvý Artboard
Nový nástroj Artboard, ktorý bol zavedený v roku 2006 Photoshop CC 2015, sa skrýva za pohybovým nástrojom. Môžete kliknúť na nástroj v ponuke alebo pomocou klávesov Shift + V prepínať medzi „ déplacement "A" kresliaceho plátna »:
Pracovnú rovinu vytvoríte kliknutím a presunutím oblasti. Nový návrhový panel sa zobrazí na paneli vrstiev s predvoleným názvom „Návrhový panel 1“.
Čítajte tiež: Prečo nezávislí ľudia potrebujú denný rozvrh
2 - Nakonfigurujte si Artboard
Vrstvy, ktoré potrebujete, môžete pridať na svoju kresliarsku dosku a budú vnorené tak, ako sú vrstvy (čo vám umožní vytvoriť vhodnú štruktúru vrstvy). Pred pokračovaním k ďalšiemu kroku vám odporúčame pridať rôzne súbory, napríklad tvary, aby boli umiestnené tak, ako chcete.
3 - Duplikujte svoju návrhovú plochu
Len čo nastavíte prvý návrhársky plát tak, aby vyhovoval vašim potrebám, môžete ho duplikovať pomocou kontextovej ponuky. Pravým tlačidlom myši kliknite na „Artboard 1“ v oblasti vrstiev a vyberte „Duplikovať Artboard“. Takto sa vytvorí ďalší podobný „Artboard“, ktorý obsahuje rovnakú štruktúru so všetkými jeho komponentmi:
Ak chcete zistiť aj: Ako duplikovať článok alebo stránku na WordPress
4 - Umiestnite svoje pracovné dosky (Artboard)
Veľkou výhodou použitia kreslicích plátov je, že môžete vidieť všetky svoje obrázky súčasne. Pracovné dosky jednoducho umiestnite podľa svojich potrieb. Existuje niekoľko spôsobov, ako to urobiť:
Na výber súradníc X a Y v ľavom hornom rohu roviny obrábania použite panel, ktorý sa objaví, keď je vybraná pracovná rovina.
Potiahnite vybranú kreslicu na ľubovoľné miesto v photoshop. Artboard sa inteligentne aktivoval, takže môžete automaticky zarovnať viac artboardov tak, aby ich polohy zapadli do predchádzajúcej medzery.
Pomocou klávesov so šípkami na klávesnici presuňte vybranú pracovnú rovinu.
Pozrite si aj náš výukový program o: Ako opraviť knižnicu médií, ktorá už nefunguje v programe WordPress
5 - Ak je to potrebné, upravte veľkosť kresliacich plátov.
Ak potrebujete upraviť veľkosť svojich artboardov, máte opäť niekoľko možností:
- Zmena veľkosti pomocou úchytov, ktoré sa zobrazia pri výbere kresliacej plochy.
- Pomocou panela možností priamo pod ponukou „Súbor“ môžete zvoliť prednastavené veľkosti, pevnú šírku alebo výšku alebo prepínať medzi zobrazením na výšku a na šírku.
- Na zmenu veľkosti a prístup k preddefinovaným veľkostiam použite panel „Vlastnosti“, ktorý sa zobrazí pri výbere pracovnej dosky.
6 - Vytvorte svoje umenie
Teraz môžete pracovať so svojimi pracovnými doskami, vymeniť komponenty a vykonať potrebné zmeny. Za predpokladu, že sa vaše pôvodné nastavenie nezmení, budete teraz mať pixelovo dokonalé obrázky so všetkými komponentmi na správnom mieste.
Pozri tiež náš zoznam 26 WordPress témy so systémom drag and drop vytvoriť svoje stránky
7 - Nastavte nástroj „Generovať“
« Generovať »Umožňuje export artboardov, vrstiev alebo skupín pomocou špeciálnej syntaxe pomenovaní. Toto je skratka na uloženie pre web. Aby sa zabezpečilo, že „ Generovať Je pre vaše PSD povolené, prejdite na „ Súbor> Generovať> Obrázkové aktíva "(Súbor> Generovať> Obrázok Aktíva):
8 - Premenujte svoje artboardy
Generovať « Art "k uložte komponenty obrázka pracujete na základe možností nastavených v súprave vrstiev alebo v kresbe. Existuje niekoľko možností, ktoré môžete nastaviť:
- Formát súboru. Pridať rozšírenie (.jpg, .gif alebo .png ) na uloženie príslušného súboru, napríklad: header-main.png Obrazové komponenty sa uložia do rovnakého priečinka ako súbor PSD, ale s príponou „-assets“.
- Kompresia súborov. Po rozšírení môžete pridať číslo označujúce úroveň použitej kompresie. Pre „ opt.jpg »Môžete použiť percentá a pre png príslušné bity: 8, 24 alebo 32.
- Opustiť stupnicu. Výstupnú mierku môžete nastaviť pridaním percenta alebo pixelov (šírka nad výškou) pred názvom obrázka (napríklad 100% header-main.png8 ).
- Niekoľko obrázkov. Môžete exportovať viac obrázkov toho istého kresliaceho plátna (kresliaceho plátna) na oddelenie názvov obrázkov použite čiarku alebo znamienko plus. Každý obrázok tak môže mať svoje vlastné možnosti, pokiaľ je každý jeho názov jedinečný.
Kombinácia týchto možností vám umožňuje neustále vytvárať zložité obrazové komponenty pre vaše návrhové plochy:
Ak sú pre všetky vaše pracovné dosky požadované štandardné obrázky, Generovať Umožňuje vám v predvolenom nastavení vytvoriť parameter, ktorý sa použije na každý z nich. Ak chcete vytvoriť tento parameter, do hornej časti dokumentu pridajte prázdnu vrstvu s nasledujúcimi možnosťami:
- Predvolené kľúčové slovo: Názov musí začínať týmto, aby bol nástroj opustený. “ Generovať »Sloboda používať ho ako predvolený.
- Opustiť stupnicu: Umožňuje nastaviť výstupnú mierku v percentách alebo pixeloch (šírka nad výškou).
- Zložka / prípona: Definujte názov priečinka, do ktorého sa majú obrázky uložiťa príponu na pridanie k názvom súborov.
Zhrnutie
To je všetko, čo ste sa tam dostali, skúste priblížte obrázok aby ste videli, ako sa ten druhý chová. V prípade potreby môžete obrázok na blogu WordPress otestovať jeho odovzdaním do mediálnej knižnice.
Neváhajte a opýtajte sa nás podľa potreby.
Objavte aj niektoré prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. WP Ultimate Social
Toto je konečný balík všetkých funkcií sociálnych sietí, ktoré by ste mohli potrebovať vo svojom blogu WordPress.
Prečítajte si tiež naše 8 WordPress pluginy k integrácii systému na znižovanie
Jeho hlavné rysy sú: viac ikon sociálnych sietí, sociálne zdieľanie, ktoré umožňuje komukoľvek zdieľať obsah svojich webových stránok (články, stránky, obrázky, médiá) na populárnych sociálnych sieťach (Facebook, Twitter, Linkedin, GooglePlus, pinterest, DiggBuffer, facebook, Tumblr, Naraziť na, Xing, Weibo, VK, Delicious), pripojenie na webovú stránku pomocou vašich poverení pre sociálne médiá, počítadlo zobrazujúce počty vašich sledovateľov a zdieľania vašich webových stránok a ďalších.
Stiahnuť | demo | web hosting
2. WP Slick Posuvník Image Carousel Pro
Ak ste nadšeným sledovateľom balíka Visual Composer, je potrebné zvážiť použitie doplnku WP Slick Slider. S takmer preddefinovanými šablónami 100u určite nájdete to, čo hľadáte, bez toho, aby ste niečo kódovali.
Toto je možnosť brať naozaj vážne, najmä pre používateľov systému Windows 7 Visual Composer. Medzi jeho vlastnosti patrí okrem iného: plne responzívne rozloženie s podporou drag and drop, a shortcodes, Podpora RTL a viacjazyčná podpora, krásny dizajn a oveľa viac
Stiahnuť | demo | web hosting
3. WordPress Sociálny postranný panel
Názov tohto WordPress Plugin by vám mal zhruba povedať, na čo slúži ten druhý. Ale povieme, že WordPress Plugin Sociálny bočný panel vám pomôže vytvoriť bočný panel na vašom webe s cieľom pomôcť vám rýchlo zdieľajte svoj obsah na rôznych sociálnych sieťach.
Medzi jeho funkcie patrí: automatická integrácia s vašou WordPress tému, možnosť konfigurovať ho zhora nadol, kompatibilita s niekoľkými najnovšími a modernými prehliadačmi, možnosť umiestnenia bočných panelov zľava doprava, nad alebo na spodku vašich stránok sú natívne ponúkané 4 sady farieb, pohotové rozloženie a oveľa viac.
Stiahnuť | demo | web hosting
Ďalšie odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- 7 WordPress pluginy vytvárať návrhy pre vaše produkty
- 4 WordPress pluginy pre uloženie na DropBox
- Ako pridať nekonečné posúvanie do blogu WordPress
- 10 WordPress pluginy na prijímanie darov na vašom blogu
záver
Tu ! To je pre tento tutoriál všetko, dúfam, že vám umožní vytvárať obrázky „Retina“ pre váš blog WordPress.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, pozrite si nášho sprievodcu Tvorba blogu WordPress.
Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach.
...
