Hvordan lage iphone mockup i photoshop

Hvordan lage en iPhone-mockup i Photoshop

Mockups er en perfekt måte å vise frem dine nettsider, design eller apper på. Her skal vi vise deg hvordan du lager en iPhone mockup i 7 enkle steg.

En mockup kan også kalles en slags prototype. Her kan du vise frem din logo, nettside, app, eller hva som helst annet du har designet. I en iPhone mockup kan du presentere designet ditt i formatet det blir på touchtelefon. Det eneste du trenger er et bilde med en iPhone i, og Photoshop (du kan selvfølgelig bruke bilde av f.eks. en Samsung-telefon hvis det er det du har selv).

Har du ikke et passende bilde, bør du ta en titt her: 6 gode nettsider med gratis bilder.  

iPhone mockup i 7 enkle steg

1. Først finner du frem bildet du vil bruke, og åpner det i Photoshop. Vi har brukt dette bildet fra Pixabay.

iphonemockup steg1

2. Deretter finner du riktig størrelse på skjermen. Et raskt Google-søk sier oss at iPhone 6 sin skjerm er 750 x 1334 bildepunkter (pixler).

3. Gå tilbake i Photshop og velg Retangelverktøy (snarvei “U”). Klikk et sted i bildet, og skriv inn målene for skjermen. Da får du opprettet et rektangel i riktig format. Bruk gjerne en farge som skiller seg ut fra bildet, og flytt det til et av hjørnene på skjermen.

iphonemockup steg3 0

iphonemockup steg3 1    iphonemockup steg3 2

4. Deretter høyreklikker du på navnet til formen, og velger “Konverter til smart objekt”. Det er viktig at du gjør dette før du begynner på neste punkt.

iphonemockup steg4

5. Velg Rediger > Transformer > Forvregning. Dra hjørnepunktene så de matcher hjørnene på skjermen. Zoom gjerne godt inn så det blir nøyaktig.

iphonemockup steg5 2

Slik vil det da se ut:

iphonemockup steg5 3

6. Dobbeltklikk på ikonet for rektangelet i lagpanelet. Rektangelet vil åpne seg som en egen fil. Her plasserer du en screenshot, bilde, grafisk element etc. Lagre bildet (snarvei “⌘+S” på Mac, eller “Ctrl+S” på PC).

iphonemockup steg6 1

iphonemockup steg6 2

7. Deretter kan du gå tilbake til bildet. Nå vil skjermen være erstattet med det du har valgt! Du har laget en iPhone mockup. Du kan enkelt bytte ut bildet i rektangelet, lagre, og så vil det bytte seg ut i bildet også.

iphonemockup steg7

Ferdig iPhone mockup.

Håper denne veiledningen var nyttig. For å lage mockups av en laptop er det bare å følge de samme instruksene.

Lykke til!