U heeft veel tijd geïnvesteerd in het opzetten van uw blog, maar waarom worden de afbeeldingen niet correct weergegeven op de smartphone? U hebt ervoor gezorgd dat u afbeeldingen van hoge kwaliteit gebruikt, maar een slechte beeldconditie corrigeert de weergave niet.
Veel mensen realiseren zich niet dat nieuwe apparaten (vooral die van Apple) gebruik een geavanceerde weergavetechnologie die van invloed is op de manier waarop afbeeldingen worden weergegeven, om ervoor te zorgen dat ze zowel correct worden weergegeven op computers als op smartphones.
In deze zelfstudie proberen we een beetje het begrip ' retina klaar En laat zien hoe u een Retina-afbeelding maakt.
Maar voordat u begint, neem de tijd om een ​​kijkje te nemen Hoe maak je een WordPress thema te installeren, Hoeveel plugins moet ik installeren op WordPress.
Laten we dan aan het werk gaan.
Uitleg van Retina Klaar afbeeldingen
Apparaatschermen zijn de afgelopen jaren in kwaliteit blijven verbeteren en met name de schermen van Apple hebben veel werk verzet om extreem duidelijk en zichtbaar te zijn. Technologie "Retina DisplayIs een merknaam van Apple die wordt gebruikt om een ​​bepaald type beeldscherm met bepaalde vaardigheden te beschrijven.
Retinaschermen zijn gericht op geef tekst en afbeeldingen zo duidelijk mogelijk weer, zonder pixels die met het blote oog zichtbaar zijn. De uitdaging voor ontwerpers is dat de weergave varieert afhankelijk van de schermgrootte van het apparaat en de nabijheid van een gebruiker tot het scherm.
Door de fysieke breedte van het scherm te delen door het aantal pixels dat horizontaal wordt weergegeven, hebben we de pixels per inch (ppi, ook wel ppp genoemd voor dots per inch). " Hoge DPI Wordt gebruikt om te verwijzen naar elk apparaat met meer dan 200 pixels per inch. Dit omvat alle weergaveapparaten " netvlies (Van Apple) en sommige apparaten van andere fabrikanten.
Hoe u "Retina Ready" -afbeeldingen maakt met Photoshop
Werken met afbeeldingen met dubbele of viervoudige resolutie betekent dat u moet kunnen inzoomen om alle kleine details te zien, echter extreem zware bestanden veroorzaken een prestatieprobleem en een uitdaging voor het opslaan van bestanden.
De oplossing voor de meeste ontwerpers is geweest om ofwel meerdere lagen te creëren en ze samen te groeperen, en ze zo nodig te activeren. met behulp van de functie "comps » Photoshop ofwel om met de originele resolutie te werken en de formaten te exporteren die ze nodig hebben (een actie gebruiken als "retinize").
De uitdaging met deze twee methoden is dat u niet meerdere afbeeldingen tegelijkertijd kunt zien. Als u de verschillen in de afbeeldingen op de benodigde formaten wilt zien, moet u tussen deze schakelen of ze exporteren.
Gelukkig voor ons, Photoshop-enthousiastelingen, heeft Adobe een functie toegevoegd die het maken van meerdere afbeeldingen eenvoudiger maakt. U kunt nu meerdere doeken naast elkaar maken met behulp van het karakteristieke tekengebied en meerdere afbeeldingsformaten maken met behulp van de generator. Laten we eens kijken hoe het werkt.
1 - Maak je eerste tekengebied
Het nieuwe Artboard tool, geïntroduceerd in Photoshop CC 2015, is verborgen achter het verplaatsingsgereedschap. U kunt op de tool in het menu klikken of Shift + V gebruiken om te schakelen tussen " verplaatsing "En" artboard '
Om een ​​werkvlak te maken, klikt en sleept u een gebied. Het nieuwe tekengebied wordt weergegeven in het lagenpaneel met de standaardnaam "Tekengebied 1".
Lees ook: Waarom freelancers een dagelijks schema nodig hebben
2 - Configureer uw tekengebied
U kunt lagen die u nodig heeft aan uw tekengebied toevoegen en ze worden genest zoals lagen zijn (zodat u een geschikte laagstructuur kunt maken). We raden u aan om uw verschillende bestanden, zoals vormen, toe te voegen, zodat ze worden gepositioneerd zoals u ze wilt, voordat u doorgaat met de volgende stap.
3 - Dupliceer uw tekengebied
Zodra uw eerste tekengebied is ingesteld om aan uw behoeften te voldoen, kunt u het dupliceren met behulp van het contextmenu. Klik met de rechtermuisknop op "Artboard 1" in het lagengebied en selecteer "Duplicate Artboard". Dit creëert een ander soortgelijk "Artboard", met dezelfde structuur met al zijn componenten:
Om ook te ontdekken: Hoe een artikel of een pagina op WordPress dupliceren
4 - Plaats uw werkbladen (tekengebied)
Het grote voordeel van het gebruik van tekengebieden is dat u al uw afbeeldingen tegelijkertijd kunt zien. Om dit te doen, plaatst u eenvoudig uw werkbladen volgens uw behoeften. U kunt dit op verschillende manieren doen:
Gebruik het paneel dat verschijnt wanneer een werkvlak is geselecteerd om de X- en Y-coördinaten in de linkerbovenhoek van het werkvlak in te voeren.
Sleep het geselecteerde tekengebied naar een willekeurige positie in de Photoshop. Het tekengebied wordt intelligent geactiveerd, zodat u automatisch meerdere tekengebieden kunt uitlijnen, zodat hun posities in de vorige afstand worden vergrendeld.
Gebruik de pijltoetsen op het toetsenbord om een ​​geselecteerd werkvlak te verplaatsen.
Zie ook onze tutorial over: Hoe de mediabibliotheek die niet langer werkt op WordPress te repareren
5 - Pas het formaat van uw tekengebieden aan (indien nodig)
Als je de grootte van je tekengebieden moet aanpassen, heb je weer verschillende opties:
- Pas het formaat aan met de handvatten die verschijnen wanneer u een tekengebied selecteert.
- Gebruik het optiepaneel net onder het menu "Bestand" om vooraf ingestelde formaten, vaste breedtes of hoogtes te kiezen, of schakel tussen staand en liggend.
- Gebruik het paneel "Eigenschappen" dat verschijnt wanneer een werkblad is geselecteerd om de grootte te wijzigen en toegang te krijgen tot vooraf gedefinieerde formaten.
6 - Maak je kunst
U kunt nu met uw werkbladen werken, componenten vervangen en indien nodig wijzigingen aanbrengen. Ervan uitgaande dat uw oorspronkelijke opstelling ongewijzigd is, heeft u nu pixel-perfecte afbeeldingen met alle componenten op de juiste plaats.
Zie ook onze lijst met 26 WordPress thema's met drag-and-drop-systeem om uw pagina's te maken
7 - Stel de tool "Genereren" in
« Genereer »Hiermee kunt u tekengebieden, lagen of groepen exporteren met behulp van een speciale naamgevingssyntaxis. Dit is een snelkoppeling om op te slaan voor internet. Verzekeren dat " Genereer Is ingeschakeld voor uw PSD, ga naar ' Bestand> Genereren> Afbeeldingsassets "(Bestand> Genereren> Afbeelding Activa):
8 - Hernoem uw tekengebieden
Genereer « Kunst Voor beeldcomponenten opslaan waar je aan werkt op basis van de opties die zijn ingesteld in de laagset of in je tekengebied. Er zijn een paar opties die u kunt instellen:
- Het formaat van het bestand. Voeg een extensie toe (.jpg, .gif of .png ) om het betreffende bestand op te slaan, bijvoorbeeld: header-main.png De afbeeldingscomponenten worden opgeslagen in dezelfde map als het PSD-bestand, maar met "-assets" als achtervoegsel.
- Bestandscompressie. Na de extensie kunt u een nummer toevoegen dat het gebruikte compressieniveau aangeeft. Voor " opt.jpg »U kunt percentages gebruiken, en voor png de respectievelijke bits: 8, 24 of 32.
- Schaal verlaten. U kunt de uitvoerschaal instellen door een percentage of pixels (de breedte over de hoogte) vóór de afbeeldingsnaam (bijvoorbeeld 100% header-main.png8 ).
- Verschillende afbeeldingen. U kunt meerdere afbeeldingen van hetzelfde tekengebied exporteren (artboard) met een komma of plusteken om de namen van afbeeldingen te scheiden. Elke afbeelding kan dus zijn eigen opties hebben, zolang elke naam van de afbeelding uniek is.
Door de combinatie van deze opties kunt u voortdurend complexe afbeeldingscomponenten voor uw tekengebieden maken:
Als er standaardafbeeldingen nodig zijn voor al uw werkbladen, is de " Genereer Hiermee kunt u een parameter maken die standaard op elke parameter moet worden toegepast. Om deze parameter te maken, voegt u een lege laag toe bovenaan uw document met de volgende opties:
- Standaard trefwoord: De naam moet hiermee beginnen om de tool te verlaten " Genereer »De vrijheid om het als standaard te gebruiken.
- Schaal verlaten: Hiermee kunt u de uitvoerschaal instellen met een percentage of pixels (de breedte over de hoogte).
- Folder / suffix: Definieer de naam van de map waarin de afbeeldingen moeten worden opgeslagen, en een achtervoegsel om toe te voegen aan de namen van de bestanden.
Managementsamenvatting
Dat is alles wat je daar hebt, probeer het zoom in op de afbeelding om te zien hoe de laatste zich gedraagt. Indien nodig kunt u de afbeelding op uw WordPress-blog testen door deze naar uw mediabibliotheek te uploaden.
Stel ons gerust vragen als dat nodig is.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. WP Ultimate Social
Dit is een ultiem pakket met alle sociale netwerkfuncties die u mogelijk nodig heeft op uw WordPress-blog.
Lees ook onze 8 WordPress plugins om een ​​reductie systeem te integreren
De belangrijkste kenmerken zijn: meerdere sociale netwerkpictogrammen, sociaal delen waarmee iedereen dat kan deel de inhoud van uw website (artikelen, pagina's, afbeeldingen, media) op populaire sociale netwerken (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, DiggBuffer, RedditTumblr, Stumbleupon, Xing, Weibo, VK, Delicious), verbinding met de website met uw inloggegevens voor sociale media, een teller voor het weergeven van het aantal volgers en aandelen van uw website en anderen.
Downloaden | demonstratie | web hosting
2. WP Slick Slider Image Carousel Pro
Als u een fervent volger bent van de Visual Composer-suite, is het gebruik van de WP Slick Slider-plug-in een optie die u moet overwegen. Met bijna vooraf gedefinieerde 100-sjablonen vindt u zeker wat u zoekt zonder iets te coderen.
Dit is een optie om echt serieus te nemen, vooral voor gebruikers van Visual Composer. De functies zijn onder andere: een volledig responsieve lay-out met ondersteuning voor slepen en neerzetten, een shortcodes, RTL en meertalige ondersteuning, een mooi ontwerp en nog veel meer
Downloaden | demonstratie | web hosting
3. WordPress Social Sidebar
De naam hiervan WordPress Plugin zou u ongeveer moeten vertellen waar de laatste voor is. Maar we zullen zeggen dat de WordPress Plugin Social Sidebar helpt u bij het maken van een zijbalk op uw website met als doel u daarbij te helpen deel uw inhoud snel op verschillende sociale netwerken.
De functionaliteiten omvatten: automatische integratie met uw WordPress theme, de mogelijkheid om het van boven naar beneden te configureren, compatibiliteit met verschillende recente en moderne browsers, de mogelijkheid om uw zijbalken van links naar rechts te plaatsen, boven of onderaan uw pagina's, worden 4 kleurensets native aangeboden, een responsieve lay-out en nog veel meer.
Downloaden | demonstratie | web hosting
Andere aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- 7 WordPress plugins om ontwerpen voor uw producten te maken
- 4 WordPress plug-ins om op DropBox te besparen
- Hoe oneindig scrollen toe te voegen aan een WordPress-blog
- 10 WordPress plug-ins om donaties te ontvangen op uw blog
Conclusie
Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat je hiermee "Retina" -afbeeldingen voor je WordPress-blog kunt maken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig heeft om uw projecten voor het maken van internetsites uit te voeren, raadpleeg dan onze gids op Creatie van WordPress blogs.
Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken.
...
