Wenn Sie nur daran denken, dass Ihre Website so schön sein soll wie die einzigartigen Photoshop-Designs, haben Sie vielleicht immer Angst vor der komplexen Codierung, um die Website zu erstellen. Hier kommt Shopify mit seinen einfachen Tools ins Spiel, mit denen Sie eine großartig aussehende Website mit einem möglichst einfachen Verfahren erstellen können. Shopify ist eine vertrauenswürdige Lösung mit mehreren renommierten Kunden wie Github, GE, Britannica, etc. Werfen wir nun einen Blick auf die Schritte zur Konvertierung der Photoshop-Entwürfe, auch bekannt als PSD, in eine voll funktionsfähige Shopify-Website.
Erforderliche Dinge zum Starten des PSD zu Shopify Konvertierungsprozesses
Obwohl es mit Shopify am einfachsten ist, eine voll funktionsfähige Website aus einem PSD-Entwurf zu entwickeln, benötigen Sie dafür einige grundlegende Dinge.
- Einige Kenntnisse in HTML und CSS
- Das Photoshop-Design Ihrer Seite, Photoshop-Kenntnisse und eine erste Arbeitskopie dieses Programms.
- Ein Shopify-Konto und einige Kenntnisse über die Anpassung der Einstellungen.
Schritte für die Konvertierung von PSD in Shopify
Nachdem Sie Ihr Shopify-Konto eröffnet haben, können Sie die folgenden Schritte ausführen, um Ihre Reise zu beginnen.
Schritt 1. Einen Entwicklungsspeicher einrichten
Klicken Sie auf der Registerkarte "Entwicklungsshops" in Ihrem Dashboard auf die Schaltfläche "Einen Entwicklungsshop erstellen".
Schritt 2. Öffnen Sie Ihr PSD-Dokument Design in PhotoShop und verwenden Sie das Slice-Tool.
Nachdem Sie Ihren Entwicklungsshop erstellt haben, verwenden Sie das Slice-Tool, um Ihr PSD-Design in kleine Teile zu zerlegen. Planen und kodieren Sie dann die Anpassung kleinerer Abschnitte wie "Kopfzeile", "Fußzeile" und "Seitenleiste". Die Elemente werden durch das Zeichnen von Rechtecken um sie herum getrennt.
Schritt 3. Speichern Sie die Dateien als Bilder (JPEG, JPG.)
Um die Dateien dann als Bilder mit der höchsten Auflösung und nicht als pixelige und unscharfe Bilder zu speichern, wählen Sie Datei, Für Web speichern und wählen Sie die höchste Auflösung.
Schritt 4. Speichern Sie Ihre PSD-Datei als HTML-Datei.
Speichern Sie nun die fertige Version Ihrer PSD-Datei als .html-Datei im selben Photoshop-Programm.
Erfahren Sie auch, wie man konvertiert: Figma zu WordPress
Schritt 5. Laden Sie Ihre Dateien hoch und fügen Sie sie in das anpassbare CSS von Shopify ein.
Nachdem Sie eine neue HTML- und Bilddatei in Ihre Dienste hochgeladen haben, können Sie die Vorlage Ihrer Seite bearbeiten und sogar die entsprechenden Bilder durch die Vorlage der Seite ersetzen. Jetzt haben Sie den Prozess der Konvertierung von PSD in Shopify erfolgreich abgeschlossen.
Schritt 6. Finden und installieren Sie das Thema.
Gehen Sie auf dem Dashboard Ihres Entwicklungsshops zu "Online Store Themes" und klicken Sie auf "Visit Theme Store", um ein passendes Theme zu finden, das dem Design Ihrer geschnittenen PSD-Datei bereits sehr nahe kommt.
Schritt 7. Shopify-Theme an Ihr PSD anpassen
Nachdem Sie Ihr Lieblingsthema installiert haben, gehen Sie zum Themenmanager und klicken Sie auf die Schaltfläche "Thema anpassen". Dann öffnet sich der Themen-Editor. Sie werden diese Themendateien bearbeiten und die Bilder mit Ihren relevanten geschnittenen Fotos wiederherstellen. So wird Ihr Shopify-Theme so aussehen, wie Sie es wünschen. Bei den Dateien in den obigen Screenshots handelt es sich um HTML-Dateien mit eingebettetem Code, die mit einer ".liquid"-Erweiterung benannt sind.
Schritt 8. Persönliche Merkmale hinzufügen
Nachdem Sie Ihre Photoshop-Designdatei erfolgreich konvertiert haben, klicken Sie auf das Symbol "Apps" in Ihrem Dashboard "Entwicklungsshop" und wählen Sie einige Apps aus, um die Funktionalität Ihres Shops zu erweitern.
Nachdem Sie Ihre Entwicklungsarbeit abgeschlossen haben, folgen Sie einem der folgenden Wege, um Ihr neu in Shopify konvertiertes PSD-Theme zum Laufen zu bringen.
- Exportieren Sie das entwickelte Thema aus dem Entwicklungsspeicher und importieren Sie es als primäres Thema in den Live Shopify Store.
- Sie können Ihren Entwicklungsshop auf eines der kostenpflichtigen Shopify-Angebote umstellen.
Wenn Sie diese einfachen Schritte befolgen, kann jeder, der weniger Kenntnisse in HTML und CSS hat, seine großartig aussehende PSD-Datei in eine Live-Website für eine bessere Zukunft verwandeln.
Nehmen Sie professionelle Hilfe in Anspruch!
Möchten Sie Ihre PSD-Dateien in Shopify-Vorlagen umwandeln, kennen aber den Umwandlungsprozess nicht? Seahawk Media kann Ihre Designs in vollständig optimierte, pixelgenaue Design-Integration für die Shopify-Vorlage umwandeln. Wenn Sie Fragen zur Konvertierung von PSD in Shopify haben, nehmen Sie professionelle Hilfe von unseren Shopify-Experten in Anspruch. Unser Shopify-Expertenteam ist immer für Sie da!
Wir hoffen, dass Ihnen diese Anleitung zur Konvertierung einer PSD-Datei in ein gut funktionierendes Shopify-Theme gefallen hat.
