Medan du bara tänkt på att din webbplats ska vara lika vacker som de unika Photoshop-designerna, kanske du alltid har varit rädd för den komplicerade kodningen som krävs för att bygga webbplatsen. Det är där Shopify kommer med sina enkla verktyg för att skapa en snygg webbplats på den minst komplexa processen. Shopify är en pålitlig lösning med flera välkända kunder som Github, GE, Britannica, etc. Nu ska vi ta en titt på stegen för att konvertera Photoshop-designer, även kända som PSD, till en fullfunktionell Shopify-webbplats.
Saker som krävs för att starta PSD till Shopify-konverteringsprocessen
Även om Shopify gör det enklast att utveckla en fullt fungerande webbplats från en PSD-design, behöver du några grundläggande saker för det -
- Viss kunskap om HTML och CSS
- Photoshop-designen för din sida, Photoshop-kunskaper och en primär fungerande kopia av det programmet.
- Ett Shopify-konto och viss kunskap om hur man anpassar dess inställningar.
Steg att följa för att konvertera PSD till Shopify
När du har öppnat Shopify-kontot kan du följa stegen nedan för att påbörja din resa:
Steg 1. Konfigurera en utvecklingsbutik
Från fliken ”Utvecklingsbutiker” i din instrumentpanel klickar du på knappen ”Skapa en utvecklingsbutik”.
Steg 2. Öppna din PSD-dokumentdesign i PhotoShop och använd snittverktyget.
När du har skapat din utvecklingsbutik använder du slice-verktyget för att dela upp din PSD-design i små bitar. Planera och koda sedan för att anpassa mindre avsnitt som "sidhuvud", "sidfot" och "sidofält". Processen för att separera element sker genom att rita rektanglar runt dem.
Steg 3.Spara filerna som bilder (JPEG, JPG.)
För att sedan spara filerna som bilder med högsta upplösning och inte som pixelerade och suddiga bilder, välj Arkiv, Spara för webben och välj den högsta upplösningen.
Steg 4. Spara din PSD-fil som en HTML-fil.
Spara nu den färdiga versionen av din PSD-fil som en .html-fil i samma Photoshop-program.
Lär dig också hur du konverterar: Figma till WordPress
Steg 5. Ladda upp och lägg till dina filer i Shopifys anpassningsbara CSS.
När du har laddat upp en ny HTML- och bildfil till dina tjänster kan du redigera sidans mall och till och med ersätta relevanta bilder med sidans mall. Nu har du slutfört processen att konvertera PSD till Shopify.
Steg 6. Hitta och installera temat.
Från instrumentpanelen i din utvecklingsbutik, gå till "Teman för webbutik" och klicka på "Besök temabutik" för att hitta ett lämpligt tema som redan liknar din skivade PSD-fildesign.
Steg 7. Anpassa Shopify-temat så att det matchar din PSD
När du har installerat ditt favorittema går du till Temahanteraren och klickar på knappen "Anpassa tema". Temaredigeraren öppnas. Du kan redigera dessa temafiler och återställa bilderna med dina relevanta utskurna foton. Det kommer att få ditt Shopify- tema att se ut som du vill. Filerna i skärmdumparna ovan är HTML-filer med inbäddad kod, namngivna med filändelsen ".liquid".
Steg 8. Lägg till personliga funktioner
När du har konverterat din Photoshop-designfil klickar du på ikonen "Appar" från instrumentpanelen i "Utvecklingsbutik" och väljer några appar för att förbättra butikens funktionalitet.
När du har slutfört ditt utvecklingsarbete, följ något av följande sätt för att få ditt nyligen PSD-konverterade tema att fungera.
- Exportera det utvecklade temat från utvecklingsbutiken och importera det till Shopify Live Store som det primära temat.
- Du kan byta din utvecklingsbutik till en av Shopifys betalda planer.
Genom att följa dessa enkla steg kan vem som helst med mindre kunskap om HTML och CSS få fram sin snygga PSD till en livewebbplats för en bättre framtid.
Ta professionell hjälp!
Funderar du på att konvertera dina PSD-filer till Shopify-mallar men vet inte hur konverteringsprocessen fungerar? Seahawk Media kan omvandla dina designer till helt optimerade, pixelperfekta designintegrationer för Shopify-mallen. Om du har några frågor om konvertering från PSD till Shopify, ta professionell hjälp från våra Shopify-experter. Vårt Shopify-expertteam finns alltid där för att hjälpa dig!
Hoppas du gillade den här guiden om hur du konverterar en PSD-fil till ett välfungerande Shopify-tema.
