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 tema, Hur 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 »:
Fö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:
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.
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):
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:
- 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:
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 för att optimera hanteringen av din blogg eller hemsida.
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.
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.
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 det senare är till för. Men vi kommer att säga att Wordpress plugin Social Sidebar hjälper dig att skapa en sidofält på din webbplats med syftet att hjälpa dig att göra det dela snabbt ditt innehåll på olika sociala nätverk.
Dess funktioner inkluderar: automatisk integration med din Wordpress tema, möjligheten att konfigurera den från topp till botten, kompatibilitet med flera nyare 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.
Ladda ner | demo | webbhotell
Andra rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- 7 Wordpress plugins för att skapa mönster för dina produkter
- 4 WordPress plugins för att spara på DropBox
- Hur du lägger till oändlig rullning i en WordPress-blogg
- 10 WordPress plugins för att ta emot donationer på din blogg
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.
.
