Springe zum Hauptinhalt

So erstellen Sie „Retina“-Bilder für einen WordPress-Blog

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Sie haben viel Zeit in die Einrichtung des Designs Ihres Blogs investiert, aber warum werden die Bilder auf dem Smartphone nicht richtig angezeigt? Sie haben sichergestellt, dass Bilder in hoher Qualität verwendet werden, aber ein schlechter Bildzustand korrigiert die Anzeige nicht.

Viele Menschen erkennen nicht, dass neue Geräte (vor allem die von Apple) Verwenden Sie eine fortschrittliche Anzeigetechnologie, die sich auf die Art und Weise auswirkt, wie Bilder angezeigt werden, um sicherzustellen, dass sie sowohl auf Computern als auch auf Smartphones korrekt angezeigt werden.

In diesem Tutorial werden wir versuchen, den Begriff „Netzhaut bereit„Und zeigen Ihnen, wie Sie ein Retina-Bild erstellen.

Aber bevor Sie anfangen, nehmen Sie sich die Zeit, um einen Blick darauf zu werfen Wie man ein Wordpress-Theme zu installierenWie viele Plugins sollte ich installieren auf Wordpress.

Dann machen wir uns an die Arbeit.

Erläuterung der Bilder Retina Bereit

Die Qualität der Gerätebildschirme hat sich in den letzten Jahren weiter verbessert, und insbesondere die Bildschirme von Apple haben viel Arbeit geleistet, um äußerst klar und sichtbar zu sein. Technologie "Retina DisplayWird ein Markenname von Apple verwendet, um einen bestimmten Bildschirmtyp mit bestimmten Fähigkeiten zu beschreiben.

Retina-Screens zielen darauf ab Zeigen Sie Text und Bilder so klar wie möglich an, ohne dass mit bloßem Auge Pixel sichtbar sind. Die Herausforderung für Designer besteht darin, dass die Anzeige abhängig von der Bildschirmgröße des Geräts und der Nähe eines Benutzers zum Bildschirm variiert.

Durch Teilen der physischen Breite des Bildschirms durch die Anzahl der horizontal angezeigten Pixel erhalten wir die Pixel pro Zoll (ppi, auch ppp für Punkte pro Zoll genannt). " hohe DPI Wird verwendet, um sich auf jedes Gerät zu beziehen, das mehr als 200 Pixel pro Zoll hat. Dies schließt alle Anzeigegeräte ein " Retina (Von Apple) und einige Geräte anderer Hersteller.

So erstellen Sie „Retina Ready“-Bilder mit Photoshop

Wenn Sie mit Bildern mit doppelter oder vierfacher Auflösung arbeiten, müssen Sie in der Lage sein, zu zoomen, um alle kleinen Details zu sehen. Extrem schwere Dateien verursachen jedoch ein Leistungsproblem und eine Herausforderung beim Speichern von Dateien.

Die Lösung für die meisten Designer bestand darin, entweder mehrere Ebenen zu erstellen und diese zu gruppieren und sie nach Bedarf zu aktivieren. mit der Funktion "comps » Photoshop entweder um mit der ursprünglichen Auflösung zu arbeiten und die benötigten Formate zu exportieren (eine Aktion wie "retinize" verwenden).

Die Herausforderung bei diesen beiden Methoden besteht darin, dass Sie nicht mehrere Bilder gleichzeitig sehen können. Wenn Sie die Unterschiede in den Bildern in den erforderlichen Größen sehen möchten, müssen Sie zwischen ihnen wechseln oder sie exportieren.

Zum Glück für uns Photoshop-Enthusiasten hat Adobe eine Funktion hinzugefügt, die das Erstellen mehrerer Bilder erleichtert. Jetzt können Sie mithilfe der charakteristischen Zeichenfläche mehrere Leinwände nebeneinander erstellen und mithilfe des Generators mehrere Bildgrößen erstellen. Mal sehen, wie es funktioniert.

1 - Erstellen Sie Ihre erste Zeichenfläche

Das neue Zeichenflächen-Werkzeug, eingeführt in Photoshop CC 2015ist hinter dem Bewegungswerkzeug versteckt. Sie können auf das Werkzeug im Menü klicken oder mit Umschalt + V zwischen " Verschiebung "Und" artboard »:

Artboard-Tool1 Photoshop-Tutorial-Wordpress-create-Bild der Netzhaut bereitKlicken und ziehen Sie einen Bereich, um eine Arbeitsebene zu erstellen. Die neue Zeichenfläche wird im Ebenenbedienfeld mit dem Standardnamen "Zeichenfläche 1" angezeigt.

Lesen Sie auch: Warum Freiberufler einen Tagesplan brauchen

2 - Konfigurieren Sie Ihre Zeichenfläche

