Gå till innehållet

Hur man skapar "Retina" -bilder för en WordPress-blogg

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Du har lagt mycket tid på att ställa in din bloggs design, men varför bilderna inte visas korrekt på Smartphone? Du såg till att använda bilder av hög kvalitet, men dåligt bildförhållande korrigerar inte skärmen.

Många människor inser inte att nya enheter (särskilt de från Apple) använda en avancerad visningsteknik som påverkar visningen av bilder, för att se till att de visas korrekt på datorer men också på Smartphone.

I denna handledning kommer vi att försöka introducera lite av begreppet " retina klar Och visar dig hur du skapar en näthinnebild.

Men innan du börjar, ta dig tid att titta på Hur man installerar en Wordpress temaHur många insticksprogram ska jag installera på Wordpress.

Låt oss sedan börja arbeta.

Förklaring av bilderna Retina Ready

Enhetsskärmar har fortsatt att förbättra kvaliteten under de senaste åren, och särskilt Apples skärmar har gjort mycket arbete för att vara extremt tydliga och synliga. Teknik "Retina DisplayÄr Apple ett varumärke som används för att beskriva en viss typ av skärm med särskilda förmågor.

Retina skärmar syftar till visa text och bilder så tydligt som möjligt, utan pixlar som är synliga för blotta ögat. Utmaningen för designers är att skärmen varierar beroende på enhetens skärmstorlek och användarens närhet till skärmen.

Genom att dela den fysiska bredden på skärmen med antalet pixlar som visas horisontellt har vi pixlarna per tum (ppi, även kallad ppp för prickar per tum). " hög DPI Används för att hänvisa till alla enheter som har mer än 200 pixlar per tum. Detta inkluderar alla visningsenheter " näthinnan (Från Apple) och vissa enheter från andra tillverkare.

Hur man skapar "Retina Ready" -bilder med Photoshop

Om du arbetar med bilder i dubbel- eller fyrhjulsupplösning måste du kunna zooma in för att se alla små detaljer, men extremt tunga filer orsakar ett prestandaproblem och en fillagringsutmaning.

Lösningen för de flesta designers har varit att antingen skapa flera lager och gruppera dem tillsammans, aktivera dem efter behov. med funktionen "komp » Photoshop antingen för att arbeta med den ursprungliga upplösningen och exportera de format de behöver (använder en åtgärd som "retinize").

Utmaningen med dessa två metoder är att du inte kan se flera bilder samtidigt. Om du behöver se skillnaderna i bilderna i nödvändiga storlekar måste du växla mellan dem eller exportera dem.

Tur för oss Photoshop-entusiaster, Adobe har lagt till en funktion som gör det enkelt att skapa flera bilder. Nu kan du skapa flera dukar sida vid sida med hjälp av den karakteristiska tavlan och skapa flera bildstorlekar med hjälp av generatorn. Låt oss se hur det fungerar.

1 - Skapa din första tavla

Den nya Rityta verktyg, som infördes i Photoshop CC 2015, är gömd bakom rörelseverktyget. Du kan klicka på verktyget i menyn eller använda Skift + V för att växla mellan " déplacement "Och" ritytan »:

Artboard-Tool1-photoshop-handledning-wordpress-create-images-retina redoFör att skapa ett arbetsplan, klicka och dra ett område. Den nya tavlan visas i lagerpanelen med standardnamnet "Tavla 1".

Läs också: Varför frilansare behöver ett dagligt schema

2 - Konfigurera din tavla

Du kan lägga till lager du behöver på ditt tavla och de kapslas som lager är (så att du kan skapa en lämplig lagerstruktur). Vi föreslår att du lägger till dina olika filer, till exempel former, så att de placeras som du vill ha dem innan du fortsätter till nästa steg.

3 - Duplicera din tavla

När din första tavla har ställts in för att tillgodose dina behov kan du kopiera den med snabbmenyn. Högerklicka på "Artboard 1" i lagerområdet och välj "Duplicate Artboard". Detta skapar en annan liknande "Artboard", som innehåller samma struktur med alla dess komponenter:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Photoshop duplicering ritytan

Att upptäcka också: Hur man kopiera en artikel eller en sida på Wordpress

4 - Placera dina bänkskivor (Artboard)

Den stora fördelen med att använda tavlor är att kunna se alla dina bilder samtidigt. För att göra detta, placera bara dina bänkskivor efter dina behov. Det finns flera sätt att göra detta:

Använd panelen som visas när ett arbetsplan väljs för att ange X- och Y-koordinaterna i det övre vänstra hörnet av arbetsplanet.

Dra det valda tavlan till valfri position i Photoshop. Tavlan aktiveras intelligent så att du automatiskt kan rikta in flera tavlor så att deras positioner låses fast i det tidigare avståndet.

Använd piltangenterna på tangentbordet för att flytta ett valt arbetsplan.

Se även vår handledning om: Så här fixar du mediebiblioteket som inte längre fungerar på WordPress

5 - Ändra storlek på dina tavlor (vid behov)

Om du behöver justera storleken på dina tavlor har du återigen flera alternativ:

  • Ändra storlek med de handtag som visas när du väljer en tavla.
  • Använd alternativpanelen strax under "Arkiv" -menyn för att välja förinställda storlekar, fasta bredder eller höjder, eller växla mellan stående och liggande.
  • Använd panelen "Egenskaper" som visas när en bänkskiva har valts för att ändra storlek och få åtkomst till fördefinierade storlekar.

