Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Investovali jste hodně času do nastavení designu svého blogu, ale proč se obrázky na smartphonu nezobrazují správně? Ujistili jste se, že používáte vysoce kvalitní obrázky, ale špatný stav obrazu neopravuje zobrazení.

Mnoho lidí si neuvědomuje, že nová zařízení (zejména ty od Apple) použijte pokročilou technologii zobrazení, která ovlivňuje způsob zobrazení obrázků, aby bylo zajištěno, že se obrázky zobrazují správně v počítačích, ale také v chytrých telefonech.

V tomto tutoriálu se pokusíme představit trochu pojmu „ sítnice ready A ukázat vám, jak vytvořit obraz sítnice.

Ale než začnete, udělejte si čas na prohlídku Jak nainstalovat motiv WordPressKolik pluginy mám nainstalovat na WordPress.

Pak pojďme do práce.

Vysvětlení snímků připravených k použití s ​​očima Retina

Obrazovky zařízení se v posledních několika letech neustále zlepšovaly v kvalitě a zejména obrazovky Apple odvedly hodně práce, aby byly extrémně jasné a viditelné. Technologie "Retina displejJe značka společnosti Apple používaná k popisu určitého typu displeje se zvláštními nadáními.

Síťové obrazovky se zaměřují na zobrazujte text a obrázky co nejjasněji, bez viditelných pixelů pouhým okem. Výzvou pro designéry je, že displej se liší v závislosti na velikosti obrazovky zařízení a blízkosti uživatele k obrazovce.

Vydělením fyzické šířky obrazovky počtem pixelů zobrazených vodorovně máme pixely na palec (ppi, také nazývaný ppp pro tečky na palec). " Vysoké rozlišení DPI Používá se k označení jakéhokoli zařízení, které má více než 200 pixelů na palec. To zahrnuje všechna zobrazovací zařízení “ sítnice (Od společnosti Apple) a některá zařízení od jiných výrobců.

Jak vytvořit obrázky "Retina Ready" pomocí Photoshopu

Práce s obrázky ve dvojím nebo čtyřnásobném rozlišení znamená, že budete muset přiblížit zobrazení všech malých detailů, avšak extrémně velké soubory způsobují problém s výkonem a problém s ukládáním souborů.

Řešení pro většinu návrhářů bylo buď vytvořit více vrstev a seskupit je dohromady, podle potřeby je aktivovat. pomocí funkce "comps » Photoshop buď pracovat v původním rozlišení a exportovat potřebné formáty (pomocí akce jako „retinize“).

Výzva u těchto dvou metod spočívá v tom, že nevidíte více obrázků současně. Pokud potřebujete vidět rozdíly v obrázcích v potřebné velikosti, musíte mezi nimi přepínat nebo exportovat.

Naštěstí pro nás nadšence Photoshopu, společnost Adobe přidala funkci, která usnadňuje vytváření více obrázků. Nyní můžete vytvořit více pláten vedle sebe pomocí charakteristické kreslicí plochy a vytvořit více velikostí obrázků pomocí generátoru. Podívejme se, jak to funguje.

1 - Vytvořte svůj první Artboard

Nový nástroj Artboard, představený v Photoshop CC 2015, je skrytý za pohybovým nástrojem. Můžete kliknout na nástroj v nabídce nebo pomocí kláves Shift + V přepínat mezi „ Umístění "A" kreslicího plátna »:

Kreslicího plátna-Tool1-photoshop-tutorial-WordPress vytvořit obrazy sítnice-readyChcete-li vytvořit pracovní rovinu, klepněte a přetáhněte oblast. Nová kreslicí plocha se zobrazí v panelu vrstev se výchozím názvem „Artboard 1“.

Čtěte také: Proč nezávislí lidé potřebují denní rozvrh

2 - Nakonfigurujte svůj Artboard

Na svou kreslicí plochu můžete přidat vrstvy, které potřebujete, a budou vnořeny tak, jak jsou vrstvy (což vám umožní vytvořit vhodnou strukturu vrstev). Doporučujeme přidat vaše různé soubory, například tvary, aby byly před dalším krokem umístěny tak, jak chcete.