Sie können der Zeichenfläche die Ebenen hinzufügen, die Sie benötigen, und diese werden als Ebenen verschachtelt (So können Sie eine geeignete Ebenenstruktur erstellen). Wir empfehlen, Ihre verschiedenen Dateien, z. B. Formen, so hinzuzufügen, dass sie wie gewünscht positioniert sind, bevor Sie mit dem nächsten Schritt fortfahren.

3 - Duplizieren Sie Ihre Zeichenfläche

Sobald Ihre erste Zeichenfläche so eingerichtet ist, dass sie Ihren Anforderungen entspricht, können Sie sie über das Kontextmenü duplizieren. Klicken Sie im Ebenenbereich mit der rechten Maustaste auf "Zeichenfläche 1" und wählen Sie "Zeichenfläche duplizieren". Dadurch entsteht eine weitere ähnliche „Zeichenfläche“, die mit all ihren Komponenten dieselbe Struktur enthält:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

photoshop Vervielfältigung artboard

Um auch zu entdecken: Wie ein Artikel oder eine Seite auf Wordpress duplizieren

4 - Platzieren Sie Ihre Arbeitsplatten (Zeichenfläche)

Der große Vorteil der Verwendung von Zeichenflächen besteht darin, dass Sie alle Ihre Bilder gleichzeitig sehen können. Positionieren Sie dazu einfach Ihre Arbeitsplatten entsprechend Ihren Anforderungen. Es gibt verschiedene Möglichkeiten, dies zu tun:

Verwenden Sie das Bedienfeld, das angezeigt wird, wenn eine Arbeitsebene ausgewählt ist, um die X- und Y-Koordinaten in der oberen linken Ecke der Arbeitsebene einzugeben.

Ziehen Sie die ausgewählte Zeichenfläche an eine beliebige Position in der Photoshop. Die Zeichenfläche wurde intelligent aktiviert, sodass Sie mehrere Zeichenflächen automatisch so ausrichten können, dass ihre Positionen mit dem vorherigen Abstand übereinstimmen.

Verwenden Sie die Pfeiltasten auf der Tastatur, um eine ausgewählte Arbeitsebene zu verschieben.

Siehe auch unser Tutorial zu: Wie behebt man die Medienbibliothek, die nicht mehr auf WordPress funktioniert

5 - Ändern Sie die Größe Ihrer Zeichenflächen (falls erforderlich)

Wenn Sie die Größe Ihrer Zeichenflächen anpassen müssen, haben Sie erneut mehrere Optionen:

  • Ändern Sie die Größe mithilfe der Ziehpunkte, die angezeigt werden, wenn Sie eine Zeichenfläche auswählen.
  • Verwenden Sie das Optionsfeld direkt unter dem Menü "Datei", um voreingestellte Größen, feste Breiten oder Höhen auszuwählen oder zwischen Hoch- und Querformat umzuschalten.
  • Verwenden Sie das Fenster "Eigenschaften", das angezeigt wird, wenn eine Arbeitsplatte ausgewählt wird, um die Größe zu ändern und auf vordefinierte Größen zuzugreifen.

Eigentum des Photohop-Arbeitsbereichs

6 - Erstellen Sie Ihre Kunst

Sie können jetzt mit Ihren Arbeitsplatten arbeiten, Komponenten austauschen und nach Bedarf Änderungen vornehmen. Angenommen, Ihr ursprüngliches Setup bleibt unverändert, haben Sie jetzt pixelgenaue Bilder mit allen Komponenten am richtigen Ort.

Siehe auch unsere Liste von 26 Wordpress-Themes mit System per Drag & Drop Ihre Seiten zu erstellen

7 - Richten Sie das Werkzeug "Generieren" ein

« Generieren »Ermöglicht das Exportieren von Zeichenflächen, Ebenen oder Gruppen mithilfe einer speziellen Benennungssyntax. Dies ist eine Verknüpfung zum Speichern für das Web. Um sicherzustellen, dass " Generieren Ist für deine PSD aktiviert, gehe zu " Datei> Generieren> Bild-Assets "(Datei> Generieren> Bild Märkte):

Werkzeug erzeugt PhotoshopWerkzeug erzeugt Photoshop

8 - Benennen Sie Ihre Zeichenflächen um

Generieren « Versand Für Bildkomponenten speichern Sie arbeiten basierend auf den Optionen, die im Ebenensatz oder in Ihrer Zeichenfläche festgelegt wurden. Sie können einige Optionen festlegen:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Das Dateiformat. Fügen Sie eine Erweiterung hinzu (.jpg, gif oder png ), um die betreffende Datei zu speichern, zum Beispiel: header-main.png Die Bildkomponenten werden im selben Ordner wie die PSD-Datei gespeichert, jedoch mit "-assets" als Suffix.
  • Dateikomprimierung.  Nach der Erweiterung können Sie eine Zahl hinzufügen, die den verwendeten Komprimierungsgrad angibt. Zum " opt.jpg »Sie können Prozentsätze verwenden und für PNG die entsprechenden Bits: 8, 24 oder 32.
  • Waage verlassen. Sie können die Ausgabeskala festlegen, indem Sie entweder Prozent oder Pixel hinzufügen (die Breite zu Höhe) vor dem Bildnamen (Zum Beispiel 100% header-main.png8 ).
  • mehr Bilder. Sie können mehrere Bilder derselben Zeichenfläche exportieren (artboard) Verwenden eines Kommas oder Pluszeichens, um Bildnamen zu trennen. Jedes Bild kann somit seine eigenen Optionen haben, solange jeder Name des Bildes eindeutig ist.

