Du har brugt meget tid på at opsætte designet af din blog, men hvorfor vises billederne ikke korrekt på Smartphone? Du sørgede for at bruge billeder i høj kvalitet, men dårlig billedtilstand korrigerer ikke skærmen.
Mange mennesker er ikke klar over, at nye enheder (især dem fra Apple) Brug en avanceret displayteknologi, der påvirker visningen af billeder, for at sikre, at de vises korrekt på computere, men også på Smartphone.
I denne tutorial vil vi forsøge at introducere lidt af forestillingen om " nethinden klar Og viser dig, hvordan du opretter et retina-billede.
Men inden du starter, skal du tage dig tid til at tage et kig på Sådan installeres en WordPress tema, Hvor mange plugins skal jeg installere på WordPress.
Så lad os komme på arbejde.
Forklaring af billederne nethinden Ready
Enhedsskærme er fortsat med at forbedre kvaliteten de sidste par år, og især Apples skærme har gjort et stort arbejde for at være ekstremt klare og synlige. Teknologi "Retina DisplayEr et Apple-mærke brugt til at beskrive en bestemt type skærm med særlige evner.
Nethindeskærme sigter mod vise tekst og billeder så tydeligt som muligt uden pixels synlige med det blotte øje. Udfordringen for designere er, at skærmen varierer afhængigt af enhedens skærmstørrelse, og hvor tæt en bruger er på skærmen.
Ved at dividere skærmens fysiske bredde med antallet af pixels, der vises vandret, har vi pixels pr. Tomme (ppi, også kaldet ppp for prikker pr. tomme). " høj DPI Bruges til at henvise til enhver enhed, der har mere end 200 pixels per tomme. Dette inkluderer alle displayenheder " nethinde (Fra Apple) og nogle enheder fra andre producenter.
Sådan oprettes "Retina Ready" -billeder med Photoshop
Arbejde med billeder i dobbelt- eller quad-opløsning betyder, at du skal være i stand til at zoome ind for at se alle de små detaljer, men ekstremt tunge filer forårsager et ydelsesproblem og en fillagringsudfordring.
Løsningen for de fleste designere har været at enten oprette flere lag og gruppere dem sammen og aktivere dem efter behov. ved hjælp af funktionen "komp » Photoshop enten for at arbejde i den originale opløsning og eksportere de formater, de har brug for (ved hjælp af en handling som "retinize").
Udfordringen med disse to metoder er, at du ikke kan se flere billeder på samme tid. Hvis du har brug for at se forskellene i billederne i de nødvendige størrelser, skal du skifte mellem dem eller eksportere dem.
Heldig for os Photoshop-entusiaster har Adobe tilføjet en funktion, der gør det lettere at oprette flere billeder. Nu kan du oprette flere lærred side om side ved hjælp af det karakteristiske tegnebræt og oprette flere billedstørrelser ved hjælp af generatoren. Lad os se, hvordan det fungerer.
1 - Opret dit første tegnebræt
Den nye tegnebræt værktøj, der blev indført i Photoshop CC 2015, er skjult bag bevægelsesværktøjet. Du kan klikke på værktøjet i menuen eller bruge Skift + V til at skifte mellem " deplacement "Og" tegnebræt »:
For at oprette et arbejdsplan skal du klikke og trække et område. Det nye tegnebræt vises i lagpanelet med standardnavnet "Artboard 1".
Læs også: Hvorfor freelancere har brug for en daglig plan
2 - Konfigurer dit tegnebræt
Du kan tilføje lag, du har brug for, til dit tegnebræt, og de indlejres som lag er (så du kan oprette en passende lagstruktur). Vi foreslår, at du tilføjer dine forskellige filer, såsom figurer, så de placeres, som du vil have dem, inden du fortsætter til næste trin.
3 - Kopier dit tegnebræt
Når dit første tegnebræt er konfigureret til at imødekomme dine behov, kan du duplikere det ved hjælp af genvejsmenuen. Højreklik på "Artboard 1" i lagområdet, og vælg "Duplicate Artboard". Dette skaber en anden lignende "Artboard", der indeholder den samme struktur med alle dens komponenter:
At opdage også: Sådan duplikere en artikel eller en side på WordPress
4 - Placer dine bordplader (tegnebræt)
Den store fordel ved at bruge tegnebrætter er at kunne se alle dine billeder på samme tid. For at gøre dette skal du blot placere dine bordplader efter dine behov. Der er flere måder at gøre dette på:
Brug panelet, der vises, når et arbejdsplan er valgt til at indtaste X- og Y-koordinaterne i øverste venstre hjørne af arbejdsplanet.
Træk det valgte tegnebræt til enhver position i Photoshop. Tegnebrættet er aktiveret intelligent, så du automatisk kan justere flere tavler, så deres positioner låses fast i den foregående afstand.
Brug piletasterne på tastaturet til at flytte et valgt arbejdsplan.
Se også vores tutorial om: Sådan repareres mediebiblioteket, der ikke længere fungerer på WordPress
5 - Ændr størrelsen på dine tegnebrætter (når det er nødvendigt)
Hvis du har brug for at justere størrelsen på dine tegnebrætter, har du igen flere muligheder:
- Tilpas størrelse ved hjælp af de håndtag, der vises, når du vælger et tegnebræt.
- Brug indstillingspanelet lige under "Filer" -menuen til at vælge forudindstillede størrelser, faste bredder eller højder eller skifte mellem stående og liggende.
- Brug panelet "Egenskaber", der vises, når en bordplade er valgt for at ændre størrelsen og få adgang til foruddefinerede størrelser.
6 - Opret din kunst
Du kan nu arbejde med dine bordplader, udskifte komponenter og foretage ændringer efter behov. Forudsat at din oprindelige opsætning er uændret, har du nu perfekte pixelbilleder med alle komponenter på det rigtige sted.
Se også vores liste over 26 WordPress temaer med systemet træk og slip for at oprette dine sider
7 - Opsæt "Generer" -værktøjet
« Generer »Giver dig mulighed for at eksportere tegnebrætter, lag eller grupper ved hjælp af særlig navngivningssyntaks. Dette er en genvej til at gemme på nettet. For at sikre, at " Generer Er aktiveret til din PSD, gå til " Fil> Generer> Billedaktiver "(File> Generate> Image Aktiver):
8 - Omdøb dine tegnebrætter
Generer « Kunst "til gem billedkomponenter du arbejder på baseret på de indstillinger, der er angivet i lagsættet eller på dit tegnebræt. Der er et par muligheder, du kan indstille:
- filformat. Tilføj en udvidelse (.jpg, gif eller .png ) for at gemme den pågældende fil for eksempel: header-main.png Billedkomponenterne gemmes i samme mappe som PSD-filen, men med "-assets" som et suffiks.
- Filkomprimering. Efter udvidelsen kan du tilføje et tal, der angiver det anvendte komprimeringsniveau. Til " opt.jpg »Du kan bruge procenter, og til png bruge de respektive bits: 8, 24 eller 32.
- Afslut skala. Du kan indstille outputskalaen ved at tilføje enten procent eller pixels (bredden til højden) foran billednavnet (for eksempel 100% header-main.png8 ).
- flere billeder. Du kan eksportere flere billeder af det samme tegnebræt (tegnebræt) ved hjælp af et komma eller plustegn for at adskille billednavne. Hvert billede kan således have sine egne muligheder, så længe hvert navn på billedet er unikt.
Kombinationen af disse muligheder giver dig mulighed for konstant at oprette komplekse billedkomponenter til dine tegnebrætter:
Hvis der kræves standardbilleder til alle dine bordplader, " Generer Giver dig mulighed for at oprette en parameter, der skal anvendes på hver som standard. For at oprette denne parameter skal du tilføje et tomt lag øverst i dit dokument med følgende indstillinger:
- Standard nøgleord: Navnet skal starte med dette for at forlade værktøjet " Generer »Friheden til at bruge den som standard.
- Afslut skala: Giver dig mulighed for at indstille outputskalaen med en procentdel eller pixels (bredden til højden).
- Mappe / suffiks: Definer navnet på den mappe, hvor billederne skal gemmes i, og et suffiks for at tilføje navnene på filerne.
CV
Det er alt hvad du er der, prøv at gøre zoom ind på billedet for at se, hvordan sidstnævnte opfører sig. Om nødvendigt kan du teste billedet på din WordPress-blog ved at uploade det til dit mediebibliotek.
Stil os gerne spørgsmål efter behov.
Oplev også nogle premium WordPress-plugins
Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af din blog eller hjemmeside.
Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.
1. WP Ultimate Social
Dette er en ultimativ pakke med alle de sociale netværksfunktioner, du muligvis har brug for på din WordPress-blog.
Læs også vores 8 WordPress plugins til at integrere en reduktion-system
Dets vigtigste funktioner er: flere sociale netværksikoner, social deling, der gør det muligt for nogen at del indholdet på dit websted (artikler, sider, billeder, medier) på populære sociale netværk (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Buffer, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), forbindelse til websitet med dine sociale medier-legitimationsoplysninger, en tæller til at vise antallet af dine følgere og dele på dit websted og andre.
Downloade | demo | Web-hosting
2. WP Slick Slider Image Carousel Pro
Hvis du er en ivrig tilhænger af Visual Composer-pakken, er brug af WP Slick Slider-plugin en mulighed, du skal overveje. Med næsten 100 foruddefinerede skabeloner vil du helt sikkert finde det, du leder efter, uden at kode noget.
Dette er en mulighed at tage virkelig alvorligt, især for brugere af Visual Composer. Dens funktioner er blandt andet: et fuldt responsivt layout med træk og slip-understøttelse, a kortkoder, RTL og flersproget support, et smukt design og meget mere
Downloade | demo | Web-hosting
3. WordPress Social Sidebar
Navnet på dette WordPress plugin skal fortælle dig nogenlunde, hvad det sidste er til. Men vi vil sige, at WordPress plugin Social Sidebar hjælper dig med at oprette en sidebar på dit websted med det formål at hjælpe dig med at gøre det del hurtigt dit indhold på forskellige sociale netværk.
Dens funktionaliteter omfatter: automatisk integration med din WordPress tema, evnen til at konfigurere den fra top til bund, kompatibilitet med flere nyere og moderne browsere, muligheden for at placere dine sidebjælker fra venstre til højre, over eller i bunden af dine sider, tilbydes 4 farvesæt indfødt, et lydhørt layout og meget mere.
Downloade | demo | Web-hosting
Andre anbefalede ressourcer
Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.
- 7 WordPress plugins til at skabe design til dine produkter
- 4 WordPress plugins for at gemme på DropBox
- Sådan tilføjes uendelig rulning til en WordPress-blog
- 10 WordPress plugins for at modtage donationer på din blog
Konklusion
Her ! Det er det til denne tutorial, jeg håber, det giver dig mulighed for at oprette "Retina" -billeder til din WordPress-blog.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider ved at konsultere vores guide på WordPress blog oprettelse.
Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk.
...
