Slik legger du inn et bilde i et produktmock-up i Adobe Photoshop

Hva du skal skape

I denne Quick Tip, viser jeg deg hvordan du bruker Adobe Photoshop til å legge til ditt eget tilpassede bilde til et produktmockup kjøpt fra Envato Market. 

Envato Market er en utmerket ressurs for lagerfotografier, grafiske maler og produktmock-ups. Disse ressursene er en fin måte å produsere høykvalitets markedsføringsbilder på svært kort tid. 

1. Velg et produkt

En av fordelene med å bruke en kjøpt mal er at skaperne vanligvis gir en veldig ren, organisert fil som gjør det enkelt å sette inn eget bilde. For eksempel, hvis du markedsfører en ny app som bruker enhetens kamera og GPS for å gi veibeskrivelser, hvilken bedre måte å markedsføre appen på enn ved å vise at den brukes på en enhet?

Trinn 1

Det er mange produktmockups tilgjengelig på markedet. Den jeg valgte å bruke, inkluderer en hånd som holder enheten.

Steg 2

Last ned den zippede mappen og hent de separate filene fra pakken. Åpne filen som heter Hand1_Transparent.psd i Photoshop. Legg merke til at filen har flere lag, og dette tar lett opp til prosessen med å oppdatere filen for å inkludere dine egne tilpassede bilder.

2. Erstatt bakgrunnen

Trinn 1

I vår hypotetiske annonse skal appen vise hva kameraets kamera ser. Bakgrunnsbildet er innenfor Smart objekt lag merket REDIGER BAKGRUND. Dobbeltklikk på miniatyrbildet for å åpne innholdet i eget dokument.

Filen åpnes, den kalles Layer1.psb. Legg merke til at det bare har et enkelt lag, det aktuelle bakgrunnsbildet.

Steg 2

Gå til Fil> Plassert og velg et nytt bilde som bakgrunn for annonsen. Jeg har valgt en gatevisning fra mine egne bilder.

Trinn 3

Gå til Fil> Lagre og lukk filen deretter. Innholdet i bakgrunnen i den opprinnelige filoppdateringen for å gjenspeile den nye bakgrunnen. Legg merke til at filen automatisk legger til uskarphet og fargeringseffekt til den nye bakgrunnen også.

3. Bytt appgrensesnittet

Trinn 1

Grensesnittet er oppdatert med samme metode. Dobbeltklikk på REDIGER OBJEKT lag miniatyrbilde for å åpne det Smart objekt.

Steg 2

Den filen, kalt Camera.psb, inneholder to lag. Det er et skjult lag for en hvit versjon av enheten, og den nåværende synlige svarte versjonen. Begge disse er også Smarte objekter. Så de er smarte gjenstander innenfor smarte gjenstander - det er som Smart-objekt-ception!  Dobbeltklikk på miniatyrbildet for den mørkere fargede enheten for å grave et annet nivå dypere og åpne den filen.

Trinn 3

Den filen, kalt Camera1.psb, inneholder de forskjellige lagene som brukes til å illustrere enheten og en annen Smart objekt oppkalt SKIFT INNHOLD for skjermen. Dobbeltklikk på det miniatyrbildet for å åpne den filen.

Trinn 4

Denne nye filen, kalt Screen11.psb, inneholder selve skjermbildet. Sett inn det nye appgrensesnittbildet med Fil> Plassert.

Trinn 5

Lagre og lukk hver av de åpne smarte objektfilene. Det skal være tre av dem: Screen11.psb, Camera1.psb, og Camera.psb. Den opprinnelige filen er nå oppdatert med det nye grensesnittet som er sømløst integrert i bildet.

Det er det!

Det er så enkelt! Bare å oppdatere de smarte objektene i malen, skaper lett et tilpasset markedsføringsbilde. Husk at filen fortsatt er redigerbar, så du kan når som helst bytte ut innholdet til de smarte objektene for å oppdatere bildet med nye bakgrunner og nye appgrensesnitt.

Telefonmockup på Placeit

Placeit er en enkel og enkel å bruke online mockup generator med over 11 000 smarte maler å velge fra. Ingen Photoshop-ferdigheter trengs fordi alt du trenger å gjøre er på onlineverktøyet. Det blir ikke noe raskere enn dette. 

Man spiller spill i en iPhone X mens du tar en kaffeMockup av en svart mann som holder en hvit iPhone med begge hender