Durch die Kombination dieser Optionen können Sie ständig komplexe Bildkomponenten für Ihre Zeichenflächen erstellen:

Verwaltung von Bildkomponenten

Wenn für alle Ihre Arbeitsplatten Standardabbilder erforderlich sind, wird die " Generieren Ermöglicht das Erstellen eines Parameters, der standardmäßig auf jeden angewendet wird. Um diesen Parameter zu erstellen, fügen Sie am oberen Rand Ihres Dokuments eine leere Ebene mit den folgenden Optionen hinzu:

  • Standardschlüsselwort: Der Name muss damit beginnen, um das Werkzeug zu verlassen " Generieren »Die Freiheit, es als Standard zu verwenden.
  • Waage verlassen: Ermöglicht das Einstellen der Ausgabeskala mit einem Prozentsatz oder Pixeln (die Breite zu Höhe).
  • Ordner / Suffix: Definieren Sie den Namen des Ordners, in dem die Bilder gespeichert werden sollenund ein Suffix zum Hinzufügen zu den Namen der Dateien.

Zusammenfassung

Das ist alles, was Sie dort haben, versuchen Sie es Vergrößern Sie das Bild um zu sehen, wie sich letzteres verhält. Bei Bedarf können Sie das Bild in Ihrem WordPress-Blog testen, indem Sie es in Ihre Medienbibliothek hochladen.

Fühlen Sie sich frei, uns bei Bedarf Fragen zu stellen.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. WP ultimative soziale

Dies ist ein ultimatives Paket aller Funktionen für soziale Netzwerke, die Sie möglicherweise in Ihrem WordPress-Blog benötigen.wp-ultimate-soziale

Lesen Sie auch unsere 8 Wordpress-Plugins ein Reduktionssystem zu integrieren

Seine Hauptmerkmale sind: mehrere Symbole für soziale Netzwerke, Social Sharing, das es jedem erlaubt Teilen Sie den Inhalt Ihrer Website (Artikel, Seiten, Bilder, Medien) in beliebten sozialen Netzwerken (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Puffer, reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), Verbindung zur Website mit Ihren Social-Media-Anmeldeinformationen, ein Zähler zur Anzeige der Nummern Ihrer Follower und Freigaben Ihrer Website und anderer.

Download | Demo | Web-Hosting

2. WP Slick Slider Bild Karussell Pro

Wenn Sie ein begeisterter Anhänger der Visual Composer-Suite sind, sollten Sie das WP Slick Slider-Plugin in Betracht ziehen. Mit fast 100 vordefinierten Vorlagen werden Sie definitiv das finden, wonach Sie suchen, ohne etwas zu codieren.

Wp Slick Slider und Image Carousel Pro

Dies ist eine Option, die besonders für Benutzer von sehr ernst zu nehmen ist Visual Composer. Zu seinen Funktionen gehören unter anderem: ein vollständig ansprechendes Layout mit Drag & Drop-Unterstützung, a Kurzwahlnummern, RTL und mehrsprachige Unterstützung, ein schönes Design und vieles mehr

Download | Demo | Web-Hosting

3. WordPress soziale Seitenleiste

Der Name dieses WordPress-Plugins sollte Ihnen ungefähr sagen, wofür es ist. Es sieht jedoch so aus, als würde Ihnen das WordPress Social Sidebar-Plugin dabei helfen, eine Seitenleiste auf Ihrer Website zu erstellen, um Ihnen dabei zu helfen Teilen Sie Ihre Inhalte schnell in verschiedenen sozialen Netzwerken.

Wordpress soziale Seitenleiste

Zu den Funktionen gehören unter anderem: automatische Integration in Ihr WordPress-Theme, die Möglichkeit, es von oben nach unten zu konfigurieren, Kompatibilität mit mehreren neueren und modernen Browsern, die Möglichkeit, Ihre Seitenleisten von links nach rechts zu platzierenÜber oder am Ende Ihrer Seiten werden 4 Farbsets angeboten, ein ansprechendes Layout und vieles mehr.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Download Demo | Web-Hosting

Andere empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ist ! Das war's für dieses Tutorial. Ich hoffe, es ermöglicht Ihnen, "Retina" -Bilder für Ihren WordPress-Blog zu erstellen. 

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
10 Aktien
Aktie10
tweet
Registrieren