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, einen kleinen Teil des Begriffs " 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 installieren, Wie 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 mit Photoshop "Retina Ready" -Bilder
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 (mit einer Aktion wie "retinize").
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 »:
Klicken 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:
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.
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 Details):
8 - Benennen Sie Ihre Zeichenflächen um
Generieren « Kunst 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:
- 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:
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 verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung 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.
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.
Herunterladen | 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.
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
Herunterladen | Demo | Web-Hosting
3. WordPress soziale Seitenleiste
Der Name dafür WordPress Plugin sollte Ihnen ungefähr sagen, wofür letzteres ist. Aber wir werden sagen, dass die WordPress Plugin Social Sidebar hilft Ihnen, eine Seitenleiste auf Ihrer Website zu erstellen, um Ihnen dabei zu helfen Teilen Sie Ihre Inhalte schnell in verschiedenen sozialen Netzwerken.
Seine Funktionalitäten umfassen: automatische Integration mit Ihrem 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.
Herunterladen | Demo | Web-Hosting
Andere empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- 7 Wordpress-Plugins Designs für Ihre Produkte zu schaffen
- 4 WordPress-Plugins zum Speichern in DropBox
- So fügen Sie einem WordPress-Blog unendliches Scrollen hinzu
- 10 WordPress-Plugins, um Spenden in Ihrem Blog zu erhalten
Zusammenfassung
Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit "Retina" -Bilder für Ihr WordPress-Blog 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.
...