3 - Duplikujte svou kreslicí plochu

Jakmile je vaše první kreslicí plocha nastavena tak, aby vyhovovala vašim potřebám, můžete ji duplikovat pomocí kontextové nabídky. Klikněte pravým tlačítkem na „Artboard 1“ v oblasti vrstev a vyberte „Duplikovat Artboard“. Tím se vytvoří další podobný „Artboard“, který obsahuje stejnou strukturu se všemi jeho komponentami:

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

duplikace artboard photoshop

Objevit také: Jak duplikovat článek nebo stránku na WordPress

4 - Umístěte pracovní desky (Artboard)

Velkou výhodou používání kreslicích pláten je možnost zobrazit všechny vaše obrázky najednou. Chcete-li to provést, jednoduše umístěte své pracovní desky podle svých potřeb. Existuje několik způsobů, jak toho dosáhnout:

Pomocí panelu, který se objeví, když je vybrána pracovní rovina, zadejte souřadnice X a Y v levém horním rohu pracovní roviny.

Přetáhněte vybranou kreslicí plátno na libovolné místo v Photoshop. Artboard se inteligentně aktivoval, takže můžete automaticky zarovnat více artboardů tak, aby jejich pozice zapadly do předchozí mezery.

Pomocí kláves se šipkami na klávesnici přesuňte vybranou pracovní rovinu.

Podívejte se také na náš výukový program: Jak opravit knihovnu médií, která už nefunguje v aplikaci WordPress

5 - Změňte velikost kreslicích pláten (je-li to nutné)

Pokud potřebujete upravit velikost kreslicích pláten, máte opět několik možností:

  • Změňte velikost pomocí úchytů, které se zobrazí při výběru kreslicího plátna.
  • Pomocí panelu možností přímo pod nabídkou „Soubor“ můžete vybrat přednastavené velikosti, pevné šířky nebo výšky nebo přepínat mezi portrétem a krajinou.
  • Pomocí panelu „Vlastnosti“, který se zobrazí při výběru pracovní desky, můžete změnit velikost a získat přístup k předdefinovaným velikostem.

Vlastnost pracovní plochy photoshopu

6 - Vytvořte své umění

Nyní můžete pracovat se svými pracovními deskami, vyměňovat součásti a podle potřeby provádět změny. Za předpokladu, že se vaše původní nastavení nezmění, budete nyní mít pixelové dokonalé obrázky se všemi komponenty na správném místě.

Viz také náš seznam 26 WordPress témata se systémem drag and drop vytvořit vaše stránky

7 - Nastavte nástroj „Generovat“

« Generovat »Umožňuje exportovat kreslicí plátna, vrstvy nebo skupiny pomocí speciální syntaxe pojmenování. Toto je zkratka pro uložení pro web. Aby bylo zajištěno, že „ Generovat Je povoleno pro váš PSD, přejděte na „ Soubor> Vytvořit> Obrazová aktiva "(Soubor> Vytvořit> Obrázek Měny):

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

nástroj photoshopnástroj photoshop

8 - Přejmenujte své kreslicí plátna

Generovat « Umění Pro uložit komponenty obrázku pracujete na základě možností nastavených v sadě vrstev nebo na kreslicí ploše. Můžete nastavit několik možností:

  • Formát souboru. Přidat příponu (.jpg, .gif nebo .png ) pro uložení příslušného souboru, například: header-main.png Obrazové komponenty budou uloženy ve stejné složce jako soubor PSD, ale s příponou „-assets“.
  • Komprese souborů.  Po rozšíření můžete přidat číslo označující úroveň použité komprese. Pro " opt.jpg »Můžete použít procenta a pro png použít příslušné bity: 8, 24 nebo 32.
  • Ukončete měřítko. Můžete nastavit výstupní měřítko přidáním procenta nebo pixelů (šířku nad výškou) před názvem obrázku (například 100% header-main.png8 ).
  • Několik obrázků. Můžete exportovat více obrázků stejné kreslicí desky (kreslicího plátna) oddělte názvy obrázků čárkou nebo znaménkem plus. Každý obrázek tak může mít své vlastní možnosti, pokud je každý název obrázku jedinečný.

