Vad du bygger
Du skapar en proffsig, frilagd produktbild där bakgrunden är helt borta, samt en realistisk mockup som visar din produkt eller hemsida på en mobilskärm eller datorskärm. Du anpassar allt i rätt mått så att bilderna passar perfekt på din webbplats utan att du behöver använda dyra designprogram.
Innan du börjar
- Ett aktivt Pro-konto på Canva (funktionerna för att ta bort bakgrunder kräver Pro-versionen).
- En eller flera bilder på din produkt, eller en skärmdump på det du vill visa upp.
- Vår maskot Bygge tipsar om att lägga bildfilerna direkt på datorns skrivbord innan du börjar, så går det snabbare att ladda upp dem.
Steg för steg
- Sök efter rätt mall – Skriv "liggande banner" eller "hemsida" i sökrutan på Canvas startsida för att hitta en mall med rätt mått för webben. Klicka på en tom mall för att öppna din arbetsyta.
- Ladda upp dina egna bilder – Klicka på Uppladdningar i den vänstra menyraden och välj den lila knappen Ladda upp filer. Markera dina bilder på datorn och klicka på öppna.
- Dra in bilden på arbetsytan – Klicka på din uppladdade bild i sidomenyn och dra den med muspekaren så att den landar mitt på din tomma arbetsyta.
- Frilägg bilden med ett klick – Markera bilden så att den får en lila ram. Klicka på knappen Redigera foto i den övre vita menyn och välj sedan verktyget Bakgrundsborttagare (ikonen som ser ut som en badboll med ett radergummi). Canva plockar nu bort bakgrunden automatiskt.
- Hitta mockup-verktyget – Klicka på fliken Appar i den vänstra sidomenyn. Sök efter ordet "Mockups" i sökrutan och klicka på appen med samma namn för att öppna den.
- Välj en passande skärm eller produkt – Bläddra bland kategorierna i mockup-appen. Klicka på en bild av en smartphone, en bärbar dator eller en t-shirt för att lägga till den på din arbetsyta.
- Placera din bild i mockupen – Gå tillbaka till fliken Uppladdningar. Klicka på din logotyp eller skärmdump, dra den över den tomma skärmen på din utvalda mockup och släpp. Bilden anpassar sig och lägger sig perfekt i skärmen automatiskt.
Byggloftets tips
- Tänk på marginalerna: Placera inte viktiga detaljer eller text för nära bildens kanter. Hemsidor klipper ofta kanterna lite olika beroende på om besökaren läser på mobil eller dator.
- Spara med transparent bakgrund: När du laddar ner din frilagda produktbild, klicka på Dela, välj Hämta, sätt filtyp till PNG och kryssa i rutan "Transparent bakgrund". Då slipper du en vit fyrkant runt din produkt när du lägger in den på hemsidan.
Vanliga fel
- "Verktyget Bakgrundsborttagare går inte att klicka på": Du måste klicka på din bild på arbetsytan så att den är helt markerad med en lila ram innan knappen blir aktiv. Dubbelkolla också att du är inloggad på ditt Pro-konto.
- "Bilden i min mockup ser suddig ut": Din originalbild har antagligen för låg upplösning. Prova att ta en ny skärmdump eller ladda upp en bild med högre kvalitet innan du drar in den i ramen.
Du är klar när…
Du ser en frilagd bild på din produkt utan störande bakgrund samt en snygg, realistisk bild av en mobil eller dator som visar upp din egen hemsida.