Egenskaper för photohop-arbetsområdet

6 - Skapa din konst

Du kan nu arbeta med dina bänkskivor, byta ut komponenter och göra ändringar efter behov. Förutsatt att din ursprungliga inställning är oförändrad har du nu pixel perfekta bilder med alla komponenter på rätt plats.

Se även vår lista över 26 Wordpress teman med systemet dra och släpp för att skapa dina sidor

7 - Ställ in verktyget "Generera"

« Generera »Låter dig exportera tavlor, lager eller grupper med hjälp av särskild namngivningssyntax. Det här är en genväg att spara på webben. För att säkerställa att " Generera Är aktiverat för din PSD, gå till " Arkiv> Skapa> Bildtillgångar "(Arkiv> Skapa> Bild Tillgångar):

generera verktygs Photoshopgenerera verktygs Photoshop

8 - Byt namn på dina ritytor

Generera « Konst "för spara bildkomponenter du arbetar med baserat på alternativen i lageruppsättningen eller på tavlan. Det finns några alternativ du kan ställa in:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Filformatet. Lägg till ett tillägg (.jpg, .gif eller .png ) för att spara den aktuella filen till exempel: header-main.png Bildkomponenterna sparas i samma mapp som PSD-filen, men med "-assets" som ett suffix.
  • Filkomprimering.  Efter tillägget kan du lägga till ett nummer som anger komprimeringsnivån som används. För " opt.jpg »Du kan använda procentsatser och för png använda respektive bitar: 8, 24 eller 32.
  • Utgångsskala. Du kan ställa in utgångsskalan genom att lägga till antingen procent eller pixlar (mellan bredden och höjden) före bildnamnet (till exempel 100% header-main.png8 ).
  • fler bilder. Du kan exportera flera bilder på samma tavla (ritytan) med kommatecken eller plustecken för att separera bildnamn. Varje bild kan således ha sina egna alternativ så länge varje bildnamn är unikt.

Kombinationen av dessa alternativ gör att du hela tiden kan skapa komplexa bildkomponenter för dina tavlor:

hantering av bildkomponenter

Om standardbilder krävs för alla dina bänkskivor, " Generera Tillåter dig att skapa en parameter som ska tillämpas på varje som standard. För att skapa denna parameter lägger du till ett tomt lager högst upp i dokumentet med följande alternativ:

  • Standard nyckelord: Namnet måste börja med detta för att lämna verktyget " Generera »Friheten att använda den som standard.
  • Utgångsskala: Låter dig ställa in utgångsskalan med en procent eller pixlar (mellan bredden och höjden).
  • Mapp / suffixet: Definiera namnet på mappen där bilderna ska sparas, och ett suffix för att lägga till filernas namn.

Sammanfattning

Det är allt du har där, försök att zooma in på bilden för att se hur det senare beter sig. Om det behövs kan du testa bilden på din WordPress-blogg genom att ladda upp den till ditt mediebibliotek.

Ställ oss gärna frågor efter behov.

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. WP Ultimate Social

Detta är ett ultimat paket med alla sociala nätverksfunktioner du kan behöva på din WordPress-blogg.wp-ultimate-social

Läs också vår 8 Wordpress plugins att integrera ett reduktionssystem

Dess huvudsakliga funktioner är: flera sociala nätverk ikoner, social delning som gör att alla kan dela innehållet på din webbplats (artiklar, sidor, bilder, media) på populära sociala nätverk (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, digg, Buffert, reddit, Tumblr, stumbleupon, Xing, Weibo, VK, Delicious), anslutning till webbplatsen med dina sociala medier, en räknare för att visa antalet följare och andelar på din webbplats och andra.

Ladda ner | demo | webbhotell

2. WP Slick Slider Image Carousel Pro

Om du är en ivrig följare av Visual Composer-sviten är det ett alternativ du måste överväga att använda WP Slick Slider-plugin. Med nästan 100 fördefinierade mallar hittar du definitivt det du letar efter utan att koda något.

Wp slick reglaget och bildkarusell pro

Detta är ett alternativ att ta riktigt på allvar, särskilt för användare av Visual Composer. Dess funktioner är bland annat: en helt responsiv layout med dra och släpp-stöd, a kortkoder, RTL och flerspråkig support, en vacker design och mycket mer

Ladda ner | demo | webbhotell

3. WordPress Social Sidebar

Namnet på detta WordPress-plugin bör berätta ungefär vad den är till för. Men det ser ut som att WordPress Social Sidebar-plugin hjälper dig att skapa en sidofält på din webbplats för att hjälpa dig dela snabbt ditt innehåll på olika sociala nätverk.

Wordpress sociala sidofält

Dess funktioner är bland annat: automatisk integration i ditt WordPress-tema, möjligheten att konfigurera det från topp till botten, kompatibilitet med flera nya och moderna webbläsare, möjligheten att placera dina sidofält från vänster till höger, över eller längst ner på dina sidor, erbjuds fyra färguppsättningar naturligt, en lyhörd layout och mycket mer.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Ladda ner demo | webbhotell

Andra rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Här! Det är det för den här självstudien, jag hoppas att du kan skapa "Retina" -bilder för din WordPress-blogg. 

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blog skapelse.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
10 aktier
del10
tweet
Enregistrer