Kombinace těchto možností vám umožňuje neustále vytvářet složité obrazové komponenty pro vaše kreslicí plátna:

správa obrazových komponent

Pokud jsou pro všechny vaše pracovní desky potřebné standardní obrázky, Generovat Umožňuje vytvořit parametr, který se použije na každý ve výchozím nastavení. Chcete-li vytvořit tento parametr, do horní části dokumentu přidejte prázdnou vrstvu s následujícími možnostmi:

  • Výchozí klíčové slovo: Název musí začínat tímto, aby bylo možné nástroj opustit “ Generovat »Svoboda používat jej jako výchozí.
  • Ukončete měřítko: Umožňuje nastavit výstupní měřítko v procentech nebo pixelech (šířku nad výškou).
  • Složka / přípona: Definujte název složky, do které mají být obrázky uloženya příponu pro přidání k názvům souborů.

Shrnutí

To je vše, co jste se tam dostali, zkuste to přiblížit obrázek abyste viděli, jak se ten druhý chová. V případě potřeby můžete obrázek vyzkoušet na svém blogu WordPress jeho nahráním do knihovny médií.

Nebojte se nás na cokoli zeptat.

Objevte také některé prémiové doplňky WordPress  

Pomocí dalších pluginů WordPress můžete dát moderní vzhled a optimalizovat přilnavost vašeho blogu nebo webu.

Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.

1. WP Ultimate Social

Toto je konečný balíček všech funkcí sociálních sítí, které byste mohli potřebovat ve svém blogu WordPress.wp-ultimate-společenské

Přečtěte si také naše 8 WordPress pluginy k integraci systému na snižování

Jeho hlavní rysy jsou: více ikon sociálních sítí, sociální sdílení, které umožňuje komukoli sdílet obsah svého webu (články, stránky, obrázky, média) na populárních sociálních sítích (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, DiggBuffer, reddit, Tumblr, StumbleUpon, Xing, Weibo, VK, Delicious), připojení k webu pomocí vašich údajů o sociálních médiích, čítač pro zobrazení počtu vašich sledujících a sdílení vašich webových stránek a dalších.

Stáhnout | Demo | Web hosting

2. WP Slick Posuvník Image Carousel Pro

Pokud jste vášnivým sledovatelem sady Visual Composer, je třeba zvážit použití pluginu WP Slick Slider. S téměř předdefinovanými šablonami 100u určitě najdete to, co hledáte, aniž byste cokoli kódovali.

WP slick slider and image carousel pro

Toto je možnost brát opravdu vážně, zejména pro uživatele Vizuální skladatel. Mezi jeho vlastnosti patří mimo jiné: plně responzivní rozložení s podporou drag and drop, a shortcodes, Podpora RTL a vícejazyčná podpora, krásný design a mnoho dalšího

Stáhnout | Demo | Web hosting

3. WordPress Sociální postranní panel

Název tohoto pluginu WordPress by vám měl zhruba říct, k čemu slouží. Vypadá to však, že zásuvný modul sociální sítě WordPress vám pomůže vytvořit postranní panel na vašem webu, aby vám pomohl rychle sdílejte svůj obsah na různých sociálních sítích.

Sociální postranní panel Wordpress

Mezi jeho funkce patří mimo jiné: automatická integrace do vašeho tématu WordPress, možnost jeho konfigurace shora dolů, kompatibilita s několika současnými a moderními prohlížeči, možnost umístit vaše postranní panely zleva doprava, nad nebo v dolní části stránek jsou nativně nabízeny 4 barevné sady, citlivé rozložení a mnohem více.

Stáhnout Demo | Web hosting

Další doporučené zdroje

Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.

závěr

Tady ! To je pro tento návod vše, doufám, že vám umožní vytvářet obrázky „Retina“ pro váš blog WordPress. 

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek, nahlédněte do našeho průvodce Vytvoření blogu WordPress.

Pokud máte návrhy nebo připomínky, nechte je v naší sekci commentaires. Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích

... 

10 akcie
podíl10
tweet
Zadat