Du har brukt mye tid på å sette opp utformingen av bloggen din, men hvorfor vises ikke bildene riktig på Smartphone? Du sørget for å bruke bilder av høy kvalitet, men dårlig bildeforhold korrigerer ikke skjermen.
Mange mennesker er ikke klar over at nye enheter (spesielt de fra Apple) bruk en avansert skjermteknologi som påvirker måten bilder vises på, for å sikre at de vises riktig på datamaskiner, men også på Smartphone.
I denne opplæringen vil vi prøve å introdusere litt av forestillingen om " hinnen klar Og viser deg hvordan du lager et netthinnebilde.
Men før du begynner, ta deg tid til å ta en titt på Hvordan installere en WordPress tema, Hvor mange plugins bør jeg installere på WordPress.
Så la oss komme på jobb.
Forklaring av bildene Retina Klar
Enhetsskjermene har fortsatt å forbedre kvaliteten de siste årene, og spesielt Apples skjermer har gjort mye arbeid for å være ekstremt klare og synlige. Teknologi "Retina DisplayEr et merkenavn fra Apple brukt til å beskrive en bestemt type skjerm med spesielle evner.
Retina-skjermer sikter mot vise tekst og bilder så tydelig som mulig, uten piksler synlige for det blotte øye. Utfordringen for designere er at skjermen varierer avhengig av skjermstørrelsen på enheten, og brukerens nærhet til skjermen.
Ved å dele den fysiske bredden på skjermen med antall piksler som vises horisontalt, har vi piksler per tomme (ppi, også kalt ppp for prikker per tomme). " høy DPI Brukes til å referere til en hvilken som helst enhet som har mer enn 200 piksler per tomme. Dette inkluderer alle skjermenheter " netthinnen (Fra Apple), og noen enheter fra andre produsenter.
Hvordan lage "Retina Ready" -bilder med Photoshop
Å jobbe med bilder i dobbel eller firhjulet oppløsning betyr at du må kunne zoome inn for å se alle de små detaljene, men ekstremt tunge filer forårsaker et ytelsesproblem og en fillagringsutfordring.
Løsningen for de fleste designere har vært å enten lage flere lag og gruppere dem sammen, aktivere dem etter behov. bruker funksjonen "komp » Photoshop enten for å jobbe med den opprinnelige oppløsningen og eksportere formatene de trenger (bruker en handling som "retinize").
Utfordringen med disse to metodene er at du ikke kan se flere bilder samtidig. Hvis du trenger å se forskjellene i bildene i nødvendige størrelser, må du bytte mellom dem eller eksportere dem.
Heldig for oss Photoshop-entusiaster, har Adobe lagt til en funksjon som gjør det enklere å lage flere bilder. Nå kan du lage flere lerret side om side ved hjelp av det karakteristiske tegnebrettet, og lage flere bildestørrelser ved hjelp av generatoren. La oss se hvordan det fungerer.
1 - Lag ditt første tegnebrett
Den nye Artboard verktøy, introdusert i Photoshop CC 2015, er skjult bak bevegelsesverktøyet. Du kan klikke på verktøyet i menyen, eller bruke Skift + V for å bytte mellom " forskyvning "Og" artboard '
Klikk og dra et område for å opprette et arbeidsplan. Det nye tegnebrettet vises i lagpanelet med standardnavnet "Artboard 1".
Les også: Hvorfor frilansere trenger en daglig timeplan
2 - Konfigurer tegnebrettet
Du kan legge til lag du trenger på tegnebrettet, og de blir nestet som lag er (slik at du kan lage en passende lagstruktur). Vi foreslår at du legger til forskjellige filer, for eksempel former, slik at de blir plassert slik du vil ha dem før du går videre til neste trinn.
3 - Dupliser tegnebrettet
Når ditt første tegnebrett er konfigurert for å dekke dine behov, kan du duplisere det ved hjelp av hurtigmenyen. Høyreklikk på "Artboard 1" i lagområdet og velg "Duplicate Artboard". Dette skaper en annen lignende "Artboard", som inneholder den samme strukturen med alle komponentene:
Å oppdage også: Hvordan å duplisere en artikkel eller en side på WordPress
4 - Plasser benkeplatene (Artboard)
Den store fordelen med å bruke tegnebrett er å kunne se alle bildene dine samtidig. For å gjøre dette må du bare plassere benkeplatene etter dine behov. Det er flere måter å gjøre dette på:
Bruk panelet som vises når et arbeidsplan er valgt for å gå inn i X- og Y-koordinatene i øvre venstre hjørne av arbeidsplanet.
Dra det valgte tegnebrettet til hvilken som helst posisjon i Photoshop. Tavlen aktiveres intelligent, slik at du automatisk kan justere flere tavler slik at posisjonene deres låses i forrige avstand.
Bruk piltastene på tastaturet til å flytte et valgt arbeidsplan.
Se også veiledningen vår om: Slik reparerer du mediebiblioteket som ikke lenger fungerer på WordPress
5 - Endre størrelsen på tegnebrettene dine (når det er nødvendig)
Hvis du trenger å justere størrelsen på tegnebrettene dine, har du igjen flere alternativer:
- Endre størrelse ved hjelp av håndtakene som vises når du velger et tegnebrett.
- Bruk alternativpanelet rett under "Fil" -menyen for å velge forhåndsinnstilte størrelser, faste bredder eller høyder, eller veksle mellom stående og liggende.
- Bruk "Egenskaper" -panelet som vises når en benkeplate er valgt for å endre størrelse og få tilgang til forhåndsdefinerte størrelser.
6 - Lag din kunst
Du kan nå jobbe med benkeplatene, bytte ut komponenter og gjøre endringer etter behov. Forutsatt at det opprinnelige oppsettet er uendret, vil du nå ha perfekte pixelbilder med alle komponentene på rett sted.
Se også vår liste over 26 WordPress temaer med system dra og slipp for å lage dine sider
7 - Sett opp "Generer" -verktøyet
« Generere »Lar deg eksportere tegnebrett, lag eller grupper ved hjelp av spesiell navngivningssyntaks. Dette er en snarvei du kan lagre på nettet. For å sikre at " Generere Er aktivert for PSD-en din, gå til " File> Generate> Image Assets "(Fil> Generer> Bilde Eiendeler):
8 - Gi nytt navn til tegnebrettene
Generer « Kunst "å lagre bildekomponenter du jobber med basert på alternativene som er angitt i lagsettet eller på tavlen. Det er noen få alternativer du kan angi:
- Filformatet. Legg til en utvidelse (.jpg, gif eller png ) for å lagre den aktuelle filen for eksempel: header-main.png Bildekomponentene lagres i samme mappe som PSD-filen, men med "-assets" som et suffiks.
- Filkomprimering. Etter utvidelsen kan du legge til et tall som angir kompresjonsnivået som brukes. For " opt.jpg »Du kan bruke prosenter, og for png bruke de respektive bitene: 8, 24 eller 32.
- Avslutt skala. Du kan stille inn utgangsskalaen ved å legge til enten prosent eller piksler (bredden til høyden) før bildetavnet (for eksempel 100% header-main.png8 ).
- flere bilder. Du kan eksportere flere bilder på samme tegnebrett (artboard) ved å bruke komma eller pluss for å skille navn på bilder. Hvert bilde kan dermed ha sine egne alternativer så lenge hvert navn på bildet er unikt.
Kombinasjonen av disse alternativene lar deg hele tiden lage komplekse bildekomponenter for tegnebrettene dine:
Hvis standardbilder er nødvendige for alle benkeplatene, vil " Generere Lar deg lage en parameter som skal brukes på hver som standard. Hvis du vil opprette denne parameteren, legger du til et tomt lag øverst i dokumentet med følgende alternativer:
- Standard nøkkelord: Navnet må starte med dette for å forlate verktøyet " Generere »Friheten til å bruke den som standard.
- Avslutt skala: Lar deg stille utgangsskalaen med en prosentandel eller piksler (bredden til høyden).
- Folder / suffiks: Definer navnet på mappen som bildene skal lagres i, og et suffiks for å legge til navnene på filene.
CV
Det er alt du har kommet, prøv å gjøre zoome inn på bildet å se hvordan sistnevnte oppfører seg. Om nødvendig kan du teste bildet på WordPress-bloggen din ved å laste det opp til mediebiblioteket.
Still oss spørsmål ved behov.
Oppdag også noen premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. WP Ultimate Social
Dette er en ultimate pakke med alle de sosiale nettverksfunksjonene du muligens trenger på WordPress-bloggen din.
Les også vår 8 WordPress plugins for å integrere en reduksjon system
Dets viktigste funksjoner er: flere sosiale nettverk ikoner, sosial deling som gjør at alle kan del innholdet på nettstedet ditt (artikler, sider, bilder, media) på populære sosiale nettverk (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Buffer, Reddit, Tumblr, Snuble over, Xing, Weibo, VK, Delicious), tilkobling til nettstedet med dine sosiale medieopplysninger, en teller for å vise antall følgere og andeler av nettstedet ditt og andre.
2. WP Slick Slider Image Carousel Pro
Hvis du er en ivrig tilhenger av Visual Composer-pakken, er å bruke WP Slick Slider-plugin et alternativ du må vurdere. Med nesten 100 forhåndsdefinerte maler, vil du definitivt finne det du leter etter uten å kode noe.
Dette er et alternativ å ta virkelig alvorlig, spesielt for brukere av Visual Composer. Funksjonene er blant annet: et fullt responsivt oppsett med dra og slipp-støtte, a kortkoder, RTL og flerspråklig støtte, et vakkert design og mye mer
3. WordPress Social Sidebar
Navnet på dette WordPress Plugin skal fortelle deg omtrent hva sistnevnte er for. Men vi vil si at WordPress Plugin Social Sidebar vil hjelpe deg med å lage en sidebar på nettstedet ditt med det formål å hjelpe deg med det del raskt innholdet ditt i forskjellige sosiale nettverk.
Funksjonene inkluderer: automatisk integrasjon med din WordPress tema, muligheten til å konfigurere den fra topp til bunn, kompatibilitet med flere nyere og moderne nettlesere, muligheten for å plassere sidefeltene fra venstre til høyre, over eller nederst på sidene dine, tilbys 4 fargesett innfødt, et responsivt oppsett og mye mer.
Andre anbefalte ressurser
Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.
- 7 WordPress plugins for å lage design for dine produkter
- 4 WordPress plugins for å lagre på DropBox
- Slik legger du til uendelig rulling i en WordPress-blogg
- 10 WordPress plugins for å motta donasjoner på bloggen din
konklusjonen
Her! Det er det for denne opplæringen, jeg håper det vil tillate deg å lage "Retina" -bilder for WordPress-bloggen din.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide WordPress blog oppretting.
Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk.
...
